Frontend Engineering Handbook

Learn Frontend. Perfectly.

A complete, interview-ready reference — from the browser rendering pipeline to micro-frontends. Every topic ships with worked code, live runnable demos, interview Q&A, and things to remember.

Topics

Parts

353

Interview Q&A

Live Demos

Web Foundations

How the browser turns code into pixels

6 topics

#00Foundational

Frontend Basics: HTML & the DOM

Start here: what the frontend is, how a page loads, HTML tags & attributes, and the DOM — the live tree the browser builds from your HTML.

8mLive

#01Foundational

Browser Rendering Pipeline

How a URL becomes pixels and stays 60fps: DNS/TCP/TLS/HTTP, DOM & CSSOM construction, the render tree, layout (reflow), paint, and GPU compositing — plus the cost ladder that tells you which changes are cheap and which trigger expensive reflows.

16mLive

#02Foundational

HTML (Semantic Structure & Forms)

Semantic markup and accessible forms end to end: the document skeleton, landmark & sectioning elements, the heading outline, then native form controls, label association, input types, native validation, fieldset/legend grouping, and ARIA error messaging — meaning that machines and assistive tech get for free.

15mLive

#03Foundational

CSS Fundamentals (Selectors, Specificity, Box Model)

The complete CSS foundation: how styling works, every selector type, the cascade & specificity, inheritance, units, colors, the box model, display & positioning, and modern layout — beginner to advanced in one page.

22mLive

#04Foundational

Flexbox & Grid Layout

Modern CSS layout end to end: the flex container & item model, main/cross axis, every flex property, then CSS Grid's tracks, lines, areas, auto-fill/minmax, and exactly when to reach for each.

20mLive

#05Foundational

Responsive Design (Media Queries)

Build one UI that fits every screen: the viewport meta tag, mobile-first breakpoints, relative units, fluid type with clamp(), responsive images, container queries, and modern preference queries.

18mLive

Styling

CSS strategies from utility-first to CSS-in-JS

3 topics

#06Foundational

Styling Concepts & Approaches

The full styling landscape — plain CSS, CSS Modules, utility-first (Tailwind), CSS-in-JS (Emotion/Styled), and component libraries (MUI) — with the mechanics, build-time vs runtime cost, scoping strategies, and the decision framework for choosing one (or several) per project.

16mLive

#07Core

Tailwind CSS

Utility-first styling from first principles — why atomic classes exist, how the JIT compiler produces tiny bundles, the config-driven token system, responsive and state modifiers, dark mode, extraction with @apply and components, and the gotchas that bite in production.

18mLive

#08Core

CSS-in-JS / CSS Modules (Emotion)

How CSS Modules scope class names at build time with zero runtime cost, and how Emotion generates scoped, prop-driven styles at runtime — the styled and css APIs, theming, SSR extraction, the flash-of-unstyled-content trap, zero-runtime alternatives, and when to pick each.

17mLive

Language

Modern JavaScript and TypeScript

2 topics

#09Core

ES6+ JavaScript Core

Everything modern JavaScript gives you end to end: block scope with let/const, arrow functions and lexical this, template literals, destructuring, spread/rest, default params, ES Modules, promises and async/await, the map/filter/reduce toolkit, optional chaining and nullish coalescing, and the immutable-update patterns React lives on — beginner to advanced in one page.

20mLive

#10Core

TypeScript

TypeScript from the ground up: why static types pay off, primitives, interfaces vs type aliases, unions and intersections, generics, enums, type narrowing, the everyday utility types (Partial/Pick/Omit/Record), typing functions and React props, structural typing, and the tsconfig strictness that makes it all worthwhile — beginner to advanced in one page.

20mLive

React Core

Components, props, state, and rendering

7 topics

#11Foundational

ReactJS Overview

The complete mental model of React: what it is and isn't, the declarative UI = f(state) idea, elements vs components, the Virtual DOM and reconciliation, render vs commit, one-way data flow, and where React fits in the modern ecosystem — beginner to advanced in one page.

16mLive

#12Foundational

JSX

JSX end to end: what it compiles to, why it's expressions-only, the full rule set (className, htmlFor, camelCase, closing tags, single root/Fragments), embedding values and expressions, spreading props, conditional and list rendering, dangerous HTML, and the gotchas interviewers probe.

15m

#13Foundational

Components

Components from first principles: function vs class components, purity and idempotent rendering, composition over inheritance, the children prop and slot patterns, container/presentational split, higher-order and render-prop patterns, and the rules that keep components predictable.

15m

#14Foundational

Props

Props in full: a component's read-only inputs, one-way data flow, callbacks for events-up, default values and destructuring, the children prop, spreading and forwarding, typing props with TypeScript, the props-vs-state distinction, and prop-drilling with its remedies.

14m

#15Core

State (useState)

State from first principles: what useState is and how it works, the render snapshot model, immutable updates for arrays and objects, functional updaters and batching, lazy initialization, why state persists across renders, lifting state up, and the pitfalls that produce stale UI.

16mLive

#16Core

Events

React events in depth: attaching handlers, passing vs calling functions, the SyntheticEvent wrapper and event delegation, preventDefault and stopPropagation, controlled inputs and forms, passing arguments to handlers, and how React's system differs from native DOM listeners.

15mLive

#17Core

Rendering Patterns (Lists, Keys, Conditionals)

The patterns you use on every screen: rendering lists with .map(), why keys exist and why the index is dangerous, conditional rendering with ternary/&&/early-return and the 0 pitfall, empty and loading states, Fragments in lists, and how keys drive reconciliation and preserve state.

16mLive

Hooks

State and lifecycle in function components

4 topics

#18Core

Hooks Overview

What hooks are, why they replaced classes, how React tracks them by call order, and the two Rules of Hooks that keep that tracking honest — the foundation every other hook builds on.

14mLive

#19Core

useEffect & Dependency Arrays

How useEffect synchronizes a component with the outside world after render, exactly what the dependency array does, why cleanup functions exist, and how stale closures and missing deps produce the most common React bugs.

17mLive

#20Core

useRef, useMemo & useCallback

The three hooks that don't cause re-renders: useRef for mutable values and DOM access, useMemo for caching expensive values, and useCallback for stable function identity — plus when memoization actually pays off and when it's just noise.

15mLive

#21Core

Custom Hooks

How to extract reusable stateful logic into use-prefixed functions that compose the built-in hooks — what a custom hook shares (logic, not state), how to shape its return value, and the patterns for building fetch, toggle, debounce, and subscription hooks.

15mLive

State & Patterns

Context, Redux, and composition patterns

4 topics

#22Core

Context API (useContext)

The full Context story: what problem prop-drilling causes, how createContext/Provider/useContext work, the idiomatic provider pattern, the re-render-all-consumers pitfall and every mitigation (context splitting, value memoisation, state/dispatch separation), and exactly when Context is the wrong tool.

16mLive

#23Core

State Management Overview

A decision framework for where state should live: local vs lifted vs derived vs Context vs global store vs server state — plus the categories of client-state libraries (Redux Toolkit, Zustand, Jotai, Recoil) and why server state is a separate discipline handled by TanStack Query / SWR.

15m

#24Core

Redux (Redux Toolkit)

Redux end to end via Redux Toolkit: the store/action/reducer flow, why unidirectional data flow matters, createSlice with Immer, configureStore and typed hooks, async thunks (createAsyncThunk), memoised selectors (createSelector), and RTK Query — plus when Redux is worth its cost.

18m

#25Core

HOC (Higher Order Components)

Logic-reuse patterns in React compared head to head: Higher Order Components (what they are, how to write them correctly, the pitfalls), render props, and custom hooks — why hooks are the modern default, and where HOCs still legitimately appear.

14m

Routing & Forms

Client-side navigation and form handling

2 topics

#26Core

React Router

Client-side routing end to end: how a SPA fakes navigation without reloads, routes and dynamic params, nested/layout routes with Outlet, programmatic navigation, query strings, route loaders and data APIs, and auth guards — beginner to advanced in one page.

18mLive

#27Core

Form Handling & Validation

Forms from first principles: controlled vs uncontrolled inputs, native HTML5 validation, why React Hook Form minimises re-renders, schema validation with Zod that doubles as your TypeScript type, error display, and accessibility — beginner to advanced in one page.

17mLive

Data Layer & Networking

HTTP, Axios, auth, and error handling

4 topics

#28Core

Axios

The complete HTTP-client story: fetch vs Axios, configured instances, request/response interceptors, cancellation, retries, upload progress, and end-to-end type safety — beginner to advanced in one page.

16mLive

#29Core

Networking Fundamentals

The full HTTP picture for frontend engineers: request/response anatomy, methods, status codes, headers, DNS/TLS, REST, caching, and the CORS you will hit on day one — beginner to advanced in one page.

15mLive

#30Advanced

Authentication & Authorization

The complete auth story for the frontend: JWT vs sessions/cookies, where to store tokens safely (localStorage vs httpOnly), OAuth/OIDC, refresh-token rotation, XSS/CSRF defenses, and RBAC route guards — beginner to advanced in one page.

18mLive

#31Core

Error Handling

A resilient error strategy for the whole app: network vs application errors, error boundaries for the render path, status-aware API handling, retries with backoff, graceful user feedback, and production monitoring — beginner to advanced in one page.

15mLive

Real-Time Communication

WebSockets, SSE, and push

5 topics

#32Advanced

SQLite (Client-Side)

Run a real, full-featured SQL database inside the browser tab with sql.js (SQLite compiled to WebAssembly): joins, indexes, transactions and prepared statements on the client, plus durable persistence via IndexedDB or the Origin Private File System for genuinely offline-first apps.

16mLive

#33Core

Firebase DB (Firestore / Realtime Database)

Cloud-hosted NoSQL from Google with built-in real-time synchronization: CRUD plus live onSnapshot listeners, declarative queries, server-enforced security rules, and transparent offline persistence — a backend-as-a-service that removes the transport, auth and reconnection plumbing.

15m

#34Advanced

Push Notifications

Server-to-device messages delivered through a service worker and the browser's push service — the only real-time channel that reaches users when your app is closed — built on the Push API, the Notifications API, VAPID authentication, and an explicit permission grant.

16m

#35Core

WebSockets

A persistent, full-duplex connection over a single TCP socket upgraded from HTTP: both sides can send framed messages any time with minimal overhead — the right tool for chat, collaboration, live dashboards and gaming — plus the reconnection, heartbeat and horizontal-scaling concerns you must design for.

17m

#36Core

Server-Sent Events (SSE)

One-directional server-to-client streaming over a single long-lived HTTP connection via the native EventSource API: dead simple, auto-reconnecting with Last-Event-ID resume, proxy-friendly, and ideal for feeds, notifications, live logs, tickers and LLM token streams — with clear limits that tell you when to reach for WebSockets instead.

14mLive

Client-Side Storage

Web Storage, IndexedDB, and security

2 topics

#37Core

Web Storage (localStorage, sessionStorage, IndexedDB)

The complete client-side storage map: how localStorage & sessionStorage work, cookies and their attributes, IndexedDB's async transactional model, capacity & lifetime trade-offs, serialization, sync-vs-async performance, cross-tab sync, and exactly which store to reach for — beginner to advanced.

17mLive

#38Advanced

Frontend Security (XSS, CSRF, CSP, Input Sanitization)

The UI layer is the first line of defense: escape output, sanitize HTML with DOMPurify, lock down resources with CSP, and protect requests with CSRF tokens and SameSite cookies.

UI & Visualization

Design systems, charts, and animation

3 topics

#39Core

UI Component Libraries / Design Systems (MUI, Atlaskit)

How to consume, theme, and override accessible component libraries (MUI, shadcn/ui, Radix/Headless UI) and back them with a design-token system: palette, typography, spacing, dark mode, and the a11y you get for free — plus when to override vs when to hand-roll.

16mLive

#40Core

Data Visualization & Charts (Recharts, D3, Chart.js)

How charts actually get drawn — SVG vs Canvas, the scale abstraction that maps data to pixels — and how to pick between declarative React charting (Recharts), imperative low-level control (D3), and Canvas-based libraries (Chart.js), plus the accessibility most charts forget.

17mLive

#41Core

Animations & Transitions (CSS + Framer Motion)

Why transform and opacity are the only cheap things to animate, how CSS transitions and @keyframes work, spring vs tween timing, and how Framer Motion adds exit/layout animations React can't do alone — plus honoring prefers-reduced-motion.

16mLive

Optimization & DevTools

Performance, Web Vitals, and tooling

4 topics

#42Core

Performance Optimization

Lazy-load routes, memoize components and callbacks, and virtualize long lists to keep React apps fast.

#43Core

Core Web Vitals

LCP, INP, and CLS are Google's user-centric performance metrics — know the targets and the fixes.

#44Core

Browser DevTools

Master the Network, Performance, Memory, Console, Application, and Lighthouse panels to debug real apps.

#45Core

Internationalization (i18n)

Translate UI with i18next/react-i18next, interpolate values, and handle RTL languages like Arabic.

Quality & Testing

Linting, testing, and i18n

2 topics

#46Core

Linting & Code Quality (ESLint, Prettier)

ESLint catches bugs and bad patterns; Prettier enforces consistent formatting automatically.

#47Core

Testing (Vitest + React Testing Library + Playwright)

The frontend test pyramid: many fast component tests with Vitest + RTL, a few end-to-end flows with Playwright.

Project & Delivery

Structure, config, builds, and CI/CD

6 topics

#48Core

Project Structure (Best Practice)

Feature-based organization scales better than type-based folders for non-trivial apps.

#49Core

Environment Configuration

Vite env vars use a VITE_ prefix per environment — and never hold secrets.

#50Core

Build & Deploy

Vite builds static assets into /dist; preview verifies the production bundle locally.

#51Advanced

CI/CD & Containerization

A GitLab pipeline builds, tests, and deploys; Docker multi-stage ships a tiny Nginx image.

#52Advanced

PWA (Progressive Web App)

The Vite PWA plugin wires up a manifest, service worker, and Workbox caching strategies.

#53Core

Figma-to-Code

A repeatable workflow: inspect the design, extract tokens, then build components top-down.

Integrations & AI

PWA, third-party SDKs, and AI workflows

3 topics

#54Core

Third-party Integrations (Sentry, Mixpanel, Firebase)

Wire in error monitoring (Sentry) and product analytics (Mixpanel) so you can see crashes and user behaviour in production.

#55Core

AI-Assisted Development

Use AI coding tools (Cursor, Claude Code, Copilot) to accelerate how you build — with clear prompts and disciplined review.

#56Advanced

AI Feature Integration

Build AI features into the app — categorizers, chatbots, summarizers — always routing LLM calls through your backend.

Architecture Awareness

Next.js/SSR, micro-frontends, React Native

3 topics

#57Advanced

Next.js / SSR & SSG

A React meta-framework adding SSR, SSG, ISR, and file-based routing to solve SEO and initial load.

#58Advanced

Micro-Frontend Architecture

The microservices pattern applied to the UI: independent teams own and deploy independent modules.

#59Advanced

React Native / Cross-Platform

Build iOS + Android apps with React: same patterns, native rendering targets instead of the DOM.