mirror
/
Front-end-Developer-Interview-Questions
mirror of https://github.com/h5bp/Front-end-Developer-Interview-Questions.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update license, removed answers, reorganized table of contents, removed resources/references, added contributing.md

This commit is contained in:
Darcy Clarke 2015-01-09 01:33:42 -05:00
parent 5da25f4bad
commit e9082f27e7
5 changed files with 92 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored Normal file
View File

@ -0,0 +1 @@
.DS_Store

70
CONTRIBUTING.md Normal file
View File

@ -0,0 +1,70 @@
# Contributing to Front-end Developer Interview Questions
Please take a moment to review this document in order to make the contribution
process easy and effective for everyone involved.
Following these guidelines helps to communicate that you respect the time of
the developers managing and developing this open source project. In return,
they should reciprocate that respect in addressing your issue or assessing
patches and features.
## Using the issue tracker
The [issue tracker](https://github.com/h5bp/Front-end-Developer-Interview-Questions/issues) is
the preferred channel for spelling mistakes, errors or any general feedback. Please respect the following restrictions:
* Please **do not** derail or troll issues. Keep the discussion on topic and respect the opinions of others.
* Please **do not** open issues or pull requests that invlove including **answers** to any of the questions.
<a name="pull-requests"></a>
## Pull requests
Please adhere to the coding conventions used throughout the project (spelling, indentation, punctuation etc.).
Adhering to the following process is the best way to get your work included in the project:
1. [Fork](https://help.github.com/articles/fork-a-repo) the project, clone your fork, and configure the remotes:
```bash
# Clone your fork of the repo into the current directory
git clone https://github.com/<your-username>/Front-end-Developer-Interview-Questions.git
# Navigate to the newly cloned directory
cd Front-end-Developer-Interview-Questions
# Assign the original repo to a remote called "upstream"
git remote add upstream https://github.com/h5bp/Front-end-Developer-Interview-Questions.git
```
2. If you cloned a while ago, get the latest changes from upstream:
```bash
git checkout master
git pull upstream master
```
3. Create a new topic branch (off the main project development branch) to
contain your feature, change, or fix:
```bash
git checkout -b <topic-branch-name>
```
4. Locally merge (or rebase) the upstream development branch into your topic branch:
```bash
git pull [--rebase] upstream master
```
5. Squash your commits down to a single one (we want to keep the master branch nice and clean)
5. Push your topic branch up to your fork:
```bash
git push origin <topic-branch-name>
```
7. [Open a Pull Request](https://help.github.com/articles/using-pull-requests/)
with a clear title and description.
**IMPORTANT**: By submitting pathes, you agree to allow the project owners to license your work under the terms of the [MIT License](LICENSE.md).

19
LICENSE
View File

@ -1,19 +0,0 @@
Copyright (C) 2012 by Darcy Clarke
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

7
LICENSE.md Normal file
View File

@ -0,0 +1,7 @@
Copyright (c) 2012 - 2015 Contributors to https://github.com/h5bp/Front-end-Developer-Interview-Questions
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

65
README.md
View File

@ -1,14 +1,11 @@
#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 would take hours). Choosing a few items from this list should help you vet the intended skills you require.
[Rebecca Murphey](http://rmurphey.com/)'s [Baseline For Front-End Developers](http://rmurphey.com/blog/2012/04/12/a-baseline-for-front-end-developers/) is also a great resource to read up on before you head into an interview.
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.
## <a name='toc'>Table of Contents</a>
1. [Original Contributors](#contributors)
1. [General Questions](#general)
1. [HTML Questions](#html)
1. [CSS Questions](#css)
@ -16,13 +13,15 @@ This repo contains a number of front-end interview questions that can be used wh
1. [jQuery Questions](#jquery)
1. [Coding Questions](#jscode)
1. [Fun Questions](#fun)
1. [Other Great References](#references)
1. [License](#license)
####[[⬆]](#toc) <a name='contributors'>Original Contributors:</a>
The majority of the questions were plucked from an [oksoclap](http://oksoclap.com/) thread created originally by [Paul Irish](http://paulirish.com) ([@paul_irish](http://twitter.com/paul_irish)) and contributed to by the following individuals: [@bentruyman](http://twitter.com/bentruyman) [@cowboy](http://twitter.com/cowboy) [@ajpiano](http://ajpiano) [@SlexAxton](http://twitter.com/slexaxton) [@boazsender](http://twitter.com/boazsender) [@miketaylr](http://twitter.com/miketaylr) [@vladikoff](http://twitter.com/vladikoff) [@gf3](http://twitter.com/gf3) [@jon_neal](http://twitter.com/jon_neal) [@sambreed](http://twitter.com/sambreed) [@iansym](http://twitter.com/iansym)
## <a name='toc'>Getting Involved</a>
1. [Original Contributors](#contributors)
1. [Recent Contributors](https://github.com/h5bp/Front-end-Developer-Interview-Questions/graphs/contributors)
1. [How to Contribute](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/CONTRIBUTING.md)
1. [License](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/LICENSE.md)
####[[⬆]](#toc) <a name='general'>General Questions:</a>
* What did you learn yesterday/this week?
@ -32,29 +31,15 @@ The majority of the questions were plucked from an [oksoclap](http://oksoclap.co
* Which version control systems are you familiar with?
* 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?
* File concatenation
* Can you describe the difference between progressive enhancement and graceful degradation?
* Bonus points for describing feature detection
* How would you optimize a website's assets/resources?
* Looking for a number of solutions which can include:
* File concatenation
* File minification
* CDN Hosted
* Caching
* 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?
* How many resources will a browser download from a given domain at a time?
* What are the exceptions?
* 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 would 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 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.
@ -68,9 +53,9 @@ The majority of the questions were plucked from an [oksoclap](http://oksoclap.co
* What's a `doctype` do?
* What's the difference between standards mode and quirks mode?
* What are the limitations when serving XHTML pages?
* Are there any problems with serving pages as `application/xhtml+xml`?
* Are there any problems with serving pages as `application/xhtml+xml`?
* How do you serve a page with content in multiple languages?
* What kind of things must you be wary of when design or developing for multilingual sites?
* What kind of things must you be wary of when design or developing for multilingual sites?
* What are `data-` attributes good for?
* Consider HTML5 as an open web platform. What are the building blocks of HTML5?
* Describe the difference between cookies, sessionStorage and localStorage.
@ -80,7 +65,6 @@ The majority of the questions were plucked from an [oksoclap](http://oksoclap.co
####[[⬆]](#toc) <a name='css'>CSS Questions:</a>
* What is the difference between classes and ID's 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?
@ -98,7 +82,6 @@ The majority of the questions were plucked from an [oksoclap](http://oksoclap.co
* 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 would 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 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?
@ -132,7 +115,6 @@ The majority of the questions were plucked from an [oksoclap](http://oksoclap.co
* Explain `Function.prototype.bind`.
* When do you optimize your code?
* 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).
@ -176,15 +158,11 @@ add(2)(5); // 7
```javascript
"i'm a lasagne hog".split("").reverse().join("");
```
**Answer: "goh engasal a m'i"**
*Question: What is the value of `window.foo`?*
```javascript
( window.foo || ( window.foo = "bar" ) );
```
**Answer: "bar"** **(only if `window.foo` is truthy, does it retain its value)**
*Question: What is the outcome of the two alerts below?*
```javascript
@ -195,8 +173,6 @@ var foo = "Hello";
})();
alert(foo + bar);
```
**Answer: "Hello World" & ReferenceError: bar is not defined**
*Question: What is the value of `foo.length`?*
```javascript
@ -204,29 +180,16 @@ var foo = [];
foo.push(1);
foo.push(2);
```
**Answer: `2`**
####[[⬆]](#toc) <a name='fun'>Fun Questions:</a>
* What's a cool thing you've coded recently? What's something you've built that you're proud of?
* What's a cool project the you've recently worked on?
* 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?
* How do you like your Coffee?
####[[⬆]](#toc) <a name='references'>Other Great References:</a>
* 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://davidshariff.com/js-quiz/
* http://blog.sourcing.io/interview-questions
* http://www.toptal.com/javascript/interview-questions
* http://www.sitepoint.com/5-typical-javascript-interview-exercises/
* http://www.sitepoint.com/5-javascript-interview-exercises/
* http://www.sitepoint.com/10-typical-html-interview-exercises/
####[[⬆]](#toc) <a name='contributors'>Original Contributors:</a>
####[[⬆]](#toc) <a name='license'>License:</a>
Released under the [MIT License](http://opensource.org/licenses/MIT). See LICENSE file for details.
The majority of the questions were plucked from an [oksoclap](http://oksoclap.com/) thread created **originally** by [Paul Irish](http://paulirish.com) ([@paul_irish](http://twitter.com/paul_irish)) and collectively contributed to by the following: [@bentruyman](http://twitter.com/bentruyman) [@cowboy](http://twitter.com/cowboy) [@ajpiano](http://ajpiano) [@SlexAxton](http://twitter.com/slexaxton) [@boazsender](http://twitter.com/boazsender) [@miketaylr](http://twitter.com/miketaylr) [@vladikoff](http://twitter.com/vladikoff) [@gf3](http://twitter.com/gf3) [@jon_neal](http://twitter.com/jon_neal) [@sambreed](http://twitter.com/sambreed) [@iansym](http://twitter.com/iansym)