Ninety courses. Six benches.

Parser, render, and the script that blocked both. A short course for people who have built pages and never watched one load.

• Describe the path from response to first paint
• Find a script that blocked rendering
• Order assets so the page can paint sooner

Unused CSS, a bundle that grew a charting library for one page, and a split you can explain. Beginner on purpose: the habit starts early.

• Find code the first view does not need
• Split a route so it loads with its screen
• Say what the first load contains

Before this: How a Page Actually Loads

Dimensions, font loading, and a hero image that should not be the last thing on the wire. You will reserve the space before the bytes arrive.

• Reserve space so an image does not shift the page
• Load a font without hiding the text
• Prioritize the image the first view actually shows

Before this: How a Page Actually Loads

LCP, INP, and CLS, taken on a page you control. You will learn to distrust a single anecdote and keep the trace.

• Record a trace for a page you can reload
• Name which metric moved and which did not
• Compare two traces of the same flow

Before this: How a Page Actually Loads

Cache headers for assets, and the data request that should not be cached the same way. You will stop cache-busting everything out of fear.

• Cache a fingerprinted asset for a long time
• Keep a data request fresh when the screen must be
• Explain a stale UI as a caching choice

Before this: CSS and JS that Fit

A small token set, a naming scheme, and the drift that happens when the file and the drawing disagree. You will pick the file that wins.

• Name a token by role rather than by appearance
• Change a theme by changing tokens
• Point at one source when design and code disagree

Before this: Color, Contrast, and States

Advanced. Transform and opacity, and the height animation that forced layout on every frame. You will measure the frame, not the feeling.

• Animate on the compositor when the effect allows it
• Spot an animation that forces layout
• Drop motion that costs a frame and explains nothing

Before this: Motion that Respects People

A screen that still tells the truth when the request fails, including which part succeeded. You will write the copy with the layout.

• Show a failed request without a blank screen
• Keep the part of the page that still loaded
• Offer a next step that matches the failure

Before this: Empty, Error, and Busy States

Externalized copy, dates and numbers that follow the locale, and a layout that survives a longer word.

• Externalize a string instead of burying it in JSX
• Format a date and a number for the reader's locale
• Let a layout survive a longer translation

Before this: Type on a Screen

Advanced. Keyboard, names, contrast, and zoom, written down so the audit is a practice and not a one-time heroics. You will file issues a developer can close.

• Run a repeatable pass on one flow
• Write a finding that names the fix
• Re-test the finding after the change

Before this: Names, Focus, and the Keyboard

A single end-to-end test you trust, and the fixtures that keep it from being theatre. You will not try to automate the whole product.

• Automate one flow a person can finish
• Isolate the test data so the run is repeatable
• Read a failure as a product bug or a test bug

Before this: Tests that Watch Behavior

Versions, changesets, and a breaking change in a button that three products use. You will write the note the other teams needed.

• Version a component package on purpose
• Mark a breaking change before consumers hit it
• Migrate one consumer without a flag day

Before this: A Small Design System

Routing, server rendering, and the client boundary, on a framework you will actually deploy. The course is about the interface that ships, not about collecting frameworks.

• Render a page on the server when the data allows it
• Keep client JavaScript to the part that needs it
• Deploy the page and point at what the browser received

Before this: Server and Client UI

Client errors with enough context to reproduce, and a metric that moved after a deploy. Twelve weeks of watching a UI the way you watch a server.

• Capture a client error you can reproduce
• Tie a slow interaction to a release
• Decide whether a regression is worth rolling back

Before this: Measuring a Single Page

You bring a page or we give you one. The capstone is a before, an after, and a written reason for each change. Hope is not a result.

• Improve a page you measured before you touched it
• Keep a trace for every change you keep
• Write up what moved and what you left alone

Before this: Measuring a Single Page