HTML, CSS and Bootstrap Interview Questions

1. HTML stands for HyperText Markup Language and is used to create the structure of a webpage. It allows the creation of various elements such as headings, paragraphs, images, links, buttons, forms, and tables.

2. Semantic tags provide context to the content they enclose. Examples include header, nav, main, section, article, and footer. Using semantic tags makes the code more understandable and aids accessibility and SEO.

3. div and span serve different purposes. div is a block-level element, often starting on a new line, while span is an inline element that stays on the same line. However, CSS can modify their behavior.

4. An id is used to uniquely identify a single element, while a class can be applied to multiple elements. In CSS, ids are selected using #, and classes using ..

5. The CSS box model describes how the size of an HTML element is determined. It includes content, padding, border, and margin. Understanding this model is crucial for anticipating an element's final size.

6. CSS specificity governs which style rules take precedence when multiple rules apply to the same element. The order of precedence, from highest to lowest, is inline style, id, class, and element.

7. Flexbox is a CSS layout system that enables the arrangement of elements in a row or column. It simplifies tasks like creating navigation bars, cards, buttons, and centering elements.

8. justify-content and align-items are both flexbox properties, but they operate on different axes. justify-content affects the main axis (usually horizontal), while align-items affects the cross axis (usually vertical).

9. flex-wrap allows flex items to wrap onto the next line when there isn't enough space on the current line. This is useful for creating responsive card layouts.

10. position: relative keeps an element within the normal document flow and provides a positioning reference for its descendants. In contrast, position: absolute removes the element from the flow and positions it relative to its nearest positioned ancestor.

11. Media queries allow the application of different CSS styles based on conditions like screen width. They are essential for creating responsive websites.

12. Responsive web design ensures a website functions well across various screen sizes, including mobile, tablet, and desktop. Techniques include using Flexbox, CSS Grid, media queries, and responsive units.

13. %, vw, em, and rem are relative CSS units. % is relative to another size (like the parent's size), vw is relative to the viewport width, em is relative to the font size of the element or its context, and rem is relative to the root HTML element's font size.

14. display: none removes an element from the layout, visibility: hidden hides the element while preserving its space, and opacity: 0 makes the element completely transparent but still allows it to occupy space and respond to user interactions.