You are NOT signed in as a student! Your progress will not be saved and you won't see milestones on your ZTM Passport.
Make sure you are logged into
Academy
Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Complete Web Developer in 2025: Zero to Mastery
Introduction
The Complete Web Developer: Zero to Mastery (5:04)
Course Outline (8:38)
Exercise: Meet Your Classmates and Instructor
ZTM Plugin + Understanding Your Video Player
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)
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:50)
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
Code Along: Files for Upcoming Videos
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)
Quick Note: Upcoming Lesson
Just Watch: Bootstrap (8:51)
Bootstrap 5 Update (4:18)
Exercise: Changing Versions
Fast and the Furious Bootstrap (5:08)
Exercise: Fast and the Furious Bootstrap Challenge
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:51)
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 (7:00)
Resources: CSS Guide
The Truth About CSS (3:51)
Career Of A Web Developer
2024 Updated Statistics
Career Of A Web Developer (14:25)
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)
Rubber Ducking with ChatGPT
JavaScript
Introduction To Javascript (1:36)
What Is Javascript? (5:33)
New JavaScript Features
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:03)
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
Scope (10:25)
Exercise: Scope
Advanced Control Flow (11:41)
Exercise: Advanced Control Flow
ES5 and ES6 (26:41)
Exercise: ES5 and ES6
Advanced Functions (20:04)
Exercise: Advanced Functions
Advanced Arrays (16:40)
Exercise: Advanced Arrays
Advanced Objects (24:51)
Quick Note: Upcoming Videos
Pass By Value vs Pass By Reference (17:06)
Type Coercion (9:02)
Exercise: Advanced Objects
ES7 (ES2016) (3:06)
Exercise: ES7
ES8 (ES2017) (9:19)
Exercise: ES8
Note: ES9 + ES8 Async Await
ES10 (ES2019) (16:49)
Exercise: ES10
Advanced Loops (12:04)
Exercise: Advanced Loops
ES2020 Part 1 (10:07)
ES2020 Part 2 (3:29)
ES2020 Part 3 (4:11)
Exercise: ES2020
ES2021 (3:08)
ES2022 (3:25)
ES2023 (13:31)
Exercise: ES2023
ES2024 (5:49)
Updated Background Generator Project
Debugging (8:23)
How Javascript Works (24:12)
Modules (13:19)
More Modules To Come!
Exercise: Imposter Syndrome (2:56)
Extra Javascript Practice
Optional Exercise: Javascript Logic
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:08)
Contributing To Open Source 2 (9:40)
Exercise: Contribute To Our Open Source
Keeping Your Fork Up To Date
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 (2:59)
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 (v19)
Introduction To React.js (12:21)
React History & Latest Version (v19) (5:22)
Files For This Section
Create React App (7:05)
React + Vite (3:43)
Converting Project To Vite@Latest
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)
Code Along: Files for Upcoming Videos
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:57)
Converting to Vite@Latest (10:32)
Deploying Our React App (5:10)
Exercise: React 19, Vite, and Github Pages Deploy (6:13)
Review React 19 & Latest Updates
React Review (2:34)
[OPTIONAL] Extra Learning: React Hooks
New React Hooks Documentation
Code Along: Files for Upcoming Videos
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)
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
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)
node --watch
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
Code Along: Project Files
Setting Up Our Server (10:20)
/signin and /register (18:31)
/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:13)
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
Code Along: Project Files
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)
Project Files: Github
What's Next? (2:18)
Production + Deployment
Deploying Our Files (7:08)
Code Along: Project Files
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)
Part 2
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
Learning Guideline
ZTM Events Every Month
LinkedIn Endorsements
Bonus: Extra Bits
Ask Me Anything - 1,000 Students (19:03)
AMA - 100,000 Students!! (38:30)
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)
Advanced Loops
This lecture is available exclusively for ZTM Academy members.
If you're already a member,
you'll need to login
.
Join ZTM To Unlock All Lectures