#Front-end Job Interview Questions
This file contains a number of front-end interview questions that can be used when vetting potential candidates. It is by no means recommended to use every single question here on the same candidate (that would take hours). Choosing a few items from this list should help you vet the intended skills you require.
Note: Keep in mind that many of these questions are open-ended and could lead to interesting discussions that tell you more about the person's capabilities than a straight answer would.
- General Questions
- HTML Questions
- CSS Questions
- JS Questions
- Testing Questions
- Performance Questions
- Network Questions
- Coding Questions
- Fun Questions
- Tell us about yourself.
- How did you get into web development?
- What did you learn yesterday/this week?
- Tell us about some of your recent projects and what your role was on them.
- What was your favorite project and why?
- What’s your favorite language to code in?
- Talk about your preferred development environment.
- What are some of your favorite frameworks or CMSs to use?
- Describe your perfect perfect job in web development.
- What excites or interests you about coding?
- What is a recent technical challenge you experienced and how did you solve it?
- Can you describe your workflow when you create a web page?
- If you have 5 different stylesheets, how would you best integrate them into the site?
- Describe how you would create a simple slideshow page.
- What are the building blocks of HTML5?
- Have you used different HTML templating languages before?
- Why is it generally a good idea to position CSS
<link>s between<head></head>and JS<script>s just before</body>? Do you know any exceptions?
- What is the difference between classes and IDs in CSS?
- What's the difference between "resetting" and "normalizing" CSS? Which would you choose, and why?
- Explain how a browser determines what elements match a CSS selector.
- Describe Floats and how they work.
- Describe z-index and how stacking context is formed.
- How would you approach fixing browser-specific styling issues?
- What are the different ways to visually hide content (and make it available only for screen readers)?
- Have you ever used a grid system, and if so, what do you prefer?
- Have you used or implemented media queries or mobile specific layouts/CSS?
- Are you familiar with styling SVG?
- What are the various clearing techniques and which is appropriate for what context?
- How would you implement a web design comp that uses non-standard fonts?
- What does
* { box-sizing: border-box; }do? What are its advantages? - List as many values for the display property that you can remember.
- Have you ever worked with retina graphics? If so, when and what techniques did you use?
- Explain how
thisworks in JavaScript - What's the difference between a variable that is:
null,undefinedor undeclared?- How would you go about checking for any of these states?
- What is the difference between
==and===? - Create a for loop that iterates up to
100while outputting "fizz" at multiples of3, "buzz" at multiples of5and "fizzbuzz" at multiples of3and5 - What tools and techniques do you use debugging JavaScript code?
- What UI, Security, Performance, SEO, Maintainability or Technology considerations do you make while building a web application or site?
- Which version control systems are you familiar with?
- How would you optimize a website's assets/resources?
- Name 3 ways to decrease page load (perceived or actual load time).
- If you jumped on a project and they used tabs and you used spaces, what would you do?
- If you could master one technology this year, what would it be?
- Explain the importance of standards and standards bodies.
- Explain the differences on the usage of
foobetweenfunction foo() {}andvar foo = function() {}
- What are
data-attributes good for? - Describe the difference between a
cookie,sessionStorageandlocalStorage. - Describe the difference between
<script>,<script async>and<script defer>. - What is progressive rendering?
- Explain some of the pros and cons for CSS animations versus JavaScript animations.
- What are some of the "gotchas" for writing efficient CSS?
- What are the advantages/disadvantages of using CSS preprocessors?
- Describe what you like and dislike about the CSS preprocessors you have used.
- Describe pseudo-elements and discuss what they are used for.
- What's the difference between inline and inline-block?
- What existing CSS frameworks have you used locally, or in production? How would you change/improve them?
- Have you played around with the new CSS Flexbox or Grid specs?
- Is there any reason you'd want to use
translate()instead of absolute positioning, or vice-versa? And why?
- Explain event delegation
- Explain how prototypal inheritance works
- What do you think of AMD vs CommonJS?
- How do you organize your code? (module pattern, classical inheritance?)
- Difference between:
function Person(){},var person = Person(), andvar person = new Person()? - What's the difference between
.calland.apply? - When would you use
document.write()? - What's the difference between feature detection, feature inference, and using the UA string?
- Explain Ajax in as much detail as possible.
- Have you ever used JavaScript templating?
- If so, what libraries have you used?
- Describe event bubbling.
- Why is extending built-in JavaScript objects not a good idea?
- Explain the same-origin policy with regards to JavaScript.
- Make this work:
duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]- Why is it called a Ternary expression, what does the word "Ternary" indicate?
- What is
"use strict";? what are the advantages and disadvantages to using it? - Why is it, in general, a good idea to leave the global scope of a website as-is and never touch it?
- Explain what a single page app is and how to make one SEO-friendly.
- What is the extent of your experience with Promises and/or their polyfills?
- What language constructions do you use for iterating over object properties and array items?
- Explain the difference between synchronous and asynchronous functions.
- What is the extent of your experience with ES6?
- What are some advantages/disadvantages to testing your code?
- What tools would you use to test your code's functionality?
- What is the purpose of a code style linting tool?
- What tools would you use to find a performance bug in your code?
- What are some ways you may improve your website's scrolling performance?
- Explain the difference between layout, painting and compositing.
- Traditionally, why has it been better to serve site assets from multiple domains?
- Do your best to describe the process from the time you type in a website's URL to it finishing loading on your screen.
Question: What is the value of foo?
var foo = 10 + '20';Question: How would you make this work?
add(2, 5); // 7
add(2)(5); // 7Question: What value is returned from the following statement?
"i'm a lasagna hog".split("").reverse().join("");Question: What is the value of window.foo?
( window.foo || ( window.foo = "bar" ) );Question: What is the outcome of the two alerts below?
var foo = "Hello";
(function() {
var bar = " World";
alert(foo + bar);
})();
alert(foo + bar);Question: What is the value of foo.length?
var foo = [];
foo.push(1);
foo.push(2);Question: What is the value of foo.x?
var foo = {n: 1};
var bar = foo;
foo.x = foo = {n: 2};Question: What does the following code print?
console.log('one');
setTimeout(function() {
console.log('two');
}, 0);
console.log('three');- What's a cool project that you've recently worked on?
- What are some things you like about the developer tools you use?
- Who inspires you in the front-end community?
- Do you have any pet projects? What kind?
- How do you like your coffee?
This document started in 2009 as a collaboration of @paul_irish @bentruyman @cowboy @ajpiano @SlexAxton @boazsender @miketaylr @vladikoff @gf3 @jon_neal @sambreed and @iansym.
It has since received contributions from over 100 developers.