Frontend Developer interview questions
A good frontend developer interview checks whether the candidate can translate designs into accessible, performant UI and reason about state, browsers, and user experience. Ask them to talk through real components they have built and how they handled edge cases like slow networks or screen readers.
What to assess
Behavioral questions
Tell me about a UI you built where the design did not work well once real data was added. How did you handle it?
What it reveals: Shows how they deal with the gap between mockups and reality.
A strong answer: Describes specific edge cases like long names or empty states and how they worked with design to adjust.
Describe a time you improved the load time or responsiveness of a page.
What it reveals: Reveals hands-on performance experience.
A strong answer: Cites a measured before-and-after, such as Lighthouse or Core Web Vitals, and the specific techniques used.
Give an example of when you made an interface more accessible.
What it reveals: Tests whether accessibility is part of their routine work.
A strong answer: Mentions semantic HTML, keyboard navigation, ARIA used sparingly, and testing with a screen reader.
Tell me about a disagreement with a designer over how something should look or behave.
What it reveals: Reveals collaboration style with design partners.
A strong answer: Shows respect for design intent while raising technical or usability concerns with evidence and reaching a compromise.
Describe a frontend bug that only happened in one browser or device. How did you fix it?
What it reveals: Tests cross-browser debugging skills.
A strong answer: Explains how they reproduced it, used dev tools, found the root cause, and added a test or fallback.
Role-specific questions
How do you decide whether state should live in a component, be lifted up, or go in a global store?
What it reveals: Tests component architecture judgment.
A strong answer: Keeps state as local as possible and explains when shared or server state justifies a store or data-fetching library.
Explain how you would make a custom dropdown fully keyboard and screen-reader accessible.
What it reveals: Checks practical accessibility knowledge beyond buzzwords.
A strong answer: Covers focus management, arrow-key handling, roles and labels, and suggests a native select where possible.
What causes layout shift, and how do you prevent it?
What it reveals: Tests understanding of real-world performance metrics.
A strong answer: Mentions reserving space for images and ads, font loading strategies, and avoiding late-injected content.
How would you structure CSS for a large app so styles do not collide?
What it reveals: Reveals approach to maintainable styling.
A strong answer: Discusses a consistent method such as CSS modules, utility classes, or a design system with tokens, and why.
Walk me through what happens between typing a URL and the page becoming interactive.
What it reveals: Tests depth of web platform understanding.
A strong answer: Covers DNS, request, HTML parsing, render-blocking resources, JavaScript execution, and hydration where relevant.
Situational questions
A marketing team wants a large animated hero video on the homepage, but it slows mobile load. What do you do?
What it reveals: Shows how they balance stakeholder wishes with user experience.
A strong answer: Proposes data on the impact and offers alternatives like a poster image, lazy loading, or a lighter format.
You inherit a component library with no tests and inconsistent patterns. Where do you start?
What it reveals: Reveals prioritization when cleaning up legacy code.
A strong answer: Starts with the most-used components, adds tests before refactoring, and documents patterns as they go.
A customer reports the checkout button does nothing on their phone, and you cannot reproduce it. Next steps?
What it reveals: Tests debugging with limited information.
A strong answer: Gathers device, browser, and error logs, checks monitoring tools, and tests on real devices or emulators.
Motivation and fit
What part of frontend work do you find most satisfying?
What it reveals: Shows motivation and where they will thrive.
A strong answer: Gives a specific, genuine answer such as polishing interactions or building reusable systems.
How do you keep up with changes in frameworks and browser features without chasing every trend?
What it reveals: Reveals learning habits and judgment.
A strong answer: Names concrete sources and explains how they evaluate whether a new tool is worth adopting.
Red flags
- Treats accessibility as optional or something QA handles
- Reaches for a heavy library for every small problem
- Cannot explain how their framework works under the hood at a basic level
- Dismisses designer feedback as 'just visual'
Questions not to ask
- Do you have any vision problems that would affect your screen work? — disability inquiry before an offer is restricted under the ADA
- What year did you graduate? — can reveal age and invite age discrimination claims
- Where are you originally from? — national origin discrimination risk
- Are you planning to start a family soon? — sex and family status discrimination risk
Interviewing for frontend developer roles?
Generate a structured kit with scoring guidance for your exact role in seconds.
Frequently asked questions
What should a frontend developer take-home assignment look like?
Keep it small, around two to four hours, and close to real work, such as building a single accessible component from a design with mock data. Share the scoring criteria upfront and evaluate structure, accessibility, and clarity rather than visual flair alone.
What is the difference between a frontend developer and a full-stack developer job description?
A frontend role focuses on the browser: UI, accessibility, performance, and API integration. A full-stack description adds server-side work like databases and backend services, so only list those if the person will actually do them.
How do I assess accessibility skills in a frontend interview?
Ask candidates to explain how they would make a specific component keyboard and screen-reader friendly, or review a small snippet with accessibility problems. Strong candidates mention semantic HTML first and testing with real assistive technology.