Frontend Engineering

From semantic HTML to production React architecture, performance budgets and accessibility.

1. Step 01

   Web foundations

   HTML semantics, the box model, flexbox and grid, and how the browser parses, styles and paints a page.

   HTMLCSSDevTools

2. Step 02

   JavaScript in depth

   Closures, prototypes, the event loop, modules, promises and async iteration, the parts interviews actually probe.

   ES2023+AsyncModules

3. Step 03

   TypeScript

   Structural typing, generics, discriminated unions and modelling domain state so bad states are unrepresentable.

   TypeScriptGenerics

4. Step 04

   React architecture

   Composition over configuration, data-fetching boundaries, server state vs UI state, suspense and error boundaries.

   ReactTanStack QueryRouting

5. Step 05

   Tooling & testing

   Vite, package managers, ESLint/Prettier, component tests with Testing Library and end-to-end flows in Playwright.

   ViteVitestPlaywright

6. Step 06

   Performance

   Core Web Vitals, bundle budgets, code splitting, image strategy, caching headers and rendering strategy (CSR/SSR/SSG).

   LighthouseProfilingCaching

7. Step 07

   Craft & accessibility

   Design systems, keyboard and screen-reader support, focus management, motion that respects reduced-motion.

   A11yMotionDesign Systems