Professional Documents
Culture Documents
2024 Frontend Roadmap - Dark
2024 Frontend Roadmap - Dark
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
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
Functions Typing E ff
ect Animation - Video
Medium
Unions/Intersections
readonly/keyof/typeof
Custom Select Component - Video
Satisfies
Function Overloads
Declaration Files
Version Control (Learn As Soon As Possible) - Video Advanced Video Advanced Article
How To Deploy
Basic Security - C ross Site Scripting Video C ross Site Scripting Article