Skip to content

Frontend Engineering

From HTML to hydration: how the browser becomes an application.

HTMLCSSJavaScriptReactNext.jsDOMSSRCSRSSGhydrationcookiesaccessibilityfrontend performance

Lessons

  1. 2.1The DOM and the render pipeline: from HTML to pixelsHow a browser turns text files into the page you see, and why some changes are free while others make the page stutter. 30 min
  2. 2.2CSR vs SSR vs SSG vs ISR: where and when the HTML gets builtEvery page's HTML gets built somewhere: in the browser, on the server for each visit, or once in advance. Where and when changes speed, freshness and cost. 30 min CSR vs SSR vs SSG
  3. 2.3State management: where should this data live?Storing data in a frontend is easy. Deciding who owns each piece, and how long it lives, is the real skill. Here's a simple way to sort it. 30 min Frontend or backend?
  4. 2.4Frontend performance and Core Web VitalsYour API answers in 50 ms, yet the page feels slow. Here's where the rest of the time goes, and the three numbers Google uses to measure it. 30 min CSR vs SSR vs SSG Latency budget
  5. 2.5Accessibility as an engineering requirementSome of your users can't see the screen or use a mouse. Here's how they use your app, and why plain, correct HTML does most of the work for them. 30 min

On the job: try it on your own project

Open your app's slowest important page. Ask Claude Code to explain how it is rendered (client, server or static), where its state lives, and what makes it heavy to load. Run a Lighthouse check and a keyboard-only walk-through yourself. Write one decision: the single change that would most improve speed or accessibility, and why it beats the alternatives.

Can you do this now?

0/4. Anything you can't tick yet: reopen that lesson's practice ladder.