Skip to content

Instantly share code, notes, and snippets.

@nicolas-cherel

nicolas-cherel/front-end questions.md

Forked from Bertrand/front-end questions.md
Last active June 12, 2023 11:13
Show Gist options
  • Save nicolas-cherel/09e0f9d245c2b888c241905e60562e89 to your computer and use it in GitHub Desktop.
Save nicolas-cherel/09e0f9d245c2b888c241905e60562e89 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> on page loading.
  • 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 ? How would you make sure to have hidden content accessible (for visual disabilities) ?
  • What is CSS selector specificity and how does it work?
  • 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 happens when you use display: inline-block , inline-flex or inline-grid instead of block , flex or grid?
  • 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?
  • 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

  • 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 syntax or built-in functions do you use for iterating over object properties and array items?
  • Can you describe the main difference between the Array.forEach() and Array.map() methods and why you would pick one versus the other?
  • What's a typical use case for anonymous functions?
  • 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 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 happens if you add async to a function declaration?
    • When would you use this async modifier?
  • 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?

JS / DOM

  • Describe event bubbling.
  • Describe event capturing.

[Optional] JS binding / prototype / Classes

  • 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 advantage is there for using the arrow syntax for a property value instead of a method definition ?

React

  • What is state in React?

  • What are props in React?

  • What is the difference between state and props?

  • [Hooks] when using React.useState() why would you use a function as parameter ?

  • [Hooks] when using state (e.g. const [updated, setUpdated] = React.useState()) what happens when you use a function as parameter to setUpdated() ?

  • 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?

  • [Hooks] How is used the return value of a React.useEffect() callback function?

  • 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