Free Frontend Developer Interview Prep

Frontend Developer Interview Questions

19 practice questions across 12 skills — each with what the interviewer is really listening for. Prepare with intent, not guesswork.

Free · No signup · Grouped by skill

How to use this page

Don't memorise answers. For each question, read what the interviewer is looking for, then practise answering out loud in your own words with a real example. The notes describe strong answers and common red flags — they are for your prep, not a script.

JavaScript

3 questions
  1. Explain the difference between == and === in JavaScript. When would loose equality bite you?

    Basic

    What the interviewer is looking for: A strong answer covers type coercion with ===, gives a surprising coercion example, and recommends strict equality by default. Not knowing coercion happens with == is a red flag.

  2. What is a closure in JavaScript, and give a practical use for one.

    Intermediate

    What the interviewer is looking for: Look for a function retaining access to its lexical scope after the outer function returns, plus a real use like a counter or data privacy. Reciting a definition with no example suggests memorisation over understanding.

  3. Explain the event loop and how async callbacks, promises, and the call stack interact.

    Advanced

    What the interviewer is looking for: Strong candidates describe the call stack, task and microtask queues, and why promises resolve before timers. Believing JavaScript is multi-threaded or ignoring the microtask queue are red flags.

TypeScript

2 questions
  1. What problems does TypeScript solve over plain JavaScript, and what are its limits?

    Intermediate

    What the interviewer is looking for: Look for compile-time type safety, better tooling and refactoring, and the caveat that types are erased at runtime so it does not validate external data. Claiming it makes runtime bugs impossible is a red flag.

  2. What is the difference between an interface and a type alias in TypeScript?

    Intermediate

    What the interviewer is looking for: A good answer notes interfaces are extendable and mergeable while type aliases handle unions and primitives, and that either is fine for object shapes. Insisting one is always correct without nuance is a minor red flag.

React

2 questions
  1. Explain the difference between state and props in React.

    Basic

    What the interviewer is looking for: Strong answers explain props are read-only inputs from a parent while state is internal and mutable via setState/hooks. Mutating props or confusing the two is a red flag.

  2. What does the dependency array of useEffect control, and what bugs come from getting it wrong?

    Advanced

    What the interviewer is looking for: Look for understanding that it decides when the effect re-runs, and that missing dependencies cause stale closures while wrong ones cause infinite loops. Not being able to explain stale state is a red flag.

Performance Optimization

1 question
  1. How do you optimise a React list that re-renders slowly with thousands of items?

    Advanced

    What the interviewer is looking for: Strong candidates mention virtualization, stable keys, memoization, and profiling before optimising. Reaching for memo everywhere without measuring is a red flag.

HTML

1 question
  1. Why does semantic HTML matter beyond just rendering the page?

    Basic

    What the interviewer is looking for: Look for accessibility, SEO, and clearer structure for assistive tech, not just visual output. Using div-for-everything with no awareness of semantics is a red flag.

CSS

2 questions
  1. Explain the CSS box model and how box-sizing: border-box changes it.

    Basic

    What the interviewer is looking for: A strong answer covers content, padding, border, and margin, and that border-box includes padding and border in the declared width. Confusing margin and padding is a red flag.

  2. When would you reach for flexbox versus grid in a layout?

    Intermediate

    What the interviewer is looking for: Look for flexbox for one-dimensional layouts and grid for two-dimensional ones, with a willingness to combine them. Claiming one fully replaces the other suggests limited layout experience.

Responsive Design

1 question
  1. How do you make sure a component works well on both mobile and desktop?

    Basic

    What the interviewer is looking for: Strong answers describe a mobile-first approach, relative units, breakpoints tied to content, and testing on real viewports. Fixed pixel widths everywhere is a red flag.

REST APIs

1 question
  1. You need to fetch data from a REST API and show a loading and error state. How do you structure that?

    Intermediate

    What the interviewer is looking for: Look for handling the three states (loading, success, error), cancelling stale requests, and not leaving the user staring at a blank screen. Ignoring the error path is a common red flag.

Accessibility

1 question
  1. What are common accessibility issues in a typical web app, and how do you catch them?

    Intermediate

    What the interviewer is looking for: Strong candidates mention keyboard navigation, focus management, colour contrast, alt text, and ARIA used sparingly, plus tooling like axe. Treating accessibility as optional polish is a red flag.

Git

1 question
  1. Your feature branch has drifted far behind main and now has conflicts. How do you get it up to date safely?

    Intermediate

    What the interviewer is looking for: Strong answers describe merging or rebasing main in, resolving conflicts deliberately, and testing before pushing, plus caution about rewriting shared history. Blindly accepting one side of every conflict is a red flag.

Problem-Solving

1 question
  1. How would you debug a layout that looks correct in Chrome but broken in Safari?

    Intermediate

    What the interviewer is looking for: Look for a systematic approach — reproducing, isolating CSS, checking feature support and vendor differences, and using devtools. Guessing random fixes without isolating the cause is a red flag.

Jest

1 question
  1. How do you approach writing a Jest test for a component with an API call?

    Intermediate

    What the interviewer is looking for: A good answer mocks the network layer, tests behaviour and rendered output rather than implementation details, and covers loading/error paths. Testing internal state instead of user-visible behaviour is a red flag.

Behavioural & role-general

2 questions
  1. Describe a time you had to improve a slow or clunky UI. What did you change and how did you measure it?

    Basic

    What the interviewer is looking for: Strong answers identify the bottleneck with data, make a targeted change, and measure the improvement. Vague 'made it faster' claims without measurement are red flags.

  2. How do you keep up with the fast-changing frontend ecosystem without chasing every new framework?

    Basic

    What the interviewer is looking for: Look for a balance of fundamentals and pragmatic evaluation of new tools against real needs. Either resisting all change or adopting hype uncritically are both red flags.

Before the interview, close the skill gaps first

Upload your resume and see your Frontend Developer Skill Score, the exact skills you're missing, and a free learning path for each one — so you walk in prepared.