Front End Questions to Know from Turing

# Interview Question Practice

## Iteration 1

- Describe the difference between a cookie, sessionStorage and localStorage. [-hint-](https://github.com/turingschool/lesson_plans/blob/3ee469be5fdc94c926a88ca510106848b0339731/ruby_04-apis_and_scalability/client_side_storage.markdown) [web APIs]

- What are `data-` attributes good for? [-hint-](https://css-tricks.com/almanac/selectors/a/attribute/) [html]

- Have you used or implemented media queries or mobile specific layouts/CSS? [-hint-](http://frontend.turing.io/lessons/module-1/intro-responsive.html) [css]

- Difference between: `function Person(){}`, `var person = Person()`, and `var person = new Person()`? [js]

- What is the difference between `==` and `===`? [-hint-](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness) [js]

- In as much detail as possible, explain what a database migration does.

- Question: What is the value of foo? [js]

```js
var foo = 10 + '20';
```

## Iteration 2

- Explain what ARIA and screenreaders are, and how to make a website accessible. [-hint- here](http://frontend.turing.io/lessons/wai-aria.html) and [-hint- here](http://frontend.turing.io/lessons/module-1/html-2.html) [best practices]

- What is the difference between classes and IDs in CSS? [-hint-](http://frontend.turing.io/lessons/module-1/css-1.html) [css]

- What are the advantages/disadvantages of using CSS preprocessors? [-hint-](http://frontend.turing.io/independent-study/idiomatic-css.html) and [-hint-](http://frontend.turing.io/lessons/introduction-to-sass.html) [css]

- Explain how prototypal inheritance works [-hint-](http://frontend.turing.io/lessons/module-1/js-4.html) [js]

- Explain your understanding of the box model and how you would tell the browser in CSS to render your layout in different box models. [-hint-](http://frontend.turing.io/lessons/module-1/css-1.html) [css]

- What are HTTP methods? List all HTTP methods that you know, and explain them. [-hint-](http://frontend.turing.io/lessons/node.html) [web APIs]

- Question: What value is returned from the following statement? [js]

```js
"i'm a lasagna hog".split("").reverse().join("");
```

## Iteration 3

- Can you describe the difference between progressive enhancement and graceful degradation? [-hint-](http://frontend.turing.io/lessons/cross-browser-compat.html) [best practices]

- Describe Floats and how they work. [-hint-](http://frontend.turing.io/lessons/module-1/css-1.html) [css]

- What's the difference between a relative, fixed, absolute and statically positioned element? [-hint-](http://frontend.turing.io/lessons/module-1/css-1.html) [css]

- Explain event delegation [-hint-](http://frontend.turing.io/lessons/event-bubbling-and-delegation.html) [js]

- What's the difference between `.call` and `.apply`? [-hint-](http://frontend.turing.io/lessons/module-2/function-prototype-methods.html) [js]

- What is an API?

## Iteration 4

- What does CORS stand for and what issue does it address? [-hint-](http://frontend.turing.io/lessons/cors.html) [web APIs]

- Describe z-index and how stacking context is formed. [-hint-](http://frontend.turing.io/lessons/module-1/css-1.html) [css]

- What's the difference between inline and inline-block? [-hint-](http://frontend.turing.io/independent-study/idiomatic-css.html) and [-hint-](http://frontend.turing.io/lessons/module-1/css-1.html) [css]

- Explain why the following doesn't work as an IIFE: `function foo(){ }();`. [-hint-](https://docs.google.com/presentation/d/1zX-A4d_yMFPrVpofoIP5FLSjOb94vBzORql-BOV2vUc/edit#slide=id.g1c494e40cb_0_48) and bonus [-hint-](https://developer.mozilla.org/en-US/docs/Glossary/IIFE) [js]
  - What needs to be changed to properly make it an IIFE?

- Why is it, in general, a good idea to leave the global scope of a website as-is and never touch it? [-hint-](http://frontend.turing.io/lessons/module-1/js-2.html) [best practices]

- Explain how JSON Web Tokens work.

## Iteration 5

- How do you serve a page with content in multiple languages? [-hint-](http://frontend.turing.io/lessons/localization.html) [best practices]

- Why is it generally a good idea to position CSS `<link>`s between `<head></head>` and JS `<script>`s just before `</body>`? Do you know any exceptions? [html]

- How would you approach fixing browser-specific styling issues? [-hint-](http://frontend.turing.io/lessons/cross-browser-compat.html) [best practices]

- What is a closure, and how/why would you use one? [-hint-](https://docs.google.com/presentation/d/1zX-A4d_yMFPrVpofoIP5FLSjOb94vBzORql-BOV2vUc/edit#slide=id.g1c033f9cd5_0_35) and bonus [-hint-](https://github.com/getify/You-Dont-Know-JS/blob/master/scope%20%26%20closures/ch5.md) -secondary hint- You don't _have_ to know this to pass a code interview. Ask us about it. [js]

- Describe event bubbling. [-hint-](http://frontend.turing.io/lessons/event-bubbling-and-delegation.html) [js]

- What are some advantages/disadvantages to testing your code? [best practices]

## Iteration 6

- What are the different ways to visually hide content (and make it available only for screen readers)? [-hint-](http://frontend.turing.io/lessons/module-1/html-2.html) [html]

- What is `"use strict";`? What are the advantages and disadvantages to using it? [-hint-](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode) [js]

- What are the pros and cons of using Promises instead of callbacks? [-hint-](http://frontend.turing.io/lessons/promises.html) and bonus [-hint-](http://frontend.turing.io/lessons/es6-generators.html) [js]

- Explain AJAX in as much detail as possible. [-hint-](https://github.com/turingschool/front-end-curriculum/blob/71cacd598e799da11ee84e1e5341dde436398b2b/lessons/introduction-to-ajax.md) [js]

## General Questions

These are some of the softer questions you'll get in an interview, but you should still write out a "script" for answering these. You'd be surprised how easy it is to blank out on these types of questions once you're put on the spot!

- What is a recent technical challenge you experienced and how did you solve it?
- What are some things you like about the developer tools you use?
- Do you have any pet projects? What kind?








[Example Interview Questions Taken From](https://github.com/h5bp/Front-end-Developer-Interview-Questions)
_h/t Andrew for the lead!_