Career roadmap
Frontend Engineer
Build the part of the product people actually touch: accessible, fast, and correct on every device you cannot test on.
Before you start Frontend
- HTML and CSS you can write without copying
- JavaScript fundamentals: closures, promises, array methods
- Git and a deployed personal site
The language under the framework
Interviewers probe JavaScript, not React. Fix the foundation before the framework.
The questions that decide frontend interviews are almost always plain JavaScript, asked about framework code.
Ch 1 — Closures- Closures, scope chains and the module pattern
- Prototypes, `this` binding, call/apply/bind
- Event loop: microtasks vs macrotasks
- Immutability, structural sharing, and why it matters to React
Frameworks are a layer over the DOM. Knowing the layer underneath is what separates senior from mid.
- Event delegation, bubbling and capture
- Reflow vs repaint, and what triggers layout
- MutationObserver, IntersectionObserver, ResizeObserver
- Shadow DOM and custom elements
Flexbox and grid are table stakes. Container queries and cascade layers are the current interview edge.
- Grid and flexbox: when each is the right answer
- Container queries and `:has()`
- Cascade layers, custom properties, specificity
- Logical properties and writing-mode-safe layout
Almost every frontend job posting now assumes TypeScript. Generics over component props are the usual test.
- Structural typing, unions, narrowing
- Generics in component props and hooks
- Discriminated unions for UI state
- `unknown` vs `any`, and typing third-party data
How a request actually reaches your component, and everything that can go wrong on the way.
- HTTP caching headers and the browser cache
- CORS, preflight, and credentialed requests
- Cookies: SameSite, Secure, HttpOnly
- AbortController and request cancellation
BuildA vanilla JS single-page app with client-side routing and no build step. No framework allowed.
React in depth
Move past 'I can build a to-do app' to reasoning about renders, state ownership and data flow.
Why a component re-rendered is the single most common React interview question.
Ch — Functional Components- Reconciliation, keys, and list identity
- When memo, useMemo and useCallback actually help
- Referential identity and the dependency array
- Batching and transitions
Most React bugs are state in the wrong place. Interviewers ask you to move it.
- Local vs lifted vs global state
- Server state vs client state
- Reducers and state machines for complex flows
- Context: what it costs and when to avoid it
Caching, revalidation and race conditions — the parts a useEffect fetch gets wrong.
- TanStack Query: cache keys, staleness, invalidation
- Optimistic updates and rollback
- Race conditions and stale responses
- Suspense and streaming
Every real product is mostly forms. Controlled vs uncontrolled is a standing interview question.
- Controlled vs uncontrolled inputs
- Schema validation with Zod
- Server-side validation and error mapping
- Accessible error messaging
Next.js and friends moved the interview from 'client only' to 'where does this code run'.
- Server vs client components
- Hydration and hydration mismatches
- Static, incremental and dynamic rendering
- Data loading on the server, and what leaks to the client
BuildA dashboard with server data, optimistic updates, and a table that stays smooth at 10,000 rows.
Performance and accessibility
The two areas that separate a frontend engineer from someone who can use a framework.
LCP, INP and CLS are the vocabulary hiring managers use. Know what moves each one.
- LCP: the critical request chain
- INP: long tasks and input delay
- CLS: reserved space and font swapping
- Field data vs lab data
Shipping less JavaScript is the highest-leverage performance work in most codebases.
- Code splitting and route-level chunks
- Tree shaking and side-effect flags
- Preload, prefetch, and priority hints
- Image formats, sizing and lazy loading
Profiling a janky list under time pressure is a common live exercise.
- Chrome performance profiler and flame charts
- Virtualised lists and windowing
- Debounce, throttle, and scheduling work
- Web workers for expensive computation
Increasingly a hard requirement rather than a nice-to-have, especially in public sector and enterprise.
- Semantic HTML and the accessibility tree
- Keyboard navigation and focus management
- ARIA: roles, states, and when not to use it
- WCAG 2.2 AA and colour contrast
Matters at any company with users outside one country. Often a differentiator, rarely a blocker.
- Message catalogues and pluralisation
- Intl APIs for dates, numbers and currency
- RTL layout with logical properties
- Locale-aware routing
BuildTake a slow page to green Core Web Vitals and a clean axe audit. Publish the before and after numbers.
Testing and tooling
Prove your code works without clicking through it, and keep the build honest.
Testing Library's 'test what the user sees' philosophy is the expected answer in interviews.
- Testing Library queries and user-event
- Mocking the network with MSW
- What to unit test vs what to end-to-end test
- Snapshot tests and why they rot
Playwright has become the default answer. Flakiness management is the real skill.
- Playwright selectors and auto-waiting
- Test isolation and fixtures
- Visual regression testing
- Running against preview deployments
You will be asked why the build is slow and what you would do about it.
- Vite, esbuild and the dev/prod split
- Source maps and debugging production
- Monorepos: workspaces and task caching
- Dependency hygiene and bundle analysis
Shipping safely is part of the job description at every level above junior.
- GitHub Actions for lint, test and build
- Preview environments per pull request
- Bundle size budgets in CI
- Feature flags and safe rollout
'How would you find out this broke for users?' is a standard senior question.
- Error boundaries and error reporting
- Source-mapped stack traces
- Real user monitoring
- Session replay and privacy trade-offs
BuildAdd a test suite to an existing project: unit, component and one end-to-end happy path, running in CI.
Interview and portfolio
Frontend interviews have their own shape: a machine-coding round and a UI system design round.
Build a working component in 60-90 minutes. Practised candidates pass; unpractised ones run out of time.
- Autocomplete with debounce and cancellation
- Infinite scroll and virtualisation
- Modal, tabs and accordion with full keyboard support
- Star rating, carousel, drag-and-drop list
Design a feed, a chat, or a design system. Component boundaries and data flow are what is scored.
- Component API design and composition
- Client caching and pagination strategy
- Real-time updates: polling, SSE, WebSocket
- Design tokens and theming
Lighter than backend interviews, but arrays, strings, trees and recursion still appear.
DSA Coding Questions- Arrays, strings, hash maps
- Tree traversal (the DOM is a tree)
- Recursion and memoisation
- Complexity analysis in plain language
Two deep projects beat ten tutorials. Reviewers open the repo before they open the site.
- README with architecture and trade-offs
- Live deployment with real data
- Lighthouse and axe scores in the README
- Commit history that shows iteration
Frontend roles sit next to design and product. Collaboration stories carry real weight.
- Disagreeing with a design decision
- Shipping under a deadline with known debt
- Explaining a technical trade-off to a non-engineer
- A bug you caused and what you changed after
BuildTwo polished projects with a written README covering the architecture decisions and the trade-offs you rejected.
Frontend tools on your CV
- TypeScript
- React
- Next.js
- Vite
- TanStack Query
- Playwright
- Testing Library
- Lighthouse
- axe
What Frontend employers ask to see
- A deployed app with green Core Web Vitals, numbers shown in the README
- A component library with keyboard and screen-reader support documented
- A before/after performance case study with real measurements
- A machine-coding repo: ten components built to interview time limits
The largest single hiring pool in web development. Every product company, agency, and enterprise IT department hires for it, and the ceiling is high once you own performance and accessibility rather than just components.
Content last reviewed 2026-08-31. Guidance only — no institute or paid placement is endorsed anywhere in this book.