diff --git a/translations/************/index.html b/translations/************/index.html index d5cd2d1..6bcd1c1 100644 --- a/translations/************/index.html +++ b/translations/************/index.html @@ -1,2 +1,2 @@ -Front End Developer Interview Questions ★ Front-end Developer Interview Questions

Front End Developer Interview Questions

Table of Contents

  1. General Questions
  2. HTML Questions
  3. CSS Questions
  4. JS Questions
  5. Testing Questions
  6. Performance Questions
  7. Network Questions
  8. Fun Questions

[⬆] General Questions:

  • 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 in?
  • Explain the difference between cookies, session storage, and local storage?
  • Can you explain what happens when you enter a URL into the browser?
  • Describe the difference between SSR and CSR. Discuss the pros and cons.
    • Are you familiar with static rendering?
    • Rehydration?

[⬆] HTML Questions:

  • 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 <script>, <script async> and <script defer>.
  • 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?
  • 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?
  • What are empty elements in HTML ?

[⬆] CSS Questions:

  • 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?
  • What is the difference between CSS Grid and Flexbox? When would you use one over the other?

[⬆] JS Questions:

  • 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”.
  • What is type coercion? What are common pitfalls of relying on type coercion in JavaScript code?
  • 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?
  • Discuss how you might use Object Oriented Programming principles when coding with JavaScript.

[⬆] Coding Questions:

  • Make this work:
duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]
  • Create a for loop that iterates up to 100 while outputting “fizz” at multiples of 3, “buzz” at multiples of 5 and “fizzbuzz” at multiples of 3 and 5
  • What will be returned by each of these?
console.log("hello" || "world")
+Front End Developer Interview Questions ★ Front-end Developer Interview Questions
Front End Developer Interview Questions
 Table of Contents
  1. General Questions
  2. HTML Questions
  3. CSS Questions
  4. JS Questions
  5. Testing Questions
  6. Performance Questions
  7. Network Questions
  8. Fun Questions
[⬆] General Questions:
  • 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 in?
  • Explain the difference between cookies, session storage, and local storage?
  • Can you explain what happens when you enter a URL into the browser?
  • Describe the difference between SSR and CSR. Discuss the pros and cons.
    • Are you familiar with static rendering?
    • Rehydration?
[⬆] HTML Questions:
  • 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 <script>, <script async> and <script defer>.
  • 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?
  • 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?
  • What are empty elements in HTML ?
[⬆] CSS Questions:
  • 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?
  • What is the difference between CSS Grid and Flexbox? When would you use one over the other?
  • What is the difference between fixed, fluid and responsive layouts?
[⬆] JS Questions:
  • 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”.
  • What is type coercion? What are common pitfalls of relying on type coercion in JavaScript code?
  • 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?
  • Discuss how you might use Object Oriented Programming principles when coding with JavaScript.
[⬆] Coding Questions:
  • Make this work:
duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]
  • Create a for loop that iterates up to 100 while outputting “fizz” at multiples of 3, “buzz” at multiples of 5 and “fizzbuzz” at multiples of 3 and 5
  • What will be returned by each of these?
console.log("hello" || "world")
 console.log("foo" && "bar")
  • Write an immediately invoked function expression (IIFE)
[⬆] Testing Questions:
  • 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 Questions:
  • 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.
[⬆] Network Questions:
  • Traditionally, why has it been better to serve site assets from multiple domains?
  • Do your best to describe the process from the time you type in a website’s URL to it finishing loading on your screen.
  • What are the differences between Long-Polling, Websockets and Server-Sent Events?
  • Explain the following request and response headers:
    • Diff. between Expires, Date, Age and If-Modified-…
    • Do Not Track
    • Cache-Control
    • Transfer-Encoding
    • ETag
    • X-Frame-Options
  • What are HTTP methods? List all HTTP methods that you know, and explain them.
  • What is domain pre-fetching and how does it help with performance?
  • What is a CDN and what is the benefit of using one?
[⬆] Fun Questions:
  • 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?
Edit this page

\ No newline at end of file