Comprehensive Frontend Interview Guide: Technical Depth & Web Skills Assessment 2026

A friend who interviews at a mid-size fintech told me last year that he asks every frontend candidate the same opening question: “What happens between typing a URL and seeing a page on screen?” Half the candidates, he said, answer it well enough. What trips them up is the follow-up: “Now tell me where you’d put a performance fix if the page was slow.” That second question is the real test.

Frontend interviews have changed. Five years ago you could get by memorizing CSS tricks and a few closure explanations. Today, senior frontend roles at companies like Stripe, Figma, and Shopify expect you to reason about rendering pipelines, accessibility trees, and state management tradeoffs in real time.

Below are 47 questions that actually show up across the interview loop at tech companies. They’re organized by what the interviewer is actually trying to learn about you, not by textbook chapter.

The HTML and CSS questions interviewers consider easy warm-ups (but candidates often fail)

These come early in a loop. Interviewers use them to calibrate whether you’re worth the next two hours. Getting them right doesn’t win you the job; getting them wrong usually ends your candidacy.

• What is the CSS box model? The interviewer wants to know if you understand content, padding, border, and margin as distinct layers, and whether you know the difference between box-sizing: content-box and box-sizing: border-box. Most candidates describe it correctly but can’t explain why border-box is almost always what you actually want in a design system.
• Flexbox vs. CSS Grid: when do you reach for which? The honest answer is that flexbox handles one-dimensional layouts (a nav bar, a card’s internal layout) and Grid handles two-dimensional ones (a full page layout). What interviewers really want to hear is a concrete example from your own work, not a definition.
• What does semantic HTML mean and why does it matter? Elements like <article>, <nav>, and <main> carry meaning to screen readers and search crawlers. If your answer doesn’t mention accessibility, most interviewers will probe harder.
• How does CSS specificity work? Inline styles beat IDs beat classes beat elements. Specificity is calculated as a three-part number, not a simple ranking. The common gotcha: two class selectors beat one ID selector in specificity weight, but an ID always beats both in the standard rule. Wait, actually no, that’s wrong. An ID always wins over any number of classes. I’ve mixed this up myself when explaining it quickly.
• What is a CSS custom property and how is it different from a Sass variable? Custom properties (CSS variables) are scoped to the DOM, are accessible and modifiable via JavaScript, and cascade. Sass variables are compile-time constants that don’t exist at runtime.
• How do you center a div both horizontally and vertically? Classic. The modern answer is flexbox or grid on the parent container. The interviewer may push you toward older methods too, depending on which browser support constraints their product has.
• Describe the critical rendering path. This one crosses from CSS into performance. HTML parsing, DOM construction, CSSOM construction, render tree, layout, paint, composite. Blocking vs. non-blocking resources live here.

JavaScript questions that sort senior from mid-level

This is where most interviews live or die. These aren’t trivia questions; they’re probes for how deeply you understand the language you use every day.

• Explain closures. A function that retains access to its lexical scope after the outer function has returned. The standard interview answer. What interviewers want beyond that: a real use case, like a click handler factory or a module pattern.
• What is the difference between var, let, and const? Scope (function vs. block), hoisting behavior, and mutability. This is table-stakes knowledge.
• How does the JavaScript event loop work? Call stack, web APIs, callback queue, microtask queue. Microtasks (Promises, queueMicrotask) run before macrotasks (setTimeout, setInterval). Interviewers often follow with a code snippet asking you to predict output order.
• What is event delegation? Attaching a single listener to a parent element to handle events from many children, relying on event bubbling. Useful for large lists where attaching listeners to each item would be wasteful.
• Explain prototypal inheritance. Objects inherit from other objects via the prototype chain. This comes up less in interview small talk these days since most code uses ES6 classes, but understanding what’s happening under the hood still matters at senior levels.
• What is the difference between == and ===? Type coercion vs. strict equality. This is the warmup question. The follow-up is usually: “Give me a case where == causes a surprising result.”
• How do Promises differ from async/await? They don’t, structurally. async/await is syntactic sugar over Promises. What interviewers actually want: can you debug a Promise chain, handle rejection correctly, and reason about concurrent async operations using Promise.all or Promise.allSettled?
• What is a debounce function? Write one from scratch. A common live coding prompt. The function delays execution until N milliseconds have passed since the last invocation. Useful for search inputs, resize handlers, form validation.
• What is this in JavaScript? Context-dependent. In a method, it’s the object. In a regular function (non-strict mode), it’s the global object. In an arrow function, it’s lexically inherited from the enclosing scope. The gotcha: this inside a callback loses the object context unless you bind it or use an arrow function.
• Explain ES modules vs. CommonJS. import/export vs. require/module.exports. ESM is statically analyzable (which is why tree-shaking works). CJS is dynamic. The practical difference: tree-shaking dead code only works reliably with ESM.

React questions, and what makes an answer genuinely good

React questions show up in roughly 70% of frontend loops at companies that use it, according to the Stack Overflow Developer Survey 2024, which lists React as the most commonly used web framework. So you will see these.

• What is the virtual DOM and why does it exist? React maintains a lightweight in-memory copy of the DOM. When state changes, it computes the diff between the old and new virtual DOM trees (reconciliation) and applies only the necessary real DOM updates. The why: direct DOM manipulation is slow; batching and diffing reduces the cost.
• Explain useState and useEffect. useState stores a value and triggers a re-render when it changes. useEffect runs side effects after renders, with optional cleanup. The dependency array controls when it re-runs. Common mistake: missing or incorrect deps leading to stale closures.
• When would you use useRef? Two cases: (1) accessing a DOM element directly without causing a re-render, and (2) storing a mutable value that persists across renders but shouldn’t trigger them. A timer ID is the textbook example.
• How do you prevent unnecessary re-renders? React.memo for components, useMemo for expensive derived values, useCallback for stable function references. Interviewers often ask for the tradeoff: premature memoization adds complexity without benefit when components are cheap to render.
• What is prop drilling and how do you solve it? Passing props through multiple intermediate components that don’t need the data. Solutions: Context API for moderate cases, a state library (Zustand, Redux) for app-scale state.
• Controlled vs. uncontrolled components? Controlled: form input value driven by React state. Uncontrolled: value lives in the DOM, accessed via a ref. Most form libraries prefer controlled inputs for predictability.
• What does the key prop do in a list? Helps React identify which items have changed, been added, or been removed during reconciliation. Using index as a key is fine for static lists but causes bugs in reorderable or filterable lists.

Performance and browser questions they ask at senior and staff levels

These separate candidates who build features from candidates who build products people actually use.

• What are Core Web Vitals? LCP (Largest Contentful Paint), FID/INP (Interaction to Next Paint, which replaced FID in March 2024), and CLS (Cumulative Layout Shift). Google uses these as ranking signals. The interviewer wants to know if you’ve actually measured them in production.
• How do you debug a slow page? Chrome DevTools Performance tab, Lighthouse, Network waterfall. Specific bottlenecks: render-blocking resources, large image payloads, layout thrashing, long tasks on the main thread.
• What is lazy loading? Loading resources only when needed, typically for images (the loading="lazy" attribute) or JavaScript modules (dynamic import()). Route-based code splitting is the most common application.
• What is CORS and why does it exist? Cross-Origin Resource Sharing. Browsers block cross-origin requests by default as a security measure. Servers opt in by setting the right Access-Control-Allow-Origin headers. This trips up frontend engineers who’ve never had to debug it from scratch.
• What is a Service Worker? A script that runs in the background, intercepts network requests, and enables offline support or caching strategies. PWA functionality depends on it.
• localStorage vs. sessionStorage vs. cookies? localStorage persists across sessions. sessionStorage clears when the tab closes. Cookies can be sent with HTTP requests (which localStorage/sessionStorage cannot) and can be scoped by domain and path. Security-sensitive data (auth tokens) should be in httpOnly cookies.

How to actually use these questions to prepare

Reading a list of questions is not preparation. Real preparation is explaining each answer out loud to someone, ideally someone who can interrupt you with follow-ups.

The Stack Overflow Developer Survey data is worth reading directly, not just the headlines. The 2024 survey shows JavaScript has been the most-used language for 11 consecutive years, and about 40% of developers are using AI tools in their workflow. Interviewers know this. Some of them will ask you where AI fits into your debugging or code review process.

Build one real thing per major topic area. A custom hook that implements debounce teaches you more than reading the definition three times. A small app with a Context provider and a reducer teaches you when you’d actually reach for Redux instead.

For interview simulation specifically, Craqly runs AI-driven mock interviews where you can practice answering questions like these out loud and get immediate feedback on your clarity and technical accuracy, which is something you can’t get from a static Q&A list.

The interview loop at most companies runs about 4-6 rounds. Odds are you’ll see some version of half the questions on this list. Which half depends on the team and the role. That’s the part nobody can fully predict.