Introduction To React.js | Zero To Mastery Academy

Autoplay
Autocomplete

Previous Lesson Complete and Continue

Complete Web Developer in 2023: Zero to Mastery

Introduction

The Complete Web Developer: Zero to Mastery (5:04)
Course Outline (8:38)
Exercise: Meet Your Classmates and Instructor
Join Our Open Source Projects!
Understanding Your Video Player (notes, video speed, subtitles + more)
Set Your Learning Streak Goal

How The Internet Works

Browsing the Web (6:00)
Breaking Google (2:59)
Exercise: Break Google Yourself
The Internet Backbone (5:29)
Traceroute (2:24)
Exercise: Running traceroute
DEVELOPER FUNDAMENTALS: I (3:08)
What Does A Developer Do? (1:39)
Optional: The Article Which Inspired This Course
Web Developer Monthly
Let's Have Some Fun (+ Free Resources)

History Of The Web

WWW vs Internet (3:30)
HTML, CSS, Javascript (5:04)
DEVELOPER FUNDAMENTALS: II (2:55)
Developer History (3:08)
Exercise: Adding CSS and JavaScript to Tim's website
Optional Resource: More About the History of the Web
Unlimited Updates

HTML5

Build Your First Website (7:48)
Resources: Your Text Editor
DEVELOPER FUNDAMENTALS: III (3:31)
Quick Note About w3schools
How To Ask Questions
HTML Tags (8:39)
HTML Tags 2 (1:49)
Self Closing HTML Tags (5:34)
Anchor Tag (4:52)
Q&A: index.html (2:05)
Q&A: Relative vs Absolute Path (3:46)
Course Check-In

Advanced HTML 5

HTML Forms (10:57)
HTML Forms 2 (3:09)
Submitting A Form (8:18)
HTML Tags 3 (3:51)
HTML vs HTML 5 (6:38)
Copy A Website (2:26)
HTML Challenge (1:07)
HTML Lesson Files
Exercise: HTML Quiz
Optional Exercise: More HTML
Implement a New Life System

CSS

Exercise Files: Code-Along
Your First CSS (13:42)
CSS Properties (10:35)
CSS Selectors (16:33)
Optional Exercise: CSS Selectors
Text and Font (7:32)
Images In CSS (4:06)
Box Model (5:08)
px vs em vs rem (3:04)
Optional: PX, EM, REM, %, VW, and VH
Exercise: CSS Quiz

Advanced CSS

Critical Render Path (3:57)
Exercise File: Code-Along Images
Flexbox (8:25)
Optional Exercise: Flexbox Froggy
CSS 3 (8:14)
Optional Exercise: Mastering Transitions and Transforms
Responsive UI (1:39)
Image Gallery Files
Exercise: Robot Animation (0:52)
Exercise: Robot Animation Starter Files
Solution: Robot Animation
Optional Exercise: CSS

Bootstrap, Templates, And Building Your Startup Landing Page

Evolving Technology (4:47)
Bootstrap Introduction (4:00)
Bootstrap (8:51)
Bootstrap 5 Update (4:18)
Exercise: Changing Versions
Bootstrap Grid (5:18)
Free Resources For Our Project
Exercise: Startup Landing Page (0:54)
Exercise: Startup Landing Page 2 (3:58)
Exercise: Startup Landing Page 3 (8:23)
Quick Note: The hr tag
Exercise: Startup Landing Page 4 (8:25)
Bootstrap 5.2+ Button Hover Update
Exercise: Startup Landing Page 5 (11:33)
Quick Note: Text Not Centered?
Quick Note: Mailchimp
Exercise: Adding Email Subscribe Form With MailChimp (9:21)
Quick Note: Upcoming Videos
Exercise: Putting Your Website Online (5:48)
Exercise: Putting Your Website Online 2 (2:50)
Quick Note: Upcoming Video
DEVELOPER FUNDAMENTALS: IV (7:15)
Using Templates (3:18)
Resources for FREE Templates
Startup Landing Pages by Students

CSS Grid + CSS Layout

Section Overview (1:50)
CSS Grid vs Flexbox vs Bootstrap (4:40)
Quick Note: grid-gap to gap
CSS Grid 1 (7:55)
CSS Grid 2 (4:14)
CSS Grid 3 (6:25)
CSS Grid 4 (7:07)
CSS Grid 5 (1:56)
Optional Exercise: CSS Grid
Exercise: CSS Layout (3:37)
Solution: Navigation Bar (8:37)
Solution: Navigation Bar 2 (4:22)
Solution: Cover (4:41)
Solution: Project Grid + Footer (8:54)
Quick Note: Upcoming Video
Solution: Prettify (6:59)
Resources: CSS Guide
The Truth About CSS (3:51)

Career Of A Web Developer

Career Of A Web Developer (14:25)
2023 Updated Statistics
Web Developer Roadmap
Quick Note: Upcoming Video
What If I Don't Have Enough Experience? (15:03)
Endorsements On LinkedIn
New: DEVELOPER FUNDAMENTALS (9:08)
Learning Guideline

JavaScript

Introduction To Javascript (1:36)
What Is Javascript? (5:33)
Your First Javascript (11:41)
Exercise: Number, String, Boolean, Comparisons
Variables (15:09)
Exercise: Variables
Exercise: Make A Calculator
Control Flow (16:36)
Exercise: Make A Keyless Car
Javascript On Our Webpage (9:05)
Functions (23:53)
Exercise: Make A Keyless Car Even Better
Data Structures: Arrays (13:06)
Exercise: Arrays
Data Structures: Objects (15:25)
Exercise: Objects And Arrays For Facebook App
Exercise: Build Facebook (11:16)
Javascript Terminology (3:43)
Loops (22:22)
Exercise: Build Facebook 2 (8:02)
Javascript Keywords (3:02)
Section Outline Document

DOM Manipulation

Document Object Model (8:42)
DOM Selectors (17:12)
Exercise: DOM Selectors
DOM Events (26:57)
Note: Callback Functions
Exercise: DOM Events
Solution: DOM Events
Exercise: Background Generator (19:25)
Background Generator Files
jQuery (6:49)
DEVELOPER FUNDAMENTALS: V (4:46)

Advanced JavaScript

Command Line

For WINDOWS Users ONLY
Quick Note: For Windows Users
Using The Terminal (10:05)
Exercise: Practice Using The Terminal

Developer Environment

Sublime Text (9:29)
Resources: Customizing Sublime Text
VS Code (6:55)
Resources: Customizing VS Code
Terminal (6:36)
Resources: Customizing Terminal
For Windows: Customizing Git Bash

Git + Github + Open Source Projects

Installing Git
Git + Github Part 1 (17:40)
Github Update: Master --> Main
Git + Github Part 2 (16:52)
My Terminal Setup
Contributing To Open Source (14:44)
Contributing To Open Source 2 (9:42)
Exercise: Contribute To Our Open Source
Keeping Your Fork Up To Date
Portfolio Website for Recruiters

A Day In The Life Of A Developer

A Typical Day (8:16)
Exercise: Helping A Developer
A Developer's Morning Routine

NPM + NPM Scripts

Introduction To NPM (7:08)
Setting Up NPM and package.json (6:39)
Update: Latest Node.js and NPM (3:24)
Troubleshoot: Installing NPM and Node.js
Installing And Using Packages (24:08)
Why Update Packages? (6:00)
Quick Note About Packages
Exercise: Create A Portfolio (15:10)

React.js Fundamentals (React Hooks and Redux videos moved to end of course!)

Introduction To React.js (12:21)
Create React App (7:05)
React App Folder Structure (8:14)
React 18 Update (4:48)
React Fundamentals (3:55)
React Fundamentals 2 (4:59)
Hooks vs Classes (2:13)
Class vs Functional App.js (4:02)
Quick Note: Service Worker File
Your First React Component (20:13)
Building A React App 1 (16:03)
React.Fragment and Semantic HTML
The Dirty Little Secret To Become An Expert (4:40)
Exercise: Learn to Read the Docs
Building A React App 2 (9:47)
Building A React App 3 (26:35)
Styling Your React App (4:59)
Quick Note: JSON Placeholder
Building A React App 4 (15:30)
Building A React App 5 (8:53)
Building A React App 6 (9:05)
Project Files
Keeping Your Projects Up To Date (8:30)
Exercise: React 18
Solution: Try Upgrading to React 18 (3:56)
React Review (2:34)
Error Boundary In React (8:11)
Deploying Our React App (5:10)
React Hooks + Redux (Saved For End Of The Course)

HTTP/JSON/AJAX + Asynchronous Javascript

HTTP/HTTPS (19:58)
JSON (7:25)
JSON vs Form Data
AJAX (13:37)
Quick Note: Upcoming Video
Promises (22:26)
Exercise: Promises
ES8 - Async Await (15:22)
Exercise: ES8 - Async Await
ES9 (ES2018) (5:21)
ES9 (ES2018) - Async (11:11)
ES2020: allSettled() (4:22)
ES2021: any()
Reviewing ES6, ES7, ES8, ES9, ES10, ES11 Features

Backend Introduction

Backend Basics (12:07)

APIs

Getting Ready For This Section
Introduction to APIs (13:31)
Exercise: Web App API
Optional Exercise: Speech Recognition
Resources: Public APIs

Leveling Up: The Power of Problem Solving

Snapshot Model of Learning (6:16)
Deliberate Practice (6:33)
Exercise: Deliberate Practice

FINAL PROJECT: SmartBrain Front-End

What We Are Building (1:49)
DEVELOPER FUNDAMENTALS: Maintain Your Codebase (18:11)
Quick Note: React Tilt + React Particles
Building Our Components (36:19)
Introducing our Machine Learning API (3:57)
Resource: Clarifai API Docs
Before We Start The Big Part (5:46)
Quick Note: Next 3 Lectures
Testing Our API (7:39)
Reading Documentation Like a Pro (14:23)
Exercise: Coding Your Image Recognition API (28:33)
Face Detection Box (23:46)
Customizing your App (4:29)
Sign In Form And Routing (29:21)
Project Files: Github

Node.js + Express.js

Introduction To Node.js (5:54)
fetch() in Node
Latest Version of Node.js
For Windows Users
Running script.js In Node (3:05)
ES2020: globalThis (3:14)
Modules In Node (4:22)
ES6 Modules??
ES6 Modules In Node (8:59)
ES2022: Top Level Await (3:46)
Exercise: ES2022 Top Level Await
ES2022: Await Import (5:05)
Types of Modules (5:10)
Building a Server (8:25)
Introduction to Express.js (8:57)
Express Middleware (2:59)
Express Version Update
Postman (8:13)
Quick Note: req.header
RESTful APIs (11:22)
Node File System Module (20:11)
Exercise: Santa's Node Helper (4:02)
Exercise Resources: Santa's Node Helper
Solution: Santa's Node Helper (20:51)

FINAL PROJECT: SmartBrain Back-End -- Server

Setting Up Our Server (10:20)
/signin and /register (18:30)
/profile/:id and /image (10:05)
Quick Note: Bcrypt (1:59)
Storing User Passwords (11:21)
Resource: Storing User Passwords Securely
Connecting To Our Front-End (21:07)
Resource: CORS
Registering Users (11:28)
Exercise: Load User Feature
User Profile Update (8:59)
Project Files: Github

Databases

Introduction To Databases (10:54)
Installing PostgreSQL (6:53)
For Windows Users
Resources: Installing PostgreSQL
SQL: Create Table (5:15)
SQL: Insert Into + Select (4:33)
SQL: Alter Table + Update (4:12)
SQL: Conditional Selections (3:32)
SQL: Functions (1:59)
Joining Tables Part 1 (7:07)
Joining Tables Part 2 (5:01)
SQL: Delete From + Drop Table (1:42)
Exercises: SQL Commands

FINAL PROJECT: SmartBrain Back-End -- Database

Setting Up Your Database (8:50)
Connecting To The Database (7:06)
Troubleshooting: Connecting Knex
Registering A User Part 1 (4:50)
Registering A User Part 2 (5:00)
Getting User Profiles (7:03)
Quick Note: Knex.js Breaking Changes
Updating Entries (5:28)
Quick Note: Knex.js Breaking Changes 2
Sign In (17:30)
Quick Note: Removing Unused Variables
Putting It All Together (4:04)
What's Next? (2:18)

Production + Deployment

Deploying Our Files (7:08)
Code Review (23:22)
Quick Note: Clarifai API
Security Review (19:10)
Quick Note: Cleaning Up
Optional Exercise: Using ChatGPT
Optional: Using gRPC API (13:23)
Environment Variables (7:13)
Alternatives to Heroku
Exercise: Deploying To Production
Deploying On Heroku (18:58)
Quick Note: Troubleshooting Next Video
Deploying To Heroku Part 2 (10:40)
Deploying To Heroku Part 3 (1:50)
NPM Serve
Deploying To Heroku Part 4 (7:11)
Project Files: Github

Where To Go From Here?

Thank You! (1:17)
Review This Course!
Become an Alumni
Resource: Interviewing
My Advice On Interviewing
My Advice On Getting Hired
My Advice On Resume/Portfolio/LinkedIn
My Advice On Being a Junior Developer
My Advice On How To Become A Senior Developer
Part 2
Become a ZTM Ambassador ➡ Refer new students. Earn cash.

Bonus: Extra Bits

Ask Me Anything - 1,000 Students (19:03)
AMA - 100,000 Students!! (38:30)
Coding Challenges

Extra Learning: React Hooks

New React Hooks Documentation
React Hooks (3:42)
React Hooks 2 (3:47)
React Hooks 3 (3:25)
React Hooks 4 (4:01)
React Hooks 5 (3:45)
React Hooks 6 (6:54)
React Hooks 7 (9:16)
React Hooks 8 (4:48)
Project Files - Hooks
React Hooks 9 (5:58)

Optional Extra Learning: Redux

Quick Note About Redux

Extra: For Windows Users

Introduction From Wolfgang (1:03)
Git for Windows (6:06)
Install NodeJS for Windows (2:43)
Install PostgreSQL for Windows (6:43)
Using PSQL and PGADMIN (8:07)

Introduction To React.js