Essential Front-End Interview Topics Explained

Essential Front-End Interview Topics Explained
  1. What is the difference between HTML and HTML5?

    HTML5 stands as the most recent version of HTML, introducing new elements, attributes, and APIs when compared to older HTML versions.

  2. Explain the CSS box model.

    The CSS box model describes how elements are displayed on a webpage. It consists of content, padding, border, and margin.

  3. What are CSS media queries?

    Media queries allow you to apply different styles based on the user's device characteristics, such as screen size, resolution, or orientation.

  4. What is the difference between margin and padding?

    Padding is the space between the content and the border, while margin is the space between the border and surrounding elements.

  5. Explain the concept of responsive web design.

    Responsive web design ensures that a website adapts and displays properly on various devices and screen sizes.

  6. What is a CSS preprocessor?

    CSS preprocessors like SASS and LESS extend CSS with features such as variables, mixins, and nesting, making the code more maintainable and efficient.

  7. What is event delegation in JavaScript?

    Event delegation is a technique where you attach an event listener to a parent element to handle events for its child elements.

  8. What is the purpose of the "use strict" directive in JavaScript?

    "use strict" enables strict mode in JavaScript, which helps identify and fix common coding mistakes, and makes the code more secure.

  9. Explain the concept of closures in JavaScript.

    Closures allow functions to remember the variables from the scope where they were created, even if the function is executed in a different scope.

  10. What is the Virtual DOM in React?

    The Virtual DOM is a virtual representation of the actual DOM in React, which is used for efficient updates and rendering.

  11. What are the differences between class components and functional components in React?

    Class components use a class-based syntax and have access to lifecycle methods, while functional components are written as functions and are generally more lightweight.

  12. What is the purpose of the "key" prop in React lists?

    The "key" prop is used to help React identify which items have changed, been added, or been removed from a list, improving performance and avoiding potential rendering issues.