Frontend developer mock interview
This frontend mock interview is for developers preparing for a technical interview, from a first junior role to senior positions. The AI interviewer asks about HTML and accessibility, CSS, how the browser works, JavaScript and TypeScript, frameworks, networking and architecture, including frontend interview questions for experienced engineers. Answer up to 50 questions by voice and get a report scored on technical accuracy, completeness and clarity.
What the AI interviewer asks about
Semantic HTML and accessibility
Semantic elements, landmarks, headings, forms and labels, when ARIA helps and when it hurts, keyboard navigation and focus management.
CSS cascade and layout
Specificity, the cascade and @layer, the box model, Flexbox vs Grid, responsive design, container queries, :has() and native CSS nesting.
Browser rendering and Core Web Vitals
The critical rendering path, layout, paint and composite, reflow, LCP, INP and CLS, lazy loading, and optimizing images, fonts and bundles.
JavaScript and TypeScript
Closures, this, prototypes, the event loop and microtasks, async/await, and in TypeScript: generics, unions and narrowing, utility types, unknown vs any.
Frameworks: React, Vue, Angular
Component model, reactivity and re-renders, lifecycle, hooks, the Composition API, Angular signals, SSR, hydration and Server Components.
Networking, caching and security
HTTP methods and status codes, HTTP/2 and HTTP/3, Cache-Control, ETag, CDNs, CORS and preflight, XSS, CSRF, Content Security Policy, cookie attributes.
State and architecture
Local, global and server state, TanStack Query, Redux Toolkit, Pinia, project structure, monorepos, and micro-frontends and their cost.
Testing
The test pyramid, unit tests with Vitest or Jest, Testing Library and testing behavior rather than implementation, e2e with Playwright, network mocking.
Frontend interview questions by level
Junior
Why use semantic elements instead of divs?
What a strong answer covers:Elements like header, nav, main, article, button and label carry meaning: screen readers announce them as landmarks and controls, the browser provides built-in keyboard support, and search engines understand the structure better. A strong answer notes that a div with onClick is not focusable and ignores Enter without extra code, so actions need a real button.
How is CSS specificity calculated?
What a strong answer covers:Specificity compares as a triple: IDs, then classes, attributes and pseudo-classes, then elements and pseudo-elements; inline styles beat any selector and !important overrides normal declarations. With equal specificity, the rule that comes later wins. Bonus points for mentioning that :where() has zero specificity and @layer controls priority without a specificity arms race.
How do Flexbox and Grid differ, and when do you pick each?
What a strong answer covers:Flexbox is one-dimensional: items flow in a row or column and sizes follow the content. Grid is two-dimensional: you define rows and columns and place items on them. Typical choice: Flexbox for navbars, button groups and rows of cards, Grid for page scaffolding and complex layouts, and the two are often combined.
What is the difference between let, const and var?
What a strong answer covers:var is function-scoped and hoisted with the value undefined, while let and const are block-scoped and sit in the temporal dead zone until declared, so early access throws a ReferenceError. const prevents reassigning the binding, but an object or array stored in it can still be mutated. Modern code practically never uses var.
What is event delegation?
What a strong answer covers:Events bubble from the target up through its ancestors, so one listener on a container can handle clicks on all its children by checking event.target, for example with closest(). It saves listeners and works for elements added later. Worth mentioning stopPropagation and that some events, like focus, do not bubble (focusin does).
Middle
Explain the event loop: in what order do setTimeout, Promise.then and synchronous code run?
What a strong answer covers:All synchronous code on the call stack runs first, then the browser drains the microtask queue (promise callbacks, queueMicrotask), and only then takes the next task such as a setTimeout callback. The browser may render a frame between tasks. So Promise.then always fires before setTimeout(fn, 0), and an endless chain of microtasks blocks rendering.
What are Core Web Vitals and how do you improve INP?
What a strong answer covers:Core Web Vitals are LCP (how fast the main content appears, good under 2.5 s), INP (interaction responsiveness, good under 200 ms, which replaced FID in 2024) and CLS (layout stability, good under 0.1). You improve INP by breaking up long tasks on the main thread, deferring non-critical work, shrinking the JS bundle and avoiding unnecessary re-renders. A strong answer mentions measuring real users, not only Lighthouse.
What is CORS and why does a preflight request happen?
What a strong answer covers:Under the same-origin policy, the browser does not let a script read a response from another origin unless the server allows it with Access-Control-Allow-* headers. For non-simple requests, such as PUT, a JSON body or custom headers, the browser first sends an OPTIONS preflight. Key point: CORS protects users in the browser, not the server, and curl ignores it entirely.
How do you protect a frontend app from XSS?
What a strong answer covers:Never insert untrusted data as HTML: use textContent and the framework's auto-escaping, and use dangerouslySetInnerHTML or v-html only with sanitization, for example DOMPurify. Add defense in depth with a Content Security Policy that blocks inline scripts and unknown sources, and keep session tokens in HttpOnly cookies so scripts cannot steal them.
How do you decide where application state should live?
What a strong answer covers:Keep state as close as possible to where it is used and lift it only when several components need it. Treat server data separately and hand it to a library like TanStack Query, which caches, dedupes and refetches; filter and pagination state often belongs in the URL. Use a global store (Redux Toolkit, Zustand, Pinia) only for genuinely shared client state.
Senior
How would you diagnose a slow page in production?
What a strong answer covers:Start with field data from RUM or CrUX to see which metric suffers, on which pages and devices. Then reproduce in the DevTools Performance panel with throttling and look for long tasks, render-blocking resources, a heavy LCP element and layout shifts. Prioritize fixes by impact and lock them in with performance budgets in CI so regressions do not come back.
CSR, SSR, SSG or streaming: how do you choose a rendering strategy?
What a strong answer covers:SSG suits rarely changing content and gives the fastest TTFB from a CDN; SSR fits personalized or frequently updated pages where SEO and a fast first paint matter; CSR is fine for apps behind a login. Streaming SSR and Server Components send parts of the page earlier and ship less JS to the client. A strong answer covers the cost: server load, hydration cost and caching complexity.
When are micro-frontends worth it, and when are they not?
What a strong answer covers:They pay off when several independent teams need to release their parts of the product separately and the organizational gain outweighs the technical cost. That cost is duplicated dependencies, bigger bundles, harder shared state, design system consistency and end-to-end testing. For one or two teams, a modular monolith in a monorepo with clear module boundaries is usually enough.
How would you design a frontend testing strategy?
What a strong answer covers:The base is fast unit and component integration tests with Testing Library that check behavior from the user's point of view, with network mocked at the request level, for example with MSW. On top, a small set of Playwright e2e tests for critical flows such as login, checkout and key forms. Add visual and accessibility checks, track flaky tests and run everything in CI on every pull request.
How do the reactivity models of React, Vue and Angular compare?
What a strong answer covers:React re-runs the component function on state change and diffs the tree, so memoization (manual or via React Compiler) matters for performance. Vue tracks dependencies through proxies and updates only what reads the changed data. Angular moved from Zone.js toward signals with fine-grained updates and supports a zoneless mode. A strong answer explains how these differences shape performance work and the team's mental model.
How the Frontend mock interview works
- Pick Frontend (and any other technologies from your stack), your level and the interview language: English, Ukrainian or Russian. Or upload your resume and a job description.
- Answer each question out loud, the way you would with a real interviewer.
- Get a score for every answer on technical accuracy, completeness and clarity, plus a report with your weak spots.
How to answer frontend questions out loud
- →Open with a one-sentence definition, then explain the mechanism: "CORS is a browser rule that…" before diving into headers.
- →Describe code in steps: "I attach one listener to the container and use closest to find the button." The interviewer should picture the solution without an editor.
- →When comparing tools such as Flexbox and Grid, SSR and CSR, or Redux and TanStack Query, say when you would choose each, not just how they differ.
- →Back answers with a real project example: which metric you improved, which caching or CORS bug you found and how.
- →If you are unsure, say how you would verify it: DevTools, the Network tab, MDN or the spec. That sounds stronger than guessing.
FAQ
Which framework is covered: React, Vue or Angular?
The general frontend interview asks about framework concepts as a whole. For deeper questions on a specific one, add React, Vue or Angular as a technology alongside Frontend and the AI will follow your stack.
Can I take the interview in English or Ukrainian?
Yes. You pick the interview language before starting: English, Ukrainian or Russian.
Is there live coding?
No. Questions are verbal and you answer by voice; there is no code editor. Some questions ask how you would implement or debug something, so it helps to practice describing code in words.
Can I practice with my job description?
Yes. Upload a job description or your resume and the AI builds questions around the stack and level it lists. The first interview of up to 5 questions is free, then from $1.75 per interview, with no subscription.