50 Must-know HTML, CSS and JavaScript Interview Questions by Ex-interviewers

HTML, CSS, and JavaScript are fundamental skills for any aspiring web developer, and securing a job in this field can be a challenging endeavor, especially for beginners. A critical part of the interview process is the technical interview, where your proficiency in these core web technologies is thoroughly assessed.

To help you prepare and boost your confidence, we’ve compiled a list of the top 50 essential interview questions and answers covering HTML, CSS, and JavaScript that are frequently asked in interviews. These are followed by two supplementary sections: additional HTML-focused questions that are increasingly common in modern front-end rounds, and integration questions that examine how HTML, CSS, and JavaScript interact in practice. Where relevant, questions include what interviewers look for in a strong answer, as well as nuances that are commonly overlooked in surface-level explanations.

If you're looking for additional JavaScript interview preparation materials, also check out these resources:

• Front End Interview Playbook
• Practice JavaScript interview questions
• Practice HTML interview questions
• Practice CSS interview questions

1. What Is Hoisting in JavaScript?

Hoisting refers to JavaScript's behavior of moving variable and function declarations to the top of their scope during the compilation phase. While declarations are hoisted, initializations are not.

console.log(foo); // undefined
var foo = 1;
console.log(foo); // 1

Visualized as:

var foo;
console.log(foo); // undefined
foo = 1;
console.log(foo); // 1

Variables Declared with let, const, and class

These are hoisted but remain uninitialized, leading to a ReferenceError if accessed before declaration.

console.log(bar); // ReferenceError
let bar = 'value';

Function Declarations vs. Expressions

Function declarations are fully hoisted (both declaration and definition), while function expressions are only partially hoisted (declaration without initialization).

console.log(declared()); // Works
function declared() {
  return 'Declared function';
}

console.log(expr); // undefined
console.log(expr()); // TypeError: expr is not a function
var expr = function () {
  return 'Function expression';
};

Imports

Import statements are hoisted, making imported modules available throughout the file.

import foo from './foo';
foo.doSomething(); // Accessible

Explore the concept of "hoisting" in JavaScript on GreatFrontEnd

2. How Do let, var, and const Differ?

1. Scope:

• var: Function-scoped or globally scoped.
• let and const: Block-scoped, confined to their nearest enclosing block.

function test() {
  var a = 1;
  let b = 2;
  const c = 3;
}
console.log(a); // ReferenceError
console.log(b); // ReferenceError
console.log(c); // ReferenceError

2. Initialization:

• var and let: Can be declared without initialization.
• const: Must be initialized during declaration.

var a;
let b;
const c; // SyntaxError: Missing initializer

3. Redeclaration:

• var: Allows redeclaration in the same scope.
• let and const: Redeclaration is not allowed.

var x = 1;
var x = 2; // Valid

let y = 1;
let y = 2; // SyntaxError

4. Reassignment:

• var and let: Reassignment is allowed.
• const: Reassignment is not allowed.

const z = 1;
z = 2; // TypeError

5. Hoisting:

• var: Hoisted and initialized to undefined.
• let and const: Hoisted but not initialized, causing a ReferenceError if accessed before declaration.

console.log(a); // undefined
var a = 1;

console.log(b); // ReferenceError
let b = 2;

Explore the differences between let, var, and const on GreatFrontEnd

3. What Is the Difference Between == and ===?

Equality Operator (==):

• Converts operands to a common type before comparison.
• May produce unexpected results due to type coercion.

42 == '42'; // true
0 == false; // true
null == undefined; // true

Strict Equality Operator (===):

• No type conversion; checks both value and type.
• Ensures accurate comparisons.

42 === '42'; // false
0 === false; // false
null === undefined; // false

Best Practice:

Prefer === to avoid unexpected behavior caused by type coercion, except when comparing against null or undefined.

var value = null;
console.log(value == null); // true
console.log(value === null); // true

Explore the difference between == and === on GreatFrontEnd

4. What Is the Event Loop in JavaScript?

The event loop allows JavaScript to handle asynchronous tasks on a single thread, ensuring smooth execution without blocking.

Components:

1. Call Stack: Tracks function calls in a LIFO order.
2. Web APIs: Handle asynchronous tasks like timers and HTTP requests.
3. Task Queue: Stores tasks like setTimeout and UI events.
4. Microtask Queue: Handles high-priority tasks like Promise callbacks.

Execution Order:

1. Synchronous code executes first (call stack).
2. Microtasks are processed next.
3. Macrotasks are executed afterward.

console.log('Start');

setTimeout(() => console.log('Timeout'), 0);

Promise.resolve().then(() => console.log('Promise'));

console.log('End');

Output:

Start
End
Promise
Timeout

Explore the event loop in JavaScript on GreatFrontEnd

5. What Is Event Delegation?

Event delegation uses a single event listener on a parent element to manage events on its child elements. This approach takes advantage of event bubbling, improving efficiency.

• Reduces memory usage by limiting the number of listeners.
• Dynamically handles added or removed child elements.

document.getElementById('parent').addEventListener('click', (event) => {
  if (event.target.tagName === 'BUTTON') {
    console.log(`Clicked ${event.target.textContent}`);
  }
});

Explore event delegation in JavaScript on GreatFrontEnd

6. How Does this Work in JavaScript?

The value of this depends on how a function is invoked:

1. Default Binding: Refers to the global object (window in browsers) in non-strict mode. In strict mode — which is the default inside ES modules and class bodies — the default binding is undefined.
2. Implicit Binding: Refers to the object before the dot.
3. Explicit Binding: Defined using call, apply, or bind.
4. Arrow Functions: Lexically inherit this from the surrounding scope.

const obj = {
  name: 'Alice',
  greet() {
    console.log(this.name);
  },
};
obj.greet(); // Alice

Explore how this works in JavaScript on GreatFrontEnd

7. How Do Cookies, localStorage, and sessionStorage Differ?

Cookies:

• Sent with every HTTP request.
• Limited to 4KB per domain.
• Can be set to expire.

document.cookie = 'token=abc123; expires=Fri, 31 Dec 2025 23:59:59 GMT; path=/';
console.log(document.cookie);

localStorage:

• Persistent storage (until manually cleared).
• 5MB limit per origin.

localStorage.setItem('key', 'value');
console.log(localStorage.getItem('key'));

sessionStorage:

• Data cleared when the tab or browser is closed.
• Limited to 5MB.

sessionStorage.setItem('key', 'value');
console.log(sessionStorage.getItem('key'));

Explore the difference between cookies, localStorage, and sessionStorage on GreatFrontEnd

8. What Are <script>, <script async>, and <script defer>?

<script>:

• Blocks HTML parsing until the script loads and executes.

<script async>:

• Loads scripts asynchronously.
• Executes as soon as the script is ready, potentially before HTML parsing completes.

<script defer>:

• Loads scripts asynchronously.
• Executes only after the HTML parsing is complete.

<script src="main.js"></script>
<script async src="async.js"></script>
<script defer src="defer.js"></script>

Explore the difference between <script>, <script async>, and <script defer> on GreatFrontEnd

9. How Do null, undefined, and Undeclared Variables Differ?

null:

Explicitly represents no value. Use === to check.

undefined:

Indicates a variable has been declared but not assigned a value.

Undeclared:

Variables not declared will throw a ReferenceError.

let a;
console.log(a); // undefined

let b = null;
console.log(b); // null

Explore the difference between null, undefined, and undeclared variables on GreatFrontEnd

10. What Is the Difference Between .call and .apply?

.call:

Accepts arguments as a comma-separated list.

.apply:

Accepts arguments as an array.

function sum(a, b) {
  return a + b;
}
console.log(sum.call(null, 1, 2)); // 3
console.log(sum.apply(null, [1, 2])); // 3

Explore the difference between .call and .apply on GreatFrontEnd

11. What Is Function.prototype.bind and Why Is It Useful?

The Function.prototype.bind method allows you to create a new function with a specific this context and optional preset arguments. It’s particularly useful for ensuring a function has the correct this context when passed to another function or used as a callback.

const john = {
  age: 42,
  getAge: function () {
    return this.age;
  },
};

console.log(john.getAge()); // 42

const unboundGetAge = john.getAge;
console.log(unboundGetAge()); // undefined

const boundGetAge = john.getAge.bind(john);
console.log(boundGetAge()); // 42

const mary = { age: 21 };
const boundGetAgeMary = john.getAge.bind(mary);
console.log(boundGetAgeMary()); // 21

Common Uses:

1. Binding this: bind is often used to fix the this value for a method, ensuring it always refers to the intended object.
2. Partial Application: You can predefine some arguments for a function using bind.
3. Method Borrowing: bind allows methods from one object to be used on another object.

Explore Function.prototype.bind on GreatFrontEnd

12. Why Use Arrow Functions in Constructors?

Arrow functions automatically bind the this value to the surrounding lexical scope, which eliminates issues with context in methods. This behavior makes code more predictable and easier to debug.

const Person = function (name) {
  this.name = name;

  this.sayName1 = function () {
    console.log(this.name);
  };

  this.sayName2 = () => {
    console.log(this.name);
  };
};

const john = new Person('John');
const dave = new Person('Dave');

john.sayName1(); // John
john.sayName2(); // John

john.sayName1.call(dave); // Dave
john.sayName2.call(dave); // John

When to Use:

• Whenever a method defined on an object or class instance needs to retain the original this when passed as a callback — for example, event handlers assigned to DOM elements or methods passed to third-party APIs. While modern React favors functional components with hooks, this pattern is still relevant in class-based components, Web Components, and plain JavaScript modules.

Explore the advantage of using the arrow syntax for a method in a constructor on GreatFrontEnd

13. How Does Prototypal Inheritance Work?

Prototypal inheritance allows objects to inherit properties and methods from other objects through the prototype chain.

Key Concepts:

1. Prototypes:

Every JavaScript object has a prototype, which is another object from which it inherits properties.

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.sayHello = function () {
  console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};

const john = new Person('John', 30);
john.sayHello(); // Hello, my name is John and I am 30 years old.

2. Prototype Chain:

JavaScript looks for properties and methods on the object and continues up the chain until it finds the property or reaches null.

3. Constructor Functions:

Used with new to create objects and set their prototype.

function Animal(name) {
  this.name = name;
}

Animal.prototype.sayName = function () {
  console.log(`My name is ${this.name}`);
};

function Dog(name, breed) {
  Animal.call(this, name);
  this.breed = breed;
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.bark = function () {
  console.log('Woof!');
};

const fido = new Dog('Fido', 'Labrador');
fido.sayName(); // My name is Fido
fido.bark(); // Woof!

Explore how prototypal inheritance works on GreatFrontEnd

14. What’s the Difference Between function Person(){}, const person = Person(), and const person = new Person()?

Function Declaration:

function Person() {} is a standard function declaration. When written in PascalCase, it conventionally represents a constructor function.

Function Call:

const person = Person() calls the function and executes its code but does not create a new object.

Constructor Call:

const person = new Person() creates a new object, setting its prototype to Person.prototype.

Explore the difference between function Person(){}, const person = Person(), and const person = new Person() on GreatFrontEnd

15. How Do Function Declarations and Expressions Differ?

Function Declarations:

function foo() {
  console.log('Function declaration');
}

• Hoisted with their body.
• Can be invoked before their definition.

Function Expressions:

const foo = function () {
  console.log('Function expression');
};

• Only the variable is hoisted, not the function body.
• Cannot be invoked before their definition.

Explore the differences between function declarations and expressions on GreatFrontEnd

16. How Can You Create Objects in JavaScript?

1. Object Literals:

const person = { firstName: 'John', lastName: 'Doe' };

2. Object() Constructor:

const person = new Object();
person.firstName = 'John';
person.lastName = 'Doe';

3. Object.create():

const proto = {
  greet() {
    console.log('Hello!');
  },
};
const person = Object.create(proto);
person.greet(); // Hello!

4. ES2015 Classes:

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

Explore ways to create objects in JavaScript on GreatFrontEnd

17. What Are Higher-Order Functions?

Higher-order functions either:

1. Take other functions as arguments.
2. Return functions.

function multiplier(factor) {
  return function (number) {
    return number * factor;
  };
}

const double = multiplier(2);
console.log(double(5)); // 10

Explore higher-order functions on GreatFrontEnd

18. Differences Between ES2015 Classes and ES5 Constructors

ES5 Constructor:

function Person(name) {
  this.name = name;
}
Person.prototype.greet = function () {
  console.log(`Hello, I’m ${this.name}`);
};

ES2015 Class:

class Person {
  constructor(name) {
    this.name = name;
  }

  greet() {
    console.log(`Hello, I’m ${this.name}`);
  }
}

Key Differences:

• Syntax: Classes are easier to read and write.
• Inheritance: Classes use extends and super.

Explore ES2015 classes and ES5 constructors on GreatFrontEnd

19. What Is Event Bubbling?

Event bubbling is when an event starts at the target element and propagates up through its ancestors.

parent.addEventListener('click', () => console.log('Parent clicked'));
child.addEventListener('click', () => console.log('Child clicked'));

Clicking the child triggers both handlers.

Explore event bubbling on GreatFrontEnd

20. What Is Event Capturing?

Event capturing is when an event starts at the root and propagates down to the target element.

Enabling Capturing:

parent.addEventListener('click', () => console.log('Parent capturing'), true);

Explore event capturing on GreatFrontEnd

21. How Do the mouseenter and mouseover Events Differ in JavaScript and Browsers?

mouseenter

• Does not propagate through the DOM tree
• Fires solely when the cursor enters the element itself, excluding its child elements
• Triggers only once upon entering the parent element, regardless of its internal content

mouseover

• Propagates upwards through the DOM hierarchy
• Activates when the cursor enters the element or any of its descendant elements
• May lead to multiple event callbacks if there are nested child elements

Discover the distinctions between mouseenter and mouseover events in JavaScript and browsers on GreatFrontEnd

22. Can You Differentiate Between Synchronous and Asynchronous Functions?

Synchronous Functions

• Execute operations in a sequential, step-by-step manner
• Block the program's execution until the current task completes
• Adhere to a strict, line-by-line execution order
• Are generally easier to comprehend and debug due to their predictable flow
• Common use cases include reading files synchronously and iterating over large datasets

Example:

const fs = require('fs');
const data = fs.readFileSync('large-file.txt', 'utf8');
console.log(data); // Blocks until file is read
console.log('End of the program');

Asynchronous Functions

• Allow the program to continue running without waiting for the task to finish
• Enable other operations to proceed while waiting for responses or the completion of time-consuming tasks
• Are non-blocking, facilitating concurrent execution and enhancing performance and responsiveness
• Commonly used for network requests, file I/O, timers, and animations

Example:

console.log('Start of the program');

fetch('https://api.example.com/data')
  .then((response) => response.json())
  .then((data) => console.log(data)) // Non-blocking
  .catch((error) => console.error(error));

console.log('End of program');

Understand the distinctions between synchronous and asynchronous functions on GreatFrontEnd

23. Provide a Comprehensive Explanation of AJAX

AJAX (Asynchronous JavaScript and XML) encompasses a collection of web development techniques that utilize various client-side technologies to build asynchronous web applications. Unlike traditional web applications where every user interaction results in a complete page reload, AJAX enables web apps to send and retrieve data from a server asynchronously. This allows for dynamic updates to specific parts of a web page without disrupting the overall page display and behavior.

Key Highlights:

• Asynchronous Operations: AJAX allows parts of a web page to update independently without reloading the entire page.
• Data Formats: Initially utilized XML, but JSON has become more prevalent due to its seamless compatibility with JavaScript.
• APIs: Traditionally relied on XMLHttpRequest, though fetch() is now the preferred choice for modern web development.

XMLHttpRequest API

Example:

let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      console.log(xhr.responseText);
    } else {
      console.error('Request failed: ' + xhr.status);
    }
  }
};
xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1', true);
xhr.send();

• Process: Initiates a new XMLHttpRequest, assigns a callback to handle state changes, opens a connection to a specified URL, and sends the request.

fetch() API

Example:

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then((response) => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then((data) => console.log(data))
  .catch((error) => console.error('Fetch error:', error));

• Process: Starts a fetch request, processes the response with .then() to parse JSON data, and handles errors using .catch().

How AJAX Operates with fetch

1. Initiating a Request

• fetch() starts an asynchronous request to obtain a resource from a given URL.

• Example:

  fetch('https://api.example.com/data', {
    method: 'GET', // or 'POST', 'PUT', 'DELETE', etc.
    headers: {
      'Content-Type': 'application/json',
    },
  });

2. Promise-Based Response

• fetch() returns a Promise that resolves to a Response object representing the server's reply.

3. Managing the Response

• The Response object provides methods to handle the content, such as .json(), .text(), and .blob().

• Example:

  fetch('https://api.example.com/data')
    .then((response) => response.json())
    .then((data) => console.log(data))
    .catch((error) => console.error('Error:', error));

4. Asynchronous Nature

• fetch() operates asynchronously, allowing the browser to perform other tasks while awaiting the server's response.
• Promises (.then(), .catch()) are processed in the microtask queue as part of the event loop.

5. Configuring Request Options

• The optional second parameter in fetch() allows configuration of various request settings, including HTTP method, headers, body, credentials, and caching behavior.

6. Handling Errors

• Errors such as network failures or invalid responses are captured and managed through the Promise chain using .catch() or try/catch with async/await.

Learn how to explain AJAX in detail on GreatFrontEnd

24. What Are the Pros and Cons of Utilizing AJAX?

AJAX (Asynchronous JavaScript and XML) facilitates the asynchronous exchange of data between web pages and servers, enabling dynamic content updates without necessitating full page reloads.

Advantages

• Enhanced User Experience: Updates content seamlessly without refreshing the entire page.
• Improved Performance: Reduces server load by fetching only the required data.
• Maintains State: Preserves user interactions and client-side states within the page.

Disadvantages

• Dependency on JavaScript: Functionality can break if JavaScript is disabled or fails to load in the browser.
• Bookmarking and Navigation: Dynamic content updates require explicit use of the History API (pushState, replaceState) to keep URLs in sync with application state; otherwise, users cannot bookmark or share specific views.
• SEO Considerations: Although modern search engines such as Googlebot render JavaScript and can index client-side content, rendering is deferred and adds latency to indexing. Server-side rendering, static generation, or hydration are often preferred for content that must be discoverable immediately.
• Performance on Low-End Devices: Processing AJAX responses and re-rendering the DOM can be resource-intensive, potentially slowing down performance on devices with limited CPU or memory.

Explore the benefits and drawbacks of using AJAX on GreatFrontEnd

25. How Do XMLHttpRequest and fetch() Differ?

Both XMLHttpRequest (XHR) and fetch() facilitate asynchronous HTTP requests in JavaScript, but they vary in syntax, handling mechanisms, and features.

Syntax and Implementation

• XMLHttpRequest: Utilizes an event-driven approach, requiring event listeners to manage responses and errors.
• fetch(): Employs a Promise-based model, offering a more straightforward and intuitive syntax.

Setting Request Headers

• XMLHttpRequest: Headers are set using the setRequestHeader method.
• fetch(): Headers are provided as an object within the options parameter.

Sending the Request Body

• XMLHttpRequest: The request body is sent using the send method.
• fetch(): The body property within the options parameter is used to include the request body.

Handling Responses

• XMLHttpRequest: Uses the responseType property to manage different response formats.
• fetch(): Offers a unified Response object with .then methods for accessing data.

Managing Errors

• XMLHttpRequest: Errors are handled via the onerror event.
• fetch(): Errors are managed using the .catch method.

Controlling Caching

• XMLHttpRequest: Managing cache can be cumbersome and often requires workaround strategies.
• fetch(): Directly supports caching options through its configuration.

Canceling Requests

• XMLHttpRequest: Requests can be aborted using the abort() method.
• fetch(): Utilizes AbortController for canceling requests.

Tracking Progress

• XMLHttpRequest: Supports progress tracking with the onprogress event.
• fetch(): Lacks native support for tracking progress.

Choosing Between Them: fetch() is generally favored for its cleaner syntax and Promise-based handling, though XMLHttpRequest remains useful for specific scenarios like progress tracking.

Discover the distinctions between XMLHttpRequest and fetch() on GreatFrontEnd

26. What Are the Different Data Types in JavaScript?

JavaScript encompasses a variety of data types, which are categorized into two main groups: primitive and non-primitive (reference) types.

Primitive Data Types

• Number: Represents both integer and floating-point numbers.
• String: Denotes sequences of characters, enclosed in single quotes, double quotes, or backticks.
• Boolean: Logical values with true or false.
• Undefined: A variable that has been declared but not assigned a value.
• Null: Signifies the intentional absence of any object value.
• Symbol: A unique and immutable value used primarily as object property keys.
• BigInt: Allows representation of integers with arbitrary precision, useful for very large numbers.

Non-Primitive Data Types

• Object: Stores collections of data and more complex entities.
• Array: An ordered list of values.
• Function: Functions are treated as objects and can be defined using declarations or expressions.
• Date: Represents dates and times.
• RegExp: Used for defining regular expressions for pattern matching within strings.
• Map: A collection of keyed data items, allowing keys of any type.
• Set: A collection of unique values.

Identifying Data Types: JavaScript is dynamically typed, meaning variables can hold different types of data at various times. The typeof operator is used to determine a variable's type.

Explore the variety of data types in JavaScript on GreatFrontEnd

27. What Constructs Do You Use to Iterate Over Object Properties and Array Elements?

Looping through object properties and array items is a fundamental task in JavaScript, and there are multiple methods to accomplish this. Below are some of the common approaches:

Iterating Over Objects

1. for...in Loop

Iterates over all enumerable properties of an object, including inherited ones.

for (const property in obj) {
  if (Object.hasOwn(obj, property)) {
    console.log(property);
  }
}

2. Object.keys()

Returns an array containing the object's own enumerable property names.

Object.keys(obj).forEach((property) => console.log(property));

3. Object.entries()

Provides an array of the object's own enumerable string-keyed [key, value] pairs.

Object.entries(obj).forEach(([key, value]) => console.log(`${key}: ${value}`));

4. Object.getOwnPropertyNames()

Returns an array of all properties (including non-enumerable ones) directly found on the object.

Object.getOwnPropertyNames(obj).forEach((property) => console.log(property));

Iterating Over Arrays

1. for Loop

A traditional loop for iterating over array elements.

for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

2. Array.prototype.forEach()

Executes a provided function once for each array element.

arr.forEach((element, index) => console.log(element, index));

3. for...of Loop

Iterates over iterable objects like arrays.

for (let element of arr) {
  console.log(element);
}

4. Array.prototype.entries()

Provides both the index and value of each array element within a for...of loop.

for (let [index, elem] of arr.entries()) {
  console.log(index, ': ', elem);
}

Learn about the constructs used for iterating over object properties and array elements on GreatFrontEnd

28. What Are the Advantages of Using Spread Syntax, and How Does It Differ from Rest Syntax?

Spread Syntax

Introduced in ES2015, the spread syntax (...) is a powerful feature for copying and merging arrays and objects without altering the originals. It's widely used in functional programming, Redux, and RxJS.

• Cloning Arrays/Objects: Creates shallow copies.

  const array = [1, 2, 3];
  const newArray = [...array]; // [1, 2, 3]
  
  const obj = { name: 'John', age: 30 };
  const newObj = { ...obj, city: 'New York' }; // { name: 'John', age: 30, city: 'New York' }

• Combining Arrays/Objects: Merges them into a new entity.

  const arr1 = [1, 2, 3];
  const arr2 = [4, 5, 6];
  const mergedArray = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]
  
  const obj1 = { foo: 'bar' };
  const obj2 = { qux: 'baz' };
  const mergedObj = { ...obj1, ...obj2 }; // { foo: 'bar', qux: 'baz' }

• Passing Function Arguments: Spreads array elements as individual arguments.

  const numbers = [1, 2, 3];
  Math.max(...numbers); // Equivalent to Math.max(1, 2, 3)

• Array vs. Object Spreads: Only iterables can be spread into arrays, while arrays can also be spread into objects.

  const array = [1, 2, 3];
  const obj = { ...array }; // { 0: 1, 1: 2, 2: 3 }

Rest Syntax

The rest syntax (...) collects multiple elements into an array or object, functioning as the opposite of spread syntax.

• Function Parameters: Gathers remaining arguments into an array.

  function addFiveToNumbers(...numbers) {
    return numbers.map((x) => x + 5);
  }
  const result = addFiveToNumbers(4, 5, 6, 7); // [9, 10, 11, 12]

• Array Destructuring: Collects remaining elements into a new array.

  const [first, second, ...remaining] = [1, 2, 3, 4, 5];
  // first: 1, second: 2, remaining: [3, 4, 5]

• Object Destructuring: Gathers remaining properties into a new object.

  const { e, f, ...others } = { e: 1, f: 2, g: 3, h: 4 };
  // e: 1, f: 2, others: { g: 3, h: 4 }

• Rest Parameter Rules: Must be the final parameter in a function.

  function addFiveToNumbers(arg1, ...numbers, arg2) {
    // Error: Rest element must be last element.
  }

Understand the benefits of spread syntax and how it differs from rest syntax on GreatFrontEnd

29. How Does a Map Object Differ from a Plain Object in JavaScript?

Map Object

• Key Flexibility: Allows keys of any type, including objects, functions, and primitives.
• Order Preservation: Maintains the order in which keys are inserted.
• Size Property: Includes a size property to easily determine the number of key-value pairs.
• Iteration: Directly iterable with methods like forEach, keys(), values(), and entries().
• Performance: Typically offers better performance for larger datasets and frequent modifications.

Plain Object

• Key Types: Primarily uses strings or symbols as keys. Non-string keys are converted to strings.
• Order: Does not guarantee the order of key insertion.
• Size Tracking: Lacks a built-in property to determine the number of keys; requires manual counting.
• Iteration: Not inherently iterable. Requires methods like Object.keys(), Object.values(), or Object.entries() to iterate.
• Performance: Generally faster for small datasets and simple operations.

// Map
const map = new Map();
map.set('key1', 'value1');
map.set({ key: 'key2' }, 'value2');
console.log(map.size); // 2 — the object reference is preserved as a distinct key

// Plain Object
const obj = { key1: 'value1' };
obj[{ key: 'key2' }] = 'value2';
console.log(Object.keys(obj)); // ['key1', '[object Object]']
// The object key has been coerced to the string "[object Object]"

Discover the differences between a Map object and a plain object in JavaScript on GreatFrontEnd

30. What Are the Differences Between Map/Set and WeakMap/WeakSet?

The primary distinctions between Map/Set and WeakMap/WeakSet in JavaScript are outlined below:

• Key Types:

  • Map and Set accept keys of any type, including objects, primitives, and functions.
  • WeakMap and WeakSet exclusively use objects as keys, disallowing primitive values like strings or numbers.

• Memory Management:

  • Map and Set maintain strong references to their keys and values, preventing their garbage collection.
  • WeakMap and WeakSet use weak references for keys (objects), allowing garbage collection if there are no other strong references.

• Key Enumeration:

  • Map and Set have enumerable keys that can be iterated over.
  • WeakMap and WeakSet do not allow enumeration of keys, making it impossible to retrieve lists of keys or values directly.

• Size Property:

  • Map and Set provide a size property indicating the number of elements.
  • WeakMap and WeakSet lack a size property since their size can change due to garbage collection.

• Use Cases:

  • Map and Set are suitable for general-purpose data storage and caching.
  • WeakMap and WeakSet are ideal for storing metadata or additional object-related information without preventing the objects from being garbage collected when they are no longer needed.

Learn about the differences between Map/Set and WeakMap/WeakSet on GreatFrontEnd

31. What is a Practical Scenario for Using the Arrow => Function Syntax?

One effective application of JavaScript's arrow function syntax is streamlining callback functions, especially when concise, inline function definitions are needed. Consider the following example:

Scenario: Doubling Array Elements with map

Imagine you have an array of numbers and you want to double each number using the map method.

// Traditional function syntax
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(function (number) {
  return number * 2;
});

console.log(doubledNumbers); // Output: [2, 4, 6, 8, 10]

By utilizing arrow function syntax, the same outcome can be achieved more succinctly:

// Arrow function syntax
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map((number) => number * 2);

console.log(doubledNumbers); // Output: [2, 4, 6, 8, 10]

Explore a use case for the new arrow => function syntax on GreatFrontEnd

32. How Do Callback Functions Operate in Asynchronous Tasks?

In the realm of asynchronous programming, a callback function is passed as an argument to another function and is executed once a particular task completes, such as data retrieval or handling input/output operations. Here's a straightforward explanation:

function fetchData(callback) {
  setTimeout(() => {
    const data = { name: 'John', age: 30 };
    callback(data);
  }, 1000);
}

fetchData((data) => {
  console.log(data); // { name: 'John', age: 30 }
});

Explore the concept of a callback function in asynchronous operations on GreatFrontEnd

33. Can You Describe Debouncing and Throttling Techniques?

Debouncing and throttling are techniques used to control the rate at which functions are executed, optimizing performance and managing event-driven behaviors in JavaScript applications.

• Debouncing: Delays the execution of a function until a specified period has elapsed since its last invocation. This is particularly useful for scenarios like handling search input where you want to wait until the user has finished typing before executing a function.

  function debounce(func, delay) {
    let timeoutId;
    return (...args) => {
      clearTimeout(timeoutId);
      timeoutId = setTimeout(() => func.apply(this, args), delay);
    };
  }

• Throttling: Restricts a function to be executed no more than once within a given timeframe. This is beneficial for handling events that fire frequently, such as window resizing or scrolling.

  function throttle(func, limit) {
    let inThrottle;
    return (...args) => {
      if (!inThrottle) {
        func.apply(this, args);
        inThrottle = true;
        setTimeout(() => (inThrottle = false), limit);
      }
    };
  }

These strategies help in enhancing application performance by preventing excessive function calls.

Explore the concept of debouncing and throttling on GreatFrontEnd

34. How Does Destructuring Assignment Work for Objects and Arrays?

Destructuring assignment in JavaScript provides a concise way to extract values from arrays or properties from objects into individual variables.

// Array destructuring
const [a, b] = [1, 2];

// Object destructuring
const { name, age } = { name: 'John', age: 30 };

This syntax employs square brackets for arrays and curly braces for objects, allowing for streamlined variable assignments directly from data structures.

Explore the concept of destructuring assignment for objects and arrays on GreatFrontEnd

35. What is Hoisting in the Context of Functions?

Hoisting in JavaScript refers to the behavior where function declarations are moved to the top of their containing scope during the compilation phase. This allows functions to be invoked before their actual definition in the code. Conversely, function expressions and arrow functions must be defined prior to their invocation to avoid errors.

// Function declaration
hoistedFunction(); // Works fine
function hoistedFunction() {
  console.log('This function is hoisted');
}

// Function expression
nonHoistedFunction(); // Throws an error
var nonHoistedFunction = function () {
  console.log('This function is not hoisted');
};

Explore the concept of hoisting with regards to functions on GreatFrontEnd

36. How Does Inheritance Work in ES2015 Classes?

In ES2015, JavaScript introduces the class syntax with the extends keyword, enabling one class to inherit properties and methods from another. The super keyword is used to access the parent class's constructor and methods.

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }

  speak() {
    console.log(`${this.name} barks.`);
  }
}

const dog = new Dog('Rex', 'German Shepherd');
dog.speak(); // Output: Rex barks.

In this example, the Dog class inherits from the Animal class, demonstrating how classes facilitate inheritance and method overriding in JavaScript.

Explore the concept of inheritance in ES2015 classes on GreatFrontEnd

37. What is Lexical Scoping?

Lexical scoping in JavaScript determines how variable names are resolved based on their location within the source code. Nested functions have access to variables from their parent scopes, enabling them to utilize and manipulate these variables.

function outerFunction() {
  let outerVariable = 'I am outside!';

  function innerFunction() {
    console.log(outerVariable); // 'I am outside!'
  }

  innerFunction();
}

outerFunction();

In this scenario, innerFunction can access outerVariable because of lexical scoping rules, which allow inner functions to access variables defined in their outer scope.

Explore the concept of lexical scoping on GreatFrontEnd

38. What is Scope in JavaScript?

Scope in JavaScript defines the accessibility of variables and functions in different parts of the code. There are three primary types of scope:

1. Global Scope: Variables declared outside any function or block are accessible throughout the entire code.
2. Function Scope: Variables declared within a function are accessible only within that function.
3. Block Scope: Introduced in ES6, variables declared with let or const within a block (e.g., within {}) are accessible only within that block.

// Global scope
var globalVar = 'I am global';

function myFunction() {
  // Function scope
  var functionVar = 'I am in a function';

  if (true) {
    // Block scope
    let blockVar = 'I am in a block';
    console.log(blockVar); // Accessible here
  }

  // console.log(blockVar); // Throws an error
}

console.log(globalVar); // Accessible here
// console.log(functionVar); // Throws an error

In this example, globalVar is accessible globally, functionVar is confined to myFunction, and blockVar is restricted to the if block.

Explore the concept of scope in JavaScript on GreatFrontEnd

39. What is the Spread Operator and How is it Used?

The spread operator (...) in JavaScript allows iterable elements (like arrays or objects) to be expanded into individual elements. It's versatile and can be used for copying, merging, and passing array elements as function arguments.

// Copying an array
const arr1 = [1, 2, 3];
const arr2 = [...arr1];

// Merging arrays
const arr3 = [4, 5, 6];
const mergedArray = [...arr1, ...arr3];

// Copying an object
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1 };

// Merging objects
const obj3 = { c: 3, d: 4 };
const mergedObject = { ...obj1, ...obj3 };

// Passing array elements as function arguments
const sum = (x, y, z) => x + y + z;
const numbers = [1, 2, 3];
console.log(sum(...numbers)); // Output: 6

The spread operator simplifies operations such as copying arrays or objects, merging multiple arrays or objects into one, and spreading elements of an array as individual arguments to functions.

Explore the concept of the spread operator and its uses on GreatFrontEnd

40. How Does this Binding Work in Event Handlers?

In JavaScript, the this keyword refers to the object that is executing the current piece of code. Within event handlers, this typically points to the DOM element that triggered the event. However, its value can change depending on how the handler is defined and invoked. To ensure this references the intended context, techniques like using bind(), arrow functions, or explicitly setting the context are employed.

These methods help maintain the correct reference for this within event handling functions, ensuring consistent and predictable behavior across various event-driven scenarios in JavaScript applications.

Explore the concept of this binding in event handlers on GreatFrontEnd

41. What is a Block Formatting Context (BFC) and How Does It Function?

A Block Formatting Context (BFC) is a pivotal concept in CSS that influences how block-level elements are rendered and interact on a webpage. It creates an isolated environment where block boxes are laid out, ensuring that elements like floats, absolutely positioned elements, inline-blocks, table-cells, table-captions, and those with an overflow value other than visible (except when propagated to the viewport) establish a new BFC.

Grasping how to initiate a BFC is essential because, without it, the containing box might fail to encompass floated child elements. This issue is akin to collapsing margins but is often more deceptive, causing entire boxes to collapse unexpectedly.

A BFC is formed when an HTML box satisfies at least one of the following criteria:

• The float property is set to a value other than none.
• The position property is assigned a value that is neither static nor relative.
• The display property is set to table-cell, table-caption, inline-block, flex, inline-flex, grid, or inline-grid.
• The overflow property is set to a value other than visible.

Within a BFC, each box's left outer edge aligns with the left edge of its containing block (or the right edge in right-to-left layouts). Additionally, vertical margins between adjacent block-level boxes within a BFC collapse into a single margin.

Discover Block Formatting Context (BFC) and its Operation on GreatFrontEnd

42. What is z-index and How is a Stacking Context Created?

The z-index property in CSS manages the vertical stacking order of overlapping elements. It only influences positioned elements—those with a position value other than static—and their descendants or flex items.

In the absence of a z-index value, elements stack based on their order in the Document Object Model (DOM), with elements appearing later in the HTML markup rendered on top of earlier ones at the same hierarchy level. Positioned elements (those with non-static positioning) and their children will always overlay elements with default static positioning, regardless of their order in the HTML structure.

A stacking context is essentially a group of elements that share a common stacking order. Within a local stacking context, the z-index values of child elements are relative to that context rather than the entire document. Elements outside of this context—such as sibling elements of a local stacking context—cannot interpose between layers within it. For instance, if element B overlays element A, a child of element A, element C, cannot surpass element B in the stacking order even if it has a higher z-index than element B.

Each stacking context operates independently; after stacking its child elements, the entire context is treated as a single entity within the parent stacking context's order. Certain CSS properties, like an opacity less than 1, a filter that isn't none, or a transform that isn't none, can trigger the creation of a new stacking context.

Learn about z-index and Stacking Contexts on GreatFrontEnd

43. How Does a Browser Match Elements to a CSS Selector?

This topic relates to writing efficient CSS, specifically how browsers interpret and apply CSS selectors. Browsers process selectors from right to left, starting with the most specific (the key selector) and moving outward. They first identify all elements that match the rightmost part of the selector and then traverse up the DOM tree to verify if those elements meet the remaining parts of the selector.

For example, consider the selector p span. Browsers will first locate all <span> elements and then check each span's ancestor chain to determine if it is within a <p> element. Once a <p> ancestor is found for a given <span>, the browser confirms that the <span> matches the selector and ceases further traversal for that element.

The efficiency of selector matching is influenced by the length of the selector chain—the shorter the chain, the quicker the browser can verify matches.

Understand How Browsers Match CSS Selectors on GreatFrontEnd

44. What is the Box Model in CSS and How Can You Control Its Rendering?

The CSS box model is a fundamental concept that describes the rectangular boxes generated for elements in the document tree, determining how they are laid out and displayed. Each box comprises a content area (such as text or images) surrounded by optional padding, border, and margin areas.

The box model is responsible for calculating:

• The total space a block element occupies.
• Whether borders and margins overlap or collapse.
• The overall dimensions of a box.

Box Model Rules

• Dimensions Calculation: A block element's size is determined by its width, height, padding, and border.
• Automatic Height: If no height is specified, a block element's height adjusts to its content plus padding (unless floats are involved).
• Automatic Width: If no width is set, a non-floated block element expands to fit its parent's width minus padding, unless a max-width is specified.
  • Certain block-level elements like table, figure, and input have inherent width values and may not expand fully.
  • Inline elements like span do not have a default width and will not expand to fit.
• Content Dimensions: An element's height and width are determined by its content.
• Box-Sizing: By default (box-sizing: content-box), padding and border are not included in an element's width and height.

Note: Margins do not contribute to the actual size of the box; they affect the space outside the box. The box's area is confined to the border and does not extend into the margin.

Additional Considerations

Understanding the box-sizing property is crucial as it alters how an element's height and width are calculated.

• box-sizing: content-box: The default behavior where only the content size is considered.
• box-sizing: border-box: Includes padding and border in the element's total width and height, excluding margin.

Many CSS frameworks adopt box-sizing: border-box globally for a more intuitive sizing approach.

Explore the Box Model and Its Control in CSS on GreatFrontEnd

45. How Do You Utilize the CSS display Property? Provide Examples.

The display property in CSS dictates how an element is rendered in the document flow. Common values include none, block, inline, inline-block, flex, grid, table, table-row, table-cell, and list-item.

Description:

none

Hides the element; it does not occupy any space in the layout. All child elements are also hidden. The element is treated as if it does not exist in the DOM.

block

The element occupies the full width available, starting on a new line.

inline

The element does not start on a new line and only occupies as much width as necessary.

inline-block

Combines characteristics of both inline and block. The element flows with text but can have width and height set.

flex

Defines the element as a flex container, enabling the use of flexbox layout for its children.

grid

Defines the element as a grid container, allowing for grid-based layout of its children.

table

Makes the element behave like a <table> element.

table-row

Makes the element behave like a <tr> (table row) element.

table-cell

Makes the element behave like a <td> (table cell) element.

list-item

Makes the element behave like a <li> (list item) element, enabling list-specific styling such as list-style-type and list-style-position.

For a comprehensive list of display property values, refer to the CSS Display | MDN.

Understand the CSS display Property with Examples on GreatFrontEnd

46. How Do relative, fixed, absolute, sticky, and static Positioning Differ?

In CSS, an element's positioning is determined by its position property, which can be set to relative, fixed, absolute, sticky, or static. Here's how each behaves:

• static: The default positioning. Elements flow naturally within the document. The top, right, bottom, left, and z-index properties have no effect.

• relative: The element is positioned relative to its normal position. Adjustments using top, right, bottom, or left move the element without affecting the layout of surrounding elements, leaving a gap where it would have been.

• absolute: The element is removed from the normal document flow and positioned relative to its nearest positioned ancestor (an ancestor with a position other than static). If no such ancestor exists, it positions relative to the initial containing block. Absolutely positioned elements do not affect the position of other elements and can have width and height specified.

• fixed: Similar to absolute, but the element is positioned relative to the viewport, meaning it stays in the same place even when the page is scrolled.

• sticky: A hybrid of relative and fixed. The element behaves like relative until it crosses a specified threshold (e.g., scroll position), after which it behaves like fixed, sticking to its position within its parent container.

Understanding these positioning schemes is vital for controlling the layout and behavior of elements, especially in responsive and dynamic designs.

Learn About Positioning Schemes in CSS on GreatFrontEnd

47. What Should You Consider When Designing for Multilingual Websites?

Designing and developing for multilingual websites involves various considerations to ensure accessibility and usability across different languages and cultures. This process is part of internationalization (i18n).

Search Engine Optimization (SEO)

• Language Attribute: Use the lang attribute on the <html> tag to specify the page's language.
• Locale in URLs: Include locale identifiers in URLs (e.g., en_US, zh_CN).
• Alternate Links: Utilize <link rel="alternate" hreflang="other_locale" href="url_for_other_locale"> to inform search engines about alternate language versions of the page.
• Fallback Pages: Provide a fallback page for unmatched languages using <link rel="alternate" href="url_for_fallback" hreflang="x-default" />.

Locale vs. Language

• Locale: Controls regional settings like number formats, dates, and times, which may vary within a language.
• Language Variations: Recognize that widely spoken languages have different dialects and regional variations (e.g., en-US vs. en-GB, zh-CN vs. zh-TW).

Locale Prediction and Flexibility

• Automatic Detection: Servers can detect a visitor's locale using HTTP Accept-Language headers and IP addresses.
• User Control: Allow users to easily change their preferred language and locale settings to account for inaccuracies in automatic detection.

Text Length and Layout

• Variable Lengths: Be aware that translations can alter text length, potentially affecting layout and causing overflow issues.
• Design Flexibility: Avoid rigid designs that cannot accommodate varying text lengths, especially for headings, labels, and buttons.

Reading Direction

• Left-to-Right (LTR) vs. Right-to-Left (RTL): Accommodate different text directions, such as Hebrew and Arabic, by designing flexible layouts that can adapt to both LTR and RTL orientations.

Avoid Concatenating Translated Strings

• Dynamic Content: Instead of concatenating strings (e.g., "The date today is " + date), use template strings with parameter substitution to accommodate different grammar structures across languages.

  Example:

  // English
  const message = `I will travel on ${date}`;
  
  // Chinese
  const message = `我会在${date}出发`;

Formatting Dates and Currencies

• Regional Formats: Adapt date and currency formats to match regional conventions (e.g., "May 31, 2012" in the U.S. vs. "31 May 2012" in Europe).

Text in Images

• Scalability Issues: Avoid embedding text within images, as it complicates translation and accessibility. Use text elements styled with CSS instead to allow for easier localization.

Cultural Perceptions of Color

• Color Sensitivity: Be mindful that colors can carry different meanings and emotions across cultures. Choose color schemes that are culturally appropriate and inclusive.

Understand Multilingual Design Considerations on GreatFrontEnd

48. How Do block, inline, and inline-block Display Types Differ?

The display property in CSS determines how elements are rendered on the page. The block, inline, and inline-block values have distinct behaviors and use cases:

Learn the Differences Between block, inline, and inline-block on GreatFrontEnd

49. When Would You Prefer translate() Over Absolute Positioning, or Vice Versa?

The translate() function is a part of the CSS transform property and offers a different approach to positioning compared to absolute positioning. Here's why you might choose one over the other:

• Using translate():

  • Flow Preservation: Elements remain in their original position within the document flow, similar to position: relative.
  • Performance Benefits: Modifying transform or opacity does not trigger browser reflows or repaints; instead, it initiates a composition layer. This results in smoother and more efficient animations, as translate() leverages the GPU for rendering.
  • Layout Stability: The surrounding layout remains unaffected since the element's space is preserved.
  .element {
    transform: translateX(50px);
  }

• Using absolute Positioning:

  • Flow Removal: The element is taken out of the normal document flow, and its position is calculated relative to the nearest positioned ancestor or the viewport.
  • Reflow Trigger: Changing an element's absolute position can cause the browser to recalculate the layout (reflow), which is more CPU-intensive.
  • Overlapping Control: Useful for precise placement of elements without affecting other elements' positions.
  .element {
    position: absolute;
    top: 20px;
    left: 30px;
  }

Why Choose translate()?

For animations and dynamic movements where performance and smoothness are critical, translate() is more efficient. It avoids the costly reflows associated with changing layout-affecting properties like top and left.

Why Choose absolute Positioning?

When you need to position elements precisely without regard to their original place in the document flow, absolute positioning is the way to go. It's essential for creating overlays, modals, and tooltips that need to appear in specific locations on the screen.

Understand When to Use translate() vs. Absolute Positioning on GreatFrontEnd

50. What Does * { box-sizing: border-box; } Do and What Are Its Advantages?

Applying * { box-sizing: border-box; } in your CSS ensures that all elements on the page use the border-box model for calculating their width and height.

What It Does

By default, elements use box-sizing: content-box, where the width and height only account for the content area. When you set box-sizing: border-box, the width and height properties include the element's padding and border, but not the margin.

Comparison Table

Advantages

• Intuitive Sizing: Including padding and border within the width and height makes it easier to calculate the size of elements, aligning more closely with designers' expectations.
• Simplified Layouts: Prevents unexpected sizing issues, especially when adding padding or border to elements, as it doesn't alter the total size.
• Consistency Across Frameworks: Many CSS frameworks like Bootstrap, Tailwind, and Bulma set box-sizing: border-box globally to maintain consistency and predictability in element sizing.

Explore What * { box-sizing: border-box; } Does and Its Benefits on GreatFrontEnd

Additional HTML Interview Questions

The following HTML-focused topics are among the most frequently asked in front-end interviews. They cover semantic markup, HTML5 features, meta tags, form validation, and link security — foundational areas where a precise answer often distinguishes a strong candidate from one with only surface-level familiarity.

51. What Is Semantic HTML, and Why Does It Matter?

Semantic HTML is the practice of using HTML elements that describe the meaning of their content, rather than relying on generic containers styled to resemble specific structures. Elements such as <header>, <nav>, <main>, <article>, <section>, <aside>, and <footer> convey the role of the content they contain, while <div> and <span> are non-semantic and carry no inherent meaning.

<!-- Non-semantic: the purpose of each container is not expressed in the markup -->
<div class="header">
  <div class="nav">...</div>
</div>
<div class="main">
  <div class="article">...</div>
</div>
<div class="footer">...</div>

<!-- Semantic: the markup itself describes the page structure -->
<header>
  <nav>...</nav>
</header>
<main>
  <article>...</article>
</main>
<footer>...</footer>

Benefits of semantic HTML include:

• Accessibility: Screen readers use semantic elements to build a navigable outline of the page. Users can jump directly to <nav>, <main>, or landmark regions using assistive-technology shortcuts.
• SEO: Search engines rely on semantic structure to understand the hierarchy and importance of content, which supports more accurate indexing.
• Maintainability: Semantic markup is self-documenting, making code easier to read, review, and refactor.
• Default behavior: Many semantic elements come with built-in behavior. <button>, for example, is keyboard-accessible, submits forms, and respects the operating system's focus styles without additional JavaScript or CSS.

What interviewers look for: A strong answer names concrete semantic elements and explains their impact on assistive technology and SEO, rather than describing semantic HTML as simply "cleaner code." Awareness that <div> and <span> remain the correct choice when no semantic element applies is equally important — overusing semantic tags where they do not fit is as problematic as avoiding them.

Commonly overlooked nuance: Semantic HTML is not only about choosing the right tag; it is about the accessibility tree the browser constructs from the markup. A <div role="button"> is semantically a button to assistive technology but loses native keyboard activation, focus styling, and form-submission behavior, making <button> strictly preferable whenever it applies.

52. What Are the Key Features of HTML5, and Why Is the Doctype So Simple?

HTML5 became the current W3C standard in 2014 and has continued to evolve as part of the WHATWG HTML Living Standard. It introduced several major improvements over earlier versions of HTML.

The simplified <!DOCTYPE html>

HTML5 decouples the doctype from the legacy SGML and XHTML DTD system. A single line — <!DOCTYPE html> — is all that is required at the top of every HTML5 document and instructs the browser to render the page in standards mode.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Document</title>
  </head>
  <body>
    ...
  </body>
</html>

Key HTML5 features

• Semantic elements: <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>, <figure>, <time>, and others.
• Native multimedia: <audio> and <video> elements remove the need for browser plugins such as Flash.
• Graphics: <canvas> for bitmap rendering and native SVG support for vector graphics.
• Form enhancements: New input types (email, url, number, date, color, range, tel, search) and validation attributes (required, pattern, min, max).
• Storage APIs: localStorage and sessionStorage for client-side key-value storage.
• Offline and networking: Service Workers and the Cache API for offline-capable applications, and the Fetch API for HTTP requests.
• Concurrency: Web Workers for running scripts on background threads.
• Additional browser capabilities: Geolocation, Drag and Drop, and the History API — features that previously required third-party libraries.

What interviewers look for: A strong answer groups features by category rather than listing them at random, and demonstrates awareness that HTML is now a Living Standard maintained by the WHATWG rather than a versioned specification. Candidates who can tie features to practical use cases — for example, "<canvas> for interactive graphics, <video> for native playback" — demonstrate applied understanding rather than rote memorization.

Commonly overlooked nuance: The <!DOCTYPE html> declaration is case-insensitive but must still appear as the very first content in the document. Any whitespace or markup before it can trigger quirks mode in some browsers, producing subtle layout and box-model differences that are difficult to debug after the fact.

53. How Do HTML Meta Tags Work, and Which Ones Matter Most for SEO and Responsive Design?

Meta tags are instructions placed within the <head> of an HTML document that describe the page to browsers, search engines, and social platforms. They are not visible to users directly but significantly influence how the page is rendered, discovered, and shared.

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta
    name="description"
    content="A concise summary of the page, typically 150-160 characters." />
  <meta name="robots" content="index, follow" />

  <!-- Open Graph for social sharing -->
  <meta property="og:title" content="Page Title" />
  <meta
    property="og:description"
    content="Description shown when the page is shared." />
  <meta property="og:image" content="https://example.com/preview.png" />
  <meta property="og:type" content="website" />

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image" />
</head>

Key meta tags and their purpose:

• charset="UTF-8" declares the character encoding. It must appear within the first 1024 bytes of the document, so it is conventionally the first element in the <head>.
• name="viewport" controls layout on mobile devices. Without it, mobile browsers fall back to a desktop-width rendering and zoom out. The canonical value is width=device-width, initial-scale=1.
• name="description" provides the summary that search engines may display in result listings. It does not directly influence rankings, but a compelling description improves click-through rate.
• name="robots" instructs crawlers whether to index the page and follow its links. Common values include index, noindex, follow, and nofollow.
• Open Graph (og:*) and Twitter Card tags control how the page appears when shared on social platforms, including the preview title, description, and image.

What interviewers look for: A strong answer separates the viewport meta tag (critical for responsive rendering) from SEO-focused tags (description, robots) and social-sharing tags (Open Graph, Twitter). Distinguishing name="description" (a search-engine hint) from og:description (a social-sharing hint) demonstrates practical familiarity with the ecosystem.

Commonly overlooked nuance: The keywords meta tag has been ignored by major search engines, including Google, since 2009 — citing it as an SEO tool is a signal of outdated material. The viewport meta tag is also load-bearing for Core Web Vitals; an incorrect value can regress Cumulative Layout Shift on mobile devices even when the page appears visually correct.

54. How Does HTML5 Form Validation Work Without JavaScript?

HTML5 introduced native, browser-provided form validation through a combination of input types, attributes, and the Constraint Validation API. This allows basic client-side validation to be expressed declaratively in markup, with no JavaScript required for common cases.

<form>
  <label>
    Email
    <input type="email" name="email" required />
  </label>

  <label>
    Password (8+ characters, at least one number)
    <input
      type="password"
      name="password"
      required
      minlength="8"
      pattern="^(?=.*\d).{8,}$" />
  </label>

  <label>
    Age (18-100)
    <input type="number" name="age" min="18" max="100" required />
  </label>

  <label>
    Website (optional)
    <input type="url" name="website" />
  </label>

  <button type="submit">Sign up</button>
</form>

Native validation features include:

• Input types that apply their own format checks: email, url, number, tel, date, color, range.
• Constraint attributes: required, minlength, maxlength, min, max, step, and pattern (a regular expression).
• The Constraint Validation API, which exposes JavaScript hooks such as element.checkValidity(), element.reportValidity(), and element.setCustomValidity(message) for customising error messages without replacing the native behavior.
• The :valid, :invalid, :required, and :optional pseudo-classes, which allow styling based on validation state directly from CSS.

What interviewers look for: A strong answer distinguishes between the three layers — input types (which enforce a format), constraint attributes (which enforce bounds), and the Constraint Validation API (which allows programmatic customization without sacrificing native behavior). Applying novalidate on the form and reimplementing everything in JavaScript is a common anti-pattern worth identifying.

Commonly overlooked nuance: Native validation messages are localized to the user's browser language, styled consistently with the operating system, and positioned near the offending field — benefits that are difficult to replicate with a custom JavaScript solution. Client-side validation also never replaces server-side validation; it is a user-experience enhancement, not a security measure, because tampering with the DOM trivially bypasses any client-side check.

55. Why Should target="_blank" Links Include rel="noopener noreferrer"?

Opening a link in a new tab using target="_blank" has historically introduced both security and performance concerns. Modern best practice addresses them by adding the rel="noopener noreferrer" attribute.

<!-- Always use noopener (and typically noreferrer) with target="_blank" -->
<a
  href="https://external-site.example"
  target="_blank"
  rel="noopener noreferrer">
  External site
</a>

What each keyword does:

• noopener prevents the newly opened page from accessing the original page through window.opener. Without it, the destination page can redirect the opener to a phishing site via window.opener.location = '...' — a technique known as reverse tabnabbing.
• noreferrer prevents the browser from sending the Referer header to the destination, and also implies noopener. It is useful when the originating URL should not be disclosed to the third-party site.

Modern browser defaults:

All major browsers (Chrome, Firefox, Safari, and Edge) now set rel="noopener" implicitly when target="_blank" is used. This change was rolled out progressively between 2020 and 2022. However, explicitly declaring rel="noopener noreferrer" remains recommended because:

• It preserves protection for users of older browsers and embedded WebView components that may not have adopted the default.
• It makes the security intent explicit and documents why the attribute exists for other developers.
• noreferrer must still be added explicitly when the Referer header should be suppressed.

What interviewers look for: A strong answer clearly explains the reverse-tabnabbing attack and distinguishes the roles of noopener and noreferrer. Awareness of the modern implicit default demonstrates currency with the platform without treating the explicit attribute as optional.

Commonly overlooked nuance: rel="noopener" only affects the opener relationship. It does not prevent the destination page from performing other actions, such as opening popups, attempting fingerprinting, or tracking the user. Stronger cross-origin isolation at the tab level requires additional mechanisms, such as the Cross-Origin-Opener-Policy HTTP header.

56. What Are the Differences Between <article>, <section>, and <div>?

Although these three elements can render identically by default, they convey distinct semantic meanings that influence the accessibility tree and the document outline.

• <article> represents a self-contained, independently distributable piece of content, such as a blog post, product card, or comment. A helpful test is to consider whether the content would still make sense when syndicated or displayed in isolation.
• <section> represents a thematic grouping of content that belongs under a heading. A <section> without an accompanying heading is almost always the wrong element.
• <div> is a generic container with no semantic meaning, intended as a styling or scripting hook when no semantic element applies.

<article>
  <h2>How the event loop works</h2>
  <section>
    <h3>The call stack</h3>
    <p>...</p>
  </section>
  <section>
    <h3>The microtask queue</h3>
    <p>...</p>
  </section>
</article>

What interviewers look for: A strong answer considers whether a <section> has an appropriate heading before using it. Using <section> in place of <nav>, or applying <article> to decorative UI, indicates the element names have been memorized without an understanding of how assistive technologies interpret them.

Commonly overlooked nuance: These elements are frequently described as interchangeable semantic containers, but a <section> without an accessible name produces a generic region with no navigational value. Nesting <article> within another <article> also implicitly demotes the inner element within the document outline.

HTML, CSS, and JavaScript Integration Questions

Front-end interviews increasingly focus on how the three core technologies interact rather than on any one in isolation. The following questions examine the boundaries where HTML, CSS, and JavaScript meet — where subtle behaviors of one affect the others in ways that can surface as hard-to-diagnose bugs in production.

57. Why Is It Generally a Good Idea to Place CSS <link> Tags in <head> and JavaScript <script> Tags Just Before </body>?

The placement of stylesheet and script tags directly affects how quickly a browser can display content to the user. The guidance traces back to the browser's rendering pipeline and the distinction between render-blocking and parser-blocking resources.

CSS in <head>

• The browser cannot paint any content until it has constructed both the DOM (from HTML) and the CSSOM (from CSS). Referencing stylesheets as early as possible allows the CSSOM to be built in parallel with HTML parsing.
• Placing CSS at the top prevents a flash of unstyled content — a brief moment when the browser renders the page using default styles before the author stylesheet loads.
• Modern browsers block the first paint on any CSS referenced in the <head>, so delaying CSS also delays the visible render.

JavaScript just before </body>

• Classic <script> tags are parser-blocking. When the browser encounters one during HTML parsing, it must pause parsing, download the script, execute it, and only then resume.
• Placing scripts at the end of <body> allows the entire document to be parsed and the initial paint to occur before any script runs.
• Scripts placed at the end also have immediate access to the DOM elements they may query; earlier placement risks running before the target elements exist in the document.

Modern alternatives with async and defer

<head>
  <!-- CSS blocks rendering, so load as early as possible -->
  <link rel="stylesheet" href="styles.css" />

  <!-- defer: downloads in parallel, runs after parsing completes, preserves order -->
  <script src="app.js" defer></script>

  <!-- async: downloads in parallel, runs as soon as available (order not guaranteed) -->
  <script src="analytics.js" async></script>
</head>

With defer, scripts can safely be placed in the <head> because they are guaranteed to run only after HTML parsing completes, in document order. This is the preferred modern approach for application scripts.

What interviewers look for: A strong answer connects placement to the critical rendering path — the rationale is not stylistic, but about enabling parallel downloads and reducing first-paint time. Awareness of defer and async as modern alternatives indicates that the classic rule is a fallback for when those attributes are not an option, not an absolute requirement.

Commonly overlooked nuance: async scripts run as soon as they are downloaded, which can occur mid-parse. If one async script depends on another, their execution order is undefined. For ordered execution — for example, a library before a script that uses it — defer is the correct choice.

58. What Is the Critical Rendering Path?

The critical rendering path is the sequence of steps the browser performs to convert HTML, CSS, and JavaScript into pixels on the screen. Understanding it is foundational to diagnosing performance issues, interpreting Core Web Vitals, and writing code that does not unnecessarily block rendering.

The five stages

1. DOM construction: The browser parses HTML into a tree of nodes called the Document Object Model.
2. CSSOM construction: The browser parses all referenced CSS into a tree of style rules called the CSS Object Model.
3. Render tree: The DOM and CSSOM are combined into a render tree that contains only the visible elements along with their computed styles. Elements hidden with display: none are excluded from the render tree; elements hidden with visibility: hidden remain in it.
4. Layout (reflow): The browser calculates the exact position and dimensions of each element in the render tree.
5. Paint: The browser fills in pixels for each element — text, colors, images, borders, and shadows. Complex visual effects may be split across compositor layers for efficient re-rendering.

How HTML, CSS, and JavaScript each affect the path

• HTML parsing can be paused by synchronous <script> tags until each script has downloaded and executed.
• CSS is render-blocking: the browser cannot paint until all CSS in the <head> is downloaded and parsed. CSS is also parser-blocking for any scripts that follow, because scripts may query computed styles.
• JavaScript is parser-blocking by default, but async and defer allow parallel downloading. defer preserves ordering and runs before DOMContentLoaded; async runs as soon as the download completes, in any order.

Strategies for optimizing the critical rendering path

• Minimize the number and size of critical resources (HTML, CSS, and blocking JavaScript).
• Inline critical CSS for the initial viewport and defer the rest using <link rel="preload"> or the media attribute.
• Use defer or async on scripts that do not need to run synchronously.
• Apply <link rel="preconnect"> and <link rel="preload"> hints to give the browser early information about which resources will be needed.

What interviewers look for: A strong answer names the five stages in order and identifies which resources block which stages. Connecting the critical rendering path to Core Web Vitals — particularly Largest Contentful Paint — demonstrates an understanding of the practical impact on measurable performance metrics.

Commonly overlooked nuance: Layout and paint are triggered not only during the initial load but on almost every JavaScript-driven style or DOM change. Reading offsetHeight immediately after every write forces a condition called layout thrashing, which can cause significant jank. Batching reads and writes, or scheduling work inside requestAnimationFrame, avoids the issue.

59. How Do display: none, visibility: hidden, and opacity: 0 Differ for JavaScript APIs and Accessibility?

All three techniques hide content visually, but they have substantially different effects on layout, interactivity, and assistive technology.

* aria-hidden affects only the accessibility tree; it does not hide the element visually or remove it from the focus order. Combining aria-hidden="true" with tabindex="-1" is often required to fully remove an element from assistive-technology interaction.

Key implications for JavaScript and accessibility:

• An element with opacity: 0 remains fully interactive — it still receives pointer events, still enters the tab order, and is still read aloud by screen readers. Using it alone as a hiding technique is a frequent source of accessibility bugs.
• An element with display: none cannot be measured through getBoundingClientRect or offsetWidth, and scroll positions cannot be computed while it is hidden. A common pattern when measurement is required before display is to temporarily apply visibility: hidden (which retains layout) rather than display: none.
• Removing keyboard focusability and removing accessibility exposure are independent concerns: tabindex="-1" addresses focus only, while aria-hidden="true" addresses the accessibility tree only.

What interviewers look for: Recognition that "hidden" is not a single concept. Strong answers distinguish between visual rendering, layout occupation, focusability, and accessibility-tree exposure, and select a technique that matches the intent. For transient hiding of an actionable element, the hidden attribute or display: none is usually correct; for visual-only transitions, pairing opacity with visibility at the end of the transition is safer.

Commonly overlooked nuance: Combining opacity: 0 with pointer-events: none addresses pointer input but does not remove the element from keyboard focus or screen-reader output. Accessible hiding requires attention to all four dimensions, not only visual appearance.

60. Why Does Updating innerHTML Break Event Listeners Attached to Child Elements?

This is a classic question at the intersection of HTML and JavaScript, and its failure mode is particularly subtle: no error is thrown, and the affected listeners simply stop firing.

When a value is assigned to innerHTML, the browser performs the following steps:

1. Parses the string as HTML.
2. Discards the existing descendant DOM nodes, along with all associated state — event listeners, dataset entries, and custom properties.
3. Inserts newly created nodes that happen to match the provided markup.

const list = document.getElementById('list');
list.querySelector('.item').addEventListener('click', handleClick);

// The listener is still attached and functional at this point.

list.innerHTML += '<li class="item">New item</li>';

// The original <li> has been destroyed and replaced; the listener no longer fires.

Recommended approaches, in order of preference:

1. Event delegation on a stable parent element:
   list.addEventListener('click', (e) => {
     if (e.target.closest('.item')) handleClick(e);
   });

2. DOM methods that preserve existing nodes, such as appendChild, insertAdjacentHTML, or replaceChildren.
3. Re-attaching listeners after each innerHTML update, which is fragile and generally discouraged.

What interviewers look for: Recognition that reassigning innerHTML destroys existing descendants rather than simply updating the DOM. Adopting event delegation as the primary solution demonstrates senior-level understanding, whereas relying on re-attaching listeners after each update reflects a reactive rather than architectural approach.

61. How Does Focus Management Change When JavaScript Dynamically Inserts New Content?

Single-page applications, modals, toasts, and client-side route transitions all share a common challenge: the user's focus and the screen reader's reading context do not follow DOM changes automatically. They must be managed explicitly.

Three common scenarios illustrate the distinction:

1. Route transitions in a single-page application. Following navigation, focus should be moved to the new page's primary heading (<h1>) or to a <main tabindex="-1">, and the new page title should be announced through a live region. Without this, a screen reader user may remain positioned at the previous page's footer with no indication that the view has changed.

   router.afterEach(() => {
     document.querySelector('main').focus();
     document.title = newTitle;
   });

2. Modals and dialogs. Focus should be trapped inside the dialog while it is open and returned to the triggering element when the dialog closes. The native <dialog> element manages this behavior automatically; custom modal implementations must replicate it manually.

   const trigger = document.activeElement;
   dialog.showModal();
   dialog.addEventListener('close', () => trigger.focus());

3. Inline content insertion, such as form validation errors, search results, or toast notifications. Focus should generally remain with the user, who is often in the middle of typing. Instead, a live region (aria-live="polite" for results, role="alert" for errors) should be used to announce the update without disrupting the current interaction.