Frontend Engineering

The browser platform, the language, and the frameworks that render state to a screen.

28 concepts · 1120 minutes

• JavaScript FundamentalsTypes, scope, coercion, `this` — the base layer everything else in this track sits on.
• Semantic HTMLThe right element carries meaning, keyboard behaviour, and accessibility for free.
• The Box ModelEvery layout bug you will ever have starts here.
• Forms & ValidationControlled vs uncontrolled, and validating the same rules on both sides of the wire.
• Components & JSXUI as a function of data — the one idea React is built on.
• State & PropsWhat re-renders, when, and why your value is stale.
• TypeScript BasicsTypes as documentation the compiler checks — and the escape hatches that quietly turn it off.
• Callbacks & PromisesHow JavaScript represents 'not yet' — and why a Promise is not a thread.
• async / awaitPromises that read like ordinary code — plus the parallelism people accidentally throw away.
• ES Modulesimport/export, and the CommonJS interop mess you will absolutely hit in Node.
• The Node.js RuntimeJavaScript outside the browser: modules, streams, and a single thread doing a lot of I/O.
• CORSThe browser rule that blocks your fetch — and why disabling it is the wrong fix.
• Flexbox & GridOne dimension vs two — pick right and layouts stop fighting you.
• The DOM & EventsThe tree the browser actually renders, and how events travel through it.
• Accessibility BasicsKeyboard, focus, labels, contrast — mostly free if you start right, expensive to retrofit.
• Next.js App RouterFile-based routing, layouts, and the server/client boundary you must hold in your head.
• Rendering StrategiesStatic, server, incremental — choosing per route based on how fresh the data must be.
• Client Data FetchingLoading, error, empty, stale, race — the five states everyone forgets four of.
• The Rendering ModelRender, reconcile, commit — the mental model that makes performance work predictable.
• Effects & LifecyclesSynchronising with the outside world — and why you probably don't need an effect.
• Context & State SharingAvoiding prop drilling without accidentally re-rendering your whole tree.
• Custom HooksExtracting stateful logic so it stops being copy-pasted across six components.
• GenericsFunctions over types — the step where TypeScript starts paying for itself.
• Utility & Mapped TypesPick, Omit, Partial, Record — deriving types instead of duplicating them.
• ClosuresFunctions remember where they were born — the mechanism behind hooks, modules, and half of interview questions.
• The Event LoopOne thread, a queue, and a rule about when it drains — the model that explains every 'why did this run last?'.
• Server ComponentsComponents that never ship to the browser — a different mental model, not just an optimisation.
• React PerformanceMeasure, then memo — in that order, or you'll add complexity for nothing.