Frontend Engineering

A comprehensive, zero-to-architect curriculum that takes you from writing your first HTML tag to designing systems at FAANG scale. Covers the full spectrum: semantic markup, styling systems, JavaScript from fundamentals to V8 internals, browser rendering, React architecture, TypeScript mastery, performance engineering, testing, security, accessibility, and frontend system design.

beginner-to-expert38 modules391 topics~350h

View Learning Roadmap

Foundations

3 modules

HTML Foundations

The structural layer of the web. Semantic markup, document structure, forms, media, and the DOM -- the foundat...

The DOM and Browser APIs

How JavaScript interacts with the page. DOM traversal, manipulation, event handling, and the essential browser...

How the Web Works

The infrastructure under every page load. DNS, TCP, TLS, HTTP versions, CDNs, and browser architecture -- the ...

Styling & Design

3 modules

CSS Foundations

Visual styling from first principles. Selectors, the box model, color, typography, and the cascade algorithm t...

CSS Layout Systems

Modern layout techniques that power every production UI. Flexbox for one-dimensional flow, Grid for two-dimens...

CSS Architecture and Performance

Scaling CSS across teams and large codebases. The cascade deep dive, architecture methodologies, CSS-in-JS tra...

Language & Runtime

8 modules

JavaScript Fundamentals

The language itself, from variables and control flow through functions, arrays, objects, and error handling. T...

JavaScript Deep Dive

The language internals that FAANG tests cold. Types, coercion, the prototype chain, scope, closures, this-bind...

Event Loop and Async Execution Model

How JavaScript actually executes code. The call stack, task queues, microtask queue, rendering pipeline integr...

Async Patterns in Production

Production-grade async patterns beyond the basics. Error handling, concurrency control, streaming, and the pat...

V8 Engine Internals

How JavaScript actually runs at the engine level. Hidden classes, inline caches, JIT compilation tiers, specul...

Memory Management and Garbage Collection

Stack vs heap, how garbage collection actually works, generational GC in V8, memory leak patterns and detectio...

TypeScript Essentials

Type safety for production codebases. Structural typing, interfaces, unions, generics, utility types, and conf...

Advanced TypeScript

Staff-engineer-level type system mastery. Recursive types, variance, template literal types, declaration files...

Performance & Rendering

3 modules

Browser Rendering Pipeline

From HTML bytes to pixels on screen. The critical rendering path, layout, paint, compositing, and exactly what...

Performance Engineering

Where senior engineers separate from the rest. Core Web Vitals, the RAIL model, JavaScript parse cost, network...

Memory Profiling and Debugging

Diagnosing memory leaks and performance problems in production. Heap snapshots, allocation timelines, flame ch...

Frameworks & Libraries

7 modules

React Core Concepts

How React actually works, not just its API. JSX compilation, the component model, props, state, synthetic even...

React Hooks Deep Dive

Hooks internals and production patterns. How hooks are stored, the stale closure problem, when to memoize, and...

React Fiber and Reconciliation

The engine room of React. Fiber architecture, the work loop, concurrent rendering, the reconciliation algorith...

React Rendering Performance

Making React fast in production. What triggers re-renders, how to prevent wasted work, state colocation, compo...

State Management Architecture

Choosing the right state tool for the right job. Server state with TanStack Query, client state with Zustand, ...

Server-Side Rendering and Hydration

The full rendering strategy spectrum. CSR, SSR, SSG, ISR, streaming SSR, React Server Components, and the hydr...

Signals and Modern Reactivity

The paradigm shift happening right now. Signals, fine-grained reactivity, and how frameworks like Solid, Vue 3...

Platform & APIs

4 modules

JavaScript Module Systems

ESM vs CommonJS, the incompatibility that causes constant production issues, dual packages, import maps, and t...

Build Tools and Bundlers

The machinery that transforms source code into production assets. Webpack, Vite, Rollup, esbuild, SWC, Turbopa...

CI/CD and Production Observability

Shipping and monitoring frontend applications. GitHub Actions, preview deployments, feature flags, progressive...

Web Platform APIs

Advanced browser capabilities. Web Workers, Service Workers, offline architecture, IndexedDB, Canvas, WebGL, W...

Quality & Security

4 modules

Testing Strategy

Tests that give genuine confidence. Testing philosophy, the testing trophy, unit tests with Vitest, component ...

Accessibility Engineering

Accessibility as a quality dimension, not an afterthought. WCAG, the accessibility tree, semantic HTML, ARIA, ...

Frontend Security

The browser is a hostile environment. Same-origin policy, CORS, CSP, XSS prevention, CSRF, prototype pollution...

Interview Engineering

Technical preparation for FAANG frontend interviews. JavaScript implementation challenges, building promises f...

Architecture & System Design

6 modules

Component Architecture at Scale

Designing component APIs that scale across teams. Atomic design, headless components, compound components, pol...

Design System Engineering

Building the component infrastructure that entire organizations depend on. Token architecture, component libra...

Large-Scale Frontend Architecture

Architect-level thinking. Architecture principles, folder structure, dependency inversion, monorepos, micro-fr...

Real-Time and Collaborative Systems

Building systems where multiple users interact simultaneously. WebSocket patterns, Server-Sent Events, CRDTs, ...

AI and LLM Integration for Frontend

The patterns every FAANG team is building right now. Streaming AI responses, token-by-token rendering, convers...

Frontend System Design

The ultimate test at staff+ level. The RADIO framework, requirements analysis, rendering strategy selection, d...