The frontend coding round decoded — the anatomy of a strong UI build answer (clarify, build behavior, handle loading/empty/error, add accessibility, narrate throughout), then three worked React builds interviewers love: a debounced accessible autocomplete with request cancellation, a keyboard-navigable tabs component following the ARIA pattern, and a sortable/filterable/paginated data table. With the edge cases and a11y that separate a pass from a strong pass.
A round-by-round map of Airbnb's front end engineering loop — recruiter screen, online assessment, UI coding, frontend system design, code review, and behavioral — with what each round actually tests, how to prepare, the focus topics, and the common mistakes. Coding is one round of six; this shows you where the other five points go and how to weight your prep across a 4–6 week runway.
A practical introduction to frontend system design for interviews and real work — a repeatable framework (requirements, high-level architecture, data model, API and data flow, deep dives, trade-offs), the core areas you're expected to reason about (rendering strategy, component and state architecture, data fetching and caching, performance, accessibility, real-time), and a worked example designing an autocomplete search — with common mistakes and exercises.
A curated bank of frontend interview questions with strong, concise answers — JavaScript and the language, HTML/CSS and accessibility, the browser and the network, performance and Core Web Vitals, React (hooks, rendering, state), Next.js (Server Components, rendering, caching), and behavioral/design questions — each with a 'Show answer' you can self-test against, plus how to approach the interview itself.
A practical introduction to Next.js and the App Router with TypeScript — what a React framework adds on top of React, file-based routing with folders and page.tsx, layouts and nested routes, Server vs Client Components, fetching data on the server, rendering strategies (SSG/SSR/ISR), navigation with next/link and useRouter, special files (loading, error, not-found), the Metadata API for SEO, and a first look at Server Actions and next/image — with common mistakes and hands-on exercises.
A practical guide to fetching data in React with TypeScript — the loading/error/success states every request has, fetching in useEffect with cleanup and AbortController, avoiding race conditions, typing responses, handling HTTP errors properly, extracting a useFetch hook, mutations and refetching, and why a library like TanStack Query exists (caching, dedup, revalidation) — with common mistakes and hands-on exercises.
A practical guide to client-side routing in React with React Router and TypeScript — what a SPA router does, setting up routes, Link and NavLink navigation, nested routes and layouts with Outlet, dynamic URL params with useParams, reading and setting query strings with useSearchParams, programmatic navigation with useNavigate, redirects and protected routes, 404 handling, and lazy-loading routes — with common mistakes and hands-on exercises.
A deep, practical guide to React hooks with TypeScript — the Rules of Hooks, useState in depth (lazy init, functional updates, state as a snapshot), useEffect and the dependency array (synchronizing with external systems, cleanup, and when you don't need an effect), useRef for values and DOM nodes, useMemo and useCallback, useContext for shared state, useReducer for complex state, building your own custom hooks, common mistakes, and hands-on exercises with solutions.
A deep, practical guide to designing React components and typing their props with TypeScript — props as a read-only contract, typing props with type vs interface, optional values and defaults, children and React.ReactNode, composition patterns (wrappers, slots, specialized components), forwarding props to the DOM with rest and React.ComponentProps, discriminated-union props for variants, prop drilling and why composition beats configuration, common mistakes, and hands-on exercises with solutions.
A complete, practical guide to the React mental model every frontend developer needs — why React exists, thinking declaratively (UI = f(state)), components and JSX, typed props with TypeScript and one-way data flow, rendering lists and keys, conditional rendering, handling events, state with useState, immutable updates, the re-render model, purity and composition, common mistakes, and hands-on exercises with solutions.
A complete, practical guide to Promises — what they are and the three states, creating and consuming them, chaining with .then/.catch/.finally, the combinators (all, allSettled, race, any), error propagation, microtask timing, and the common mistakes — with hands-on exercises and solutions.
A complete, practical guide to CSS motion — transitions and their four parts, what's animatable and what isn't, transform and why it's the performant property, easing and cubic-bezier, keyframe animations and all the animation-* properties, performance (compositor vs main thread), prefers-reduced-motion, plus common mistakes and hands-on exercises with solutions.
A practical guide to JavaScript modules and the build toolchain — named and default exports, import syntax, why modules have their own scope, static vs dynamic import, the module graph, npm and package.json, bundlers like Vite, and how a modern build works — with hands-on exercises and solutions.
A complete, practical guide to styling text on the web — the font stack and system fonts, @font-face and web fonts, font-display and loading performance, variable fonts, sizing with rem and fluid clamp(), line-height and measure, letter-spacing, text wrapping and truncation, text-wrap balance/pretty, vertical rhythm, accessibility, common mistakes, and hands-on exercises with solutions.
A complete, practical guide to the Document Object Model — what the DOM really is, selecting and traversing nodes, reading and changing content, attributes vs properties, classes and styles, creating/inserting/removing elements, the event model (bubbling, delegation, preventDefault), forms, performance (reflow/repaint, fragments, debouncing), common mistakes, and hands-on exercises with solutions.
A complete, practical guide to responsive design — the viewport meta tag, mobile-first media queries, min/max-width and ranges, breakpoints that follow content, fluid type with clamp(), responsive images, prefers-* feature queries, and container queries — with hands-on exercises.
The foundation under all of CSS — every selector type and combinator, pseudo-classes and pseudo-elements, how specificity is actually calculated, the cascade's full resolution order, inheritance, the inherit/initial/unset/revert keywords, escaping !important, and hands-on exercises with solutions.
A complete, visual guide to CSS Grid — the grid container, tracks, fr units, repeat() and minmax(), template areas, line-based and area placement, auto-fit vs auto-fill, gap, alignment, implicit grids, and hands-on exercises with solutions.
A complete, practical guide to color on the web — hex, rgb and hsl, the modern oklch space, alpha and transparency, currentColor, color-mix, linear/radial/conic gradients, color stops and hard stops, multiple backgrounds and background-clip, dark mode with prefers-color-scheme, contrast and accessibility, common mistakes, and hands-on exercises with solutions.
A complete, practical guide to CSS positioning — the position values and how each one moves an element, the offset properties, containing blocks, sticky positioning, z-index and stacking contexts (and why z-index sometimes does nothing), plus common mistakes and hands-on exercises with solutions.
A complete, practical guide to web forms — the form element and submission, input types, labels and accessibility, the name attribute, HTML5 validation, the Constraint Validation API, handling submit in JavaScript with FormData, select/textarea/fieldset, and common mistakes — with hands-on exercises and solutions.
A complete, visual guide to CSS Flexbox — the two axes, flex-direction, wrapping, justify-content, align-items, gap, grow/shrink/basis, the flex shorthand, auto margins, the min-width:0 gotcha, RTL behaviour, and hands-on exercises with solutions.
A complete, practical guide to async/await — how it builds on promises, the await keyword, error handling with try/catch, running tasks in parallel vs sequence, async functions always returning promises, top-level await, loops and async, and the common mistakes — with hands-on exercises and solutions.
A complete, practical guide to the JavaScript every developer needs — how it runs, variables and scope, types and coercion, functions and closures, this, objects and arrays, destructuring, the event loop, promises and async/await, modules, the DOM, error handling, common mistakes, and hands-on exercises with solutions.
A complete, visual guide to the CSS box model — content, padding, border, margin, box-sizing, margin collapsing, logical properties, and the gotchas that bite in real layouts.
A tour of the modern CSS features now shipping in browsers — container queries, :has(), nesting, cascade layers, subgrid, custom properties, color-mix() and modern color, logical properties, clamp(), aspect-ratio, scroll-driven animations, view transitions, and :is()/:where() — with hands-on exercises.