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
The Complete Junior to Senior Web Developer Roadmap (2025)
Introduction
Complete Junior to Senior Web Developer Roadmap - Introduction (4:39)
Course Outline (11:17)
Exercise: Meet Your Classmates and Instructor
First Day Of Work (3:13)
Before You Get Started (5:39)
Don't Be A Junior Developer
ZTM Plugin + Understanding Your Video Player
Set Your Learning Streak Goal
SSH
Bruno's Request (0:38)
Introduction to SSH (5:04)
SSH Command (7:12)
Optional: Digital Ocean Set Up
Quick Note: SSH Key In Previous Video
Resources: SSH Command
Saving The Day Through SSH (6:33)
Optional: Digital Ocean Server
How SSH Works (1:29)
Symmetric Encryption (4:21)
Asymmetric Encryption (6:46)
Resources: Asymmetric Encryption
Hashing (6:54)
Passwords Or SSH? (3:26)
SSH Into A Server (13:14)
Quick Note: SSH Into A Server
Resources: SSH Into A Server
Exercise: Set Up SSH on Github (3:11)
Extra Solution: Set Up SSH on Github
Solution: Set Up SSH on Github (4:57)
Optional: Contributing To Open Source Projects
Section Summary (2:48)
Learning Guideline
Web Developer Monthly
Let's Have Some Fun (+ Free Resources)
Performance Part 1
Bruno's Request (1:18)
Introduction to Performance Part 1 (3:41)
3 Keys To Performance (4:33)
Network Performance (4:45)
Image File Formats (4:45)
Resources: Image File Formats
Image Optimizations (7:04)
Image Optimizations 2 (12:24)
Exercise: #1 - Media Queries
Delivery Optimizations (4:47)
Resources: Delivery Optimizations
Exercise: #2 - Network Optimizations (4:48)
Solution: #2 - Network Optimizations (5:11)
Critical Render Path Introduction (5:09)
Critical Render Path 1 (6:01)
Critical Render Path 2 (17:26)
Critical Render Path 3 (13:43)
Resources: Async + Defer
Critical Render Path 4 (3:58)
Exercise: #3 - Critical Render Path
Exercise: #4 - Keiko Corp Website (4:00)
Resources: Keiko Corp Website
Solution: Keiko Corp Website (9:22)
Optional: Resource Prefetching
Resources: Performance Tools
HTTP/2 (2:43)
Resources: HTTP/2
HTTP/3
Section Summary (2:03)
Unlimited Updates
OPTIONAL: React + Redux + Module Bundling
Angular vs React vs Vue vs Svelte (6:41)
IMPORTANT: Thinking Like A Senior Developer (2:12)
Optional Section
Bruno's Request (1:26)
Section Overview (2:21)
Deep Dive Into This Topic
Updated Code For This Section
Introduction to React & Robofriends Build
Introduction To Redux And Webpack (2:49)
State Management (7:12)
Why Redux? (11:39)
Updated Code for this Section
Installing Redux (5:45)
Redux Toolkit (2:02)
Redux Toolkit Example
Redux Actions And Reducers (13:44)
Redux Store And Provider (8:35)
Redux connect() (16:31)
Redux Middleware (8:45)
Redux Async Actions (29:27)
Redux Project Structures (4:54)
Project Files - Redux
Popular Tools For React + Redux (7:41)
Module Bundlers (6:48)
Modern Build Systems in 2024
Converting to Vite@Latest (10:32)
Introduction To Webpack (2:45)
Update: Babel 7 + ESlint + Webpack 5
Webpack (38:01)
Updating Libraries: Babel 7 + ESlint (6:35)
Quick Fix: Babel 7 Plugins
Resources: Webpack Configurator
Parcel (9:19)
Parcel v2!
Section Summary (5:20)
Performance Part 2
Bruno's Request (1:06)
Section Overview (2:02)
Updated Code For This Section
Optimizing Code (12:15)
Code Splitting Introduction (5:54)
Exercise: #1 - Code Splitting
Code Splitting Part 1 (14:27)
ES2020: Dynamic import()
Code Splitting Part 2 (12:32)
Code Splitting Part 3 (13:29)
Code Splitting Part 4 (2:29)
Exercise: #2 - Code Splitting
Solution: React.lazy() Code Splitting (13:12)
React Performance Optimizations (10:36)
Resources: React Performance
React Performance Optimizations 2 (19:26)
Resources: React Performance 2
Optimizing Code Review (3:29)
Resources: Tree Shaking 101
Progressive Web Apps (12:54)
Opt-In Service Worker in CRA
Resources: Progressive Web Apps
Progressive Web Apps Examples (6:15)
PWA - HTTPS (6:11)
Resources: PWA - HTTPS
PWA - App Manifest (6:12)
Resources: PWA - App Manifest
PWA - Service Workers (13:15)
Update for CRA v4 and React 17+
PWA - Final Thoughts (2:03)
Exercise: #3 - Your Own PWA
Quick Note: Upcoming Video
Deploying Our React App (10:18)
Service Worker Update (6:05)
Solution Part 1 - PWA (8:52)
Solution Part 2 - PWA (10:09)
Solution Files - PWA
Quick Note: Upcoming Video
OPTIONAL: Converting Our App To PWA (10:43)
Deploying your PWA to the App Store
Section Summary (2:36)
Course Check-In
Testing
Bruno's Request (1:10)
Section Overview (6:21)
Updated Code For This Section
Types of Tests (2:58)
Testing Libraries (15:28)
Note: The Next Videos
Unit Tests (2:42)
Integration Tests (2:46)
Automation Testing (4:27)
Final Note On Testing (2:56)
Setting Up Jest (11:29)
Our First Tests (11:10)
Writing Tests (5:31)
Quick Note: Upcoming API Endpoint + ES6 Modules
Asynchronous Tests (10:18)
Asynchronous Tests 2 (11:41)
Resources: Jest Cheat Sheet
Mocks and Spies (12:50)
Exercise: #1 - Testing With Jest
Enzyme vs React Testing Library
Introduction To Enzyme (14:29)
Resources: Enzyme
Quick Note: Empty Snapshots
Snapshot Testing (9:29)
Snapshot Testing + Code Coverage (4:54)
Exercise: #2 - Testing Stateful Components
Testing Stateful Components (11:16)
Quick Recap (2:35)
Exercise: #3 - Testing Connected Components
Testing Connected Components (23:50)
Testing Connected Components 2 (3:35)
Exercise #4 - Testing All Components
Testing Reducers (14:57)
Testing Actions (18:27)
Exercise: #5 - Final Tests
Note: What Test is Best?
Section Summary (4:11)
Implement a New Life System
TypeScript
Bruno's Request (1:00)
Section Overview (1:27)
Dynamic vs Static Typing (11:50)
Weakly vs Strongly Typed (3:18)
Static Typing in Javascript (9:45)
Typescript Compiler (3:41)
Resources: Installing Node.js
Resources: Installing TypeScript Compiler
TypeScript (11:33)
Resources: TypeScript In Your Editor
TypeScript 2 (3:16)
TypeScript 3 (7:24)
Resources: TypeScript Types
TypeScript 4 (5:38)
TypeScript 5 (6:39)
TypeScript 6 (4:48)
Resources: Type Vs Interface
TypeScript 7 (3:34)
Resources: Type Assertion
TypeScript 8 (6:04)
TypeScript 9 (1:21)
TypeScript 10 (1:23)
DefinitelyTyped (5:57)
Update: Create React App with TypeScript (4:02)
2 Ways To TypeScript
Just Watch [Old Way] - TypeScript In Robofriends (7:11)
Just Watch [Old Way] - TypeScript In Robofriends 2 (14:00)
TypeScript In Monsters Rolodex
Final Exercise: Adding TypeScript
A Little Joke (0:49)
Section Summary (3:27)
SPA vs Server Side Rendering
Bruno's Request (0:58)
Section Overview (7:53)
CSR vs SSR (5:33)
Server Side Rendering React (10:55)
Note: SSR In React
CSR vs SSR Part 2 (11:18)
SSR React Libraries (3:57)
Static vs SSR vs CSR: Gatsby.js vs Next.js vs React.js (7:09)
Quick Note: Upcoming Videos
Setting Up Next.js (7:56)
Next.js Pages (7:35)
Client Side Routing (2:25)
Exercise: #1 - Client Side vs Server Side Routing
Shared Components (2:14)
Deep Dive Into NextJS
Dynamic Apps with Next.js (15:31)
Exercise: #2 - Updated Next.js Features
Deploying Next.js Apps (0:52)
Updating To Latest Version Of Next.js (3:21)
Exercise: Updating To Latest Version Of Next.js
Exercise: #3 - SSR Robofriends
Understand JavaScript SEO
Section Summary (7:42)
Security
Bruno's Request (1:14)
Section Overview (4:06)
Star Of Security (1:02)
Exercise: Imposter Syndrome (2:55)
Injections (19:42)
Exercise: #1 - Injections
Exercise: #2 - Security Files
Resources: Installing PostgreSQL
Note: NPM Built In Audit
3rd Party Libraries (10:51)
Logging (14:02)
HTTPS Everywhere (6:21)
XSS + CSRF (20:41)
Exercise: #3 - XSS + CSRF
Resources: XSS + CSRF
Code Secrets (9:50)
Secure Headers (5:35)
Resources: Secure Headers
Access Control (6:31)
Data Management (10:54)
Resources: Storing Passwords
Don't Trust Anyone (2:53)
Authentication (3:09)
Exercise: #4 - Optional Hacking
Resources: Personal Security
Section Summary (3:23)
Code Analysis
Bruno's Request (1:30)
Section Overview (3:56)
Quick Note: Windows Users
Quick Note: Updated API
Setting Up Your Environment (27:01)
Exercise: #1 - SmartBrain App
Optional: CWD - Installing PostgreSQL (6:53)
How To Analyze Code (16:37)
Exercise: #2 - Analyze Code
Exercise: #3 - Multiple Face Detection
Resources: New Feature Commit
Solution: #3 - Multiple Face Detection (17:20)
Section Summary (1:43)
Customizing Your App
Docker
Bruno's Request (1:09)
Section Overview (4:47)
Updated Code For This Section
Docker Containers (10:58)
Installing Docker (2:24)
Resources: Installing Docker
Dockerfile (8:37)
Resources: Dockerfile
Docker Commands (5:09)
Dockerfile 2 (8:03)
Exercise: #1 - Your First Docker Container
Quick Note: Docker Compose
Docker Compose (13:15)
Resources: Docker Compose Commands
Docker Compose 2 (3:56)
Resources: Docker Volumes
Docker Compose 3 (1:54)
Docker Compose 4 (13:47)
Resources: PostgreSQL With Docker
Docker Compose 5 (2:09)
Docker Compose 6 (12:49)
Resources: init.db File
Docker Compose 7 (5:14)
Exercise: #2 - Dockerize SmartBrain App
Project Files - Docker
Update: Docker Networks
Section Summary (4:32)
Redis
Bruno's Request (1:27)
Section Overview (6:31)
Quick Note About Next Video
Introduction To Databases (10:54)
Redis Version Updates and Playground
Installing Redis (4:29)
Resources: Installing Redis
Redis Commands (5:57)
Redis Data Types (1:59)
Redis Hashes (2:00)
Redis Lists (3:55)
Redis Sets + Sorted Sets (6:11)
Section Summary (3:00)
Sessions + JWT
Section Overview (2:20)
Cookies vs Tokens (11:18)
Resources: Cookies vs Tokens
What We Are Building (4:54)
JWT (3:24)
Exercise: #1 - JWT
Project Goals (5:19)
Exercise: #2 - Code Along
Profile Icon (13:53)
Resources: Profile Icon
Profile Dropdown (12:58)
Resources: setState() Callback
Profile Styling (11:04)
Profile Modal 1 (4:24)
Profile Modal 2 (22:43)
Profile Modal 3 (12:32)
Profile Modal 4 (7:09)
Resources: HTML Entities
Updating Profile 1 (9:31)
Resources: Updating Profile
Updating Profile 2 (10:09)
Updating Profile 3 (8:13)
User Authentication (15:10)
Sending The JWT Token (16:20)
Quick Note: NPM Redis
Adding Redis (6:48)
Exercise: #3 - Adding Redis to Docker Compose
Solution: #3 - Adding Redis To Docker Compose (5:29)
Storing JWT Tokens (8:16)
Retrieving Auth Token (7:17)
Client Session Management (14:17)
Resources: Bearer Token
Session Sign In (10:31)
Authorization Middleware (14:36)
Fixing A Bug (2:45)
Reviewing Our Code (2:59)
Updating Our App (4:09)
Optional: Why bcrypt-nodejs? (1:59)
Section Summary (7:24)
Exercise: #4 - Improving SmartBrain
OPTIONAL: AWS
Bruno's Request (1:30)
Section Overview (6:27)
Updated Code For This Section
Amazon Web Services (11:22)
Deep Dive Into AWS
Monolithic vs Micro Services (2:58)
Amazon Lambda (6:02)
Amazon Lambda Dashboard (5:50)
Quick Note: AWS Lambda
Serverless (5:29)
Serverless 2 (5:07)
IAM (4:37)
Resources: IAM
Deploying A Function (11:26)
Deploying A Function 2 (7:22)
Deploying A Function 3 (13:07)
Quick Bug Fix (1:26)
Section Summary (3:11)
Exercise: Your Own Lambda Function
Performance Part 3
Bruno's Request (1:10)
Section Overview (0:56)
CDNs (6:39)
GZIP (5:30)
Database Scaling (11:23)
Caching 1 (6:57)
Caching 2 (8:16)
Caching 3 (11:31)
Resources: Caching
Load Balancing (6:10)
Nginx 1 (6:33)
Exercise: Load Testing Your Load Balancer
Nginx 2 (15:07)
Resources: Nginx
Section Summary (5:16)
CI/CD
Bruno's Request (1:33)
Section Overview (1:43)
Updated Code For This Section
Continuous Integration, Delivery, Deployment (10:10)
Deep Dive into CI/CD
Building Great Software (7:11)
Resources: CI Tools
CircleCI (16:48)
Continuous Integration 1 (10:12)
Continuous Integration 2 (9:12)
Exercise: Your Own CI Flow
Building Great Software 2 (6:04)
Section Summary (1:54)
Extra Bits
Section Overview (1:26)
Complexity vs Simplicity (3:54)
NPM Is Not Your Friend (2:11)
Learn To Learn (1:59)
Start With Why (2:43)
Endorsements On LinkedIn
The Final Video
The One You Have Been Waiting For (2:21)
Thank You (1:17)
Review This Course!
Become An Alumni
Learning Guideline
ZTM Events Every Month
LinkedIn Endorsements
Extras: 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)
Bonus: AMA Video!
AMA - 100,000 Students!! (38:30)
Updating Profile 2
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