yangshun/front-end-interview-handbook

⚡️ Front End interview preparation materials for busy engineers

Front End Interview Handbook

By GreatFrontEnd

Read on the website

Join/follow us on Discord | 𝕏 (Twitter) | Facebook

---

What is this?

Unlike typical software engineer job interviews, front end job interviews have less emphasis on algorithms and have more questions on intricate knowledge and expertise about the domain — HTML, CSS, JavaScript, just to name a few areas. This repository covers all you need to know for front end interviews:

• Various formats of Front end interviews including formats by different companies
• Front end system design interviews
• Front end trivia questions - answers to the h5bp Front-end Developer Interview Questions
• Front end questions - JavaScript, DOM, algorithms, and more
• Front end interview questions by companies

Where to get hands on practice?

After getting a good understanding about front end interview preparation, try out GreatFrontEnd, a platform built by me! Not only that there are 200+ practice questions, each with multiple solutions from senior front end engineers, there are also automated test case suites to help you identify what's wrong with your code. Thus, check out the following resources:

• Study plans help you prepare for your upcoming technical interviews, whether it is in a week or 3 months later.
• Focus areas allow you to focus on your weak areas and also further improve your strengths depending on your preferences.
• Preparation by stage prepares you for each phase of your interview process, from quiz to coding interviews.
• Individual framework questions offer training based on specific frameworks that may be tested during your technical interviews.

---

Need to practice front end interview questions? GreatFrontEnd is holding a limited time promotion for 20% off their lifetime plan of high quality practice questions and reference solutions written by ex-FAANG interviewers 🚀

---

Looking for Generic Interview Preparation?

You might be interested in the Tech Interview Handbook which has helpful content on general coding interviews such as algorithms, behavioral questions and an interview cheatsheet!

Credits: Illustration by unDraw

Read on the website

Translations

• English
• Chinese (Simplified) (简体中文)
• Japanese (日本語)
• Korean (한국어)
• Polish (Polski)
• Portuguese (Português)
• Russian (Русский)
• Tagalog

Related

If you are interested in how data structures are implemented, check out Lago, a Data Structures and Algorithms library for JavaScript. It's meant for reference and studying purposes, not for production use.

Contributing

Contributing Guide

Read our contributing guide to learn about how you can contribute, how to propose improvements or if you are interested in translating the content.

Supporting

Many hours of hard work have gone into this project. Your support will be very appreciated!

License

All projects and packages in this repository are MIT licensed.

front-end-interview-handbook's Issues

Display links to translations on root README

Make translations more discoverable (:

difference between inline and inline-block should include discussion about replaced / non-replaced elements

It is reasonable to answer this question only regard non-replaced elements, since for replaced elements, display inline or inline-block are actually (almost?) the same. But without mentioned of replaced elements, its answer is a bit misleading, somehow.

Nigerian Yoruba Language Localisation

Hello,
I would like to get approval in translating the files available on this project to Yoruba language.
Thanks in anticipation.

On the difference between Classes ES6 and Factories ES5

Hi everyone,

First of all, great job with this repo. I found the information here extremely useful (even if it's not for an interview prep).

I was reading about the difference between constructors and factories in JS and found this blog post to be quite useful: https://medium.com/javascript-scene/javascript-factory-functions-vs-constructor-functions-vs-classes-2f22ceddf33e.

My attempt at answering the question (based on that text and its references) would be:

From a practical point of view, the main difference are how to instantiate new objects and what this refers to when creating them.

Classes are a syntax sugar for Constructor functions, which basically define a new object and append functions to its prototype. This allows developers to instantiate objects using new and also ensure that this inside the class refers to the object being created (similar to other languages).

class ClassCar {
  drive () {
    console.log('Vroom!');
  }
}

const car1 = new ClassCar();
console.log(car1.drive());

Factories are functions that return the new object, which gives developers a bit more freedom on how the object will be instantiated (if more than just creating the object is needed, like pooling). Since factories are just regular functions this won't refer to the object being created.

const proto = {
  drive () {
    console.log('Vroom!');
  }
};

function factoryCar () {
  return Object.create(proto);
}

const car3 = factoryCar();
console.log(car3.drive());

There are more differences, specially regarding the code design of the application which are explored deeper at Eric Elliot's post, if you want to know more about the implications of using Classes or Factories, I recommend checking it out.

References

https://medium.com/javascript-scene/javascript-factory-functions-vs-constructor-functions-vs-classes-2f22ceddf33e

incorrect character in chinese

I found typo in the Chinese version of javascript chapter about 请解释变量提升（hosting）
hosting->hoisting

Can you give an example of an @media property other than screen? TODO

It can be used for using a 1x or 2x sprite sheet depending on pixel density IIRC.

https://www.google.pl/search?q=media+css+pixel+ratio

ES6 String Duplicate

ES6 String Duplicate

https://github.com/yangshun/front-end-interview-handbook/blob/master/questions/javascript-questions.md#make-this-work

/**
 * @author xgqfrms
 * @license MIT
 * @description ES6 String Duplicate
 * @param {Array} arr
 */

let arr = [1, 2, 3, 4, 5];
const ES6_String_Duplicate = arr => `${arr.toString()},`.repeat(2).slice(0, -1).split(`,`).map(item => parseInt(item));
ES6_String_Duplicate(arr);
// (10) [1, 2, 3, 4, 5, 1, 2, 3, 4, 5]

Disadvantages of Ajax

https://github.com/yangshun/front-end-interview-handbook/blob/master/questions/javascript-questions.md#what-are-the-advantages-and-disadvantages-of-using-ajax

One more disadvantage you might consider is,

• Its hectic for low-spec mobile devices (clients) to parse and compile huge chunk of javascript to render initial content, but for server rendered app, server (usually high-spec) takes over the responsibility of rendering initial html content.

Information on HTML rendering.

Knowing more about how rendering happens is very important. With the latest JS frameworks, it has become very vague for new developers to know what is happening in the HTML world as they generate HTML in JS using JSX. I felt these questions would definitely introduce certain topics that they can read on at their own pace.

#172

Japanese Translation

I would like to contribute Japanese translation.
Could you see it if I fork this repo and send pull-request?
Or could I join the team like korean or chinese persons?

Add answer to srcset HTML question.

Why you would use a srcset attribute in an image tag? Explain the process the browser uses when evaluating the content of this attribute.

The srcset attribute allows the browser the ability to choose the appropriate image for a given rendering situation. For example: srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 200w" tells the browser to display the small, medium or large .jpg graphic depending on the client's resolution. The way the browser calculates which graphic to use is quite interesting:

500 / 320 = 1.5625
1000 / 320 = 3.125
2000 / 320 = 6.25

If the client's resolution is Retina x1, the calculation closer to 1 will be selected by the browser.

If the resolution is Retina x2, the browser will use the closest resolution above the minimum. Meaning it will not choose the 1.5 resolution becasue it is greater than 1. The browser would then choose the image closer to 2 which is 3.1.

So, srcset makes the browser a bit smarter by ignoring smaller graphics and using the most appropriate img based on math.

References

• https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/

Korean Translation

Hi, I'm Chris from Korea.

Would you mind if I translate this repo into Korean?

HTML Link Positioning Answer is incorrect

Since the HTML5 specification it is no longer recommended to include the optional <head> tag.

https://google.github.io/styleguide/htmlcssguide.html#Optional_Tags

The body tag is also not always required.
https://html.spec.whatwg.org/multipage/syntax.html#syntax-tag-omission

Including both of these tags just increase the amount the browser must parse before rendering the page. It also increase the payload size.

Translation to brazilian portuguese

Hi guys, how are you?

I would like to know how is the translation to brazilian portuguese going?
I saw some issues about it, nothing more.

Could I start a translation?

localStorage和sessionStorage的和域名相关

localStorage和sessionStorage都受同源策略限制，只有同源才可以共享，和domain相关！

Can you explain the difference between coding a web site to be responsive versus using a mobile-first strategy? TODO

Mobile-first is easily doable with CSS frameworks (media-query specific classes), scales smoothly, does hide stuff that's not needed on feature phones, mobiles and tablets from the get-go or has device-specific UX like the beloved hamburger menu. You actually can develop with the viewport adapted for your mobile target.

I also tend to actually test stuff on devices. Handling an adapted viewport with a mouse hides UX issues that can be easily found when you load up the page on your phone.

"Responsive" can be an afterthought. I've seen pages with fixed-width inline styles (React, I'm looking at you) where making them responsive is a low-prio feature in the backlog. Depending on the creativity of the original dev adding this "feature" can be a nightmare.

Clarification for domain on localstorage and sessionstorage

Hi,
I was reading through the questions and came across "Describe the difference between a cookie, sessionStorage and localStorage".

In the answer it says: Have domain associated | Yes | No | No

I think that's misleading, as localStorage and sessionStorage are associated to a domain and you can't read storage objects from other domains.
See https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API

Pages on other domains can't access the same storage objects.

Other than that and what I read so far a great list - especially that it provides answers is a valuable learning experience for everyone.

HTML5 open web platform question

In HTML section there is a question:

Consider HTML5 as an open web platform. What are the building blocks of HTML5?

And the answer is from MDN's HTML5 docs:
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5

Probably something different is meant in the original question. I understand it as a question about tech stack of open web platform. Please take a loot at the diagrams on this pages to see what I mean:
http://tess.oconnor.cx/2009/05/what-the-web-platform-is
https://hsivonen.fi/web-stack/

Removing unnecessary assignment in Array.prototype.reduce-example

I think the following line

numbers.reduce((total, number) => (total += number), 0);

should be replaced with

numbers.reduce((total, number) => (total + number), 0);

I would also leave out the parenthesis around total + number, but is more of a style matter.

README split

Hey there 👋 !

I ran into this wonderful repository because one of the stargazers is Marius Schulz. So, I would like to contribute adding a little bit of organisation.

To accomplish that I would like to propose splitting up the README into the different current sections. That action would give us more maintainability, readability, scalability.

Furthermore, I would like to propose adding some anchors to improve navigation which now is tough and poor.

Hard work but to be honest, it would be appealing to the current and new contributors.

Is there any alternative repository for back-end ?

Sorry, this may not issue the content of this repository and my English not so strong. But as a title I asked for, I try to search many repositories there has only a question for an interview, not a handbook, as this https://github.com/arialdomartini/Back-End-Developer-Interview-Questions The contents are not contained about any answer for it. I really confuse a question also couldn't manage to find out any answer for it, as well as I am a little rookie for programmable.

Anyways thanks for the nice repository. This documentation really made me learn many things like a getting started guideline 👍

deepClone vs shallowClone for JS Questions

It may be of interest to add a question on deep cloning vs shallow cloning for the JS section. It can be extremely important for a programmer to know the difference as it has a huge impact on performance.

May I translate this in Chinese?

Hi, I saw a Korean version in the repo, may I do a Chinese version?
If you can, invite me plz.

Filipino Translation [TL Repository]

Hi , permit me to translate all your files for tagalog Filipino [PHILIPPINES] localization. Rest assured that my work is credible. Thanks .

proposed repo :
front-end-interview-handbook/tree/master/translations/tl_PH

i will wait for your go signal @yangshun

element with display flex do not create a new BFC itself

In CSS section, the answer says "A BFC is an HTML box that satisfies at least one of the following conditions: ... The value of display is table-cell, table-caption, inline-block, flex, or inline-flex."

display flex create a new flex formatting context, not block formatting context. Only flex items (its children) create new BFC.

hoisting answer is incorrect.

The examples for an answer is incorrect:
https://github.com/yangshun/front-end-interview-handbook/blob/master/questions/javascript-questions.md#explain-hoisting

Believe it or not, variables declared using let or const are hoisted, their namespace gets hoisted however they do not get declared until the interpreter reaches the line of code on which the declaration happens. To demonstrate this:

var a = "foo";
function proofOfHoisting(){
  console.log(a);
  let a = "bar";
}

If hoisting was to not be a thing for let and/or const then running this function would actually log foo, however it does not, it gives a reference error because the inner variable is hoisted, but not declared, however because of hoisting the outer variable is not visible.

Template literal terminology

In the section What kind of things must you be wary of when designing or developing for multilingual sites?, you warn against using concatenated strings, and suggest using template parameters instead.

By template parameters, do you mean template literals or tag functions?

Thanks for your work on this, this is a great document!

Recommendation to not check for null

This is nuanced and perhaps debatable too haha. I happened to be reading an example polyfill in the MDN docs on Object.assign and they do:

if (target == null) { // TypeError if undefined or null

If I'm understanding your https://github.com/yangshun/front-end-interview-handbook/blob/master/questions/javascript-questions.md#whats-the-difference-between-a-variable-that-is-null-undefined-or-undeclared-how-would-you-go-about-checking-for-any-of-these-states section

you're advising that you should not take advantage of the fact that

null === undefined
false
null == undefined
true

I usually would agree, but would you say they're example is a misuse of loose checking? I could see it written as:

if (target === null || target === undefined) {

So my issue here is probably not more of an issue then discussion (so feel free to close). But, I think it's interesting :)

First Sentence of Readme

Correct me if I am wrong, but I think you want to refer to the "DOM" (Document Object Model) int he first sentence, not "Domain".

Unlike typical software engineer job interviews, front-end job interviews have less emphasis on algorithms and have more questions on intricate knowledge and expertise about the domain

Unlike typical software engineer job interviews, front-end job interviews have less emphasis on algorithms and have more questions on intricate knowledge and expertise about the DOM (Document Object Model).

Memory implications of using closure methods vs prototype methods

Which of these is more memory efficient, and why?

function ProtoPerson() {}

ProtoPerson.prototype.getName = function() {
	return "MyName";
};

ProtoPerson.prototype.getLink = function() {
	return "http://mycompany.com/myLinks/" + this.getName();
};

var protoPersons = [];
for (var i = 0; i < 100000; i++) {
	protoPersons.push(new ProtoPerson);
}

function ClosurePerson() {

	this.getName = function() {
		return "MyName";
	};

	this.getLink = function() {
		return "http://mycompany.com/myLinks/" + this.getName();
	};

}

var closurePersons = [];
for (var i = 0; i < 100000; i++) {
	closurePersons.push(new ClosurePerson);
}

Detail explanation of higher order functions

Providing detailed explanation of higher order functions especially reduce().

Add answer to "Explain the difference between mutable and immutable objects." question.

I would like to add answer to javaScript section for question -> Explain the difference between mutable and immutable objects.

Typo in HTML Questions

Found a typo in front-end-interview-handbook/questions/html-questions.md on line 24.
Typo - declation (declaration).

Translation to Portuguese

Hello just wanted to ask the following question: The css-questions.md file has about 4200 words, can I translate it into two parts, doing two pull requests?

I think this is wrong in "Explain how prototypal inheritance works"

When a property is accessed on an object and if the property is not found on that object, the JavaScript engine should looks at the object's __proto__(different browser has their own implement) .Or, looks at the prototype of its constructor.

Russian translation

I think that this is the most comprehensive set of answers to the Front-end Developer Interview Questions. I highly appreciate the titanic work that the original contributor has made.

I know that many companies (especially in Russia) use the original set of questions to interview candidates and there is not a lot of resources in Russian that can help people to get ready.

So without further ado I think that this repo also needs a Russian translation 😉
I am one of the contributors and translators of the original repo, and Russian is my mother tongue, so I assume I am qualified for this.

Add PT-BR (Brazilian Portuguese) translations

I'll be translating the questions to PT-BR but I don't promise it will be fast. Will probs start working on it later this weekend, which includes forking the original repo and stuff. I hope to be of great help to this already helpful project

"JSON" & "XML" inverted in answer

https://github.com/yangshun/front-end-interview-handbook/blob/master/questions/javascript-questions.md#explain-ajax-in-as-much-detail-as-possible

Correctly if I'm wrong but I guess those are inverted

modern implementations commonly substitute JSON for XML

Sholdn't it be

modern implementations commonly substitute XML for JSON

?

Add `@supports` as an answer for how to serve pages for feature-constrained browsers

The @supports CSS at-rule is a great way to write CSS styles that degrade gracefully in older browsers. I think it makes sense to add that to the answers of "How do you serve your pages for feature-constrained browsers? What techniques/processes do you use?".

Made flashcards for this in various formats.

I made a few flashcard decks for those that want to study on the go on their phones with AnkiDroid, Studies, etc.
You can find them here.

Any suggestions welcome.

Translation in French

Hello,
I would like to contribute to translate the project in french.
Can I make a branch for that?
Thank you for your work and answer.

Turkish Translate

We need to Turkish content for all questions and answers.

Maybe we need some guidelines for translation.

I want to shorten this to make a brief principle for zh-cn translators. How about adding a link in this contributing part?

Links to the original repo lead to 404

Since the original repo with questions has changed their folder structure in December 2018, all the links to the original repository cause 404 error now.

CSS question missing from links

The following question was missing from the list of links above:

How is responsive design different from adaptive design?

HTML rendering and Browser Architecture.

Knowing more about how rendering happens is very important. With the latest JS frameworks, it has become very vague for new developers to know what is happening in the HTML world as they generate HTML in JS using JSX. I felt these questions would definitely introduce certain topics that they can read on at their own pace.

#174

localstorage may be related with domain

localstorage应该与域名相关吧

https://developer.mozilla.org/en-US/docs/Web/API/Storage/LocalStorage

Recommended grid system

Thanks for creating this repo, it's very complete and useful.
So this is somewhat a matter of personal preference, but I would suggest you change your response to "Have you ever used a grid system, and if so, what do you prefer?" from float to flexbox. Support for flexbox is now very good, including IE11 https://caniuse.com/#search=flexbox
The latest version of Bootstrap also uses flexbox for its grid (with no fallback that I'm aware of) https://getbootstrap.com/docs/4.0/layout/grid/

Position absolute doesn't cause reflow.

Hey Yangshun & team,

Just a quick clarification about this answer:
https://github.com/yangshun/front-end-interview-handbook/blob/master/questions/css-questions.md#is-there-any-reason-youd-want-to-use-translate-instead-of-absolute-positioning-or-vice-versa-and-why

Changes to position absolute will not cause reflow (recalculation of layout) and the reason being they are already separated from normal flow.
They do trigger repaint (and composite).

To extend the original answer:

• Translate also avoids pixel snapping (https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/)

Indonesian Translation [id - localization]

Hi @yangshun, I am Iqbal Adan from Indonesia. I really want to contribute in translating this project into my native language (Bahasa Indonesia), Would you mind if I translate this project into Bahasa? Waiting forward your response.