Frontend Interview Questions: HTML, CSS, JavaScript

When preparing for frontend interviews, the holy trinity of web development—HTML, CSS, and JavaScript—remains the foundation of any technical assessment. Whether you are aiming for a junior role or a senior frontend engineer position, demonstrating a deep understanding of these core technologies is essential. In this guide, we will explore some of the most common and challenging interview questions to help you prepare.

The Core Triangle

Before diving into specific questions, it's crucial to understand how these three technologies interact to create a complete webpage experience.

• HTML provides the semantic structure and content.
• CSS dictates the presentation, layout, and visual styling.
• JavaScript introduces dynamic behavior, interactivity, and logic.

Let's look at some top interview questions for each category.

HTML Interview Questions

1. What are Semantic HTML elements and why are they important?

Semantic HTML means using HTML elements for their given purpose. Examples include <article>, <section>, <nav>, and <header> instead of using <div> for everything. Why it's important:

• Accessibility: Screen readers rely on semantic tags to interpret the structure of a webpage.
• SEO: Search engines use semantic elements to better understand the content.
• Maintainability: Code is easier to read and maintain for developers.

2. Explain the difference between localStorage, sessionStorage, and cookies.

• localStorage: Stores data with no expiration date. Data persists even after the browser is closed. Capacity is typically around 5-10MB.
• sessionStorage: Stores data for one session. Data is cleared when the page session ends (e.g., closing the tab).
• cookies: Small pieces of data sent with every HTTP request. Used primarily for server-side reading (like authentication). Capacity is limited to 4KB.

CSS Interview Questions

3. Explain the CSS Box Model.

The CSS box model is a box that wraps around every HTML element. It consists of:

• Content: The actual content of the box, where text and images appear.
• Padding: Clears an area around the content. It is transparent.
• Border: A border that goes around the padding and content.
• Margin: Clears an area outside the border. It is transparent.

Understanding box-sizing: border-box; is often a follow-up question, as it includes padding and borders in the element's total width and height.

4. What is the difference between Flexbox and CSS Grid?

• Flexbox is designed for one-dimensional layouts—either a row or a column. It excels at distributing space and aligning items within a single dimension.
• CSS Grid is a two-dimensional layout system. It handles both columns and rows simultaneously, making it ideal for overall page layout structuring.

JavaScript Interview Questions

5. What are Closures in JavaScript?

A closure is a feature where an inner function has access to the outer (enclosing) function's variables—a scope chain. It has three scope chains:

• Its own scope.
• Outer function's variables.
• Global variables.

function makeCounter() {
  let count = 0;
  return function() {
    return count++;
  };
}

const counter = makeCounter();
console.log(counter()); // 0
console.log(counter()); // 1

6. Explain Event Delegation.

Event delegation is a technique involving adding a single event listener to a parent element instead of adding multiple event listeners to individual child elements. It leverages the concept of event bubbling, where an event triggered on a child element bubbles up the DOM tree to its parent.

document.getElementById('parent-list').addEventListener('click', function(e) {
  if(e.target && e.target.nodeName == 'LI') {
    console.log('List item clicked: ', e.target.id);
  }
});

7. What is the Event Loop?

The event loop is a mechanism that allows JavaScript to perform non-blocking operations despite being single-threaded. It constantly checks the call stack to see if it's empty, and if so, it looks at the callback queue. If there are pending callbacks, it pushes them to the call stack for execution.

Conclusion

Mastering HTML, CSS, and JavaScript is non-negotiable for a frontend developer. Interviews often test not just your ability to write code, but your understanding of why things work the way they do under the hood.

If you're looking to put your knowledge to the test, totop.app offers guided mock tests and an AI Interview Agent designed specifically to help software engineers practice and perfect their interview skills. Keep coding, keep practicing, and you'll nail that interview!