2024 Backend Roadmap

By Web Dev Simplified https://courses.webdevsimplified.com

Each section, and all the items listed in each section, of this roadmap
are listed in the order that you should learn them.

Each section also includes projects that you can complete in any order
that require only the skills learned in that section and the sections prior.

Backend Language - (Choose Any)

JavaScript (Recommended If Also Learning Frontend)
Python (Recommended If Also Learning AI)
PHP (Recommended If Also Learning Wordpress)
C#
Rust (Difficult To Learn)
Ruby (Easier To Learn But Not Used As Much)

Backend Framework - (Choose Any)

JavaScript
Node.js With Express (Recommended)
Deno (Newer So Not As Popular)
PHP
Laravel (Recommended)
Wordpress (Also Recommended)
CodeIgniter
Python
Django (Recommended)
Flask
C#
.NET (Recommended)
Rust
Rocket (Recommended)
Ruby
Rails (Recommended)
Node.js/Express - JavaScript Course Node.js Course

Var vs Let vs Const - Video Article

Function Basics - Video

Callbacks - Video Article Projects (M ay Re quire A Database)

Arrow Functions - Video Article
Easy
Hoisting - Video Article Basic Node.js Server - Video

Basic REST API - Video

Scoping - Article
URL Shortener - Video

Hastebin Clone - Video

Closures - Video
Paginated API - Video

Strict Equality - Video Article Discord Bot - Video

Basic Chrome Extension - Video

Objects/Arrays - Array Video
Medium
Reference Vs Value - Video Article
Ama onz Web Scraper - Video
Control Flow (If, Loops, etc.)
JSON Web Token Auth - Video
User Permission Role - Video

Promises - Video Article Passport Auth - Video

Custom Auth - Video

Async Await - Video Article
Stripe Payments - Video Article

Callbacks - Article Related Video PayPal Payments - Video

Google Docs Clone - Video

Promises - Video
Password Protected File Sharing - Video

Async Await - Video Hard

Markdown Blog - Video
Common Modules - Article
Reddit Clone - Video

Null Vs Undefined - Video Article Realtime Chat App - Video 1 Video 2

Recursion - Video Article

Array Methods - Video Advanced Video

Template Literals - Video Advanced Video Article

Destructoring/Spread Operator - Video Article

Node.js File System Libary

Express Middleware - Video Article

Express Routing - Video

Templating Language (EJS, Handlebars, Pug, etc.)

Databases - SQL vs NoSQL Video
SQL
PostgreSQL (Recommended)
MySQL (Also Recommended) - Install Video Tutorial Video
SQLite
NoSQL
MongoDB (Recommended) - Tutorial Video Cheat Sheet
Redis (Recommended For Caching)
Cassandra
DynamoDB (Recommended If Working With AWS)

TypeScript - Course
TSConfig
Type Inference
Array Type Projects
Any/Unknown Type - Video Easy
Type vs Interfaces - Video Image Slider - Video
Todo List - Video
Functions Typing Effect Animation - Video
Unions/Intersections Hangman Clone - Video
Medium
readonly/keyof/typeof
Custom Select Component - Video
As Const/Enums Advanced Note Taking App - Video
Multistep Form - Video
Tuples Shopping Cart - Video
Generics - Video Hard

Built In Types (Pick, Omit, etc.) Facebook Messenger Clone - Video

YouTube Home Page Clone - Video
Type Guards Twitter Clone - Video
Satisfies
Discriminated Union - Video
Function Overloads
Type Predicate - Video
Declaration Files
Next.js - (Optional) - Course

j
App Router
Pro ects
Folder Based Routing

Metadata/SEO App Router

Server vs Client Components - Article Todo List - Video

Data Fetching Pages Directory

Loading/Error Pages T witter Clone - Video

Dynamic Routes

Data Cache/Request Memoization/Full Route Cache/Router Cache

Dynamic vs Static Pages

Dynamic Functions

Server Actions - Video

useOptimistic/useFormState/useFormStatus

Parallel Routes/Intercepting Routes - Parallel Routes Video

Route Handlers

Pages Directory

Page Based Routing

CSR vs SSR vs SSG vs ISR - Video

getServerSideProps/getStaticProps/getStaticPaths/getInitialProps

API Routes

Other Important Topics

Version Control ( Learn As Soon As Possible) - v v

Video Ad anced Video Ad anced Article

JSON (Learn Alongside JavaScript) - Video

Regular Expressions (Optional) - Video

Ho w To Deploy
Basic Security - What Is JWT Video

Authentication - Basic Auth Video Password Auth Video JWT Auth Video Email Only Auth Video

Testing - Video Test Driven Development Video Vitest Video

 2024 Backend Roadmap
By Web Dev Simplified https://courses.webdevsimplified.com
Each section, and all the items listed in each section, of this roadmap
are listed in the order that you should learn them.

Each section also includes projects that you can complete in any order
that require only the skills learned in that section and the sections prior.

Backend Language - (Choose Any)

JavaScript (Recommended If Also Learning Frontend)
Python (Recommended If Also Learning AI)
PHP (Recommended If Also Learning Wordpress)
C#
Rust (Difficult To Learn)
Ruby (Easier To Learn But Not Used As Much)

Backend Framework - (Choose Any)

JavaScript
Node.js With Express (Recommended)
Deno (Newer So Not As Popular)
PHP
Laravel (Recommended)
Wordpress (Also Recommended)
CodeIgniter
Python
Django (Recommended)
Flask
C#
.NET (Recommended)
Rust
Rocket (Recommended)
Ruby
Rails (Recommended)
Node.js/Express - JavaScript Course Node.js Course

Var vs Let vs Const - Video Article

Function Basics - Video

Callbacks - Video Article Projects (M a y Require A Database)

Arrow Functions - Video Article
Easy
Hoisting - Video Article Basic Node.js Server - Video
Basic REST API - Video
Scoping - Article
URL Shortener - Video
Closures - Video
Hastebin Clone - Video
Paginated API - Video

Strict Equality - Video Article Discord Bot - Video

Basic Chrome Extension - Video
Objects/Arrays - Array Video
Medium
Reference Vs Value - Video Article
Ama onz
Web Scraper - Video
Control Flow (If, Loops, etc.)
JSON Web Token Auth - Video
User Permission Role - Video

Promises - Video Article Passport Auth - Video

Custom Auth - Video

Stripe Payments - Video Article

Async Await - Video Article

Callbacks - Article Related Video PayPal Payments - Video

Google Docs Clone - Video
Promises - Video Password Protected File Sharing - Video
Async Await - Video Hard
Markdown Blog - Video
Common Modules - Article
Reddit Clone - Video
Null Vs Undefined - Video Article Realtime Chat App - Video 1 Video 2

Recursion - Video Article

Array Met hods - Video Advanced Video

Template Literals - Video Advanced Video Article
Destructoring/Spread Operator - Video Article
Node.js File System Libary
Express Middleware - Video Article

x
E press Routing - Video
Templating Language (EJS, Handlebars, Pug, etc.)
Databases - SQL vs NoSQL Video
SQL
PostgreSQL (Recommended)
MySQL (Also Recommended) - Install Video Tutorial Video
SQLite
NoSQL
MongoDB (Recommended) - Tutorial Video Cheat Sheet
Redis (Recommended For Caching)
Cassandra
DynamoDB (Recommended If Working With AWS)

TypeScript - Course
TSConfig
Type Inference
Array Type Projects
Any/Unknown Type - Video Easy
Type vs Interfaces - Video Image Slider - Video
Todo List - Video
Functions Typing Effect Animation - Video
Unions/Intersections Hangman Clone - Video
readonly/keyof/typeof
Medium
Custom Select Component - Video
As Const/Enums Advanced Note Taking App - Video
Multistep Form - Video
Tuples Shopping Cart - Video
Generics - Video Hard
Built In Types (Pick, Omit, etc.) Facebook Messenger Clone - Video
YouTube Home Page Clone - Video
Type Guards Twitter Clone - Video
Satisfies
Discriminated Union - Video
Function Overloads
Type Predicate - Video
Declaration Files
Next.js - (Optional) - Course

App Router
Projects
Folder Based Routing

Metadata/SEO App Router

Server vs Client Components - Article Todo List - Video

Data Fetching Pages Directory

Loading/Error Pages Twitter Clone - Video

Dynamic Routes

Data Cache/Request Memoization/Full Route Cache/Router Cache

Dynamic vs Static Pages

Dynamic Functions

Server Actions - Video

useOptimistic/useFormState/useFormStatus

Parallel Routes/Intercepting Routes - Parallel Routes Video

Route Handlers

Pages Directory

Page Based Routing

CSR vs SSR vs SSG vs ISR - Video

getServerSideProps/getStaticProps/getStaticPaths/getInitialProps

API Routes

Other Important Topics

Version Control (Learn As Soon As Possible) - Video Advanced Video Advanced Article

JSON (Learn Alongside JavaScript) - Video

Regular Expressions (Optional) - Video

How To Deploy

Basic Security - What Is JWT Video

Authentication - Basic Auth Video Password Auth Video JWT Auth Video Email Only Auth Video

Testing - Video Test Driven Development Video Vitest Video

 2024 Frontend Roadmap
By Web Dev Simplified https://courses.webdevsimplified.com
Each section, and all the items listed in each section, of this roadmap
are listed in the order that you should learn them.

Each section also includes projects that you can complete in any order
that require only the skills learned in that section and the sections prior.

HTML
Basics - Playlist
Forms - Video
Emmet - Video

CSS - Course
Selectors - Video Article Cheat Sheet
Inheritance - Video Article Projects
Specificity - Video Article Easy
Box Model - Video Article Transparent Login Form - Video
Animated Cards - Video
Position - Video Article
Medium
Display - Video CSS Only Tooltips - Video
Flexbox - Video Article CSS Emoji Art - Video
Advanced Hover Effects - Video
Grid - Video Advanced Text Animation - Video
Calc - Video Article CSS Image Hover Effect - Video
Custom Accessible Toggle Switches - Video
Pseudo Elements - Video Article 3D Flip Button - Video
Animated Loading Spinner - Video
Pseudo Classes Animated Hamburger Menu - Video
Custom Properties - Video Article Hard
Logical Properties - Article YouTube Clone - Video
CSS Battles - Video 1 Video 2 Video 3 Video 4 Video 5
Media Queries - Video Price Comparison Table - Video
Vertical Timeline - Video
Container Queries - Video
Animation - Basic Video Advanced Video Transform Article Fill Mode Article
JavaScript - Course
Async vs Defer Script Loading - Video Article
Var vs Let vs Const - Video Article
Projects
Function Basics - Video
Easy
Callbacks - Video Article Form Validation - Video
Arrow Functions - Video Article Light/Dark Theme Toggle - Video
Google Maps Clone - Video
Hoisting - Video Article Impossible To Click Button - Video
Scoping - Article Simple Tabs - Video
Rock Paper Scissors Game - Video
Closures - Video Text To Speech - Video
Expandable Content - Article
Strict Equality - Video Article Modal - Video
Objects/Arrays - Array Video Medium
Reference Vs Value - Video Article Pong Clone - Video
Password Strength Tester - Video
DOM Traversal - Video Password Generator - Video
Quiz App - Video
DOM Manipulation - Video Postman Clone - Video
Event Listeners - Video Article Snake Game - Video
AI Face Detection - Video
Control Flow (If, Loops, etc.) Flappy Bird Clone - Video
Promises - Video Article Wordle Clone - Video
Sortable Drag And Drop - Video
Async Await - Video Article Speed Typing Game - Video
Minesweeper Clone - Video
Fetch - Video Article Weather App - Video
Browser Storage - Video Article Text Adventure Game - Video
Hard
Event Loop
Chrome Dinosaur Game Clone - Video
Modules - Video Article Custom Select Dropdown - Video
Calculator - Video
Null Vs Undefined - Video Article Card Matching Game - Video
Recursion - Video Article Advanced Todo List - Video
Toast Notification Library - Video
Bundlers - Parcel Video 2048 Clone - Video
Array Methods - Video Advanced Video
Template Literals - Video Advanced Video Article
Destructoring/Spread Operator - Video Article
Frontend Framework - (Choose Any)
React (Recommended) - Course
Astro (Second Recomendation)
Svelte (Growing Popularity)
Angular (Declining Popularity)
Vue (Declining Popularity)

React - Course
Component Model - Video
JSX
Projects
Props - Video
Easy
Image Slider - Video
State - Video Article Todo List - Video
Currency Converter - Video
Events
Photoshop Clone - Video
useEffect - Video Article Calculator - Video
Navbar - Video
StrictMode - Video Hangman Clone - Video
Lists/Conditional Rendering Medium
Fragments - Video Custom Select Component - Video
Pokemon App - Video
Refs - Video Article CodePen Clone - Video
Infinite Scrolling - Video
useMemo - Video Article Advanced Note Taking App - Video
useCallback - Video Article Multistep Form - Video
Budget App - Video
Custom Hooks - Video Article Google Docs Clone - Video
Shopping Cart - Video
useReducer - Video Article
Spotify Clone - Video
Context - Video Article Hard
Routing - Video Article Flashcard Quiz App - Video
Facebook Messenger Clone - Video
Portal - Video Article YouTube Home Page Clone - Video
Reddit Clone - Video
useLayoutEffect - Video Article
Suspense
Best Practices - Video 1 Video 2 Video 3 Video 4 Video 5 Article 1 Article 2 Article 3 Article 4
Meta Framework - (Optional) (Choose Any)
React
Next.js (Recommended) Course
Astro (Second Recommendation)
Remix
Astro
Astro (Recommended)
Svelte
SvelteKit (Recommended)
Angular
Analog (Recommended)
Vue
Nuxt.js (Recommended)

Next.js - Course
App Router
Folder Based Routing
P rojects
Metadata/SEO App Router
Server vs Client Components - Article Todo List - Video

Data Fetching Pages Directory

Loading/Error Pages Twitter Clone - Video

Dynamic Routes
Data Cache/Request Memoization/Full Route Cache/Router Cache - Article
Dynamic vs Static Pages
Dynamic Functions
Server Actions - Video
useOptimistic/useFormState/useFormStatus
Parallel Routes/Intercepting Routes - Parallel Routes Video
Route Handlers

Pages Directory
Page Based Routing
CSR vs SSR vs SSG vs ISR - Video
getServerSideProps/getStaticProps/getStaticPaths/getInitialProps
API Routes
TypeScript - Course

TSConfig

Type Inference

Array Type Projects

Any/Unknown Type - Video Easy
Image Slider - Video
Type vs Interfaces - Video
Todo L ist - Video

Functions Typing E ff
ect Animation - Video

H angman Clone - Video

Medium
Unions/Intersections

readonly/keyof/typeof
Custom Select Component - Video

Advanced Note Taking App - Video

As Const/Enums
M ultistep Form - Video

Tuples Shopping Cart - Video

Generics - Video Hard

Face b ook M essenger Clone - Video
Built In Types (Pick, Omit, etc.)
Y ouTu b H
e ome Page Clone - Video

Type Guards Twitter Clone - Video

Satisfies

Discriminated Union - Video

Function Overloads

Type Predicate - Video

Declaration Files

Other Important Topics

Version Control (Learn As Soon As Possible) - Video Advanced Video Advanced Article

JSON (Learn Alongside JavaScript) - Video

Regular Expressions (Optional) - Video

How To Deploy

Basic Security - C ross Site Scripting Video C ross Site Scripting Article

Testing - Video Test D riven D evelop m ent Video Vitest Video

 2024 Frontend Roadmap
By Web Dev Simplified https://courses.webdevsimplified.com
Each section, and all the items listed in each section, of this roadmap
are listed in the order that you should learn them.

Each section also includes projects that you can complete in any order
that require only the skills learned in that section and the sections prior.

HTML
Basics - Playlist
Forms - Video
Emmet - Video

CSS - Course
Selectors - Video Article Cheat Sheet
Inheritance - Video Article Projects
Specificity - Video Article Easy
Box Model - Video Article Transparent Login Form - Video
Position - Video Article
Animated Cards - Video
Medium
Display - Video CSS Only Tooltips - Video
Flexbox - Video Article CSS Emoji Art - Video
Advanced Hover Effects - Video
Grid - Video Advanced Text Animation - Video
Calc - Video Article CSS Image Hover Effect - Video
Custom Accessible Toggle Switches - Video
Pseudo Elements - Video Article 3D Flip Button - Video
Animated Loading Spinner - Video
Pseudo Classes Animated Hamburger Menu - Video
Custom Properties - Video Article Hard
Logical Properties - Article YouTube Clone - Video
CSS Battles - Video 1 Video 2 Video 3 Video 4 Video 5
Media Queries - Video Price Comparison Table - Video
Vertical Timeline - Video
Container Queries - Video
Animation - Basic Video Advanced Video Transform Article Fill Mode Article
JavaScript - Course
Async vs Defer Script Loading - Video Article
Var vs Let vs Const - Video Article
Projects
Function Basics - Video
Easy
Callbacks - Video Article Form Validation - Video
Arrow Functions - Video Article Light/Dark Theme Toggle - Video
Google Maps Clone - Video
Hoisting - Video Article Impossible To Click Button - Video
Scoping - Article Simple Tabs - Video
Rock Paper Scissors Game - Video
Closures - Video Text To Speech - Video
Expandable Content - Article
Strict Equality - Video Article Modal - Video
Objects/Arrays - Array Video Medium
Reference Vs Value - Video Article Pong Clone - Video
Password Strength Tester - Video
DOM Traversal - Video Password Generator - Video
Quiz App - Video
DOM Manipulation - Video Postman Clone - Video
Event Listeners - Video Article Snake Game - Video
AI Face Detection - Video
Control Flow (If, Loops, etc.) Flappy Bird Clone - Video
Promises - Video Article W ordle Clone - Video
Sortable Drag And Drop - Video
Async Await - Video Article Speed Typing Game - Video
M inesweeper Clone - Video
Fetch - Video Article W heat er App - Video
Browser Storage - Video Article Text Adventure Game - Video
Event Loop
Hard
h D G
C rome inosaur ame Clone - Video
Modules - Video Article Custom Select Dropdown - Video
Calculator - Video
Null Vs Undefined - Video Article Card Matching Game - Video
Recursion - Video Article Advanced Todo List - Video
N fi
Toast oti cation Library - Video
Bundlers - Parcel Video 2048 Clone - Video
Array Methods - Video Advanced Video
Template Literals - Video Advanced Video Article
Destructoring/Spread Operator - Video Article
Frontend Framework - (Choose Any)
React (Recommended) - Course
Astro (Second Recomendation)
Svelte (Growing Popularity)
Angular (Declining Popularity)
Vue (Declining Popularity)

React - Course
Component Model - Video
JSX Projects
Props - Video Easy
Image Slider - Video
State - Video Article Todo List - Video
Events Currency Converter - Video
Photoshop Clone - Video
useEffect - Video Article Calculator - Video
Navbar - Video
StrictMode - Video Hangman Clone- Video
Lists/Conditional Rendering Medium
Fragments - Video Custom Select Component - Video
Pokemon App - Video
Refs - Video Article CodePen Clone - Video
Infinite Scrolling - Video
useMemo - Video Article Advanced Note Taking App - Video
useCallback - Video Article Multistep Form - Video
Budget App - Video
Custom Hooks - Video Article Google Docs Clone - Video
useReducer - Video Article Shopping Cart - Video
Spotify Clone- Video
Context - Video Article Hard
Routing - Video Article Flashcard Quiz App - Video
Facebook Messenger Clone - Video
Portal - Video Article YouTube Home Page Clone - Video
useLayoutEffect - Video Article Reddit Clone - Video
Suspense
Best Practices - Video 1 Video 2 Video 3 Video 4 Video 5 Article 1 Article 2 Article 3 Article 4
Meta Framework - (Optional) (Choose Any)
React
Next.js (Recommended) Course
Astro (Second Recommendation)
Remix
Astro
Astro (Recommended)
Svelte
SvelteKit (Recommended)
Angular
Analog (Recommended)
Vue
Nuxt.js (Recommended)

Next.js - Course
App Router
Projects
Folder Based Routing
Metadata/SEO App Router
Server vs Client Components - Article Todo List - Video

Data Fetching Pages Directory

Loading/Error Pages Twitter Clone - Video

Dynamic Routes
Data Cache/Request Memoization/Full Route Cache/Router Cache - Article
Dynamic vs Static Pages
Dynamic Functions
Server Actions - Video
useOptimistic/useFormState/useFormStatus
Parallel Routes/Intercepting Routes - Parallel Routes Video
Route Handlers

Pages Directory
Page Based Routing
CSR vs SSR vs SSG vs ISR - Video
getServerSideProps/getStaticProps/getStaticPaths/getInitialProps
API Routes
TypeScript - Course

TSConfig

Projects
Type Inference

Array Type

Any/Unknown Type - Video Easy

Image Slider - Video

L
Type vs Interfaces - Video
Todo ist - Video

Functions Typing E ff
ect Animation - Video

H angman Clone - Video

Medium
Unions/Intersections

readonly/keyof/typeof
Custom Select Component - Video

Advanced N ote Taking App - Video

M
As Const/Enums
ultistep Form - Video

Tuples Sh opping Cart - Video

Generics - Video Hard

Face b ook M essenger Clone - Video
Built In Types (Pick, Omit, etc.)
Y ouTu b H
e ome Page Clone - Video

Type Guards Twitter Clone - Video

Satisfies

Discriminated Union - Video

Function Overloads

Type Predicate - Video

Declaration Files

Other Important Topics

Version Control (Learn As Soon As Possible) - Video Advanced Video Advanced Article

JSON (Learn Alongside JavaScript) - Video

Regular Expressions ( O ptional) - Video

Hw
o To D eploy
Basic Securit y C - ross Site Scripting Video C ross Site Scripting Article

Testing - Video Ts D
e t riven D pm
evelo s
ent Video Vite t Video