Here is a list of handpicked technical interview questions with progressive difficulty, for screening frontend developer candidates. They cover all fundamental skills of a frontend developer. Each question is annotated with the difficulty level, its purpose and the expectations for the answer.
Because there is usually a coding test to screen the candidate’s coding skill, I avoid asking the candidate to solve specific coding problems during the technical interview. I prefer to ask questions about frontend development fundamentals. These are knowledge that a frontend developer should know from his heart, rather than consult stackoverflow every-time during development.
I have used the questions in the past interviews with considerable success. Feel free to use my collection to build your own custom list of interview questions, by following this guide.
- (entry-level) What is the difference between = and ==?
- What about == and === ?
- What are the differences among
- var a = 1
- let a = 1
- const a = 1
- a = 1
- Expect the candidate to correctly answer all questions.
- What is the difference between classical inheritance and prototypal inheritance?
- To display an alert message when any blockquote on a page is clicked, you can use jQuery to attach an event handler on blockquote tag. What if you want the alert to be displayed for any new blockquote dynamically added to the page in future?
- Expect experienced candidate to correctly answer all questions.
- (advanced) What is async and await?
- What is your favorite JS framework?
- Why do you prefer it over other frameworks?
- While the most popular framework is probably React now, there are a hundred of different frameworks out there. This is a basic question asking the candidate to defend a technical decision to use a framework over the others.
- Expect the candidate to give his/her opinion, and back it up with examples from his/her experience.
It is impractical to hire based on framework familiarity. You would miss out on good candidates who just happen to have never used before, the framework X you chose for your project. However, if you expect your hire to get up-to-speed immediately when starting on your project, you have no choice but to evaluate further with the advanced questions below.
These questions touch on the intricate internals of the framework. The candidate should be able to answer them if he has done major work with that framework before.
- Explain how the n-way data binding / data flow works in <framework X>? (n=1 or 2 depending on what X is)
- How does a component A communicates with another component B to change it, in <framework X>?
- if A is the parent of B,
- if B is the parent of A,
- if A and B far apart, or in different branches of the UI hierarchy.
- How does <framework-specific feature> work in <framework X>?
- framework-specific feature could be e.g. props vs state, component lifecycle in React, dependency injection in Angular, etc.
HTML is a fairly straightforward language to learn and use, for all developers. Unless your J.D. contains specific requirements, you can skip over this section.
- Describe the difference between a cookie, sessionStorage and localStorage.
- If your J.D. mentions understanding of offline support, your candidate should understand the different storage mechanisms on the client-side.
- Expect the candidate to discuss the differences in terms of usage, data persistence, association with domain.
- What’s the difference between the <svg> and <canvas> elements?
- If your J.D. mentions understanding of HTML5 graphics and data visualization, this is the basic question to ask.
- Expect the candidate to discuss the crucial difference and when one is more suitable for a task than the other.
- (entry-level) When is the best time to use !important?
- Let this question evolves into a discussion about CSS selector matching rules.
- Expect the candidate to know the priority of each rule, and the danger of using !important to override the rules.
- What are differences among display: inline, block, inline-block?
- What are differences among position: static, relative, absolute, fixed?
- Although technically the answers are Google-able, if a frontend developer does not know them by heart, confusion can arise when tweaking the positioning in legacy code. Googling on the job to debug something will take a long time.
- Expect the candidate to know clearly the differences and how these properties affect other CSS properties such as margin, width, height, top, right, bottom, left.
- (intermediate) How would you implement responsive design, in particular, using the mobile-first approach?
- How would you tackle cross-browser issues?
- The hardest part of frontend development is to adapt the UI for so many different browsers and viewport sizes. An experienced frontend developer should know one trick or two.
- Expect the candidate to discuss flexible grid and media queries, the strategy for minimizing and mitigating cross-browser issues, any libraries or tools that he/she has used.
- Do include a discussion on how to conduct cross-browser testing.
- yangshun, Github, Front-end Job Interview Questions.
- @boucher, presented at Brookyln.js, ES7 Async/Await.
- Toptal, 16 Essential HTML5 Interview Questions.
- Shay Howe, Learn to Code Advanced HTML & CSS.
- kamranahmedse, Github, Front-end Roadmap.