Frontend Coding Interview Questions and Prep Guide (2026)

Frontend coding interviews are usually not one pure algorithm round. The strongest candidates can move between JavaScript utilities, UI components, async state, browser behavior, and framework tradeoffs while still shipping a working result.

Use this page as the prep guide and question map. When you are ready to build, move into Frontend machine coding questions or the coding practice workspace.

What frontend coding interviews test

Interviewers are not only checking whether the final answer passes a few examples. They are watching how you turn an ambiguous prompt into a small product-quality result.

• Requirements. Restate the goal, clarify inputs, and name the smallest useful version.
• Correctness. Handle happy path, empty state, invalid data, and race conditions.
• UI behavior. Make clicks, keyboard control, focus, loading, and error states predictable.
• State model. Keep source of truth, derived values, and async transitions understandable.
• Communication. Explain tradeoffs while coding instead of going silent.
• Verification. Test the result with concrete cases before polishing.

Common prompt types

Most frontend coding interview questions fall into a few repeatable buckets. Build practice around these buckets instead of memorizing isolated answers.

Most asked frontend coding prompts

Start with these high-signal prompts before browsing the full question bank. Each one maps to the behavior interviewers usually break first: state ownership, async timing, edge cases, accessibility, and explanation quality.

25 frontend coding interview questions to practice

This list matches the ItemList schema for the page. Use it as a practice checklist, then open the dedicated practice surfaces for timed implementation.

UI and machine coding prompts

1. Build accessible autocomplete with debounce and keyboard selection. Cover async state, stale responses, focus, loading, no-results, and error states.
2. Implement a dropdown menu with mouse, keyboard, and Escape behavior. Clarify outside-click behavior, focus return, and menu semantics.
3. Build a modal dialog with focus trap and dismissal behavior. Add accessible labeling, Escape handling, overlay click policy, and scroll control.
4. Create tabs with roving keyboard focus. Keep active state, keyboard navigation, and panel rendering simple.
5. Build an accordion or FAQ component. Decide whether multiple sections can stay open and how controlled state should work.
6. Implement a star rating component. Handle hover, keyboard input, selected value, read-only mode, and form integration.
7. Build a paginated and sortable data table. Explain sorting rules, stable row identity, empty states, and page reset behavior.
8. Build a nested checkbox tree with indeterminate parents. Model parent-child selection and derived partial state carefully.
9. Implement a file explorer tree from nested JSON. Use recursion, expansion state, and predictable folder/file interactions.
10. Build a multi-step form with validation and persisted draft state. Cover validation timing, navigation, and recovery from invalid or stale drafts.

JavaScript utility prompts

11. Implement debounce. Preserve arguments, context, cancellation, and the last invocation.
12. Implement throttle. Explain leading and trailing behavior before coding.
13. Implement once or memoize. Clarify cache keys, return values, errors, and repeated calls.
14. Build a promise pool with a concurrency limit. Keep result ordering, error behavior, and queue state explicit.
15. Implement a cancellable fetch wrapper that ignores stale responses. Use request IDs or AbortController and explain tradeoffs.
16. Write an event delegation helper for dynamic list items. Handle matching, bubbling, cleanup, and nested targets.
17. Build an LRU cache for API responses. Use Map ordering and explain eviction policy.
18. Flatten nested data or safely deep clone an object. Name limits around circular references, functions, dates, and large inputs.

Browser, CSS, and debugging prompts

19. Explain async versus defer and script loading behavior. Tie the answer to parsing, execution order, and render blocking.
20. Debug event loop ordering with promises and timers. Narrate microtasks, macrotasks, and rendering timing.
21. Fix layout shift in a responsive card grid. Stabilize media dimensions and content height before polishing styles.
22. Build responsive navigation with an accessible mobile menu. Use semantic buttons, focus behavior, and viewport-safe layout.

React, Angular, Vue, and vanilla variants

23. Debug stale state in a React search component. Connect hooks, closures, effects, request races, and derived state.
24. Build an optimistic todo list with rollback on failure. Cover temporary IDs, mutation status, error recovery, and user feedback.
25. Design a shopping cart or transfer list with derived totals and selection. Keep source state and computed values separate.

Evaluation rubric

A partial solution can still score well if the interviewer can see the right shape. Use this rubric during practice and during the last five minutes of the real round.

45-minute and 60-minute interview strategy

Time pressure is part of the test. The goal is not a perfect app; it is a credible implementation path with a running checkpoint.

45-minute round

1. 0-5 min: restate requirements, confirm must-haves, and choose the smallest working scope.
2. 5-20 min: build the baseline UI or utility with clear state and one happy path.
3. 20-35 min: add edge cases: empty, loading, error, repeated actions, keyboard, or race conditions.
4. 35-45 min: verify manually, explain tradeoffs, and name what you would harden next.

60-minute round

1. 0-10 min: clarify scope, inputs, constraints, state model, and examples.
2. 10-30 min: ship a visible MVP or passing utility implementation.
3. 30-45 min: cover edge states, async races, accessibility, and framework-specific behavior.
4. 45-55 min: test the important paths and simplify naming or component boundaries.
5. 55-60 min: summarize behavior, tradeoffs, production hardening, and remaining gaps.

Worked example: autocomplete

Autocomplete is a high-signal frontend coding interview question because it compresses async state, keyboard UX, stale network responses, and accessibility into one prompt.

Open the hands-on version when you want to implement it: Autocomplete Search Bar (Hooks).

type AutocompleteState = {
  query: string;
  status: 'idle' | 'loading' | 'success' | 'empty' | 'error';
  results: Suggestion[];
  highlightedIndex: number;
  selectedItem: Suggestion | null;
};

// Interview-safe stale response guard:
// only the newest request is allowed to update visible results.
let latestRequestId = 0;
const requestId = ++latestRequestId;
const results = await fetchSuggestions(query);
if (requestId !== latestRequestId) return;

Choose your practice format

Use Frontend machine coding questions as the main hands-on route, then jump into the exact format your interview loop expects.

Common mistakes

• Practicing only algorithms. Frontend rounds often test product behavior, browser APIs, UI state, and async flow.
• Skipping the prompt contract. Write down inputs, outputs, constraints, and examples before coding.
• Polishing before shipping. A running baseline beats a perfect-looking half-solution.
• Ignoring accessibility. Keyboard, focus, labels, and announcements are visible seniority signals.
• Not testing edge cases. Empty input, null data, repeated actions, and slow responses expose most failures.
• Going silent. Explain your next step, tradeoff, or uncertainty so the interviewer can grade your thinking.

What to practice next

Use this guide to choose the right next practice surface. Keep /machine-coding as the hands-on hub and use this URL as the prep map.

FAQ