Skip to main content
VirtualInterview.ai
Sign InSign Up

Mock interviews by role · Software & Engineering

Frontend Developer mock interview

Frontend interviews look for people who can implement a UI and explain why it is fast, accessible, and possible to change. A polished demo that ignores keyboard use or loading states usually loses to a plainer answer that names those cases.

Practice the questions below in the order a loop runs: a component exercise, a performance or CSS bug, then a story about shipping with design and backend partners.

Practice this role with an AI interviewer

What the loop usually looks like

  1. Portfolio or recruiter screen

    25 min

    A recent UI you shipped, the constraint, and your role versus the designer.

  2. Live UI exercise

    45–60 min

    Build a small component, then add loading, error, and empty states.

  3. Deep dive

    45 min

    Accessibility, rendering performance, or a bug you traced in production.

What interviewers score

  • Accessible interactions
  • Loading and error states
  • Rendering cost
  • Collaboration with design

10 frontend developer interview questions and model answers

  1. Technical

    1. How do you make a custom dropdown usable with a keyboard and a screen reader?

    What they are testing: Accessibility as a requirement, not a polish pass.

    I use a button that toggles a listbox, move focus with arrow keys, and close on Escape. The button exposes expanded state and the listbox exposes the selected option. I test it with the keyboard only before I look at the visual design.

  2. Technical

    2. A page is slow only after a user opens a heavy dashboard. Where do you look?

    What they are testing: Performance diagnosis.

    I record a profile and look for a long task during the interaction, not during first load. Common causes are rendering a large list without windowing, or fetching everything when one chart is visible. I would virtualize the list or split the chart bundle before I rewrite the page.

  3. Technical

    3. When should component state live in a URL instead of memory?

    What they are testing: State ownership.

    If a user should share or refresh the view, the filter, tab, or selected id belongs in the URL. Memory is fine for a hover, a draft that is not saved, or a modal that should not become a bookmark. I say which state is which before I add a store.

  4. Technical

    4. How do you prevent a layout shift when an image loads?

    What they are testing: CLS and reserved space.

    I set width and height, or an aspect-ratio box, so the slot exists before the bytes arrive. For late content I reserve the same space the loaded block will use. I do not fix a jump by animating it after the fact.

  5. Domain

    5. How do you work with a design that cannot be built as drawn?

    What they are testing: Cross-functional honesty.

    I show the constraint in the browser: a wrapping label, a missing focus state, or a breakpoint that collides. I propose the closest pattern we already use, and I ask the designer which part is the requirement. I do not silently ship a different component.

  6. Behavioral

    6. Tell me about a UI bug that only some users could reproduce.

    What they are testing: Debugging with incomplete reports.

    I asked for the browser, the viewport, and the steps, then reproduced it on that combination. It was a flex overflow that only appeared with a long translated string. The fix was a min-width of zero and a test fixture with a long label.

  7. Situational

    7. Design asks for a new pattern that duplicates one we have. What do you do?

    What they are testing: Design-system judgment.

    I put both on one page and name the difference a user would notice. If there is no difference, I ask to use the existing component and file the visual tweak as a variant. A second pattern is worth it only when the interaction is actually different.

  8. Technical

    8. How do you test a component that depends on time or the network?

    What they are testing: Test design.

    I inject the clock and the fetch function. Tests cover success, empty, error, and a slow response that must show a pending state. I do not assert on implementation details like a particular hook name.

  9. Behavioral

    9. Describe a time you cut scope to hit a release.

    What they are testing: Shipping judgment.

    I listed the screens in the critical path and moved the settings page to the next release. I wrote down what a user could not do yet, and I confirmed support had that sentence. The release notes matched the build.

  10. Domain

    10. What is your approach to CSS that has grown hard to change?

    What they are testing: Maintainability.

    I stop adding exceptions and name the layout rule that is being broken. Then I delete one override at a time with a visual check. A rewrite of the whole stylesheet is the last option, and only behind a page I can compare.

Frequently asked questions

Do frontend interviews still include coding algorithms?

Many do, especially at larger companies. Product companies often replace one algorithm round with a UI exercise. Prepare both, and lead with the exercise if the posting shows Figma or accessibility in the requirements.

How detailed should visual answers be?

Name the user-visible states and the keyboard path. Pixel values matter less than what happens when the text is long, the request fails, or the user never touches a mouse.

Should I memorize framework APIs?

Know the ones you claim on your resume well enough to use them without notes. Interviewers forgive a method name. They do not forgive a component with no error state.

Where do I practice the spoken part?

Run a frontend mock on VirtualInterview.ai and answer by voice. The interviewer can follow up on the state or accessibility choice you just named.

Keep practicing