dcanamares / front-end-interview-questions

Our front end interview questions and answers can help you to prepare for an interview better and faster

Front End Interview Questions and Answers 🐬

This information is intended for Front End Developer candidates. The list includes basic theoretical and code questions.
I hope my experience and the experiences of other developers will help you get better interview results.

P.S. My main goal is to help candidates (including myself) get more web knowledge. Let's improve the hard skills of the Front-End community together. Please send you Front-End interview questions via pull request.

List of Content

1. Common interview questions
2. Common technical interview questions
3. HTML
4. CSS
5. Javascript
   • Junior candidate
   • Middle candidate
   • Senior candidate
6. Javascript Coding
7. React interview questions
8. GIT Questions
9. Testing Questions
10. Funny Questions
11. Contributing

Common interview questions

1. What was the most interesting solution you implemented during your last project?
2. What is the last book you read?
3. How big was your team?
4. Have you ever worked in Agile, Scrum or Kanban environments?
5. Which developers do you know in the Front End community?
6. What do you do to improve programming skills?
7. What have you heard about the 'Gangs of four'?
8. What are the most common types of web attacks? - @answer--blog.sucuri.net
9. What is the difference between imperative and declarative programming in JS? - @answer--redotheweb.com

Common technical interview questions

1. What is REST? - @library--restcookbook
2. What is the difference between PUT and PATCH methods in REST? - @answer--stackoverflow
3. Talk about the differences between websockets, long polling and SSE. - @answer--stackoverflow
4. What is CORS? - @answer--maxcdn.com, @doc--mdn
5. List the main things you can do to increase page speed loading? - @answer--crazyegg.com
6. Progressive enhancement vs graceful degradation. What is the difference? - @answer--w3
7. Do you use Grunt, Gulp, [Webpack](https://webpack. quehub.io/) or Browserify in your projects?
8. What do you know about "60fps"? How can you achieve it? - @answer--github
9. What is the difference between layout, painting and compositing? - @answer--google
10. What is Web Components? - @doc--mdn
11. What is the difference between sessioStorage, localStorage and cookies? @answer--stackoverflow

HTML Interview Questions

1. Could you list major HTML5 tags? - @doc--mdn
2. What does an 'optional' closing tag mean? - @doc--w3
3. When and how to preload resources? - @answer--medium
4. What is the difference between id and class? - @answer--css-tricks

CSS Interview Questions

1. What is the difference between 'mobile first' and 'desktop first' - @answer--codemyviews.com?
2. Which of these selectors has the highest specificity. What color will be applied to the paragraph?
3. What does the pseudo-class :root refer to?
4. What preprocessor do you use? (Sass or Less)

Javascript Interview Questions

Junior candidate

1. Who is the author of JavaScript Language?
2. What is the best book for learning JavaScript and why? - @answer-good-js-books--github
3. What is the type of NaN? How to check if a value is NaN?
4. What the reason that window.window === window return true? - @doc--mdn
5. What is the outcome of the JavaScript calculation? 1/0 = ?
6. What is hoisting? @doc--mdn
7. What is the difference between bubbling and capturing? - @answer--stackoverflow

Middle candidate

1. What does this refer to? - @answer--javascriptissexy
2. What is the JavaScript Event Loop? - @answer--altitudelabs.com, @video-Roberts--youtube
3. What is the Event Delegation? - @answer--davidwalsh, @code-example
4. What is the difference between e.target and e.currentTarget? - @doc--mdn, @code-example
5. What is Window.postMessage() and where it can be used? - @doc--mdn
6. Is there any difference between Promises and callbacks? Which is better? - @answer-callback--callbackhell.com,
7. What is recursion? When is the use of recursion useful in Javascript? - @answer--medium
8. What do you hear about DRY, KISS, YAGNI? - @answer-thefullstack.xyz

Senior candidate

1. What patterns do you know and successfully use in JavaScript?
2. What is the difference between Deferred and Promise objects? Where is Deferred object used?
3. What is the problem throttling and debouncing are resolved? What is the core difference between them? - @answer--medium
4. What is SOLID? @answer-wiki
5. What is the difference between inheritance and composition? What do you prefer? Why? @answer-hackernoon.com, @answer--medium

Javascript Coding Questions

• Write a pipefy function where a string received is returned, but with the | character between each character. Make it possible to execute function in this way: 'javascript'.pipefy(). - @code-answer
• Write a currying function that return sum of two numbers.
• Write a factorial function without side effect. @code

// Code below must return true
alert(factorial(3) === 6 && factorial(0) === 1);

• Which line of the below code will be executed with an error? Why?

10 .toString();
(10).toString();
10..toString();

• What is the order of alerts?

setTimeout(function(){
    alert('gorilla');
    setTimeout(function(){
        alert('classical inheritance')
    }, 0);
    alert('drumroll');
}, 0);

alert('banana');

• What is the result after code execution: 1, 2 or 3?

var x = 1;
var foo = {
  x:2,
  bar: function() {
    x = 3;
    return this.x;
  }
}
var run = foo.bar;

alert(run());

• What below code will return: true or false. What does each part of code return?

new String('a') instanceof String && 'b' instanceof String;

• Does a({}, 'val') & b({}, 'val') will return the same?

var a = function(obj, val) {
    obj.val = {
        a: 1,
        b: 2,
    }

    return obj;
}

var b = function(obj, val) {
    return obj.val = {
        a: 1,
        b: 2,
    }    
}

• What would be the output of this code below?

   (function () {
      console.log(a, b);
      var a = 1;
      const b = 2;
   }())

Which one of the function expression below would be the best choice for the prototype-constructor pattern (a, b, c)? Why?

function Man (name) {
	this.name = name;
}

// a
Man.prototype.getName = function () {
	return this.name;
}

// b
Man.prototype.getName = function getName() {
	return this.name;
}

// c
Man.prototype.getName = () => {
	return this.name;
}

React interview questions

1. What happens when you execute setState() in the render() method?
2. What is the difference between 'smart and dummy' components?
3. How to create higher order component?
4. Tell about React in the SEO context.
5. Why rendering of React Components in the custom <div id="app"> is good practice than simple to the <body>?
6. What does mean "Isomorphic React Application"? - @answer--smashingmagazine
7. What is the difference between Mobx & Redux? - @answer

GIT

1. What is the main difference between merge and rebase? - @answer

Testing Questions

1. Explain the difference between unit tests and integration tests? - @answer--stackoverflow
2. Tell about TDD. What advantages or disadvantages of this concept you know? @answer--wiki
3. Explain the difference between unit tests and integration tests? - @answer--stackoverflow
4. Which frameworks/platforms do you use for test you code?
5. List unit testing best practices principles. @answer-slides

Funny Questions

1. Do you like parties?
2. Do you know that we have a dress code?