A Day in the Life of freeCodeCamp U.S. Staff (A rare in-person meeting)
By freeCodeCamp.org
Published: Mar 07, 2023“
This web programming course from Harvard University picks up where CS50x leaves off. It dives more deeply into the design and implementation of web apps with Python, JavaScript, and SQL using frameworks like Django, React, and Bootstrap. Topics include database design, scalability, security, and user experience. You will learn how to write and use APIs, create interactive UIs, and leverage cloud services like GitHub and Heroku.
Slides, source code, and more at
https://cs50.harvard.edu/web/2020/Brian Yu teaches this course.
Watch the original CS50x course: https://youtu.be/8mAITcNt710
Course Contents
- (00:00:29) Introduction
- (00:02:42) Lecture 0: HTML, CSS
- (02:06:14) Lecture 1: Git
- (02:59:29) Lecture 2: Python
- (04:07:10) Lecture 3: Django
- (05:46:15) Lecture 4: SQL, Models, and Migrations
- (07:40:21) Lecture 5: JavaScript
- (09:31:46) Lecture 6: User Interfaces
- (11:12:01) Lecture 7: Testing, CI/CD
- (12:45:59) Lecture 8: Scalability and Security
Learn to code for free and get a developer job: https://www.freecodecamp.org
Read hundreds of articles on programming: https://freecodecamp.org/news
”
Tag: React
[#Script #Coding] Learn React 18 with Redux Toolkit – Full Tutorial for Beginners
Learn React 18 with Redux Toolkit – Full Tutorial for Beginners
By freeCodeCamp.org
Published: Mar 15, 2023“
Learn how to use React version 18 and Redux Toolkit in this full course for beginners. React is a free and open-source front-end JavaScript library for building user interfaces based on components.
Course created by @CodingAddict
Source Code
React Tutorial: https://github.com/john-smilga/react-course-v3
Redux Toolkit: https://github.com/john-smilga/redux-toolkit-tutorialContents
- (00:00:00) Setup
- (0:30:33) Folder Structure
- (0:42:58) First Component
- (0:53:25) Extensions and settings.json
- (1:06:09) JSX
- (1:20:21) Nest Components
- (1:26:35) Booklist
- (1:36:57) CSS
- (1:47:31) Images
- (1:55:31) JSX – CSS
- (2:02:17) JSX – Javascript
- (2:08:44) Props
- (2:18:33) Props – Somewhat Dynamic Setup
- (2:23:00) Access Props – Multiple Approaches
- (2:27:44) Children Prop
- (2:35:12) Simple List
- (2:43:48) Proper List
- (2:51:12) Key Prop
- (2:57:20) Props – Options
- (3:02:56) Events
- (3:21:51) Form Submission
- (3:25:35) Mind Grenade
- (3:28:55) Component Feature
- (3:34:00) React Data Flow
- (3:39:42) Challenge
- (3:48:51) ES6 Modules
- (3:58:40) Local Images (src folder)
- (4:04:25) More Challenges
- (4:13:20) Deployment
- (4:18:43) useState Hook
- (5:48:19) useEffect Hook
- (6:19:29) Multiple Returns
- (7:28:02) Folder Structure
- (8:27:07) Forms
- (9:27:53) useRef Hook
- (9:50:10) Custom Hooks
- (10:06:20) Context API
- (10:43:01) useReducer Hook
- (11:26:39) Performance
- (12:11:45) Redux Toolkit
Learn to code for free and get a developer job: https://www.freecodecamp.org
Read hundreds of articles on programming: https://freecodecamp.org/news
”
[#Script #Coding] Harvard CS50’s Web Programming with Python and JavaScript – Full University Course
Harvard CS50’s Web Programming with Python and JavaScript – Full University Course
By freeCodeCamp.org
Published: Mar 08, 2023“
This web programming course from Harvard University picks up where CS50x leaves off. It dives more deeply into the design and implementation of web apps with Python, JavaScript, and SQL using frameworks like Django, React, and Bootstrap. Topics include database design, scalability, security, and user experience. You will learn how to write and use APIs, create interactive UIs, and leverage cloud services like GitHub and Heroku.
Slides, source code, and more at https://cs50.harvard.edu/web/2020/
Brian Yu teaches this course.
Watch the original CS50x course: https://youtu.be/8mAITcNt710
Course Contents
- (00:00:29) Introduction
- (00:02:42) Lecture 0: HTML, CSS
- (02:06:14) Lecture 1: Git
- (02:59:29) Lecture 2: Python
- (04:07:10) Lecture 3: Django
- (05:46:15) Lecture 4: SQL, Models, and Migrations
- (07:40:21) Lecture 5: JavaScript
- (09:31:46) Lecture 6: User Interfaces
- (11:12:01) Lecture 7: Testing, CI/CD
- (12:45:59) Lecture 8: Scalability and Security
Learn to code for free and get a developer job: https://www.freecodecamp.org
Read hundreds of articles on programming: https://freecodecamp.org/news
And subscribe for new videos on technology every day: https://youtube.com/subscription_cent…
”
[#Webdesign #Coding] Next.js Tutorial For Beginners
Next.js Tutorial For Beginners
By LearnWebCode
Published: Jan 24, 2023“
In this video you learn everything you need to get started with Next.js! Join my courses at the lowest possible price: https://learnwebcode.com/courses/
GitHub Repo To Borrow Code From: https://github.com/LearnWebCode/nextjs-youtube-demo
My other video where you can learn the basics of React: https://www.youtube.com/watch?v=70fadMRqnBo
CONTENTS:
- 0:00 Intro
- 0:42 Getting Started
- 4:23 Linking Pages
- 9:36 App-Wide Code
- 13:53 Navigation
- 16:40 Blog Feature
- 19:16 getStaticProps
- 24:10 URL Parameters
- 29:30 Module / Component CSS
- 32:52: Dev & Production Modes
- 35:40 Incremental Static Regeneration
- 41:28 getServerSideProps
- 47:02 Deploying To Live Site
Follow LearnWebCode for updates on new videos or projects:
- Instagram: https://www.instagram.com/javaschiff/
- Twitter: https://twitter.com/learnwebcode
- Facebook: https://www.facebook.com/Brad-Schiff-…
- Twitch: https://www.twitch.tv/learnwebcode
”
[#Script #Coding] 3 Ways to Code a BuzzFeed Clone (JavaScript + TypeScript + JSONServer + Database + API + Node.js)
3 Ways to Code a BuzzFeed Clone (JavaScript + TypeScript + JSONServer + Database + API + Node.js)
By freeCodeCamp.org
Published: Feb 08, 2023“
Learn how to build a Buzzfeed Clone in JavaScript, followed by a version in React using JSON server for mimicking an API, and then build a TypeScript Buzzfeed Clone with a mini backend using Node.js to communicate with a Database.
Final code:
https://github.com/kubowania/…
https://github.com/kubowania/b…
https://github.com/kubowania/bu…Course developed by @AniaKubow
Learn to code for free and get a developer job: https://www.freecodecamp.org
Read hundreds of articles on programming: https://freecodecamp.org/news
”
[#Script #Coding] A Visual IDE for React?!? The Future of Web Development
A Visual IDE for React?!? The Future of Web Development
By codeSTACKr
Published: Jan 02, 2023“
Download Codux Free at https://codux.hopp.to/codeSTACKr
Codux is a visual IDE, or graphical editor, that allows you to build and edit React components like you’re drawing on a canvas.
You’ll see and have access to the code right inside Codux, but it shouldn’t replace your existing IDE. In fact, the goal of Codux is not to replace your existing IDE, but to turbo charge your React workflow by giving you the ability to visually edit as well. As you make changes in Codux you’ll see the updates happen in real time in your existing IDE.
Codux supports any React project built using TypeScript with styling in CSS, Sass, or CSS Modules, and has full Git integration.
Another great feature is the ability to develop components in isolation. That’s generally how we build in React. We build components. But we usually can’t see each component rendered in isolation. With Codux, you can work on each component individually, see each component in various states, then bring them all together where needed.
Because this is a graphical user interface, even someone with little to no React experience can easily update and edit components visually and be confident that the updates reflected in the code will be accurate.
Just like in your browser’s dev tools, you’ll see all of the CSS styles for each element and you can edit them. This makes memorizing every CSS property name and value a thing of the past. Every property is visually available to edit. And these changes take place immediately in your code base.
To get started, you can import almost any existing React project or create a new project from scratch.
Become A VS Code SuperHero Today: https://vsCodeHero.com
Join my Discord developer community: https://discord.gg/A9CnsVzzkZ
Tools I use:
- codeSTACKr VS Code Theme: https://marketplace.visualstudio.com/…
- STACKr Code Font (Exclusive to my VS Code Course – https://vsCodeHero.com)
- SuperHero Extension Pack: https://marketplace.visualstudio.com/…
Timestamps
00:00 – Intro 02:25 – Building a YouTube Clone from scratch using Codux 02:42 – Create a new project 05:51 – Building the header component 07:23 – Building the side menu bar component 08:19 – Building the filters bar component 09:33 – Building the video card component 10:42 – Defining TypeScript props for your video card component 11:39 – Putting it all together in our App component 13:20 – Run the application locally to test 13:34 – Giving the YouTube clone a new name 13:49 – Commit our changes and publish to GitHub
Show support!
- PayPal: https://paypal.me/codeSTACKr
Watch Next:
- Playlist: Web Development For Beginners – https://www.youtube.com/watch?v=Ez4yH…
Connect With codeSTACKr:
- Website: https://www.codestackr.com
- Twitter: https://twitter.com/codeSTACKr
- Instagram: https://instagram.com/codeSTACKr
- Facebook: https://facebook.com/codeSTACKr
”
[#Script #Coding] Code a Minecraft Clone with JavaScript, React, Three.js – Tutorial
Code a Minecraft Clone with JavaScript, React, Three.js – Tutorial
By freeCodeCamp.org
Published: Sep 20, 2022“
Learn how to code a playable Minecraft clone using React, JavaScript, and Three.js. You will learn about many React concepts such as useState, useEffect, useRef, custom Hooks for State management, and more. And you will be able to apply the principles to create other 3d games in JavaScirpt.
Course created by Daniel Bark. Check out his channel: https://www.youtube.com/c/barelycoding
Finished Code: https://github.com/danba340/minecraft…
Starting Code: https://github.com/danba340/minecraft…
Demo: https://minecraft-freecodecamp.vercel…Contents
- (0:00:00) Boilerplate
- (0:03:56) Sky
- (0:05:46) Textures
- (0:07:48) Ground
- (0:15:11) Player
- (0:25:43) Keyboard input
- (0:32:03) Movement
- (0:41:26) First person camera
- (0:46:25) State management
- (0:49:55) Cube component
- (0:58:02) Add/Remove Cubes
- (1:09:34) Texture Selector
- (1:21:34) Save world
- (1:27:31) Hover cubes
- (1:30:28) Outro
”
[#Script #Coding] ChatGPT Clone – OpenAI API and React Tutorial
ChatGPT Clone – OpenAI API and React Tutorial
By freeCodeCamp.org
Published: Jan 18, 2023“
Learn how to use React and the OpenAI API to create an application like ChatGPT. The application can answer our questions, convert the text into different languages, or even convert JavaScript code to Python.
OpenAI API: https://beta.openai.com/
Course developed by @CybernaticoByNishant
ChatGPT with React: https://github.com/nishant-666/ChatGPT-React
OpenAI with React: https://github.com/nishant-666/Dall-E-API-with-ReactContents
- (0:00) Introduction
- (4:01) Importing configuration and api keys
- (11:27) Creating the input and button
- (16:09) How to create an image
- (23:32) Getting the api key from the console
- (28:48) Setting up the menu items
- (36:14) Hovering options in the options
- (41:03) Importing the translated component
- (48:47) Setting options in a file
- (53:30) Finishing main function
Learn to code for free and get a developer job: https://www.freecodecamp.org
Read hundreds of articles on programming: https://freecodecamp.org/news
”
[#Webdesign #Coding] MERN Stack Free Course: MongoDB, Express, React & Node.js Full Project
MERN Stack Free Course: MongoDB, Express, React & Node.js Full Project
By LearnWebCode
Published: Jun 02, 2022“
Let’s learn how to build an app using the MERN Stack. My premium courses and coupons: https://learnwebcode.com/courses/
GitHub link for this video: https://github.com/LearnWebCode/mern-…
CONTENTS:
- 0:00 Intro
- 3:10 Our Server (Node.js)
- 9:27 MongoDB
- 18:22 Connecting Node & MongoDB
- 33:10 React
- 51:53 Connecting React & Express
- 1:09:02 Password Protection
- 1:17:55 Create New Animal
- 1:35:43 User Uploaded Photo
- 1:43:36 Delete Button
- 1:49:10 Update An Existing Animal
- 1:56:30 Server-Side React Rendering
Follow LearnWebCode for updates on new videos or projects:
- Instagram: https://www.instagram.com/javaschiff/
- Twitter: https://twitter.com/learnwebcode
- Facebook: https://www.facebook.com/Brad-Schiff-…
- Twitch: https://www.twitch.tv/learnwebcode
”
[#Script #Coding] Fastest Upgrade to React 18!! Only 1 Second!
Fastest Upgrade to React 18!! Only 1 Second!
By codeSTACKr
Published: Apr 11, 2022“
Become A VS Code SuperHero Today: https://vsCodeHero.com
Join my Discord developer community: https://discord.gg/A9CnsVzzkZ
Upgrade to React v18 super-fast! It only takes 1 second. Let me show you how.
Tools I use:
- codeSTACKr VS Code Theme: https://marketplace.visualstudio.com/…
- STACKr Code Font (Exclusive to my VS Code Course – https://vsCodeHero.com)
- SuperHero Extension Pack: https://marketplace.visualstudio.com/…
Show support!
- PayPal: https://paypal.me/codeSTACKr
Watch Next:
- Playlist: Web Development For Beginners – https://www.youtube.com/watch?v=Ez4yH…
Connect With codeSTACKr:
- Website: https://www.codestackr.com
- Twitter: https://twitter.com/codeSTACKr
- Instagram: https://instagram.com/codeSTACKr
- Facebook: https://facebook.com/codeSTACKr
”
