Frontend Architecture & Web Platform

Browser Rendering, CSS Layout, Events, Service Workers & Web Performance

8 modules, 40 lessons: Browser Architecture And Rendering; Semantic HTML5, DOM And Accessibility; Modern CSS Layout: Grid And Flexbox; CSS Architecture And Cascade Layers; Browser Events And Interaction; Modern JS Runtime And Event Loop; Client Storage And Service Workers; Browser Security And Web Performance.

Intermediate · 2 hours · 40 lessons · 40 labs

Who it is for

Intermediate level.

For developers who have written some HTML, CSS and JavaScript and want to understand the browser itself: rendering, layout, events, storage, security and speed.

What you don't need yet:

• No framework needed: no React or other libraries
• No networking background: how a page loads is explained step by step
• Nothing to install: runnable labs open in an online sandbox

What helps:

• Some HTML, CSS and JavaScript you have written yourself
• Reading TypeScript syntax

Before you start:

• Some HTML, CSS and JavaScript already written
• TypeScript syntax (the TypeScript course covers all of it)

Take first:

• Production TypeScript — Intermediate

Take next:

• React 19 & Modern Component Architecture — Intermediate
• Design Systems & Component Engineering — Advanced

Learning paths:

• Modern Web Platform & Full-Stack TypeScript

Nobody needs to know everything before they start. Each course builds on the one before, so a learning path takes you there step by step.

Labs

40 labs, 39 of them graded: you write the code, it runs, and graded labs check the result. The outline lists each lesson's labs.

What is free

Start free: First module free with an account. Pro: Every course, lab, handbook, practice exam and certificate.

• Pro monthly — $29 a month. Every course, lab, handbook, practice exam and certificate
• Pro yearly — $249 a year. Every course, lab, handbook, practice exam and certificate

Course outline

Browser Architecture And Rendering

1. How Browsers Work: Navigation, DNS, TCP, TLS And Request Timing (1 lab): You can explain and measure browser navigation, DNS resolution, TCP handshake, TLS negotiation, and time to first byte using the Performance API.
2. HTML Parsing, Tokenization And The Document Object Model (DOM) (1 lab): You can explain the byte-to-node tokenization pipeline and inspect how the browser constructs the Document Object Model.
3. CSS Parsing, The CSSOM And The Render Tree (1 lab): You can explain how CSSOM rules are parsed, combined with DOM nodes, and filtered to construct the visual Render Tree.
4. Layout, Reflow, Paint And GPU Compositing Layers (1 lab): You can identify and prevent layout thrashing and utilize GPU compositing layers for buttery 60 FPS animations.
5. Critical Rendering Path: Preload, Prefetch And Scripts (1 lab): You can optimize the Critical Rendering Path by applying defer, async, preload, and prefetch strategies to unblock the main thread.

Semantic HTML5, DOM And Accessibility

1. Semantic HTML Elements: Landmarks And Structure (1 lab): You can structure web documents using semantic landmark elements like main, nav, article, and section to provide rich assistive accessibility.
2. Accessibility Tree, ARIA Roles, States And Live Regions (1 lab): You can inspect the Accessibility Tree, model ARIA roles and states, and configure dynamic aria-live regions for assistive technologies.
3. Modern DOM Querying: querySelector, closest And matches (1 lab): You can navigate and query the DOM tree efficiently using querySelector, closest, matches, and Element traversal properties.
4. DOM Manipulation: DocumentFragment And HTML Templates (1 lab): You can batch DOM insertions with DocumentFragment and instantiate inert markup blueprints using HTML template and cloneNode.
5. MutationObserver: Reactive DOM Watching Without Polling (1 lab): You can observe DOM mutations asynchronously using MutationObserver to react to dynamic node additions and attribute changes.

Modern CSS Layout: Grid And Flexbox

1. Modern Box Model, Box Sizing, Display Types And Flow Layout (1 lab): You can calculate box geometry across content-box and border-box sizing and manage margin collapsing and formatting contexts.
2. Deep Flexbox: Flex Grow, Shrink, Basis And Alignment Physics (1 lab): You can calculate flex space distribution, configure alignment along both axes, and manage flex shrink physics.
3. Advanced CSS Grid: Named Areas, minmax And auto-fit (1 lab): You can design resilient two-dimensional layouts using named grid template areas, minmax sizing, and auto-fit repeat tracks.
4. CSS Subgrid: Inheriting Track Sizing Across Nested Layouts (1 lab): You can align nested component child elements across shared parent grid tracks using CSS subgrid.
5. Container Queries: Component-Driven Responsive Design (1 lab): You can implement component-driven responsive layouts using CSS container queries and container query length units.

CSS Architecture And Cascade Layers

1. The Cascade Algorithm: Specificity, Inheritance And Source Order (1 lab): You can calculate selector specificity weights, predict cascade resolution order, and control CSS property inheritance.
2. CSS Cascade Layers: Taming Specificity Wars with @layer (1 lab): You can organize stylesheets into explicit architectural tiers using at-layer, controlling precedence independent of selector specificity.
3. CSS Custom Properties: Scoping, Fallbacks And Theming (1 lab): You can implement dynamic runtime theming, variable inheritance, and resilient fallbacks using CSS custom properties.
4. Modern Selectors: :has(), :is(), :where() And Nesting Standards (1 lab): You can write expressive component selectors using the parent selector has, forgiveness helpers is and where, and native CSS nesting.
5. Modern CSS Animations, Transitions And View Transitions API (1 lab): You can create performant GPU-accelerated animations and seamless page state transitions using the View Transitions API.

Browser Events And Interaction

1. Event Phases: Capturing, Target And Bubbling Demystified (1 lab): You can track the three phases of DOM event propagation and use capturing, target, and bubbling controls effectively.
2. Event Delegation: Memory-Efficient Interaction Handlers (1 lab): You can implement high-performance event delegation using closest and matches, eliminating memory leaks from dynamic child listeners.
3. Passive Listeners, Scroll Performance And Touch Interactions (1 lab): You can optimize scroll and touch performance using passive event listeners and CSS touch-action properties.
4. CustomEvent Dispatching And Decoupled Component Event Buses (1 lab): You can design decoupled component architectures using type-safe CustomEvents and native EventTarget dispatching.
5. Pointer Events, Focus Trapping And Keyboard Accessibility (1 lab): You can implement accessible modal focus traps and unified pointer interactions for mouse, touch, and pen devices.

Modern JS Runtime And Event Loop

1. The Browser Event Loop: Call Stack, Microtasks And Macrotasks (1 lab): You can predict exact asynchronous execution timing across the call stack, microtask queue, and macrotask queue.
2. requestAnimationFrame vs requestIdleCallback: High-FPS Work (1 lab): You can schedule 60 FPS visual animations with requestAnimationFrame and defer non-critical telemetry with requestIdleCallback.
3. Cancellation With AbortController And Async Signal Propagation (1 lab): You can orchestrate clean cancellation across network requests, event listeners, and async tasks using AbortController and AbortSignal.
4. Memory Management: Garbage Collection, Memory Leaks And WeakMap (1 lab): You can identify and eliminate browser memory leaks and utilize WeakMap and WeakSet for garbage-collection safe caching.
5. Web Workers: Off-Thread Computation And Structured Clone (1 lab): You can move expensive CPU computations off the main thread using dedicated Web Workers, postMessage, and transferable objects.

Client Storage And Service Workers

1. Client Storage Paradigms: Cookies, Storage Tradeoffs (1 lab): You can choose between HTTP cookies, localStorage, and sessionStorage based on security, capacity, and synchronous I/O tradeoffs.
2. IndexedDB In Practice: Object Stores, Indexes And Transactions (1 lab): You can design transactional client databases using IndexedDB object stores, secondary indexes, and asynchronous cursors.
3. Service Worker Lifecycle: Installation, Activation And Update (1 lab): You can manage the full lifecycle of a Service Worker across registration, installation, activation, and client claiming.
4. Cache Storage API: Offline Strategies And Cache-First Patterns (1 lab): You can implement offline caching strategies including Cache-First, Network-First, and Stale-While-Revalidate with the Cache Storage API.
5. Background Sync, Push Notifications And PWA Manifests (1 lab): You can implement offline retry synchronization with Background Sync, push messaging, and configure Web App Manifests for installable PWAs.

Browser Security And Web Performance

1. Same-Origin Policy, CORS Preflight, Credentials And Headers (1 lab): You can configure cross-origin resource sharing, handle CORS preflight OPTIONS requests, and debug credentialed fetch headers.
2. Content Security Policy (CSP), Trusted Types And XSS Defenses (1 lab): You can lock down client execution environments against XSS vulnerabilities using strict CSP headers, nonces, and Trusted Types.
3. CSRF Mitigations, SameSite Cookies And Subresource Integrity (1 lab): You can prevent Cross-Site Request Forgery with SameSite cookies and anti-CSRF tokens, and verify third-party assets with SRI.
4. The Fetch API: Streaming Responses, HTTP Caching And Keepalive (1 lab): You can consume progressive streaming responses with ReadableStream, configure cache directives, and deliver telemetry via keepalive.
5. Core Web Vitals: Measuring And Optimizing LCP, INP, And CLS (1 lab): You can measure, analyze, and optimize Core Web Vitals including Largest Contentful Paint, Interaction to Next Paint, and Cumulative Layout Shift.