Web Development Interview Questions Cheatsheet, 2021

Tuesday July 6, 2021

133 web development interview questions you will most definitely be asked.

Hashtag Interview Questions

People sitting a desk with laptops and coffee asking interview questions
Before we begin

“What is the logarithmic output of the observable universe” is an interview question you will not likely be asked in a technical interview for a front-end or full-stack position. However, your chances of getting asked something like, “Can you explain to me, on a very high level how the browser works?” is at least 1e10 times higher.

Now, I know what you’re thinking — “S***… do I know the answer to this?” Let me elaborate on exactly why this question is so frequently asked. It tests your knowledge of how much you understand what happens when an HTML file is parsed.

Do you understand the flow of the top-down parsing approach when the DOM tree is being constructed and when parsing pauses because network requests are made unless the script tag contains a defer or async attribute? Do you understand how the event loop works in conjunction with the call stack? What is the difference between display: none and visibility: hidden?

These are not just traditional interview trivia questions, but legitimate technical interview questions based on everyday problems developers face.

To save time and help you get the most out of this article (also because I am starving and need breakfast), I’ll get straight to the point.

Keep in mind that many of these questions are ones I have seen being asked personally.

Questions revolve around HTML, CSS, JavaScript, React, and web performance.

Technical Interview Questions — JavaScript:

  1. What is a closure?
  2. What is a promise? Can you please give me an example of when we might use one in a real-world environment?
  3. What is the difference between == and === ?
  4. Can you list the 6 primitive types in JavaScript?
  5. What is the difference between primitive types and structural types in JavaScript?
  6. What is the difference between undefined and null ?
  7. Can you explain the differences between let , const and var ?
  8. Can you explain how the this keyword works on a high level?
  9. What is prototypal inheritance?
  10. Can you explain the idea of immutability on a high level?
  11. What is a reference type?
  12. To what paradigm is binding most closely associated?
  13. Can you explain polymorphism on a high level?
  14. Can you explain the difference between using map and forEach ?
  15. What is strict mode?
  16. When should you declare functions in the global scope? (Trick question)
  17. What happens when a function is created in terms of the call stack?
  18. Explain one way to dynamically select DOM nodes using JavaScript.
  19. Can you explain hoisting?
  20. What is implicit type coercion in JavaScript?
  21. Is JavaScript statically or dynamically typed?
  22. Is JavaScript single or multi-threaded?
  23. What does NaN mean in JavaScript?
  24. What is an IIFE and what are some of its benefits?
  25. What is a Higher Order Function in JavaScript?
  26. What is a pure function?
  27. Can you explain how scope works on a high level?
  28. What is a promise in JavaScript?
  29. Can you explain how async / await works in JavaScript and what are the benefits of using it?
  30. What is the DOM?
  31. What is the CSSOM?
  32. What are arrow functions and what are their pros/cons?
  33. What is the spread operator in JavaScript?
  34. Explain WeakSet in JavaScript.
  35. Explain WeakMap in JavaScript.
  36. What is object de-structuring?
  37. What is a temporal dead-zone?
  38. What is negative infinity in JavaScript?
  39. When would you use document.write ? (Trick question)
  40. Does JavaScript support automatic type conversion?
  41. How can you detect a user’s scrolled location on a page?
  42. What is the difference between an alert box and a confirmation box in JavaScript?
  43. If I wanted to insert an element at a specific location inside an array, which method would I use?
  44. What are some ways to create objects in JavaScript?
  45. Can you explain the difference between onchange and onkeyup?
  46. Can you explain the 3 different error types in JavaScript?
  47. What is event bubbling in JavaScript?
  48. Why are functions 1st class citizens in JavaScript?
  49. Why is using innerHTML a bad practice?
  50. What is event delegation?

Technical Interview Questions — HTML:

  1. Can you name some of the newest features of HTML5?
  2. What is a data attribute?
  3. What is an individual identifier for a specific element?
  4. How do you target multiple elements for DOM manipulation or styling?
  5. Name 2 ways of attaching inline styles inside an HTML file.
  6. What is ARIA and can you explain some of the tags used along with their purposes?
  7. How do you prefetch a resource?
  8. How do you define a range of numeric values for an input element?
  9. What are some front-end form validation best practices? What are some things you should avoid?
  10. Can you explain WCAG and ADA compliance best practices?
  11. How many heading types does HTML have?
  12. What is the difference between HTML elements and tags?
  13. What are some semantic best practices?
  14. How do you open a link in a new browser tab?
  15. Can you explain semantic HTML on a high level?

Technical Interview Questions — CSS:

  1. Define the box-model.
  2. Explain the difference between margin and padding.
  3. What is the difference between position absolute , relative ,fixed and static ?
  4. What is the best way to show a modal that is full-width and height?
  5. Imagine a square with 4 rectangles in them. How would you place 1 rectangle in each corner of the square?
  6. What is responsive design?
  7. What are breakpoints and why are they important in responsive design?
  8. What is the !important keyword used for?
  9. What has more precedence — inline style on an HTML element or the important keyword?
  10. What is the difference between display: none and visibility: hidden ?
  11. Does display: none remove the element from the DOM tree?
  12. Explain the difference between inherit and initial .
  13. How can you select all the elements in an HTML doc or a specific class/section?
  14. What is the difference between block , inline-block and inline ?
  15. What can you tell me about Flexbox?
  16. What is a CSS pseudo-element?
  17. What is a CSS pseudo-class?
  18. What are the different measurements used in CSS?
  19. What is DOM reflow?
  20. How do you center an element inside another element using Pure CSS (no Flexbox)?
  21. What are the 4 types of media properties?
  22. How does the calc keyword work?
  23. Can you explain progressive enhancement?
  24. What is graceful degradation?
  25. What are the advantages of using translate() instead of absolute position?

Technical Interview Questions — React JS:

  1. Can you explain MVC on a high level?
  2. What is React and why/when would you use it?
  3. What problems does React solve?
  4. Can you explain what props are?
  5. What is state?
  6. What is a component?
  7. What are the different lifecycle methods? Explain them one by one on a high level.
  8. What is a Higher-Order-Component?
  9. What is a child component?
  10. How do you pass props back to a parent component?
  11. How do you access DOM nodes in React?
  12. What are hooks? Can you explain the standard hooks React comes with?
  13. What are custom hooks?
  14. What is the best approach in terms of architecture that makes react so powerful?
  15. What is JSX?
  16. Can browsers read JSX directly?
  17. What is the Virtual DOM?
  18. What are synthetic events in React?
  19. How do you render a list from an array?
  20. Why are keys important in React?
  21. How do you create forms in React and manage their state? What about validation?
  22. What is the render method used for in React?
  23. Are props editable? What about state?
  24. What is the difference between functional and class components?
  25. What are the differences between controlled and uncontrolled components?
  26. How does one prevent re-renders in both functional and class components?
  27. What is prop drilling in React?
  28. What are error boundaries?

Technical Interview Questions — Web Performance:

  1. How can you speed up a slow website?
  2. Name some ways to optimize load times.
  3. What is critical CSS?
  4. What is critical JavaScript?
  5. Name some next-generation image formats.
  6. What is Layout Shifting?
  7. What is Time-To-Interactivity?
  8. What is Perceived-Load-Time?
  9. What is the Critical Rendering Path?
  10. What is the Main Thread?
  11. What are the different types of performance testing?
  12. What are some common problems in terms of performance a user might face — how would you remedy them?
  13. Why is web security important?
  14. What is HTTPS?
  15. What is a bundler? Why is it important and when would you use one?

Conclusion:

These are some of the most common interview questions out there. There are a trillion more but I tried to condense them into this one list as best as I could, so I hope this helps you!

And if you’re looking for interview help, reach out to me. I am currently helping students and young professionals write resumes, cover letters, do mock interviews — behavioral and technical — and a lot more!

Apart from interview questions, if you need help with interview prep – make sure to download and use the resume template I used to get interviews with Amazon, Apple and other big companies – here.

More content at plainenglish.io