Beginner
From Beginner to Expert in Fundamentals of Frontend
This roadmap takes you from zero to "Production-Ready." Understand how the Internet works, how AI integrates with development, and how to prevent expensive production failures.
7 modules109 lessons40h estimated
HTMLCSSJavaScriptWeb ArchitectureFrontend2026
Web Theory & Architecture
Understanding the "Why" before the "How." Learn how the internet, browsers, and networking actually work.
120 min- 1How the Web Works30m
- 2Browsers: The Engines30m
- 3Networking & Latency30m
- 4HTTPS & TLS Handshake20m
- 5CDNs & Edge Computing18m
- 6WebSockets & WebRTC22m
- 7RESTful Architecture20m
- 8GraphQL Architecture20m
- 9CORS (Cross-Origin Resource Sharing)18m
- 10Load Balancing15m
- 11Critical Rendering Path Deep Dive25m
- 12DOM vs. CSSOM Construction18m
- 13The Rendering Engine: Layout, Paint, Compositing20m
- 14JavaScript Engine: V8 Internals22m
- 15The Event Loop: Macro vs. Micro Tasks22m
- 16Garbage Collection15m
- 17Browser Storage Architecture18m
- 18Service Workers & PWAs20m
- 19Web Workers: Multi-Threading15m
HTML: The Semantic Skeleton
HTML is no longer just "tags"; it is the API for Screen Readers and SEO.
90 min- 1Semantic HTML25m
- 2Accessibility (a11y)25m
- 3Forms & Validation20m
- 4Document Metadata & The <head>15m
- 5The Document Object Model (DOM)18m
- 6Character Encoding & Entities10m
- 7Data Attributes & Custom Data10m
- 8Template, Slot & Web Components20m
- 9Responsive Images: Picture, Source & srcset15m
- 10Loading Strategies & Resource Hints15m
- 11The Native Dialog Element12m
- 12Audio, Video & Media APIs15m
- 13SVG Integration & Canvas Basics18m
- 14Advanced Input Types & Datalist12m
- 15Details, Summary, Progress & Meter10m
- 16Global Attributes & Iframe Security12m
- 17Microdata, Schema.org & Structured Data15m
- 18Open Graph & Social Meta Tags10m
- 19Security Headers & CSP in HTML15m
- 20Link Relations & Canonical Tags10m
CSS: Styling & Modern Layouts
In 2026, CSS can handle what JavaScript used to do.
120 min- 1The Box Model20m
- 2Specificity & The Cascade18m
- 3CSS Units Deep Dive15m
- 4Stacking Contexts & Z-Index15m
- 5Flexbox Mastery22m
- 6CSS Grid Mastery22m
- 7Centering, Subgrid & Container Queries18m
- 8CSS Custom Properties & Variables16m
- 9Selectors: :has(), Pseudo-classes & Pseudo-elements18m
- 10Responsive Functions: calc(), clamp(), min(), max()14m
- 11Media Queries & Mobile-First Design16m
- 12Transitions & Animations20m
- 13Transforms, Filters & Clipping16m
- 14CSS Methodologies: BEM, CSS-in-JS & Tailwind18m
- 15Typography, Color Spaces & Dark Mode16m
- 16CSS Performance & Optimization22m
- 17CSS Interview Questions — Part 120m
- 18CSS Interview Questions — Part 220m
JavaScript: The Logic Engine
Theory is the difference between a "coder" and an "engineer."
180 min- 1Scope & Closures30m
- 2Asynchronous JavaScript35m
- 3DOM Manipulation25m
- 4ES6+ to 202625m
- 5Execution Context & Call Stack20m
- 6Hoisting: var, let, const & Functions18m
- 7Data Types & Type Coercion20m
- 8Prototypes & the this Keyword22m
- 9The Event Loop Deep Dive25m
- 10Higher-Order Functions, Currying & Functional Patterns20m
- 11Callbacks, Promises & Async/Await25m
- 12Event Delegation & DOM Optimization18m
- 13Destructuring, Spread/Rest & Modern Syntax18m
- 14ES Modules & the Fetch API18m
- 15Memory Management & Garbage Collection20m
- 16Debouncing, Throttling & Performance Patterns18m
- 17Design Patterns in JavaScript22m
- 18Proxies, Reflect & Symbols18m
- 19JavaScript Optimizations & Best Practices25m
- 20JavaScript Interview Questions (30 MCQs)30m
JavaScript Hands-on Assignment
Build a Real-time Stock/Crypto Tracker with production-grade constraints.
240 minThe "Expert" 10-Project Portfolio
Each project must be tested with Jest (Unit) and Playwright (E2E) and deployed.
600 min30 Pro-Level Frontend Projects
Build 30 medium-to-advanced projects covering performance dashboards, accessibility, Canvas/WebAudio APIs, PWAs, real-time data, and deployment strategies. Each project is designed to showcase architectural thinking and production-grade coding.
1200 min- 1Project 1: The Performance-First Dashboard60m
- 2Project 2: Accessible Video Player50m
- 3Project 3: Markdown Blog Engine50m
- 4Project 4: Browser-Based Code Editor55m
- 5Project 5: Multi-Tab Whiteboard50m
- 6Project 6: Infinite Scroll Image Gallery45m
- 7Project 7: Recipe Optimizer & Converter40m
- 8Project 8: Budget Tracker with Charts45m
- 9Project 9: Typing Speed Test40m
- 10Project 10: Weather App with Time-Travel45m
- 11Project 11: CSS Grid Layout Builder40m
- 12Project 12: Password Vault (Frontend Only)40m
- 13Project 13: Kanban Board (Trello Clone)45m
- 14Project 14: Quiz App with Leaderboard35m
- 15Project 15: Habit Tracker (GitHub Style)40m
- 16Project 16: E-commerce Product Page40m
- 17Project 17: Unit Converter (Expert Mode)35m
- 18Project 18: Music Visualizer45m
- 19Project 19: Flashcard Learning App40m
- 20Project 20: Custom Form Validator40m
- 21Project 21: Virtual Terminal40m
- 22Project 22: Pomodoro Timer (Focus Pro)35m
- 23Project 23: SVG Path Editor45m
- 24Project 24: Movie Database Matchmaker40m
- 25Project 25: Interactive Resume / Portfolio35m
- 26Project 26: Recipe Scraper UI30m
- 27Project 27: Crypto Tracker (Real-Time)45m
- 28Project 28: Find My Pet (PWA)45m
- 29Project 29: Markdown-to-Slide Tool40m
- 30Project 30: Browser Health Dashboard35m