15 Frontend Interview Questions & Answers

1. What is a frontend framework? A frontend framework is a collection of pre-written code and tools that developers can use to build web applications more efficiently. It provides a structure and a set of conventions to follow, which can save time and reduce the amount of code that needs to be written.
2. What is responsive design and why is it important? Responsive design is an approach to web design that allows a website to adapt to different screen sizes and device types. It is important because it ensures that a website looks and functions properly on all devices, including desktops, tablets, and smartphones. Example: Bootstrap is a popular responsive design framework.
3. What is the box model in CSS? The box model is a set of rules that describes how elements are rendered on a web page. It consists of the content area, padding, border, and margin. Example:

4. What is the difference between class and ID in CSS? Classes are used to apply a style to multiple elements on a page, while IDs are used to apply a style to a single element. Example:

5. What is a media query in CSS? A media query is a feature in CSS that allows you to apply styles based on the characteristics of the device or browser being used to view the page. Example:

6. What is the difference between inline and block elements in HTML? Inline elements are displayed within the flow of a paragraph and only take up as much width as necessary, while block elements start on a new line and take up the full width of their container. Example:

7. What is the difference between the <div> and <span> elements in HTML? The <div> element is a block-level container used for grouping and organizing content, while the <span> element is an inline-level container used for grouping and styling text. Example:

8. What is a pseudo-class in CSS? A pseudo-class is a keyword added to a selector that specifies a state or action of an element. Example:

9. What is the difference between margin and padding in CSS? Margin is the space outside an element, while padding is the space inside an element. Example:

10. What is the difference between an <img> tag and a <picture> tag in HTML? The <img> tag is used to display a single image on a web page, while the <picture> tag is used to display different images based on the device’s resolution or screen size. Example: