Part of The Complete Resume Guide. Your resume shows what you shipped. The interview asks you to explain the browser, defend UI choices, and build an interface that handles real users.
Research note: The prompts below paraphrase current interview-preparation research. They represent practice questions, not questions attributed to a specific employer.
Frontend developer interviews test JavaScript fundamentals, browser behavior, component design, accessibility, performance, and collaboration. Hiring teams may combine an introductory screen, technical questions, a coding or component exercise, and a frontend system-design round. Senior candidates should expect deeper discussion of rendering boundaries, performance diagnosis, testing strategy, and UI architecture.
Prepare each answer around a decision. Explain the user need, choose an approach, name the tradeoff, and describe how you would test the result. That pattern gives an interviewer more evidence than a list of APIs or framework terms.
Key takeaways
- Use browser fundamentals to support framework answers. Connect React behavior to JavaScript, the DOM, rendering, and network activity.
- Treat accessibility as part of implementation. Start with semantic elements, keyboard behavior, focus, and accessible names.
- Measure performance before changing code. Identify the slow resource, render task, or layout shift before proposing a fix.
- Build components around states. Cover loading, empty, error, success, and keyboard interaction in practical exercises.
- Make collaboration concrete. Describe how you resolve design, API, and delivery constraints with the people involved.
Frontend interview stages
Current preparation guides from the Front End Interview Handbook, Coursera, and GreatFrontEnd cover a mix of introductory, technical, coding, and design rounds. The exact loop depends on the role and company.
| Stage | Tasks you may receive | Evidence the interviewer wants |
|---|---|---|
| Introductory screen | Summarize your work, interests, and role fit | You can connect your experience to the product and team |
| Fundamentals round | Explain HTML, CSS, JavaScript, TypeScript, and browser behavior | You understand the platform beneath the framework |
| Framework round | Discuss React rendering, hydration, hooks, and component boundaries | You can reason about state, data, and interactivity |
| Coding or component exercise | Build a utility, hook, or interactive UI | You write understandable code and cover edge cases |
| Frontend system design | Design a feed, dashboard, or rendering strategy | You can manage scale, performance, state, and user experience |
| Behavioral round | Discuss collaboration, conflict, and technical challenges | You communicate decisions and own outcomes |
Frontend developer screening questions
1. Tell me about yourself
Build a short path from your current work to the role. Name the interfaces or products you build, the technical areas you own, and one project that shows your impact. End with the part of this role that fits your next step.
Keep the answer focused on evidence you can defend. A useful structure has four parts:
- Your current frontend focus.
- A relevant project and your responsibility.
- The user or business result.
- Your reason for pursuing this role.
2. What does a frontend developer do?
Describe the role through the user's experience. Frontend developers turn product and design requirements into accessible, responsive interfaces. They also manage browser behavior, application state, performance, testing, and integration with backend services.
Add collaboration to the answer. Frontend work sits between design intent, API constraints, and user behavior, so the developer needs to surface conflicts before they reach production.
3. Why did you apply for this frontend role?
Ground your answer in the product, user, or engineering problem. Connect one requirement from the job description to work you have done. Avoid praising the company in broad terms. A specific connection gives the interviewer something useful to explore.
4. How do you keep your frontend skills current?
Name the sources and habits you use. You might read framework release notes, browser documentation, accessibility guidance, or engineering write-ups. Pair the source with a recent change you evaluated and explain how you tested it before bringing it into a codebase.
HTML, CSS, and accessibility questions
1. What is semantic HTML, and why does it matter?
Semantic HTML uses elements that describe their purpose, such as button, nav, main, and article. These elements give browsers and assistive technology useful behavior and structure. They also reduce the custom keyboard and focus work required when a developer recreates controls with generic containers.
Use an example in your answer. A native button supports keyboard activation and focus behavior. A clickable div needs extra code and testing to reach the same baseline.
2. How do aria-label and aria-labelledby differ?
aria-label supplies an accessible name as text in the attribute. aria-labelledby points to existing element IDs whose text provides the name. Prefer visible labels when the interface has them, since users can see the same language that assistive technology receives.
Mention the common icon-button case. An icon without visible text may need aria-label, while a region with a visible heading can use aria-labelledby to reuse that heading.
3. When would you choose CSS Grid instead of Flexbox?
Choose Grid when the layout needs control across rows and columns. Choose Flexbox when content flows along one primary axis. A card gallery with aligned columns fits Grid, while a navigation row or button group fits Flexbox.
Do not present the choice as a rule that forbids mixing them. A page can use Grid for the outer layout and Flexbox inside a component.
4. How would you build a responsive card grid without media queries?
Use CSS Grid with repeat, minmax, and an auto-placement mode such as auto-fit. Set a practical minimum card width and let the available container width determine the column count. Explain how long text, narrow containers, and minimum touch targets affect the final design.
5. How would you improve accessibility across a web application?
Start with semantic structure, keyboard access, focus order, accessible names, color contrast, and clear error messages. Add automated checks, then test core flows with a keyboard and a screen reader. Assign accessibility requirements to component acceptance criteria so the team catches failures during development.
JavaScript and TypeScript questions
1. How does event delegation work?
Event delegation attaches one listener to a shared ancestor and uses event propagation to handle actions from its descendants. The handler inspects the event target and decides which action to run. This approach can reduce listener setup and support items added after the first render.
Discuss the edge cases. Confirm that the event bubbles, locate the intended interactive ancestor, and avoid treating every descendant click as the same action.
2. Implement debounce or throttle
Explain the behavior before writing code. Debounce waits for a quiet period before running a function. Throttle limits how often a function runs within a time window. Search input may use debounce, while a scroll handler may use throttle.
Your implementation should cover timer ownership, argument handling, this behavior when relevant, and cleanup. Test repeated calls, the first call, the final call, and cancellation if the prompt includes it.
3. Implement Promise.all
State the contract first. The function accepts several values or promises, preserves input order, resolves after every input resolves, and rejects when one input rejects. Then describe how you will track completed results without returning them in completion order.
Test an empty input, plain values, promises that finish out of order, and one rejection. The interviewer wants correct asynchronous control, not a memorized loop.
4. What is the difference between a TypeScript interface and type?
Both can describe object shapes. Interfaces support declaration merging and work well for extensible object contracts. Type aliases can represent unions, intersections, primitives, and mapped types. Choose based on the contract your code needs, then keep the codebase consistent.
Avoid claiming that one form produces runtime validation. TypeScript removes both during compilation, so incoming data still needs a runtime check.
React and rendering questions
1. When does a React component render again?
A component can render after its state changes, its parent renders, or a consumed context value changes. New object, array, and function references can also defeat memoization checks. Explain that a render does not guarantee a DOM change because React compares the result before committing updates.
Start performance work with a profiler. React.memo, useMemo, and useCallback add complexity and help when reference stability or repeated work creates a measured cost.
2. What is React hydration?
Hydration connects React's event handling and component state to HTML that the server rendered. The client expects its first render to match the server output. Developers can trigger hydration errors when the server and client compute time, random values, browser data, or invalid markup in different ways.
Describe your debugging path: compare server and client output, isolate code that depends on the browser, and move interactive behavior behind an appropriate client boundary.
3. How do Server Components and Client Components differ?
Server Components can load data and render on the server without sending their component code to the browser. Client Components handle state, effects, event handlers, and browser APIs. Place the client boundary around the interactive part rather than marking a whole route as client code.
Discuss the data and bundle tradeoff. Server rendering can reduce browser JavaScript, while client components provide the interactivity the user needs.
4. How does React's use API differ from fetching inside useEffect?
The use API reads a promise or context during rendering within supported React patterns. Fetching in useEffect starts after the component reaches the client and needs explicit loading, error, cancellation, and state handling. Explain which rendering environment owns the request and how the UI handles suspension or failure.
Do not choose the newer API because it is newer. Choose the pattern that fits the framework, rendering boundary, cache, and user experience.
5. How would you write a typed data-fetching hook?
Define the hook's inputs and states before writing the generic. Return typed data alongside loading and error information. Handle request replacement or cancellation so a slower response cannot overwrite a newer one. Keep transport concerns separate from component presentation.
Frontend machine-coding questions
1. Build an autocomplete component
Cover the whole interaction, not the text field alone. Manage query state, loading, empty results, errors, keyboard navigation, active-option focus, and selection. Decide how you will debounce requests and ignore stale responses.
Use semantic input and listbox patterns where they fit. Test typing, arrow keys, Enter, Escape, blur, and a failed request.
2. Build a responsive card grid
Start with the content and minimum usable width. Use Grid or another layout primitive that lets the container determine the column count. Test long headings, missing images, different card heights, and narrow screens.
3. Test a component that fetches and renders a list
Test the states a user sees: loading, success, empty data, and failure. Mock the network boundary rather than internal component functions. Use accessible queries that reflect how a user finds the interface, then wait for asynchronous updates without relying on fixed delays.
4. Add lazy loading to page images
Start by identifying which images sit below the fold. Browser-native loading="lazy" may cover those assets. An IntersectionObserver can support custom behavior. Keep the largest above-the-fold image out of a lazy path when delaying it would hurt the page's largest contentful paint.
Performance and debugging questions
1. A page has a slow largest contentful paint. How do you diagnose it?
Measure the page and identify the element that produced the largest contentful paint. Inspect server response time, resource priority, image size, font loading, render-blocking work, and main-thread tasks. Build the fix around the measured bottleneck.
If the element is an image, check its dimensions, format, preload or priority behavior, and delivery path. If text produces the metric, inspect fonts, server rendering, CSS, and blocking scripts.
2. Layout shift increased after a release. Where do you look?
Compare the release with the prior version and inspect elements that moved. Common candidates include images without reserved dimensions, injected banners, late-loading fonts, ads, and components that insert content above the viewport. Use layout-shift traces to connect the movement to a component and commit.
Fix the source by reserving space or changing when the team inserts the content. Avoid hiding the symptom with a broad CSS rule.
3. An end-to-end test suite takes too long. What would you change?
Review each test's purpose and remove duplicate coverage. Move stable behavior into faster component or integration tests, keep end-to-end tests for critical user journeys, and fix sources of flake. Shard the remaining suite after the team trims waste.
Track runtime and failure causes. More runners can reduce wall-clock time, but they do not repair a suite with redundant scenarios or unstable setup.
Frontend system-design questions
1. Design an infinite-scrolling feed with images and ads
Clarify the feed order, pagination contract, refresh behavior, ad rules, and accessibility requirements. Discuss cursor pagination, request cancellation, deduplication, image loading, virtualization, scroll restoration, and an explicit way to load or reach more content.
Describe failure states and observability. The design needs to handle a failed page request, duplicate items, changing data, and a user who returns to the feed after opening an item.
2. Design a dashboard that displays a large dataset
Start with the user's task and the number of points they need to inspect at once. Consider aggregation, sampling, virtualization, progressive rendering, workers, and the cost of SVG or canvas for the chosen interaction. Keep expensive computation off the main thread when it blocks input.
Define a performance budget and measure it on representative hardware. A design answer should connect rendering choices to input responsiveness and the detail the user needs.
Behavioral frontend interview questions
1. How do you work with designers and backend developers?
Give one project example. Explain how you clarified component states with the designer, agreed on an API contract with the backend developer, and handled a constraint that affected scope. Name your contribution and the outcome.
2. Describe a recent technical challenge
Choose a challenge with a real decision. Explain the symptom, your investigation, the options you considered, and the fix you shipped. Include the test, metric, or user feedback that confirmed the result.
3. Walk me through your workflow for a new frontend project
Start with the user flow and acceptance criteria. Then cover component boundaries, data contracts, accessibility, implementation, tests, review, and post-release monitoring. Use a shipped project to keep the answer grounded.
4. What does user-centered design mean in your work?
Explain how user needs change an implementation choice. You might discuss keyboard access, error recovery, responsive behavior, content hierarchy, or testing with representative users. Connect the principle to something you changed after receiving evidence.
A focused frontend interview prep plan
- Read the job description and group repeated requirements into JavaScript, framework, testing, performance, and collaboration skills.
- Compare your materials with the frontend developer resume example and keep claims you can defend.
- Review the engineering resume keyword guide for language that matches your real work.
- Practice four JavaScript prompts while explaining state, edge cases, and tests.
- Build one component under a time limit and include keyboard, loading, empty, and error states.
- Diagnose one performance trace and explain the evidence behind each fix.
- Practice one feed or dashboard design with requirements, rendering choices, and failure states.
- Use JobVouch Interview Prep with the target job description, then revise answers that lack a decision or example.
- Run the final resume through the ATS resume checker so the experience you discuss appears in the application.
Frontend developer interview FAQs
Q: What questions appear in a frontend developer interview?
A: Expect questions on HTML, CSS, JavaScript, TypeScript, browser behavior, and a framework such as React. Many loops also include a component exercise, testing or performance scenarios, behavioral questions, and frontend system design for experienced roles.
Q: How should I prepare for a React interview?
A: Practice explaining renders, state, context, effects, hydration, component boundaries, and data flow. Pair each concept with a small code example, a failure case, and the tradeoff behind your choice.
Q: Do frontend interviews include algorithm questions?
A: Some companies include general data-structure or algorithm prompts, while others focus on browser utilities and UI work. Use the job description and recruiter guidance to divide your preparation time.
Q: What should I build for a frontend machine-coding round?
A: Practice autocomplete, a data-fetching list, and a responsive grid. Cover loading, empty, error, and success states, then add keyboard access and tests instead of stopping after the happy path.
Q: How do I answer frontend performance questions?
A: Start with measurement. Identify the slow resource, long task, or shifting element, then connect the fix to that evidence. Name the metric you would watch after release.
Show the decision behind the interface
Strong frontend answers connect code to the user. Explain the browser behavior, choose a component or rendering boundary, test the states people will encounter, and measure the result. If you have a target posting, use JobVouch Interview Prep to build a practice set from its requirements, then keep the answers you can support with real work.