Frontend
System Design

10 sections · 63topics · from box model to system architecture

01

Core Fundamentals

Box model, positioning, rendering pipeline, and the event loop — the bedrock of every pixel on screen

Box ModelreadPositioning SystemsoonFormatting ContextsoonStacking ContextsoonRendering Cycle & ReflowsoonComposition LayerssoonGPU AccelerationsoonEvent Loop & Task QueuessoonMicrotasks & Promise Schedulingsoon
0/9
02

DOM API

Querying, traversing, and mutating the document efficiently

API RefreshersoonQuerying Methods ComparisonsoonOptimizing Query Performancesoon</> Coding Assignment #1soon
0/4
03

Web APIs for Complex UI

Observer APIs and browser primitives that power advanced UI patterns

Observer API OverviewsoonIntersection Observersoon</> Coding Assignment #2soonMutation Observersoon</> Coding Assignment #3soonResize Observersoon</> Coding Assignment #4soon
0/7
04

Virtualisation

Rendering thousands of elements without melting the browser

0/5
05

Application State Design

Search, storage, and memory strategies for client-side data

Search / Access OptimizationsoonBrowser Storage API OverviewsoonMemory Offloadingsoon
0/3
06

Network

Browser networking, protocols, and real-time communication

Introduction to Browser NetworkingsoonProtocols OverviewsoonLong-polling / WebSockets / SSEsoonREST / GraphQLsoon
0/4
07

Web Application Performance

Optimizing JavaScript, CSS, images, bundles, and Core Web Vitals

0/7
08

Rendering Strategies

CSR, SSR, SSG, ISR, streaming, and React Server Components

CSR vs SSR vs SSGsoonISR & On-Demand RevalidationsoonStreaming SSR & Selective HydrationsoonReact Server ComponentssoonEdge Renderingsoon
0/5
09

Security & Auth

XSS, CSRF, CSP, CORS, cookies, and OAuth token flows

XSS & SanitizationsoonCSRF & Same-Origin PolicysoonCSP & Security HeaderssoonCORS Deep DivesoonCookie Security & Session ManagementsoonOAuth & Token Flowssoon
0/6
10

System Design Problems

Real-world frontend design challenges combining concepts across all sections

0/13