Home
All roadmaps

Front-End Track

Mentoxis Front-End Interview Roadmap

A start-to-offer path for the front-end interview at product companies — from markup to system design, in the order that compounds.

8 stages12–16 weeksBuilt for students and working engineers targeting SDE-1 / SDE-2 front-end and full-stack-leaning roles.
1Core · sequential◇Optional · parallel∞Ongoing

  1. Why it matters · Machine-coding and pixel-perfect rounds start here. Accessibility and layout gaps are the fastest way to lose an otherwise strong interview.

    Semantic HTML

    • Document structure & sectioning elements
    • Forms, inputs & native validation
    • Tables, lists, media (img/picture/video)
    • Metadata, links & the <head>

    Accessibility (a11y)

    • ARIA roles, states & labels
    • Keyboard navigation & focus management
    • Color contrast & readable typography
    • Screen-reader mental model

    CSS core

    • Cascade, specificity & inheritance
    • Box model & units (rem/em/%/vh/ch)
    • Selectors, combinators, :is()/:where()/:has()
    • Stacking context & z-index

    Layout & responsive

    • Flexbox & Grid
    • Positioning & containing block
    • Media queries, mobile-first, clamp()
    • Container queries

    Modern & visual

    • Custom properties (CSS variables)
    • Transitions, transforms, animations
    • Logical properties & cascade layers
    • Reflow vs repaint, will-change

    Interview classics

    • Center a div — every technique
    • Truncate text / line clamp
    • Sticky header & sticky footer
    • CSS-only tooltip, accordion, tabs
    Practice thisMock this roundTutorials coming soon

  2. Why it matters · Most front-end rounds are really JavaScript rounds. Closures, the event loop, and polyfill machine-coding show up at nearly every product company.

    Language core

    • var / let / const, hoisting, TDZ, scope
    • Types, coercion, == vs ===
    • Strict mode & common gotchas

    Functions & this

    • Closures & lexical scope
    • Higher-order functions & currying
    • this binding — call / apply / bind
    • Arrow vs regular functions

    Objects & prototypes

    • Prototype chain & inheritance
    • new, Object.create, class syntax
    • Property descriptors & immutability

    Async JavaScript

    • Event loop, micro vs macro tasks
    • Promises & async/await
    • Promise.all / race / allSettled / any
    • Error handling in async flows

    ES6+ & data

    • Destructuring, spread/rest, modules
    • Optional chaining & nullish coalescing
    • map / filter / reduce, Set, Map
    • Generators & iterators

    Machine-coding staples

    • debounce & throttle
    • deepClone, memoize, curry
    • Polyfills: bind, Promise.all, map/reduce
    • EventEmitter, retry w/ backoff, LRU cache
    Practice thisMock this roundTutorials coming soon

  3. Why it matters · Separates people who can wire up a component from people who can reason about performance, security and rendering under load — exactly the senior signal interviewers probe.

    How the web works

    • DNS, TCP/IP, HTTP/HTTPS
    • HTTP methods, status codes, headers
    • HTTP/1.1 vs 2 vs 3

    Browser internals

    • Critical rendering path
    • Parse → style → layout → paint → composite
    • DOM / CSSOM, reflow & repaint

    Networking & data

    • REST & GraphQL basics
    • WebSockets, SSE, long polling
    • CORS & caching (Cache-Control, ETag, CDN)

    Security

    • XSS, CSRF, CSP, clickjacking
    • Cookies: HttpOnly / SameSite / Secure
    • Auth: sessions, JWT, OAuth basics

    Performance

    • Core Web Vitals (LCP / CLS / INP)
    • Code splitting, tree shaking, bundling
    • Lazy loading, prefetch/preload, images

    Storage & rendering

    • localStorage / sessionStorage / IndexedDB
    • Service Workers & PWA basics
    • CSR vs SSR vs SSG vs ISR, hydration
    Mock this roundTutorials coming soon

  4. Why it matters · Product companies expect fluent hooks and the ability to reason about render behavior. This is the conceptual round; building components under time pressure is its own stage.

    Core model

    • JSX, components, props, state
    • Virtual DOM & reconciliation
    • Keys, lists & rendering behavior

    Hooks

    • useState, useEffect (deps & cleanup)
    • useRef, useMemo, useCallback
    • useContext, useReducer, custom hooks
    • Rules of hooks

    Patterns

    • Composition & compound components
    • Controlled vs uncontrolled
    • HOCs, render props, lifting state
    • Error boundaries, Suspense

    State & data

    • Context vs Redux Toolkit vs Zustand
    • Server state: React Query / SWR
    • Loading / error / empty states

    Performance

    • memo, useMemo, useCallback — when
    • Avoiding re-renders, key stability
    • Code splitting & virtualization
    • React Profiler
    Mock this roundTutorials coming soon

  5. Why it matters · The machine-coding round is where React knowledge becomes a hire signal. Interviewers watch you build a real, interactive component in 45–60 minutes — state modeling, edge cases, accessibility and clean structure all count.

    How the round works

    • Clarify requirements & scope first
    • Model state before writing JSX
    • Handle loading / empty / error states
    • Keyboard & accessibility basics

    UI components

    • Star rating, tabs, accordion
    • Modal / dialog, tooltip, carousel
    • OTP input, progress bar

    List & data patterns

    • Autocomplete / typeahead (with debounce)
    • Infinite scroll & pagination
    • Nested comments, todo list
    • Data table with sort & filter

    Games & stateful widgets

    • Tic-tac-toe, memory game
    • Stopwatch / timer
    • Traffic-light state machine
    Practice thisMock this roundTutorials coming soon

  6. Why it matters · Many front-end loops skip heavy DSA, but a coding screen with arrays, strings, hashing and recursion is common. Learn the front-end-flavored patterns, not competitive-programming depth.

    Foundations

    • Big-O time & space, amortized cost
    • Arrays & strings
    • Hashing (maps & sets)

    Core patterns

    • Two pointers & sliding window
    • Prefix sums & intervals
    • Recursion & backtracking basics

    Structures

    • Linked lists, stacks, queues
    • Trees & basic graph traversal (BFS/DFS)
    • Binary search & its variants

    Front-end-flavored

    • Flatten / unflatten nested JSON
    • DOM tree traversal
    • Group anagrams, top-k frequent
    • Debounce/throttle as logic problems
    Mock this roundTutorials coming soon

  7. Why it matters · For mid+ roles this is decisive. Interviewers want a structured approach to component APIs, rendering strategy, data flow and performance budgets — and the ability to drive the conversation.

    Approach & framework

    • RADIO: Requirements, Architecture, Data, Interface, Optimizations
    • Scoping & clarifying requirements
    • Stating assumptions & trade-offs
    • Driving a 45-minute round

    Component & app design

    • Reusable component API design
    • Design systems & theming
    • Rendering strategy (CSR/SSR/SSG)
    • State management architecture

    Data & networking

    • REST vs GraphQL, pagination (offset/cursor)
    • Caching layers & optimistic updates
    • Real-time: WebSocket / SSE / polling
    • Normalization

    Performance & scale

    • Bundle & asset strategy, CDN
    • Virtualization & lazy loading
    • Perceived performance & skeletons
    • Core Web Vitals budgets

    Classic problems

    • Design a news feed / infinite feed
    • Autocomplete / typeahead
    • Chat / messenger UI
    • Photo feed (Instagram), collaborative docs
    Practice thisMock this roundTutorials coming soon

  8. Why it matters · The bar-raiser / hiring-manager round decides close calls. A rehearsed story bank and a clear project deep-dive turn 'strong technically' into an offer.

    Frameworks

    • STAR: Situation, Task, Action, Result
    • Quantifying impact with metrics
    • Structuring a concise answer

    Story bank

    • Conflict, failure, ownership, ambiguity
    • Leadership & tight-deadline stories
    • Disagreement with a manager / peer
    • Proudest project & biggest learning

    Values & project

    • Company values / leadership principles
    • Project deep-dive: architecture & trade-offs
    • Whiteboarding your own system

    Closing the loop

    • Questions to ask the interviewer
    • Handling 'tell me about yourself'
    • Offer handling & negotiation
    Book this mockTutorials coming soon

Don't wait for the offer stage.

Book a 1:1 mock interview with a mentor at any point on this path — after a single stage or a full loop. Get scored, honest feedback on the exact round you're prepping, plus a plan for what to fix next.

Book a mock interview

Front-End interview FAQ

How long does it take to prepare for a front-end interview?
With a focused plan, most engineers need 12–16 weeks to go from fundamentals to interview-ready. The Mentoxis front-end roadmap orders the work — HTML/CSS, JavaScript, web fundamentals, React, machine coding, and front-end system design — so each stage builds on the last instead of scattering your time.
What should I study for a front-end developer interview in 2026?
Prioritise JavaScript (closures, the event loop, async, polyfills), React hooks and rendering behavior, semantic HTML and accessibility, CSS layout, web performance and security fundamentals, machine-coding components, and front-end system design. Behavioural rounds matter too. The roadmap lists the exact topics for each area.
Is DSA required for front-end interviews?
It's optional at many product companies but basic problem solving is not. Expect a coding screen with arrays, strings, hashing and recursion — front-end-flavored problems like flattening JSON or DOM traversal — rather than heavy competitive programming.
Do I need React for front-end interviews?
React is the default ask at most product companies. Angular or Vue are accepted if you own them, but the machine-coding round almost always assumes React. The roadmap covers hooks, patterns, performance, and a bank of components to build from memory.
How do I practice front-end machine coding?
Build interactive components under a timer — autocomplete, infinite scroll, tabs, modal, OTP input, nested comments. Practise free on Mentoxis at /fe-questions, then book a 1:1 mock interview to get scored feedback on your approach.
What is the best front-end interview roadmap?
The best roadmap is one ordered so topics compound and mapped to what product companies actually test. The Mentoxis front-end roadmap does this end-to-end and links each stage to practice and 1:1 mock interviews with senior engineers.