# Front-end-Developer-Interview-Questions | H5BP | Knowledge Base | Instagit

A list of helpful front-end related questions you can use to interview potential candidates, test yourself or completely ignore.

GitHub Stars: 60.8k

Repository: https://github.com/h5bp/Front-end-Developer-Interview-Questions

---

## Articles

### [Extending Built-in JavaScript Objects: Advantages, Disadvantages, and Best Practices](/h5bp/Front-end-Developer-Interview-Questions/what-are-the-advantages-and-disadvantages-of-extending-built-in-javascript-objects)

Learn the pros and cons of extending built-in JavaScript objects. Understand risks like prototype pollution and best practices for safe modifications.

- Tags: tutorial
- Published: 2026-03-05

### [Difference Between Mutable and Immutable Objects in JavaScript: A Complete Guide](/h5bp/Front-end-Developer-Interview-Questions/what-is-the-difference-between-mutable-and-immutable-objects-in-javascript)

Understand the core difference between mutable and immutable objects in JavaScript. Learn how object state changes and explore practical examples to solidify your understanding.

- Tags: deep-dive
- Published: 2026-03-05

### [Function Declarations vs Function Expressions in JavaScript: Hoisting and Scope Explained](/h5bp/Front-end-Developer-Interview-Questions/what-is-the-difference-between-function-declarations-and-function-expressions)

Understand hoisting and scope differences between JavaScript function declarations and expressions. Learn how to avoid TypeErrors by invoking functions correctly.

- Tags: tutorial
- Published: 2026-03-05

### [What Are HTML data- Attributes and Their Best Uses?](/h5bp/Front-end-Developer-Interview-Questions/what-are-data-attributes-and-their-best-uses-in-html)

Discover HTML data- attributes for storing custom element info accessible via JavaScript. Learn their best uses to enhance web development and functionality.

- Tags: how-to-guide
- Published: 2026-03-05

### [Canvas vs SVG: Understanding the Difference Between Canvas and SVG in HTML5](/h5bp/Front-end-Developer-Interview-Questions/what-is-the-difference-between-canvas-and-svg)

Explore the key differences between HTML5 Canvas and SVG. Understand Canvas for pixel manipulation and SVG for scalable vector graphics with DOM integration.

- Tags: tutorial
- Published: 2026-03-05

### [How the srcset Attribute Works for Responsive Images](/h5bp/Front-end-Developer-Interview-Questions/how-does-the-srcset-attribute-work-for-responsive-images)

Learn how the srcset attribute optimizes images for responsive design. Deliver sharp visuals and save bandwidth by letting browsers choose the best image resolution for any device.

- Tags: deep-dive
- Published: 2026-03-05

### [What Is Progressive Rendering in HTML? A Complete Technical Guide](/h5bp/Front-end-Developer-Interview-Questions/what-is-progressive-rendering-in-html)

Learn about progressive rendering in HTML. Discover how this performance technique speeds up page loading by rendering content sooner. Boost your website's speed today.

- Tags: question
- Published: 2026-03-05

### [What Are CSS Preprocessors? Pros, Cons, and Complete Developer Guide](/h5bp/Front-end-Developer-Interview-Questions/what-are-css-preprocessors-and-what-are-their-pros-and-cons)

Explore CSS preprocessors like Sass LESS and Stylus Understand their pros cons and how they extend CSS with variables nesting and mixins Learn how they compile to standard CSS

- Tags: tutorial
- Published: 2026-03-05

### [CSS Grid vs Flexbox: Understanding the Key Differences for Modern Layout](/h5bp/Front-end-Developer-Interview-Questions/what-is-the-difference-between-css-grid-and-flexbox-for-layout)

Understand CSS Grid vs Flexbox for modern layouts. Grid handles 2D rows and columns for pages, while Flexbox manages 1D alignment for components. Choose the right tool for the job.

- Tags: tutorial
- Published: 2026-03-05

### [Async vs Defer Script Attributes: How They Affect HTML Parsing and Execution](/h5bp/Front-end-Developer-Interview-Questions/what-is-the-difference-between-async-and-defer-script-attributes)

Understand how async and defer script attributes impact HTML parsing and execution. Learn to optimize your web pages for faster loading and better performance.

- Tags: interview-questions
- Published: 2026-03-05

### [How localStorage Differs from sessionStorage and Cookies: Web Storage Comparison](/h5bp/Front-end-Developer-Interview-Questions/how-does-localstorage-differ-from-sessionstorage-and-cookies)

Compare localStorage, sessionStorage, and cookies. Understand their differences in data persistence, scope, and capacity for web storage.

- Tags: interview-questions
- Published: 2026-03-05

### [Promise.all vs Promise.race: What Is the Difference Between These JavaScript Methods?](/h5bp/Front-end-Developer-Interview-Questions/what-is-the-difference-between-promiseall-and-promiserace)

Understand differences between JavaScript Promise all and Promise race. Learn when to use each method for asynchronous operations and get results from multiple promises efficiently.

- Tags: tutorial
- Published: 2026-03-05

### [Event Bubbling vs Event Capturing: Understanding DOM Event Propagation in JavaScript](/h5bp/Front-end-Developer-Interview-Questions/what-is-the-difference-between-event-bubbling-and-event-capturing)

Understand DOM event propagation in JavaScript. Learn the difference between event bubbling and capturing to control listener execution order.

- Tags: deep-dive
- Published: 2026-03-05

### [How Does Hoisting Work in JavaScript: Variable and Function Declaration Behavior Explained](/h5bp/Front-end-Developer-Interview-Questions/how-does-hoisting-work-in-javascript)

Understand JavaScript hoisting. Learn how variable and function declarations move to the top of the scope, enabling early code access and explaining the Temporal Dead Zone for let and const.

- Tags: resource
- Published: 2026-03-05

### [Difference Between Null, Undefined, and Undeclared in JavaScript](/h5bp/Front-end-Developer-Interview-Questions/what-is-the-difference-between-null-undefined-and-undeclared-in-javascript)

Understand the difference between null, undefined, and undeclared in JavaScript. Learn how each represents absence of value or scope in your code preventing errors.

- Tags: tutorial
- Published: 2026-03-05

### [How the CSS Box Model Works: Understanding content-box vs border-box](/h5bp/Front-end-Developer-Interview-Questions/how-does-the-css-box-model-work-including-box-sizing)

Understand the CSS box model and how browsers calculate element dimensions for content, padding, border, and margin. Learn to use box-sizing effectively for precise layout control.

- Tags: tutorial
- Published: 2026-03-05

### [CSS Flexbox vs CSS Grid: Key Differences and When to Use Each](/h5bp/Front-end-Developer-Interview-Questions/what-is-the-difference-between-css-flexbox-and-css-grid)

Understand CSS Flexbox for one-dimensional layouts and CSS Grid for two-dimensional layouts. Learn key differences and when to use each for optimal web design.

- Tags: tutorial
- Published: 2026-03-05

### [How CSS Specificity Works and Is Calculated: The Complete (a,b,c,d) Guide](/h5bp/Front-end-Developer-Interview-Questions/how-does-css-specificity-work-and-how-is-it-calculated)

Understand CSS specificity calculations using the (a,b,c,d) model. Learn how inline styles, IDs, classes, and types determine style precedence for conflict resolution.

- Tags: tutorial
- Published: 2026-03-05

### [JavaScript Equality Operators: The Difference Between == and === Explained](/h5bp/Front-end-Developer-Interview-Questions/what-is-the-difference-between-and-in-javascript)

Understand the crucial difference between JavaScript == and === operators. Learn how == coerces types while === demands strict equality for accurate comparisons.

- Tags: how-to-guide
- Published: 2026-03-05

### [How does the JavaScript event loop work: Call Stack vs Task Queue](/h5bp/Front-end-Developer-Interview-Questions/how-does-the-javascript-event-loop-work-call-stack-vs-task-queue)

Understand the JavaScript event loop. Learn how the call stack and task queue coordinate to execute code efficiently, ensuring smooth asynchronous operations.

- Tags: tutorial
- Published: 2026-03-05

### [What Is a Closure in JavaScript? Definition, Mechanics, and 5 Practical Use Cases](/h5bp/Front-end-Developer-Interview-Questions/what-is-a-closure-in-javascript-and-what-are-practical-use-cases)

Explore JavaScript closures: functions remembering outer scope variables after execution. Discover 5 practical use cases to enhance your coding.

- Tags: tutorial
- Published: 2026-03-05

### [How Does Prototypal Inheritance Work in JavaScript? A Complete Technical Guide](/h5bp/Front-end-Developer-Interview-Questions/how-does-prototypal-inheritance-work-in-javascript)

Unlock the secrets of prototypal inheritance in JavaScript. Understand the [[Prototype]] chain and how JavaScript finds properties efficiently. Master this core concept.

- Tags: deep-dive
- Published: 2026-03-05

### [Difference Between var, let, and const in JavaScript: Complete Technical Guide](/h5bp/Front-end-Developer-Interview-Questions/what-is-the-difference-between-var-let-and-const-in-javascript)

Understand the difference between var, let, and const in JavaScript. Learn about scope, hoisting, and immutability for better variable declaration.

- Tags: deep-dive
- Published: 2026-03-05

### [How Event Delegation Works in JavaScript: A Complete Guide](/h5bp/Front-end-Developer-Interview-Questions/how-does-event-delegation-work-in-javascript-and-when-should-i-use-it)

Understand how event delegation works in JavaScript. Learn to use this performance-boosting technique to manage events efficiently on parent elements.

- Tags: tutorial
- Published: 2026-03-05