forked from : Darcy Clarke's Front-end-Developer-Interview-Questions

This is an incomplete document with an array of front-end interview questions, and some well-written answers.

What would you do to better front end latency? https://www.youtube.com/watch?v=ch68MXWUfjo

What's a doctype do?
http://www.htmlbasictutor.ca/doctype-declaration.htm

What's the difference between standards mode and quirks mode?
https://developer.mozilla.org/en-US/docs/Quirks_Mode_and_Standards_Mode

What are the limitations when serving XHTML pages, as application/xhtml+xml?
http://www.webdevout.net/articles/beware-of-xhtml

How do you serve a page with content in multiple languages?

What are data- attributes good for?

Consider HTML5 as an open web platform. What are the building blocks of HTML5?
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5 http://code.tutsplus.com/tutorials/28-html5-features-tips-and-techniques-you-must-know--net-13520

Describe the difference between cookies, sessionStorage and localStorage.

Can you explain the differences among GET, POST, PUT, and DELETE?

What are your favorite browser API?

What do you know about the DOM API? https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction

Describe what a "reset" CSS file does and how it's useful.

Describe floats and how they work.
https://css-tricks.com/all-about-floats/

Describe z-index and how stacking context is formed.
http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

What's your take on the Holy Grail?

What are the various clearing techniques and which is appropriate for what context?

Explain CSS sprites, and how you would implement them on a page or site.

What are your favourite image replacement techniques and which do you use when?

How do you serve your pages for feature-constrained browsers? What techniques/processes do you use?

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?

Any familiarity with styling SVG?

How do you optimize your webpages for print?

What are some of the "gotchas" for writing efficient CSS?

What is the difference between display:none and visibility:hidden?
http://stackoverflow.com/questions/133051/what-is-the-difference-between-visibilityhidden-and-displaynone?

What are the advantages/disadvantages of using CSS preprocessors?

How would you implement a web design comp that uses non-standard fonts? Webfonts (font services like: Google Webfonts, Typekitetc.)

Explain how a browser determines what elements match a CSS selector?

Explain your understanding of the box model and how you would 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 many 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's your favorite CSS framework?

Have you played around with the new CSS Flexbox or Grid specs? If so, what do you think of them from a performance standpoint?

Where would you initial, inherit or unset values in CSS? http://www.quirksmode.org/css/cascading/values.html

Explain event delegation.
https://davidwalsh.name/event-delegate

How would you create and call custom events in JavaScript?
http://www.sitepoint.com/javascript-custom-events/

Explain how this works in JavaScript

Explain how prototypal inheritance works

How do you go about testing your JavaScript?

AMD vs. CommonJS?

What's a hashtable?

What's IIFE?
http://benalman.com/news/2010/11/immediately-invoked-function-expression/

Explain why the following doesn't work as an IIFE: function foo(){ }();.

When the parser encounters the function keyword in the global scope or inside a function, it treats it as a function declaration (statement), and not as a function expression, by default. And, paranthesis placed after a statement are totally seperate from the statement and are simply a grouping operator. This will result in : SyntaxError: Unexpected token ), because the compiler is expecting an expression inside the grouping operator.

What needs to be changed to properly make it an IIFE?
Parathesis need to be added around the entire function string.

What's the difference between a variable that is: null, undefined or undeclared?

How would you go about checking for any of these states?

What is a closure, and how/why would you use one?

What's a typical use case for anonymous functions?

Explain the "JavaScript module pattern" and when you'd use it.

What if your modules are namespace-less?

How do you organize your code? (module pattern, classical inheritance?)

What's the difference between host objects and native objects?

Difference between: function Person(){}, var person = Person(), and var person = new Person()?

What's the difference between .call and .apply?
http://stackoverflow.com/questions/1986896/what-is-the-difference-between-call-and-apply?rq=1

Explain Function.prototype.bind?

When do you optimize your code?

Can you explain how inheritance works in JavaScript?

What do you know about the Service Worker API?
https://ponyfoo.com/articles/serviceworker-revolution

When would you use document.write()?

Most generated ads still utilize document.write() although its use is frowned upon

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?

Why is extending built ins a good idea?

Difference between document load event and document ready event?

What is the difference between == and ===?

Explain how you would get a query string parameter from the browser window's URL.

Explain the same-origin policy with regards to JavaScript.
https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy http://stackoverflow.com/questions/3076414/ways-to-circumvent-the-same-origin-policy

Describe inheritance patterns in JavaScript.

Make this work:

[1,2,3,4,5].duplicate(); // [1,2,3,4,5,1,2,3,4,5]

Describe a strategy for memoization (avoiding calculation repetition) in JavaScript.

Why is it called a Ternary expression, what does the word "Ternary" indicate?

What is the arity of a function?

What is "use strict";? what are the advantages and disadvantages to using it?

What is a polyfill?
http://remysharp.com/2010/10/08/what-is-a-polyfill/

Explain "chaining".

Explain "deferreds".

What are some jQuery specific optimizations you can implement?

What does .end() do?

How, and why, would you namespace a bound event handler?

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 effects (or fx) queue?

What is the difference between .get(), [], and .eq()?

What is the difference between .bind(), .live(), and .delegate()?

What is the difference between $ and $.fn? Or just what is $.fn.

Optimize this selector:

$(".foo div#bar:eq(0)")

How would you disable all console.log statements in one line?
http://stackoverflow.com/questions/1215392/how-to-quickly-and-conveniently-disable-all-console-log-statements-in-my-code

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, Browsers, Tools etc.)

Which version control systems are you familiar with?

Can you describe your workflow when you create a web page?

Can you describe the difference between progressive enhancement and graceful degradation?

Bonus points for describing feature detection

Explain what "Semantic HTML" means.

How would you optimize a websites assets/resources?

Why is it better to serve site assets from multiple domains? How many resources will a browser download from a given domain at a time?

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?

Write a simple slideshow page

What tools do you use to test your code's performance?

If you could master one technology this year, what would it be?

What are the differences between Long-Polling, Websockets and SSE?

Explain the importance of standards and standards bodies.

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.

A List Apart — L. Jeffrey Zeldman
Pony Foo — Nicolás
[Baseline For Front-End Developers](http://rmurphey.com/blog/2012/04/12/a-baseline-for-front-end-
developers/) — Rebecca Murphey
http://programmers.stackexchange.com/questions/46716/what-technical-details-should-a-programmer-of-a-web-application-consider-before
http://www.nczonline.net/blog/2010/01/05/interviewing-the-front-end-engineer/
http://css-tricks.com/interview-questions-css/
http://davidshariff.com/quiz/
http://blog.sourcing.io/interview-questions

The majority of the questions were plucked from an oksoclap thread created originally by Paul Irish (@paul_irish) and contributed to by the following individuals:

@bentruyman - http://bentruyman.com
@cowboy - http://benalman.com
@ajpiano - http://ajpiano.com
@SlexAxton - http://alexsexton.com
@boazsender - http://boazsender.com
@miketaylr - http://miketaylr.com
@vladikoff - http://vladfilippov.com
@gf3 - http://gf3.ca
@jon_neal - http://twitter.com/jon_neal
@wookiehangover - http://wookiehangover.com
@iansym - http://twitter.com/iansym