System design, part 2 of 2
Frontend System Design, starting from how the browser works
8 lessons so far, in a path that grows module by module. How front-end systems work inside and how to design them: the browser, rendering and performance first, then state, data, security and large-scale architecture as each module is published.
The first course
Start here. More courses are planned (React and state, data and APIs, security, large-scale front ends) and will be added to this page when their lessons are published.
What you will be able to do
- Explain how a browser turns a URL into an interactive page: processes, navigation, parsing, layout, paint and compositing.
- Reason about the event loop and keep the main thread responsive.
- Set HTTP caching rules for HTML and static assets that are fast and safe.
- Choose between client, server, static and streaming rendering, and explain the trade-off.
- Measure loading and interaction with Core Web Vitals, and set a performance budget.
- Turn "make it fast" into testable front-end requirements.
The roadmap
24 modules planned, 5 with lessons published so far. A module without lessons is marked coming soon and is not linked.
Module 1 · 2 lessons published
Introduction to frontend system design
What a front-end system is, how it differs from the back end, and the requirements that shape it.
Module 2 · 1 lesson published
Web fundamentals and networking
How the browser talks to servers, and how HTTP caching decides what travels.
Module 3 · Coming soon
HTML, CSS and JavaScript architecture
Structuring markup, styles and scripts so a large interface stays maintainable.
Module 4 · 3 lessons published
Browser architecture
The processes and threads inside a browser, how a page becomes pixels, and the event loop.
Module 5 · Coming soon
React fundamentals and internals
How a component model renders, updates and reconciles.
Module 6 · Coming soon
Frontend application architecture
Folder and module structure, boundaries, and how a codebase scales with a team.
Module 7 · Coming soon
State management
Where state lives, who owns it, and the trade-offs between local, shared and server state.
Module 8 · Coming soon
API integration and data architecture
Fetching, caching, pagination, errors and consistency between the client and the API.
Module 9 · 1 lesson published
Rendering architecture
Client, server, static and streaming rendering, hydration, and choosing per page.
Module 10 · 1 lesson published
Performance engineering
Core Web Vitals, performance budgets, and the design decisions that move them.
Module 11 · Coming soon
Frontend security
The browser security model, injection, authentication in the client and the supply chain.
Module 12 · Coming soon
Micro-frontends
Splitting a front end across teams, and what it costs.
Module 13 · Coming soon
Testing
What to test at which level, and how to keep tests useful.
Module 14 · Coming soon
Design systems and accessibility
Shared components, tokens, and building for everyone from the start.
Module 15 · Coming soon
PWA and offline-first
Service workers, caching strategies and syncing when the network returns.
Module 16 · Coming soon
Real-time architecture
Polling, server-sent events, WebSockets and keeping a UI in step with the server.
Module 17 · Coming soon
Reliability and observability
Error handling, monitoring and measuring what real users experience.
Module 18 · Coming soon
Build tools and deployment
Bundling, code splitting, versioned releases and safe rollouts.
Module 19 · Coming soon
Mobile and cross-platform
Sharing code across the web and mobile apps, and where it stops paying off.
Module 20 · Coming soon
AI-powered frontend architecture
Streaming model output, long-running requests and designing interfaces for AI features.
Module 21 · Coming soon
Enterprise frontend architecture
Governance, shared platforms and front ends that many teams build together.
Module 22 · Coming soon
Advanced architectural patterns
Patterns for large and long-lived interfaces, and when each one earns its cost.
Module 23 · Coming soon
Case studies
Complete front-end designs worked end to end, such as a feed, a chat, a video player and an editor.
Module 24 · Coming soon
Architect interview and capstone
Presenting and defending a front-end design, with a project to put it all together.
Where it meets the back end
The front-end lessons link to these back-end lessons instead of repeating them. Read them alongside.
Questions
- What is front-end system design?
- It is the design of everything between a person's device and the back end: how the browser loads and renders the page, where HTML is produced, how data is fetched and cached, where state lives, how code is split and shipped, and how the result stays fast, accessible, secure and reliable.
- How is it different from back-end system design?
- The runtime is a device you do not control, on a network you cannot predict, with one main thread and users who keep old copies of your code. The back-end half of the site covers servers, data and distributed systems; the two meet at the network, and the lessons link to each other where they do.
- Who is it for?
- Developers who can read basic HTML, CSS and JavaScript and want to understand how front-end systems work inside, from a junior moving toward senior to an architect checking their model.
- Is it free?
- Yes. The first lesson of each course is open to everyone, and a free account unlocks the rest, tracks your progress and keeps your place.
- What is published, and what is next?
- The first course, Frontend System Design Foundations, is published: the browser, rendering, the event loop, HTTP caching, rendering strategies and Core Web Vitals. The roadmap below lists the modules planned after it. A module is shown as coming soon until its lessons are published, and nothing is linked before it exists.
- Do I need to know React?
- Not for the first course. It teaches the browser and the web platform that every framework runs on. React and other frameworks get their own modules later.