Autoplay
Autocomplete
Previous Lesson
Complete and Continue
The Complete Junior to Senior Web Developer Roadmap (2024)
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
Understanding Your Video Player (notes, video speed, subtitles + more)
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)
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
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
Angular vs React vs Vue vs Svelte (6:41)
Learning Guideline
Quick Note About React
CWD: Introduction To React.js (12:21)
CWD: Create React App (7:05)
CWD: React App Folder Structure (8:14)
CWD: React 18 Update (4:48)
CWD: React Fundamentals (3:55)
CWD: React Fundamentals 2 (4:59)
Hooks vs Classes (2:13)
CWD: Class vs Functional App.js (4:02)
Quick Note: Service Worker File
CWD: Your First React Component (20:13)
CWD: 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
CWD: Building A React App 2 (9:47)
CWD: Building A React App 3 (26:35)
CWD: Styling Your React App (4:59)
Quick Note: JSON Placeholder
CWD: Building A React App 4 (15:30)
CWD: Building A React App 5 (8:53)
CWD: Building A React App 6 (9:05)
Project Files
CWD: Keeping Your Projects Up To Date (8:30)
Exercise: React 18
Solution: Try Upgrading to React 18 (3:56)
CWD: React Review (2:34)
CWD: Error Boundary In React (8:11)
CWD: Deploying Our React App (5:10)
New React Hooks Documentation
CWD: React Hooks (3:42)
CWD: React Hooks 2 (3:47)
CWD: React Hooks 3 (3:25)
CWD: React Hooks 4 (4:01)
CWD: React Hooks 5 (3:45)
CWD: React Hooks 6 (6:54)
CWD: React Hooks 7 (9:16)
CWD: React Hooks 8 (4:48)
Project Files - Hooks
CWD: React Hooks 9 (5:58)
Introduction To Redux And Webpack (2:49)
State Management (7:12)
Why Redux? (11:39)
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)
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
Starting our Typing (8:14)
Typescript Interfaces (9:51)
Typescript Types & Third Party Library Types (11:49)
ChangeEvent Type From React (3:29)
Understanding Generics (11:20)
Typing React's setState (9:19)
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:30)
Quick Note About Next Video
Introduction To Databases (10:54)
Redis Version Updates and Playground
Installing Redis (4:31)
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
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)
Solution: #3 - Adding Redis To Docker Compose
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