Front-End Job Interview Questions

Front-End Job Interview Questions

This repo 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 wocould take hours ). choosing a few items from this list shocould help you vet the intended skills you require.

Rebecca murphey's baseline for front-end developers is also a great resource to read up on before you head into an interview.

Note:Keep in mind that role of these questions are open ended and cocould lead to interesting discussions that tell you more about the person's capabilities than a straight answer wowould.

Table of contents

1. Original contributors
2. General questions
3. HTML questions
4. CSS questions
5. JS questions
6. Jquery questions
7. Coding questions
8. Fun questions
9. Other great references

[?] Original contributors:

The majority of the questions were plucked from an oksoclap thread created originally by Paul Irish (@ paul_irish) and contributed to by the folloindiwing viduals: @ bentruyman @ cowboy @ ajpiano @ slexaxton @ boazsender @ miketaylr @ ~koff @ gf3 @ jon_neal @ sambreed @ iansym

[?] General questions:

• What did you learn yesterday/this week?
• What excites or interests you about coding?
• What UI, security, performance, Seo, maintainability or technology considerations do you make while building a web application or site?
• Talk about your preferred development environment. (OS, editor or IDE, browsers, tools etc .)
• Which version control systems are you familiar?
• Can you describe your workflow when you create a web page?
• If you have 5 different stylesheets, how wocould you best integrate them into the site?
  • File concatenation
• Can you describe the difference between progressive enhancement and graceful degradation?
  • Bonus points for describing Feature Detection
• How wocould you optimize a websites assets/resources?
  • Looking for a number of solutions which can include:
    • File concatenation
    • File minification
    • CDN hosted
    • Caching
    • Etc.
• Traditionally, why has it been better to serve site assets from multiple domains?
  • How many resources will a Browser Download from a given domain at a time?
  • What are the limits?
    • Bonus points for identifying mobile as a possible downside (http://www.mobify.com/blog/domain-sharding-bad-news-mobile-performance)
    • Bonus points for identifying http2/spdy as an exception
• 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 wowould you do?
  • Suggest the project utilize something like editorconfig (http://editorconfig.org)
  • Conform to the conventions (stay consistent)
  • issue :retab! command
• Write a simple slideshow page
  • Bonus points if it does not use Js.
• What tools do you use to test your code's performance?
  • Profiler, jsperf, dromaeo
• If you cocould master one technology this year, what wowould it be?
• What are the differences between long-polling, websockets and SSE?
• Explain the importance of standards and standards bodies.
• What is fouc? How do you avoid fouc?
• Do your best to describe the process from the time you type in a website's URL to it finishing loading on your screen.

[?] HTML questions:

• What'sdoctypeDo?
• What's the difference between standards mode and quirks mode?
• What are the limitations when serving XHTML pages?
  • Are there any problems with serving pagesapplication/xhtml+xml?
• How do you serve a page with content in multiple ages?
  • What kind of things must you be wary of when design or developing for multilingual sites?
• What aredata-Attributes good?
• Consider HTML5 as an open web platform. What are the building blocks of HTML5?
• Describe the difference between cookies, sessionstorage and localstorage.
• Can you explain the differenceGETAndPOST?

[?] CSS questions:

• What is the difference between classes and IDs in CSS?
• Describe what a "reset" CSS file does and how it's useful.
  • Bonus for pointing out the downsides of a "reset", and/or mentioning "normalize" as a better alternative.
• Describe floats and how they work.
• Describe Z-index and how stacking context is formed.
• What are the various clearing techniques and which is appropriate for what context?
• Explain CSS Sprites, and how you wocould implement them on a page or site.
• What are your favorite image replacement techniques and which do you use when?
• CSS property hacks, conditionally encoded. CSS files, or... something else?
• How do you serve your pages for feature-constrained browsers?
  • What techniques/processes do you use?
• What are the different ways to conform ally 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?
• Any familiarity with styling SVG?
• How do you optimize your webpages for print?
• What are some of the "gotchas" for writing efficient CSS?
• What are the advantages/disadvantages of using CSS preprocessors? (Sass, compass, stylus, less)
  • If so, describe what you like and dislike about the CSS preprocessors you have used.
• How wocould you implement a web design comp that uses non-standard fonts?
  • Webfonts (font services like: Google webfonts, typekit etc .)
• Explain how a browser determines what elements match a CSS selector?
• Explain your understanding of the Box Model and how you wowould tell the browser in CSS to render your layout in different box models.
• What does* { box-sizing: border-box; }Do? What are its advantages?
• List as your values for the display property that you can remember.
• What's the difference between inline and inline-block?
• What's the difference between a relative, fixed, absolute and statically positioned element?
• What existing CSS frameworks have you used locally, or in production? (Bootstrap, purecss, foundation etc .)
  • If so, which ones? If you cocould, how wocould you change/improve them?
• Have you played around with the new CSS flexbox or grid specs?
• How is responsive design different from adaptive design?
• Have you ever worked with retina graphics? If so, when and what techniques did you use?

[?] JS questions:

• Explain event Delegation
• Explain howthisWorks in Javascript
• Explain how Prototypal inheritance works
• How do you go about testing your JavaScript?
• AMD vs. commonjs?
• Explain why the following doesn't work as an Iife:function foo(){ }();.
  • What needs to be changed to properly make it an Iife?
• What's the difference between a variable that is:null,undefinedOrundeclared?
  • How wocould you go about checking for any of these states?
• What is a closure, and how/why wocould you use one?
• What's a typical use case for anonymous functions?
• How do you organize your code? (Module pattern, classical inheritance ?)
• What's the difference between host objects and native objects?
• Difference:function Person(){},var person = Person(), Andvar person = new Person()?
• What's the difference.callAnd.apply?
• ExplainFunction.prototype.bind?
• When do you optimize your code?
• When wocould you usedocument.write()?
  • Most generated ads still utilizedocument.write()Although its use is frowned
• What's the difference between feature detection, feature inference, and using the UA string
• Explain Ajax in as much detail as possible
• Explain how jsonp works (and how it's not really Ajax)
• Have you ever used JavaScript templating?
  • If so, what libraries have you used? (Mustache. JS, handlebars etc .)
• Explain "hoisting ".
• Describe event bubbling.
• What's the difference between an "attribute" and a "property "?
• Why is extending built in Javascript objects not a good idea?
• Difference between document load event and document ready event?
• What is the difference==And===?
• Explain the same-origin policy with regards to JavaScript.
• Make this work:

[1,2,3,4,5].duplicate(); // [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 of tages and disadvantages to using it?

[?] Jquery questions:

• Explain "chaining ".
• Explain "deferreds ".
• What are some jquery specific optimizations you can implement?
• What does.end()Do?
• Name 4 different values you can pass to the jquery method.
  • Selector (string), HTML (string), callback (function), htmlelement, object, array, element array, jquery object etc.
• What is the difference.get(),[], And.eq()?

[?] Code questions:

Question: implement a modulo function that satisfies the following

modulo(12, 5) // 2

Question: What value is returned from the following statement?

"i‘m a lasagna hog".split("").reverse().join("");

Answer: "Goh angasal A m' I"

Question: What is the valuewindow.foo?

( window.foo || ( window.foo = "bar" ) );

Answer: "bar" (Only ifwindow.fooWas falsey otherwise it will retain its value)

Question: What is the outcome of the two alerts below?

var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar);

Answer: "Hello World" & referenceerror: bar is not defined

Question: What is the valuefoo.length?

var foo = [];foo.push(1);foo.push(2);

Answer:2

[?] Fun questions:

• What's a cool thing you 've ve coded recently? What's something you 've built that you're proud?
• What are some things you like about the developer tools you use?
• Do you have any pet projects? What kind?
• What's your favorite feature of Internet Explorer?

Front-End Job Interview Questions