Frontend Engineering
How browsers render, the JavaScript event loop, TypeScript, React and hooks, state management, Next.js rendering modes, performance, security and testing.
11 lessons · about 0.9 hours
Start the first lesson →
- 01How Browsers Render a Page From HTML text to pixels on screen. The critical rendering path (DOM, CSSOM, layout, paint, composite) and why it matters for fast, smooth pages.
- 02JavaScript Essentials: Event Loop, Closures & this The three JavaScript ideas that confuse everyone at first. Visual explanations of the event loop, microtasks, closures, and how 'this' is decided.
- 03TypeScript Essentials TypeScript is JavaScript with types that catch bugs before your code runs. Learn the core types, interfaces, unions, generics and utility types with practical examples.
- 04React Fundamentals Components, props, state and the virtual DOM. Learn to think in React, with a picture of how renders and reconciliation actually work.
- 05React Hooks in Practice useState, useEffect, useRef, useMemo, useCallback, useContext and custom hooks. When to use each, the rules of hooks, and the mistakes that cause infinite loops.
- 06State Management (Redux, Zustand, TanStack Query) Where should data live in a frontend app? Learn the four kinds of state, when local state is enough, and how Redux Toolkit, Zustand and TanStack Query each help.
- 07Next.js Rendering: CSR, SSR, SSG, ISR & Server Components Where and when is your HTML created? Compare client-side, server-side, static and incremental rendering, plus React Server Components, with timelines and a decision guide.
- 08Frontend Performance & Core Web Vitals Make pages load fast and feel instant. Understand LCP, INP and CLS, then apply the proven fixes, from image optimisation and code splitting to caching and virtualisation.
- 09Frontend Security XSS, CSRF, clickjacking, token storage, CORS and supply-chain risks, explained with pictures. What can go wrong in the browser and how to defend against it.
- 10Frontend Testing Strategy What to test and how. The testing trophy, unit tests with Vitest, component tests with Testing Library, API mocking with MSW, and end-to-end tests with Playwright.
- 11React vs Vue vs Angular The same counter in three frameworks, a side-by-side comparison of reactivity, templates, state and tooling, and a simple way to choose between them.