14 parts · 29 chapters
Frontend Terms, Visualised
Every field has a vocabulary, and most of the confusion in a frontend conversation is two people using one word for different things, or two words for one thing. This module is the vocabulary: each term with a diagram, a one-line meaning, where you meet it in practice, and a link into the course that explains the mechanism. Read it as a reference, not a course: search the index, jump to a card, follow the link when the one line is not enough.
Thirteen layers, in the order a page is built and a product is run: network, parsing, style, layout, paint and compositing, the runtime, React, build, testing, performance, accessibility, security, and architecture. Each layer opens with an animated map of its terms in pipeline order, so the cards sit in the place they belong rather than in an alphabetical pile.
a reference · every term a diagram, a meaning, where it shows up, and the course that goes deepevery level · a reference to search, not a course to read in order
a diagram per termEvery card has a small drawing of the mechanism: a flow, a stack, a timeline, a comparison, a tree.
one-line meaningsThe definition you could say out loud in a review, without the hedge words.
where it shows upThe place in practice you will meet it: a DevTools panel, a header, a bug, a review comment.
deep linksEach card links to the course part that explains the mechanism in full.
layer mapsAn animated pipeline per layer, so the terms sit where they belong.
an indexEvery term A to Z by layer, one click to its card.
00How to Use, and the Index
How to use this module · Index by layer · A to Z
3 ch · ~5 min01Network
From URL to connection · Hints, caching and channels
2 ch · ~12 min02Parsing
HTML: bytes to DOM · JavaScript: source to running code
2 ch · ~12 min03Style
The cascade and matching · Variables, organisation and loading
2 ch · ~12 min04Layout
Boxes, contexts and text · The cost of layout, and stability
2 ch · ~12 min05Paint and Composite
Paint, raster and layers · Frames, animation and media
2 ch · ~12 min06Runtime
The loop and the engine · Memory, threads and async
2 ch · ~12 min07React
How React renders · Hooks and state patterns
2 ch · ~12 min08Build
Compiling and bundling · Repos, CI and release
2 ch · ~12 min09Testing
Kinds of tests · Visual, browser and production
2 ch · ~12 min10Performance
Metrics and measurement · Costs, techniques and budgets
2 ch · ~12 min11Accessibility
The standard, the tree and the reader · Keyboard, perception and audits
2 ch · ~12 min12Security
Boundaries, injection and the supply chain · Sessions, identity and isolation
2 ch · ~12 min13Architecture
Rendering, composition and data · Components, state, code and teams
2 ch · ~12 min A companion to every other courseEach card is a pointer into the Browser, JavaScript, React, Architecture, Design, Disciplines and other courses. Use it as the glossary when a term in another course is unfamiliar, and as revision when it is not.