# Front End Questions \\ * \[❖] FRONT END INTERVIEW QUESTIONS \\ *** *** ## ❖ GENERAL: \\ * \[❖] What did you learn yesterday/this week? \\ * \[❖] What excites or interests you about coding? \\ * \[❖] What is a recent technical challenge you experienced and how did you solve it? \\ * [ ] \[❖] When building a new web site or maintaining one, can you explain some techniques you have used to increase * [ ] performance? \\ * \[❖] Can you describe some SEO best practices or techniques you have used lately? \\ * \[❖] Can you explain any common techniques or recent issues solved in regards to front-end security? \\ * \[❖] What actions have you personally taken on recent projects to increase maintainability of your code? \\ * \[❖] Talk about your preferred development environment. \\ * \[❖] 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? \\ * \[❖] Can you describe the difference between progressive enhancement and graceful degradation? \\ * \[❖] How would you optimize a website’s assets/resources? \\ * \[❖] How many resources will a browser download from a given domain at a time? \\ * \[❖] What are the exceptions? \\ * \[❖] 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? \\ * \[❖] Describe how you would create a simple slideshow page. \\ * \[❖] If you could master one technology this year, what would it be? \\ * \[❖] Explain the importance of standards and standards bodies. \\ * \[❖] What is Flash of Unstyled Content? How do you avoid FOUC? \\ * \[❖] Explain what ARIA and screenreaders are, and how to make a website accessible. \\ * \[❖] Explain some of the pros and cons for CSS animations versus JavaScript animations. \\ * \[❖] What does CORS stand for and what issue does it address? \\ * \[❖] How did you handle a disagreement with your boss or your collaborator? \\ * \[❖] What resources do you use to learn about the latest in front end development and design? \\ * \[❖] What skills are needed to be a good front-end developer? \\ * \[❖] What role do you see yourself? \\ * \[❖] Explain the difference between cookies, session storage, and local storage? \\ *** *** ## ❖ HTML: \\ * \[❖] What does a doctype do? \\ * \[❖] How do you serve a page with content in multiple languages? \\ * \[❖] What kind of things must you be wary of when designing 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 a cookie, sessionStorage and localStorage. \\ * \[❖] Describe the difference between, and . \\ * [ ] \[❖] Why is it generally a good idea to position CSS s between and JS s just before ? Do * [ ] you know any exceptions? \\ * \[❖] What is progressive rendering? \\ * [ ] \[❖] Why you would use a srcset attribute in an image tag? Explain the process the browser uses when evaluating the * [ ] content of this attribute. \\ * \[❖] Have you used different HTML templating languages before? \\ * \[❖] What is the difference between canvas and svg? \\ *** *** ## ❖ CSS: \\ * \[❖] What is CSS selector specificity and how does it work? \\ * \[❖] What’s the difference between “resetting” and “normalizing” CSS? Which would you choose, and why? \\ * \[❖] Describe Floats and how they work. \\ * \[❖] Describe z-index and how stacking context is formed. \\ * \[❖] Describe BFC (Block Formatting Context) and how it works. \\ * \[❖] What are the various clearing techniques and which is appropriate for what context? \\ * \[❖] How would you approach fixing browser-specific styling issues? \\ * \[❖] 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? \\ * \[❖] Are you familiar with styling SVG? \\ * \[❖] Can you give an example of an @media property other than screen? \\ * \[❖] What are some of the “gotchas” for writing efficient CSS? \\ * \[❖] What are the advantages/disadvantages of using CSS preprocessors? \\ * \[❖] 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? \\ * \[❖] Explain how a browser determines what elements match a CSS selector. \\ * \[❖] Describe pseudo-elements and discuss what they are used for. \\ * [ ] \[❖] 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? \\ * \[❖] What is the CSS display property and can you give a few examples of its use? \\ * \[❖] What’s the difference between inline and inline-block? \\ * \[❖] What’s the difference between the “nth-of-type()” and “nth-child()” selectors? \\ * \[❖] What’s the difference between a relative, fixed, absolute and statically positioned element? \\ * \[❖] What existing CSS frameworks have you used locally, or in production? How would you change/improve them? \\ * \[❖] Have you used CSS Grid? \\ * \[❖] Can you explain the difference between coding a web site to be responsive versus using a mobile-first strategy? \\ * \[❖] Have you ever worked with retina graphics? If so, when and what techniques did you use? \\ * \[❖] Is there any reason you’d want to use translate() instead of absolute positioning, or vice-versa? And why? \\ * \[❖] How is clearfix css property useful? \\ * \[❖] Can you explain the difference between px, em and rem as they relate to font sizing? \\ * \[❖] Can you give an example of a pseudo class? Can you provide an example use case for a pseudo class? \\ * [ ] \[❖] What is the difference between a block level element and an inline element. Can you provide examples of each type of * [ ] element? \\ *** *** ## ❖ JAVASCRIPT: \\ * \[❖] Explain event delegation. \\ * \[❖] Explain how this works in JavaScript. \\ * \[❖] Can you give an example of one of the ways that working with this has changed in ES6? \\ * \[❖] Explain how prototypal inheritance works. \\ * \[❖] 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 language constructions do you use for iterating over object properties and array items? \\ * [ ] \[❖] Can you describe the main difference between the Array.forEach() loop and Array.map() methods and why you would * [ ] pick one versus the other? \\ * \[❖] What’s a typical use case for anonymous functions? \\ * \[❖] What’s the difference between host objects and native objects? \\ * \[❖] Explain the difference between: function Person(){}, var person = Person(), and var person = new Person()? \\ * \[❖] Explain the differences on the usage of foo between function foo() {} and var foo = function() {} \\ * \[❖] Can you explain what Function.call and Function.apply do? What’s the notable difference between the two? \\ * \[❖] Explain Function.prototype.bind. \\ * \[❖] What’s the difference between feature detection, feature inference, and using the UA string? \\ * \[❖] Explain “hoisting”. \\ * \[❖] Describe event bubbling. \\ * \[❖] Describe event capturing. \\ * \[❖] What’s the difference between an “attribute” and a “property”? \\ * \[❖] What are the pros and cons of extending built-in JavaScript objects? \\ * \[❖] What is the difference between == and ===? \\ * \[❖] Explain the same-origin policy with regards to JavaScript. \\ * \[❖] Why is it called a Ternary operator, what does the word “Ternary” indicate? \\ * \[❖] What is strict mode? What are some of the advantages/disadvantages of using it? \\ * \[❖] What are some of the advantages/disadvantages of writing JavaScript code in a language that compiles to JavaScript? \\ * \[❖] What tools and techniques do you use debugging JavaScript code? \\ * \[❖] Explain the difference between mutable and immutable objects. \\ * \[❖] What is an example of an immutable object in JavaScript? \\ * \[❖] What are the pros and cons of immutability? \\ * \[❖] How can you achieve immutability in your own code? \\ * \[❖] Explain the difference between synchronous and asynchronous functions. \\ * \[❖] What is event loop? \\ * \[❖] What is the difference between call stack and task queue? \\ * \[❖] What are the differences between variables created using let, var or const? \\ * \[❖] What are the differences between ES6 class and ES5 function constructors? \\ * \[❖] Can you offer a use case for the new arrow => function syntax? How does this new syntax differ from other functions? \\ * \[❖] What advantage is there for using the arrow syntax for a method in a constructor? \\ * \[❖] What is the definition of a higher-order function? \\ * \[❖] Can you give an example for destructuring an object or an array? \\ * \[❖] Can you give an example of generating a string with ES6 Template Literals? \\ * \[❖] Can you give an example of a curry function and why this syntax offers an advantage? \\ * \[❖] What are the benefits of using spread syntax and how is it different from rest syntax? \\ * \[❖] How can you share code between files? \\ * \[❖] Why you might want to create static class members? \\ * \[❖] What is the difference between while and do-while loops in JavaScript? \\ * \[❖] What is a promise? Where and how would you use promise? \\ *** *** ## ❖ TESTING: \\ * \[❖] What are some advantages/disadvantages to testing your code? \\ * \[❖] What tools would you use to test your code’s functionality? \\ * \[❖] What is the difference between a unit test and a functional/integration test? \\ * \[❖] What is the purpose of a code style linting tool? \\ * \[❖] What are some of the testing best practices? \\ *** *** ## ❖ PERFORMANCE: \\ * \[❖] What tools would you use to find a performance bug in your code? \\ * \[❖] What are some ways you may improve your website’s scrolling performance? \\ * \[❖] Explain the difference between layout, painting and compositing. \\ *** *** ## ❖ MISC: \\ * \[❖] What’s a cool project that you’ve recently worked on? \\ * \[❖] What are some things you like about the developer tools you use? \\ * \[❖] Who inspires you in the front-end community? \\ * \[❖] Do you have any pet projects? What kind? \\ * \[❖] What’s your favorite feature of Internet Explorer?