---
title: "Frontend Developer Interview Questions: 40+ Questions with Answers (2026)"
description: "Comprehensive list of frontend developer interview questions covering HTML/CSS, JavaScript, React, performance optimization, and system design. Prepare for interviews at top tech companies."
canonical: "https://mortit.com/blog/frontend-developer-interview-questions"
---
Interview Prep

# Frontend Developer Interview Questions

40+ questions asked at top tech companies-with detailed answers and tips for each.

20 min read Updated February 2026

TL;DR

Frontend interviews test six areas: **HTML/CSS** (layout, semantics, responsiveness), **JavaScript** (closures, async, the event loop), **React/Frameworks** (hooks, state, rendering), **Performance** (Core Web Vitals, optimization), **System Design** (component architecture), and **Behavioral**. The best candidates can both write clean code and explain their decisions.

## What Frontend Interviews Look Like in 2026

Frontend developer interviews have evolved significantly. Companies now test far beyond "can you center a div." You need to demonstrate deep understanding of how browsers work, how frameworks optimize rendering, and how to build accessible, performant applications at scale.

| Category | What It Tests | Example Question |
| --- | --- | --- |
| **HTML/CSS** | Semantic markup, layout, accessibility | "Build a responsive nav without JavaScript" |
| **JavaScript** | Core language, async patterns, DOM | "Explain how closures work" |
| **React/Frameworks** | Component patterns, state management | "When would you use useRef vs useState?" |
| **Performance** | Web Vitals, bundle optimization | "How would you reduce LCP on this page?" |
| **System Design** | Architecture, scalability, tradeoffs | "Design an autocomplete component" |
| **Behavioral** | Collaboration, ownership, communication | "Tell me about a time you disagreed with a design decision" |

## HTML & CSS Questions

These questions feel basic, but they trip up many candidates. Interviewers use them to quickly gauge your depth of understanding versus surface-level memorization.

1.  **What is the difference between semantic and non-semantic HTML? Why does it matter?**
2.  **Explain the CSS box model. What does box-sizing: border-box change?**
3.  **What are the differences between Flexbox and Grid? When would you choose one over the other?**
4.  **How does CSS specificity work? What is the specificity of an inline style vs. an ID selector?**
5.  **Explain the difference between em, rem, px, and viewport units. When do you use each?**
6.  **What is the CSSOM and how does it interact with the DOM to produce the render tree?**
7.  **How would you implement a responsive layout that works without media queries?**
8.  **What are CSS custom properties (variables)? How do they differ from Sass variables?**

**Sample Answer: Flexbox vs Grid:**

**Flexbox** is one-dimensional-it handles layout in a single direction (row or column) at a time. It is ideal for distributing space among items in a single axis, like a navigation bar or a row of cards.

**Grid** is two-dimensional-it handles rows and columns simultaneously. It excels at page-level layouts where you need precise control over both axes, like a dashboard or magazine layout.

In practice, I use Grid for the overall page structure and Flexbox for aligning items within individual components. They work well together.

## JavaScript Questions

JavaScript fundamentals are the backbone of every frontend interview. Even if the role is React-heavy, expect at least two or three deep JavaScript questions.

9.  **Explain closures. Give a practical example of when you would use one.**
10.  **How does the JavaScript event loop work? What is the difference between the microtask queue and macrotask queue?**
11.  **What is the difference between var, let, and const? Explain hoisting for each.**
12.  **Explain prototypal inheritance. How does it differ from classical inheritance?**
13.  **What is the difference between == and ===? When would you ever use ==?**
14.  **Explain event delegation. Why is it useful for performance?**
15.  **How do Promises work? What is the difference between Promise.all, Promise.race, and Promise.allSettled?**
16.  **What is the "this" keyword? How does its binding change in arrow functions vs regular functions?**
17.  **Write a debounce function from scratch.**
18.  **What is the difference between deep copy and shallow copy? How would you deep clone an object?**

**Sample Answer: Event Loop:**

The event loop is how JavaScript handles asynchronous operations despite being single-threaded. When async operations (like setTimeout, fetch, or DOM events) complete, their callbacks are placed into task queues.

There are two queues: the **microtask queue** (Promises, MutationObserver) and the **macrotask queue** (setTimeout, setInterval, I/O). After each task from the call stack completes, the engine drains the entire microtask queue before taking the next macrotask.

This is why a resolved Promise callback always executes before a setTimeout(..., 0) callback, even though both are asynchronous.

#### Pro Tip: Show, Don't Just Tell

When explaining JavaScript concepts, offer to write a small code snippet on the whiteboard. For example, when explaining closures, write a counter function that uses closure to maintain private state. Concrete examples make your answers far more convincing.

## React & Framework Questions

Most frontend roles in 2026 involve React, Next.js, or a similar component-based framework. These questions test whether you truly understand how the framework works under the hood.

19.  **Explain the React component lifecycle. How do hooks map to lifecycle methods?**
20.  **What is the virtual DOM? How does React's reconciliation algorithm work?**
21.  **When would you use useRef instead of useState?**
22.  **Explain the rules of hooks. Why can't you call hooks inside conditionals?**
23.  **What is the difference between controlled and uncontrolled components?**
24.  **How does React.memo work? When should you use it (and when should you not)?**
25.  **Explain the Context API. What are its performance limitations compared to state management libraries?**
26.  **What is the difference between SSR, SSG, and ISR in Next.js? When would you use each?**
27.  **How do React Server Components differ from traditional server-side rendering?**

**Sample Answer: useRef vs useState:**

**useState** triggers a re-render when the value changes. Use it for data that the UI depends on-form inputs, toggle states, data fetched from APIs.

**useRef** persists a value across renders without triggering re-renders. Use it for: referencing DOM elements (like focusing an input), storing interval/timeout IDs, or tracking previous values for comparison without causing unnecessary renders.

A common mistake is using useState for values the UI does not display. If you are storing a WebSocket instance or a timer ID, useRef is the right choice because updating it will not cause wasted re-renders.

#### Common Trap: Over-Memoizing

Many candidates say they would wrap everything in React.memo and useMemo. Interviewers watch for this. Memoization has a cost (memory and comparison overhead). Only memoize when you have measured a performance problem or when a component receives referentially unstable props and renders expensively.

## Performance Optimization Questions

Performance is no longer a nice-to-have. Core Web Vitals directly impact SEO and user experience. Expect at least one question on how you would diagnose and fix a slow page.

27.  **What are Core Web Vitals? Explain LCP, INP, and CLS.**
28.  **How would you diagnose and fix a page with a high Largest Contentful Paint?**
29.  **What is code splitting? How do you implement it in React?**
30.  **Explain lazy loading. How does the Intersection Observer API work?**
31.  **What causes layout shifts and how do you prevent them?**
32.  **How do you optimize images for the web? Compare different formats (WebP, AVIF, SVG).**
33.  **What is tree-shaking? How does it work with ES modules?**

#### Framework: Answering Performance Questions

**1\. Identify the metric:** Which Core Web Vital or performance metric is affected?

**2\. Diagnose:** What tools would you use? (Lighthouse, Chrome DevTools Performance tab, WebPageTest)

**3\. Root cause:** What is the specific bottleneck? (Large bundle, render-blocking resource, unoptimized image)

**4\. Fix:** What specific change would you make?

**5\. Verify:** How would you confirm the fix worked?

## System Design Questions

Frontend system design is now a standard round at mid-level and senior roles. These questions test your ability to think about architecture, tradeoffs, and scalability on the client side.

34.  **Design an autocomplete/typeahead search component. How do you handle debouncing, caching, and keyboard navigation?**
35.  **Design an infinite scroll feed (like Twitter). How do you handle virtualization and memory?**
36.  **Design a real-time collaborative text editor. What are the frontend challenges?**
37.  **How would you architect a micro-frontend system? What are the tradeoffs?**
38.  **Design a component library that supports theming. How do you handle style encapsulation?**

**Sample Answer: Autocomplete Design (Key Points):**

**Debouncing:** Wait 200-300ms after the user stops typing before firing the API request. This reduces unnecessary network calls.

**Caching:** Use an in-memory cache (or React Query/SWR) so that previously fetched suggestions for the same prefix are instant.

**Keyboard navigation:** Track the highlighted index in state. Arrow keys move the index, Enter selects the item. Ensure ARIA attributes are set for screen readers (role="listbox", role="option", aria-activedescendant).

**Race conditions:** If the user types "rea" then "reac", the response for "rea" might arrive after "reac". Use an AbortController or check a request ID to discard stale responses.

## Behavioral Questions

Do not underestimate the behavioral round. Companies want to know you can collaborate with designers, PMs, and backend engineers-not just write code in isolation.

39.  **Tell me about a time you disagreed with a designer about a UI decision. How did you resolve it?**
40.  **Describe a project where you significantly improved performance. What was the impact?**
41.  **How do you stay current with frontend technologies? Give a specific example of something you recently learned and applied.**
42.  **Tell me about a time you had to refactor a large codebase. How did you approach it?**
43.  **How do you handle a situation where requirements change mid-sprint?**

#### STAR Method for Behavioral Questions

**Situation:** Set the context briefly (1-2 sentences)

**Task:** What was your specific responsibility?

**Action:** What did you do? (This should be the longest part)

**Result:** What was the measurable outcome?

## How to Practice

Frontend interviews require both breadth and depth. Here is a focused preparation plan.

-   **JavaScript fundamentals:** Spend time on closures, prototypes, and async patterns-not just framework syntax
-   **Build projects:** Create small apps that demonstrate responsive layouts, state management, and API integration
-   **Practice live coding:** Use tools like CodeSandbox or a blank editor to simulate whiteboard conditions
-   **Study system design:** Read case studies on how companies like Airbnb and Shopify architect their frontends
-   **Mock interviews:** Practice explaining your thought process out loud while coding

The biggest differentiator in frontend interviews is your ability to think out loud. Writing good code matters, but communicating your reasoning as you go is what gets you to the next round. [MORT's Interview Practice](https://mortit.com/features/interview-practice) lets you simulate frontend interviews with AI and get feedback on both your technical answers and communication style.

## Practice frontend interviews with AI

MORT's Interview Practice includes frontend-specific questions covering JavaScript, React, performance, and system design. Get instant feedback on your answers and communication clarity.

[Learn About Interview Practice](https://mortit.com/features/interview-practice) [Try a Free Mock Interview](https://app.mortit.com/signup)

## More Interview Resources

### [Software Engineer Interview Questions](https://mortit.com/blog/software-engineer-interview-questions)

General SWE questions covering algorithms and system design

### [AI Job Matching](https://mortit.com/features/ai-job-matching)

Find roles matched to your skills with AI

### [Complete Interview Prep Guide](https://mortit.com/blog/interview-preparation-guide)

Everything you need from research to follow-up