Phase 1 — The Trinity (Languages & Browser)
Internet
How the internet works
HTTP & Status Codes
Domain Names
Hosting
DNS
Browsers & Rendering Pipeline
HTML
HTML5 Semantics
Forms & Constraint Validation
Conventions & Best Practices
Accessibility (WCAG 2.2 + ARIA)
SEO Basics
Web Components & DOM Tree
CSS
Selectors, Box Model & Variables
Flexbox, Grid & Container Queries
Responsive Design & Fluid Type
Modern CSS (@layer, Nesting, Logical)
Animations & Web Animations API
JavaScript
ES6+ Syntax & Constructs
DOM Manipulation
Fetch API / Network
Event Loop, Promises, async/await
Closures, this, Prototypes, Classes
Modules (ESM) & Memory Management
Phase 2 — Logic & Engineering (TypeScript & Frameworks)
TypeScript
TS Basics (Interfaces, Types, Enums)
Generics, Utility Types, Type Guards
Pick a Framework
React
Vue.js
Svelte
Angular
Solid JS
Qwik
Framework Mastery
Internals (vDOM, Signals, Runes)
State Management (Local & Global)
Server State & Forms (TanStack, Zod)
Hooks, Composables & Lifecycle
Routing (Nested, Parallel)
Context & Component Patterns
Server Side Rendering
Next.js
Nuxt.js
Remix
Hydration, RSC & Resumability
Phase 3 — The Build System & Environment
Version Control Systems
Git
VCS Hosting
GitHub
GitLab
Bitbucket
Package Managers
npm
pnpm
yarn / bun
Build Tools
Vite
Webpack
esbuild
Transpilers (Babel, SWC, Turbopack)
Prettier
ESLint / Biome
Dev Environment
Environment Variables
Monorepos (Turborepo, Nx)
CI/CD (Actions, Vercel, Federation)
Phase 4 — Performance & Optimization (Senior Tier)
Performance
Core Web Vitals (LCP, CLS, INP)
Code Split, Tree Shake, Critical CSS
Image & Font Mastery
Rendering Perf, Debounce, Throttle
Web Workers & WebAssembly
Caching Strategies & Service Workers
Phase 5 — Security & Data
Web Security
XSS, CSRF & CSP
HTTPS/TLS & CORS
Authentication
JWT
OAuth
Session + Cookie
Basic Authentication
Data & Real-time
Storage APIs (Local, Cookies, IndexedDB)
WebSockets & SSE
GraphQL
Apollo Client
Relay Modern
Phase 6 — Testing & Quality
Testing your Apps
Vitest
Jest
React Testing Library
Playwright (E2E)
Cypress
Visual Regression, Snapshot, MSW
Phase 7 — UI/UX & Design Systems
Design Systems
Tokens, Typography & Color (APCA)
Headless UI (Radix, shadcn/ui)
Framer Motion
GSAP + ScrollTrigger
Storybook
Phase 8 — Modern & Emerging Tech (2026)
Progressive Web Apps
Service Workers
Offline + Web Storage
Modern Web
AI Integration & Generative UI
SVG, Canvas, WebGPU/WebGL
Dark Mode & color-scheme
Mobile Applications
React Native
Flutter
Ionic
Desktop Applications
Electron
Tauri
Phase 9 — Soft Skills & Architecture
Engineering Craft
Code Reviews & Agile
Docs, JSDoc & Tech Debt
Design-to-Code (Figma)
Git Mastery (rebase, bisect)
Phase 10 — Mastery Checkpoints
Production-Ready
DevTools Debugging Mastery
Sentry, Analytics, Feature Flags
i18n, RTL & TC39 Watch
Keep Learning. Keep Shipping.