Front-End Developer Interview Questions and Answers (2026): HTML, CSS, JavaScript and System Design

The short answer: front-end interviews (also searched as “frontend interview questions”) test the three layers of the web and how they meet in the browser: HTML (semantic structure, script loading, accessibility), CSS (the box model, specificity, layout with Flexbox and Grid, responsive design), and JavaScript (closures, the event loop, promises, events). Most loops add a framework round (usually React), a coding exercise without a framework, and for mid-level and senior roles front-end system design. The answers below are checked against MDN, web.dev and the W3C, with sources at the end.

What a front-end interview looks like

• Concept questions: short explanations with an example: “what does defer do?”, “how is specificity calculated?”, “what’s a closure?”
• JavaScript coding: implement a utility in plain JavaScript (debounce, throttle, a Promise.all, deep clone, flatten an array, an event emitter).
• UI coding: build a component in a sandbox: an autocomplete, tabs, a modal, a star rating, an image carousel, with attention to accessibility.
• Front-end system design: design a news feed, a chat UI or an autocomplete end to end.
• Behavioral: stories about performance work, accessibility, collaboration with designers, and mistakes you learned from.

The demand is real. The U.S. Bureau of Labor Statistics puts the median pay of web developers at $92,650 a year (May 2025). In Stack Overflow’s 2025 Developer Survey, JavaScript was used by 66% of respondents and HTML/CSS by 61.9%, ahead of every other language, with TypeScript at 43.6% and React at 44.7%.

HTML and accessibility questions

“Why does semantic HTML matter?”

Elements such as <header>, <nav>, <main>, <article>, <button> and <label> tell browsers, assistive technology and search engines what each part of the page is, not just how it looks. A <button> is focusable and works with the keyboard out of the box; a <div> with a click handler isn’t and doesn’t. Interviewers often follow up with: “how would you make this custom dropdown accessible?” Start from native elements, then add ARIA only where no native element fits.

“What do async and defer do on a script tag?”

By default, a classic script is fetched and run immediately, blocking HTML parsing. MDN describes the two attributes like this:

• async: fetched in parallel with parsing and run as soon as it arrives, so there’s “no guarantee” about the order of several async scripts. Good for independent scripts such as analytics.
• defer: fetched in parallel and run after the document is parsed, before DOMContentLoaded, in the order the scripts appear. Good for scripts that need the DOM or each other.
• type="module" scripts are deferred by default.

“What is WCAG, and what does AA mean?”

The Web Content Accessibility Guidelines are the W3C’s accessibility standard; the current version is WCAG 2.2 (W3C Recommendation, latest version dated 12 December 2024). Its four principles are that content must be perceivable, operable, understandable and robust, and each success criterion has a level: A, AA or AAA. Level AA is the usual target for a product team. In an interview, name concrete practices: text alternatives for images, labels on every form field, enough color contrast, full keyboard access with a visible focus, and correct heading order.

“How do you test accessibility?”

Use the keyboard alone (Tab, Shift+Tab, Enter, Space, Escape), an automated checker in the browser’s developer tools or CI, and a screen reader on the main flows. Automated tools catch only part of the problems, so mention manual checks.

CSS questions

“Explain the box model.”

Every element is a box of content, padding, border and margin. With the default box-sizing: content-box, width sets the content only, so padding and border make the box wider; with box-sizing: border-box, width includes padding and border, which is why many stylesheets set it globally.

“How does specificity work?”

MDN describes specificity as a three-column weight, ID-CLASS-TYPE:

• each ID selector adds 1-0-0;
• each class, attribute selector or pseudo-class adds 0-1-0;
• each type selector or pseudo-element adds 0-0-1.

The columns are compared left to right, so one ID beats any number of classes; if everything ties, the last declaration wins. The universal selector and combinators add nothing; :is(), :not() and :has() take the weight of their most specific argument, and :where() is always zero, which makes it handy for low-specificity defaults. Inline styles beat normal author styles, and !important overrides specificity, which MDN calls “a bad practice” for that purpose; cascade layers are the cleaner tool.

“Flexbox or Grid?”

MDN’s rule: Flexbox is for layout “in one dimension” and works “from the content out”; Grid is for “two-dimensional layout” and works “from the layout in.” If you control a row or a column, use Flexbox (a toolbar, a list of tags); if you control rows and columns, use Grid (a page layout, a card grid). Many layouts use both.

“em vs rem?”

rem is relative to the root element’s font size, so it’s predictable everywhere; em is relative to the font size of the element itself (or its parent, for font-size), so it compounds when nested. A common answer: use rem for most sizing and em for things that should scale with their component’s text.

“How do you build a responsive layout?”

Start mobile-first, use flexible units and Grid or Flexbox, add media queries where the layout breaks (not at device sizes), size images responsively (srcset, sizes), and test on real devices. Mention container queries when a component should adapt to the space it’s given rather than to the viewport.

JavaScript questions

These are the fundamentals; our JavaScript interview questions guide goes deeper, with output puzzles and coding exercises.

“What is a closure?”

MDN’s definition: “the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment).” In practice, an inner function keeps access to the variables of the scope it was created in, even after the outer function has returned. The classic bug: handlers created in a for loop with var all share one variable, so they all see the last value; with let or const, each iteration gets its own binding.

“var, let and const?”

var is function-scoped and can be redeclared; let and const are block-scoped. const prevents reassignment of the binding, not mutation of the object it points to.

“Explain the event loop.”

JavaScript runs one job at a time, and each job runs to completion. MDN’s execution-model page describes two queues in browsers: tasks (timers, I/O, events) and microtasks (promise reactions), and “the microtask queue is drained first before the task queue is pulled.” So this prints sync, then promise, then timeout:

setTimeout(() => console.log('timeout'), 0);
Promise.resolve().then(() => console.log('promise'));
console.log('sync');

“How do events propagate, and what is event delegation?”

An event fires on its target, then bubbles up through its ancestors; capture (from the outside in) is opt-in. event.target is the element the event started on, and event.currentTarget is the element whose listener is running. Event delegation uses bubbling: one listener on a parent handles events from all its children, including ones added later, and checks event.target to see which child was clicked. stopPropagation() stops the event from reaching ancestors.

“Promises and async/await?”

A promise represents a value that will be available later (or an error). async/await is syntax over promises that lets you write asynchronous code top to bottom; wrap awaited calls in try/catch. Know Promise.all (fails fast), Promise.allSettled (waits for all) and Promise.race, and that await in a loop runs requests one after another unless you start them first.

“== vs ===?”

=== compares without type conversion; == converts types first, with rules that surprise people (0 == '' is true). Use === except for the deliberate value == null check, which matches both null and undefined.

Framework questions

Most front-end roles use a framework, most often React. Expect questions on how rendering works, hooks, effects, keys, state management and performance. Our React interview questions guide covers them in depth, checked against the official React docs, including React 19 and the React Compiler.

Browser, performance and security questions

“What are the Core Web Vitals?”

Google’s web.dev defines three, measured at the 75th percentile of page loads:

INP replaced First Input Delay as a Core Web Vital in 2024, so an answer that still mentions FID is out of date.

“How would you make a slow page faster?”

Measure first (field data and the browser’s Performance panel), then: ship less JavaScript and split it by route, load scripts with defer, optimize images (modern formats, correct sizes, lazy-loading below the fold), reserve space for images and ads to avoid layout shift, cache static assets, and break up long tasks that block input.

“What is CORS?”

A browser mechanism that lets a server say, with HTTP headers such as Access-Control-Allow-Origin, which other origins may read its responses. For some requests the browser first sends a preflight OPTIONS request. CORS is enforced by the browser; it doesn’t protect a server from other clients.

“How do you prevent XSS in a front end?”

Never insert untrusted content as HTML: use text APIs (textContent) or a framework’s default escaping, sanitize when you truly need HTML, avoid eval-style code, and add a Content Security Policy. Injection is still in OWASP’s Top 10.

Front-end system design

For “design an autocomplete” or “design a news feed”, walk through:

1. Requirements: who uses it, on which devices, how much data, offline or not.
2. Component architecture: the tree of components and what each one owns.
3. State and data: where state lives, the API shape, caching, pagination, and loading, empty and error states.
4. Performance: debouncing input, cancelling stale requests, virtualizing long lists, code-splitting.
5. Accessibility: keyboard navigation, focus management, ARIA roles for custom widgets, announcements for screen readers.
6. Trade-offs: what you’d do first, and what you’d measure.

For the general method, see our system design interview guide.

Questions by level

Junior front-end developers are usually asked the fundamentals above (semantic HTML, the box model, Flexbox vs Grid, closures, let and const, == vs ===, event handling) plus a small UI exercise. Show how you learn and debug.

Senior front-end developers get the same topics at more depth (why defer beats async for app code, how you’d find the cause of a poor INP score) plus system design, architecture decisions (state management, rendering strategy, a design system), accessibility leadership, and how they mentor and review code.

Coding exercises to practice

• Implement debounce and throttle.
• Implement Promise.all or a function that runs async tasks with a concurrency limit.
• Deep-clone an object (and know when structuredClone is enough).
• Flatten a nested array; write an event emitter.
• Build an accessible tabs component, a modal with focus management, or an autocomplete that ignores stale responses.

Talk through edge cases as you go. For take-home exercises, see our take-home assignment guide.

Behavioral questions for front-end developers

Use the STAR method and a real example for each:

• “Tell me about a page you made faster. How did you measure it?”
• “Describe a time you pushed back on a design for accessibility or performance.”
• “Tell me about a bug that reached production and what you changed afterwards.”
• “How do you keep up with the platform and decide when a new tool is worth adopting?”

Related: JavaScript interview questions, TypeScript interview questions, React interview questions, full-stack developer interview questions and UX/UI designer interview questions.

Frequently asked questions

Sources

• MDN Web Docs: the script element (async, defer, modules), Specificity, Relationship of grid layout to other layout methods, Closures, JavaScript execution model, Event bubbling and CORS. Read on 28 October 2026.
• web.dev, Web Vitals. Read on 28 October 2026.
• W3C, Web Content Accessibility Guidelines (WCAG) 2.2 (W3C Recommendation, 12 December 2024). Read on 28 October 2026.
• U.S. Bureau of Labor Statistics, Web Developers and Digital Designers, Occupational Outlook Handbook (median pay, May 2025).
• Stack Overflow, 2025 Developer Survey: Technology.
• OWASP, OWASP Top 10:2025.