Front-end developer interview questions
Front-end interviews test your understanding of JavaScript itself, how the browser renders and loads a page, a framework such as React, and the quality details that users notice: performance and accessibility.
The questions below are grouped by level, with what a strong answer should include.
What interviewers assess
- JavaScript: scope, closures, this, promises and the event loop
- HTML and CSS: semantics, layout with flexbox and grid, responsive design
- React or another framework: state, effects, rendering and component design
- Performance, accessibility and testing in real projects
Basic questions
What is the difference between let, const and var?
What a good answer covers: Block scope versus function scope, hoisting and the temporal dead zone, and that const prevents reassignment but not mutation of objects.
Explain the CSS box model.
What a good answer covers: Content, padding, border and margin, and how box-sizing: border-box changes width calculations. Mention margin collapsing.
What is the difference between flexbox and grid?
What a good answer covers: Flexbox for one-dimensional layout along a row or column; grid for two-dimensional layouts. Give an example of each.
Why does semantic HTML matter?
What a good answer covers: Accessibility (screen readers, keyboard navigation), SEO and maintainability. Name elements such as button, nav, main and label.
What is event delegation?
What a good answer covers: Attach one listener to a parent and use event.target, relying on bubbling. Useful for long or dynamic lists.
Intermediate questions
Explain closures with a practical example.
What a good answer covers: A function keeps access to variables from the scope where it was created, such as a counter or a debounce function. Mention the classic loop-with-var bug.
How does the JavaScript event loop work?
What a good answer covers: Call stack, task queue and microtask queue; promises run before setTimeout callbacks. Predicting the order of logged output is a common follow-up.
When does a React component re-render, and how do you avoid unnecessary renders?
What a good answer covers: State or props change, or the parent re-renders. Tools: memo, useMemo, useCallback, splitting state and stable keys, but only after measuring.
What are the rules of useEffect, and what goes wrong with it?
What a good answer covers: Runs after render; dependencies decide when it re-runs; return a clean-up. Common bugs: missing dependencies, infinite loops and using effects for derived state.
How do you manage state in a growing React app?
What a good answer covers: Local state first, lift it when shared, context for low-frequency global values, and a server-state library (such as TanStack Query) for API data. Explain why not everything belongs in a global store.
Advanced questions
A page loads slowly. How do you investigate and improve it?
What a good answer covers: Measure with Lighthouse and the Performance panel; Core Web Vitals (LCP, INP, CLS); then code-splitting, image optimisation, caching, fewer render-blocking resources and server rendering where it helps.
Explain client-side rendering, server-side rendering and static generation.
What a good answer covers: Trade-offs in first load, SEO, server cost and freshness of data. Mention hydration and when you would mix approaches.
How do you make a custom dropdown accessible?
What a good answer covers: Prefer a native select; otherwise ARIA roles, keyboard support (arrows, Escape, Enter), focus management and visible focus. Test with a screen reader.
How would you design a reusable component library for several teams?
What a good answer covers: Design tokens, consistent APIs, accessibility built in, documentation such as Storybook, versioning and visual tests.
What front-end security issues do you guard against?
What a good answer covers: XSS (escaping, avoiding dangerouslySetInnerHTML, Content Security Policy), CSRF, storing tokens safely and third-party script risk.
Common mistakes
- Knowing React but not the JavaScript underneath it.
- Ignoring accessibility until the interviewer asks.
- Suggesting useMemo everywhere instead of measuring first.
- Showing a portfolio project but not being able to explain a decision made in it.
How to prepare
- Practise explaining closures, this, promises and the event loop with small code examples.
- Rebuild one feature from your portfolio and be ready to discuss its state and performance.
- Run Lighthouse on your own project and fix the main issues it finds.
- Practise building a small component live, such as a search box with debounce.
Reading questions only goes so far: the real test is answering them aloud, under follow-up questions. Career Scan builds a mock interview from your own resume and the job, then shows exactly which answers need work.
Frequently asked questions
Should I prepare React, Angular or Vue?
Prepare the framework the job names. JavaScript fundamentals, CSS and browser knowledge carry over between all of them.
Are there coding rounds for front-end roles?
Usually. Expect JavaScript problems, building a small UI component, or a take-home project.
Do front-end interviews ask about TypeScript?
Increasingly, yes. Know basic types, interfaces, generics and how TypeScript catches bugs earlier.