Step 1 • Internet & Web
How the Internet Works beginner Understand how packets travel across networks, what IP addresses and TCP/IP are, how routers direct traffic, and why latency matters for web apps. This mental model shapes every performance and debugging decision you'll make.
4h
Step 2 • Internet & Web
HTTP and HTTPS beginner Learn the HTTP request-response cycle in depth — methods (GET, POST, PUT, DELETE, PATCH), status codes, headers, cookies, caching directives, and how HTTPS uses TLS to encrypt the connection. This underpins every network call your app makes.
6h
Step 3 • Internet & Web
DNS, Domain Names, and Browsers beginner Understand how domain names resolve to IPs via recursive DNS, how browsers parse and render pages (parsing HTML, building the DOM and CSSOM, layout, paint, composite), and what happens from the moment you press Enter.
4h
Step 4 • HTML
HTML Document Structure beginner Learn the anatomy of an HTML document — DOCTYPE, html/head/body, character encoding, viewport meta tag, resource hints (preload, prefetch), and the distinction between block and inline elements. Bad structure causes cascading layout and accessibility problems.
5h
Step 5 • HTML
Semantic HTML beginner Use landmark elements (header, nav, main, aside, footer), sectioning elements (article, section), content semantics (figure, figcaption, time, address, mark, abbr), and understand when div and span are appropriate and when they aren't.
5h
Step 6 • HTML
HTML Forms and Inputs beginner Build forms with fieldsets, legends, labels, all input types (text, email, number, date, range, file, radio, checkbox), validation attributes (required, pattern, minlength, min/max), and autofill semantics. Understand form submission, multipart encoding, and when to use GET vs POST.
6h
Step 7 • HTML
SEO Basics and Meta Tags beginner Add title, description, canonical, Open Graph, Twitter Card, JSON-LD structured data (Article, Product, BreadcrumbList), and robots meta tags. Understand what Google indexes, how social sharing previews work, and why canonical URLs prevent duplicate content penalties.
4h
Step 8 • CSS
CSS Selectors, Cascade, and Specificity beginner Master selector types (type, class, ID, attribute, pseudo-class like :hover/:focus/:nth-child, pseudo-element like ::before/::after), specificity calculation (0-0-1 vs 0-1-0 vs 1-0-0), the cascade algorithm, and CSS inheritance. Understanding specificity prevents 90% of "why isn't my style applying?" bugs.
5h
Step 9 • CSS
Box Model and Display Types beginner Understand content, padding, border, margin, the difference between box-sizing: content-box and border-box, and how display values (block, inline, inline-block, none, contents) affect layout flow. Also covers margin collapse, overflow, and visibility.
5h
Control one-dimensional layouts with Flexbox — flex containers, flex items, flex-direction, justify-content, align-items, align-self, flex-wrap, the flex shorthand (flex-grow, flex-shrink, flex-basis), and order. Know when Flexbox is the right tool vs Grid.
6h
Build two-dimensional layouts with CSS Grid — grid-template-columns/rows, fr units, repeat(), minmax(), auto-fill/auto-fit, grid-area, named template areas, and gap. Understand when Grid beats Flexbox and how to combine them.
7h
Step 12 • CSS
Responsive Design and Media Queries intermediate Apply mobile-first methodology with media queries (min-width breakpoints), viewport units (vw, vh, svh, dvh), relative units (em, rem, %), fluid typography using clamp(), and container queries for component-level responsiveness. Covers the difference between intrinsic and extrinsic sizing.
7h
Step 13 • CSS
CSS Custom Properties and Theming intermediate Define design tokens with CSS custom properties (variables), scope them to components or :root, create light/dark themes using prefers-color-scheme and data attributes, and understand the difference between CSS variables and preprocessor variables.
4h
Step 14 • CSS
CSS Transitions and Animations intermediate Animate UI with CSS transitions (transition property, timing functions, delays), keyframe animations (@keyframes, animation shorthand, fill-mode, iteration-count), and the Web Animations API. Understand GPU-accelerated properties (transform, opacity) vs expensive ones (width, height). Always respect prefers-reduced-motion.
5h
Step 15 • JavaScript
JavaScript Syntax and Data Types beginner Learn the fundamentals — variables (var/let/const), primitive types (string, number, boolean, null, undefined, symbol, bigint), type coercion, truthy/falsy values, template literals, destructuring (arrays and objects), spread/rest operators, optional chaining (?.), and nullish coalescing (??).
8h
Step 16 • JavaScript
DOM Manipulation beginner Query and modify the DOM — querySelector, querySelectorAll (static vs live), createElement, appendChild, insertBefore, removeChild, innerHTML (and when it's dangerous), textContent, dataset, classList, style, and getAttribute/setAttribute. Understand the DOM tree, node types, and document fragments for batched updates.
7h
Step 17 • JavaScript
Events and Event Handling beginner Add interactivity with addEventListener, understand event bubbling and capturing, event delegation for dynamic lists, custom events (CustomEvent), pointer events, keyboard events, and how to use stopPropagation/preventDefault correctly. Learn common event anti-patterns that cause memory leaks.
6h
Step 18 • JavaScript
Asynchronous JavaScript intermediate Understand the event loop, call stack, task queue, and microtask queue. Master Promises (then/catch/finally), async/await, parallel execution (Promise.all, Promise.allSettled, Promise.race), and proper async error handling. Understand why you can't use await outside async functions and how async changes execution order.
8h
Step 19 • JavaScript
Fetch API and Network Requests intermediate Make HTTP requests with the Fetch API — GET, POST, PUT, DELETE, setting headers and body, handling JSON responses, managing loading/error states, using AbortController to cancel stale requests, and understanding CORS (why it errors, how to fix it). Also covers debouncing and throttling network calls.
6h
Step 20 • JavaScript
Browser Storage and Web APIs intermediate Choose the right storage mechanism — localStorage (persistent, synchronous, ~5MB), sessionStorage (tab-scoped), cookies (sent with requests, HttpOnly/Secure flags), and IndexedDB (async, large structured data). Understand storage quotas, security implications (XSS-accessible vs HttpOnly), and the StorageManager API.
4h
Step 21 • Tools
Version Control with Git beginner Track changes and collaborate with Git — init, add, commit, push, pull, branch, merge, rebase, cherry-pick, conflict resolution, .gitignore, and pull request workflows. Understand git history, good commit message conventions (Conventional Commits), and how to use git bisect to debug regressions.
8h
Step 22 • Tools
Package Managers and npm beginner Install, update, and remove dependencies with npm, yarn, or pnpm. Understand package.json fields (name, version, scripts, dependencies vs devDependencies, engines), lock files, semantic versioning (^, ~, exact), npm scripts, and how to audit and fix security vulnerabilities.
4h
Step 23 • Tools
Build Tools and Module Bundlers intermediate Understand module bundling, tree-shaking, code splitting, source maps, and hot module replacement. Configure Vite (fast HMR, native ESM in dev) or Webpack for a project. Understand how bundlers transform TypeScript, JSX, and CSS, and how to analyze bundle size to find bloat.
6h
Step 24 • Tools
TypeScript Fundamentals intermediate Add static types to JavaScript with TypeScript — type annotations, interfaces vs type aliases, union and intersection types, literal types, generics, utility types (Partial, Required, Pick, Omit, Record), type narrowing (typeof, instanceof, discriminated unions), and key tsconfig options (strict, paths, target, module).
10h
Step 25 • CSS Frameworks
Tailwind CSS intermediate Style applications with Tailwind's utility-first approach — responsive prefixes (sm/md/lg/xl), state variants (hover, focus, active, dark, group-hover, peer), arbitrary values, the @layer directive for custom utilities, and configuring tailwind.config.js for custom design tokens (colors, fonts, spacing, shadows).
7h
Step 26 • CSS Frameworks
Accessible Component Libraries intermediate Use unstyled, accessible component libraries (Radix UI, shadcn/ui, Headless UI) to build dialogs, dropdowns, tooltips, and popovers that handle ARIA, keyboard navigation, and focus management correctly. Understand when to use a primitive vs build from scratch.
6h
Step 27 • Frameworks
React Fundamentals intermediate Learn React's core model — JSX, functional components, props, useState for local state, useEffect for side effects and cleanup, event handling, conditional rendering, rendering lists with keys, lifting state up, and the reconciliation algorithm. Understand why React re-renders and how to think declaratively.
12h
Step 28 • Frameworks
State Management Patterns intermediate Know when to use local state (useState), derived state, lifted state, useReducer for complex transitions, Context for shared state, Zustand for cross-component client state, and TanStack Query for async server state. Understand why you should not put server data in client state stores.
10h
Step 29 • Frameworks
Client-Side Routing intermediate Implement SPA routing with React Router — nested routes, dynamic segments, layout routes, protected/auth routes, URL search parameters for filter state, programmatic navigation, and scroll restoration. Understand the tradeoff between client-side routing and server rendering.
6h
Step 30 • Testing
Unit and Component Testing intermediate Write unit tests for business logic with Vitest and component tests with React Testing Library. Test from the user's perspective (queries by role/label/text), use userEvent for interactions, mock network calls with MSW, and measure branch coverage. Avoid testing implementation details.
8h
Step 31 • Testing
End-to-End Testing intermediate Write browser automation tests with Playwright — page object models, fixture setup, network request interception, authentication shortcuts, visual regression snapshots, and parallel test execution. Cover critical user journeys: signup, checkout, data mutations.
8h
Step 32 • Performance
Web Performance and Core Web Vitals advanced Measure and optimize LCP (Largest Contentful Paint), CLS (Cumulative Layout Shift), INP (Interaction to Next Paint), TTFB, and FCP. Optimize images (format, size, lazy loading, srcset), fonts (font-display, preload), JavaScript bundles (code splitting, dynamic import()), and the critical rendering path. Use Lighthouse, WebPageTest, and Chrome DevTools.
10h
Step 33 • Performance
Web Accessibility (WCAG) intermediate Meet WCAG 2.1 AA standards — semantic HTML, ARIA roles/properties/states (and when to avoid ARIA), keyboard navigation, logical focus order, focus trapping in modals, color contrast (4.5:1 for normal text), text alternatives for images, captions for video, and screen reader testing with NVDA/VoiceOver.
8h
Step 34 • Ship It
Frontend Security advanced Prevent the most common frontend vulnerabilities — XSS (stored, reflected, DOM-based), CSRF, clickjacking, and supply chain attacks (npm audit, lock files, SRI hashes). Implement a Content Security Policy (CSP) header, understand same-origin policy and CORS, and use Subresource Integrity for third-party scripts.
7h
Step 35 • Ship It
CI/CD and Deployment intermediate Set up GitHub Actions workflows for lint, test, type-check, and build on every PR. Deploy to Vercel, Netlify, or Cloudflare Pages with preview deployments per PR, environment variables for staging vs production, and rollback strategies. Understand cache headers for static assets and CDN edge configuration.
7h
