Home/Frontend Engineering

Engineering curriculum · 15 lessons

Frontend Engineering

From HTML, CSS, and JavaScript to application state, rendering architecture, accessibility, security, and production diagnosis.

Start with The browser: from a URL to an interactive page
An illustrated desktop browser, with a design notebook and a small plant.
The part of the system a person gets to use.

Module 1

Browser foundations

  1. 01

    The browser: from a URL to an interactive page

    Follow navigation, resource discovery, rendering, and main-thread work to locate the dependency delaying a useful page.

  2. 02

    HTML, forms, and document contracts

    Use semantic structure, native forms, validation, and progressive enhancement as reliable contracts between users, browsers, and servers.

  3. 03

    CSS: cascade, layout, and resilient presentation

    Understand cascade ownership, intrinsic sizing, responsive layouts, stacking contexts, and the real costs of animation.

  4. 04

    JavaScript: execution, asynchronous work, and memory

    Reason about tasks, microtasks, object identity, workers, cancellation, reachability, and memory diagnosis.

Module 2

Application architecture

  1. 05

    TypeScript, modules, and the build graph

    Model valid states, validate runtime boundaries, understand module graphs, and ship reproducible compatible assets.

  2. 06

    Components, state ownership, and React scheduling

    Place facts under clear owners, model transitions, preserve component identity, and distinguish rendering priority from parallel computation.

  3. 07

    Requests, caches, and consistency in the interface

    Handle stale responses, scoped caches, optimistic updates, concurrency conflicts, ambiguous writes, and changing paginated data.

  4. 08

    Navigation, SPAs, and application boundaries

    Explain why client navigation arose and preserve URLs, history, focus, route errors, and ownership as applications grow.

Module 3

Rendering and delivery

  1. 09

    CSR, SSR, SSG, and incremental regeneration

    Choose rendering time and location around freshness, personalization, hydration, cache scope, and deployment capabilities.

  2. 10

    Streaming, Server Components, and useful boundaries

    Design streaming and server/client boundaries around independent work, error isolation, serialization, and browser code budgets.

Module 4

Production engineering

  1. 11

    Accessibility and design systems as engineering contracts

    Build reusable semantics, keyboard behavior, overlays, announcements, localization, and compatibility into shared components.

  2. 12

    Browser security and trust boundaries

    Separate origins, CORS, XSS, CSP, sessions, CSRF, private caching, and third-party authority into explicit security decisions.

  3. 13

    Performance, auditing, and production diagnosis

    Connect user experience to load and interaction traces, work through a concrete regression, and verify production outcomes by cohort.

  4. 14

    Realtime, browser storage, and offline behavior

    Choose transports, replay with versions, bound local storage, and define safe offline writes and service-worker upgrades.

  5. 15

    Testing, release safety, and architectural evolution

    Test meaningful invariants, control asynchronous failures, preserve old clients, and evolve frontend architecture through observable seams.