Skip to content

Instantly share code, notes, and snippets.

@Bertrand

Bertrand/front-end questions.md

Last active June 12, 2023 08:38
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Bertrand/fa0dfba607768f24c6a05d6af0bf32a4 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Bertrand/fa0dfba607768f24c6a05d6af0bf32a4 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
front-end questions.md

HTML

  • What are data- attributes good for?
  • 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?
  • Why you would use a srcset attribute in an image tag? Explain the process the browser uses when evaluating the content of this attribute.
  • What is the difference between canvas and svg?
  • What is progressive rendering?

CSS

  • Describe z-index and how stacking context is formed.
  • What are the different ways to visually hide content (and make it available only for screen readers)?
  • What is CSS selector specificity and how does it work?
  • Describe pseudo-elements and discuss what they are used for.
  • What does * { box-sizing: border-box; } do? What are its advantages?
  • 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'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 ever worked with hi-dpi (e.g. 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?
  • 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 CSS Grid and Flexbox? When would you use one over the other?
  • Describe BFC (Block Formatting Context) and how it works.

JS Questions

  • 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?
  • 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?
  • Describe event bubbling.
  • Describe event capturing.
  • What is the difference between == and ===?
  • Explain the same-origin policy with regards to JavaScript.
  • 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 are the differences between variables created using let, var or const?
  • 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?
  • What are the benefits of using spread syntax and how is it different from rest syntax?
  • What is a promise? Where and how would you use promise?
  • [advanced] Can you give an example of a curry function and why this syntax offers an advantage?

React

  • What is state in React?
  • What are props in React?
  • What is the difference between state and props?
  • Why we need to pass a function to setState()
  • [advanced] What is the purpose of callback function as an argument of setState()?
  • What are inline conditional expressions?
  • What is "key" prop and what is the benefit of using it in arrays of elements?
  • What is the use of refs?
  • How to create refs?
  • [Advanced] What are forward refs?
  • What is Virtual DOM?
  • [Advanced] What is the difference between Shadow DOM and Virtual DOM?
  • What is the difference between createElement and cloneElement?
  • What are the different phases of component lifecycle?
  • What are the lifecycle methods of React?
  • What is context?
  • What is children prop?

Generic programming question

  • what is the difference between an array and a map?
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment