Frontend and the browser
See what the browser does between your code and the pixels.
Sessions
Go in order. Each session is one idea you can drag, step and break.
01How the browser works
6 live · 2 comingFrom a URL to pixels on the screen.
Interactive
LiveFrom URL to pixels
Everything that happens after you press Enter, in order.
Open session →
Interactive
Coming soonParsing HTML into the DOM
How the browser turns markup into a tree it can work with.
Interactive
LiveThe cascade and specificity
Why this rule won over that one.
Open session →
Interactive
LiveStyle, layout, paint and composite
The four stages that turn the DOM into pixels.
Open session →
Interactive
Coming soonReflows and repaints
What makes the browser redo layout, and how to avoid it.
Interactive
LiveThe browser event loop
Tasks, microtasks and when the screen gets a chance to update.
Open session →
Interactive
LiveEvent bubbling and capturing
How one click travels down and back up the tree.
Open session →
Interactive
LiveWeb workers
Move heavy work off the main thread.
Open session →
02JavaScript in depth
4 live · 2 comingThe language features that trip people up.
Already live in other tracks: The event loop, phase by phase
Interactive
LiveClosures and scope
Functions that remember the variables around them.
Open session →
Interactive
LiveHow this is decided
Four rules that decide what this points to.
Open session →
Interactive
LivePrototypes and classes
What a class really is underneath.
Open session →
Interactive
LivePromises and async/await
What await actually pauses, and what keeps running.
Open session →
Interactive
Coming soonMemory and garbage collection
How the engine finds memory nobody can reach.
Interactive
Coming soonES modules and bundling
Imports, tree shaking and how one file becomes many chunks.
03CSS and layout
6 live · 0 comingGetting boxes where you want them.
Interactive
LiveThe box model
Content, padding, border and margin, and box-sizing.
Open session →
Interactive
LiveFlexbox
Grow, shrink and basis: how space is shared along a line.
Open session →
Interactive
LiveCSS Grid
Rows, columns and areas for two-dimensional layout.
Open session →
Interactive
LivePositioning and stacking contexts
Why z-index: 9999 still sits behind something.
Open session →
Interactive
LiveResponsive design
Media queries, container queries and fluid sizes.
Open session →
Interactive
LiveAnimations and transitions
Which properties animate cheaply and which cause jank.
Open session →
04React
4 live · 3 comingHow React decides what to update.
Interactive
LiveRendering and reconciliation
Render, diff, commit: how React updates the DOM.
Open session →
Interactive
LiveWhy components re-render
State, props, context and parents: every trigger, made visible.
Open session →
Interactive
LiveuseState and useEffect, step by step
When state updates land and when effects run.
Open session →
Interactive
Livememo, useMemo and useCallback
Skip work you don't need, and when it doesn't help.
Open session →
Interactive
Coming soonContext and prop drilling
Share state down the tree, and what re-renders when it changes.
Interactive
Coming soonReact Server Components
Components that run on the server and send no JavaScript.
Interactive
Coming soonSuspense and streaming
Show something now and fill the rest in as data arrives.
05State and data fetching
2 live · 3 comingKeeping the screen in sync with the server.
Interactive
Coming soonLocal, shared and server state
Different kinds of state need different homes.
Interactive
LiveData fetching and caching
Stale-while-revalidate, deduplication and refetching.
Open session →
Interactive
LiveOptimistic updates
Show the change now, roll back if the server says no.
Open session →
Interactive
Coming soonForms and validation
Controlled inputs, client checks and server errors.
Interactive
Coming soonState in the URL
Filters and tabs that survive a reload and a shared link.
06Rendering strategies
2 live · 3 comingWhere and when HTML gets made.
Interactive
LiveCSR, SSR, SSG and ISR
Render in the browser, on each request, at build time, or in between.
Open session →
Interactive
LiveHydration
Make server HTML interactive, and why mismatches happen.
Open session →
Interactive
Coming soonStreaming server rendering
Send the page in pieces as each part is ready.
Interactive
Coming soonIslands and partial hydration
Ship JavaScript only for the parts that need it.
Interactive
Coming soonRendering at the edge
Render close to the user, and what you can't do there.
07Web performance
5 live · 1 comingFast pages, measured the way users feel them.
Already live in other tracks: CDNs: caching at the edge
Interactive
LiveCore Web Vitals
LCP, INP and CLS: what each measures and what hurts it.
Open session →
Interactive
Coming soonThe critical rendering path
What blocks the first paint, and how to unblock it.
Interactive
LiveCode splitting and lazy loading
Load only the code this page needs.
Open session →
Interactive
LiveImages and fonts
Formats, sizes, lazy loading and avoiding layout shift.
Open session →
Interactive
LiveBrowser caching and service workers
Cache headers, revalidation and working offline.
Open session →
Interactive
LiveLong tasks and a blocked main thread
Why the page freezes, and how to break work up.
Open session →
08Browser APIs and security
3 live · 2 comingWhat the browser lets pages do, and stops them doing.
Already live in other tracks: Cross-site scripting (XSS), Cross-site request forgery (CSRF)
Interactive
LiveCookies, localStorage and IndexedDB
Where to keep data in the browser, and who can read it.
Open session →
Interactive
LiveCORS
Why the browser blocks the request, and how the server allows it.
Open session →
Interactive
LiveContent Security Policy
Tell the browser which scripts it may run.
Open session →
Interactive
Coming soonProgressive web apps
Install, offline and push for a website.
Interactive
Coming soonWeb components
Custom elements and the shadow DOM.
09Accessibility
1 live · 3 comingPages everyone can use.
Interactive
Coming soonSemantic HTML and the accessibility tree
What a screen reader actually gets from your markup.
Interactive
LiveKeyboard and focus
Tab order, focus traps and visible focus.
Open session →
Interactive
Coming soonARIA
When ARIA helps, and when it makes things worse.
Interactive
Coming soonContrast and motion
Readable colours and respecting reduced motion.
10Tooling and testing
0 live · 4 comingThe build and test setup around the code.
Interactive
Coming soonBundlers
Vite, webpack and esbuild: what a bundler does.
Interactive
Coming soonTypeScript for the frontend
Types for props, state and API responses.
Interactive
Coming soonTesting components and flows
Unit, component and end-to-end tests, and what each catches.
Interactive
Coming soonDesign systems
Shared components and tokens across a product.
11Case studies: build it
0 live · 4 comingOne interface, end to end.
Interactive
Coming soonAn infinite scrolling feed
Pagination, virtualization and keeping scroll position.
Interactive
Coming soonAn autocomplete input
Debouncing, race conditions and keyboard support.
Interactive
Coming soonA live dashboard
Real-time updates without re-rendering everything.
Interactive
Coming soonAn offline-first notes app
Local storage, sync and conflicts.
In production
Tools you can use
96 technologies across 33 live sessions. Same names in any language — pick a session to see how the idea maps to the real world.
Services, platforms, protocols and standards — not one stack.
Browser devtools show every one of these steps.
Browsers resolve conflicting styles the same way.
Browser devtools show exactly which pipeline stages each frame runs.
Every browser follows the same HTML event loop spec.
Every DOM event follows this path.
Workers are built into every browser.
Closures are everywhere in JavaScript: callbacks, hooks, modules.
Every JavaScript developer meets this eventually.
Classes in JavaScript are built on prototypes.
async/await is built into every JavaScript runtime.
Every element on every page is a box.
Flexbox is the default for one-dimensional layout in every browser.
Grid is supported in every modern browser.
Overlays break the same way in every codebase.
Responsive layout is the default for the web.
Smooth motion depends on easing and which property moves.
Keys are how React matches list items between renders.
Every React app re-renders by these rules; the tools show you which renders happened and why.
Every React developer hits this with effects and intervals.
React apps memoise to skip expensive re-renders.
Data libraries and frameworks exist largely to avoid waterfalls.
Snappy apps update the UI before the server confirms.
Frameworks let each route choose how it renders.
Modern frameworks compete on how little they hydrate.
Core Web Vitals are measured in the field and in the lab.
Bundlers split code by route and dynamic import.
Images and fonts are most of a typical page's weight.
Cache headers decide how repeat visits load.
INP is a Core Web Vital measured on real users.
Every web app stores something in the browser.
Cross-origin requests are governed by CORS in every browser.
CSP is a standard defence against XSS.
Roadmap
Coming soonA step-by-step path through the track, with sessions and practice at each stage.
- Stage 1
How the browser works
- Stage 2
JavaScript and CSS in depth
- Stage 3
React and state
- Stage 4
Rendering strategies and performance
- Stage 5
Accessibility, security and tooling
Projects
Coming soonBuild something real to lock in the skill.
- Build an infinite scrolling feed
- Build an accessible autocomplete
- Make a slow page fast