1. Explain the difference between responsive and adaptive web design.
Answer: Responsive web design uses fluid grids, flexible images, and CSS media queries to create a single layout that adjusts smoothly to any screen size. Adaptive web design uses static layouts designed for specific screen sizes, and the appropriate layout is served based on the user's device.

2. What is the purpose of the alt attribute in an image tag, and why is it important for accessibility?
Answer: The alt attribute provides alternative text for an image if it cannot be displayed. It is crucial for accessibility because screen readers use this text to describe the image to visually impaired users, and it also helps with SEO and displays in place of broken images.

3. Briefly describe the CSS Box Model and its components.
Answer: The CSS Box Model consists of four components:

• Content: The actual text, image, or media content.

• Padding: The space between the content and the border.

• Border: The line that surrounds the padding and content.

• Margin: The space outside the border that separates the element from other elements.

4. What is the Document Object Model (DOM) in the context of web development?
Answer: The DOM is a programming interface that represents the structure of an HTML or XML document as a tree of objects. It allows JavaScript to dynamically access, manipulate, and update the content, structure, and style of a web page.

5. Explain the concept of "Mobile-First" design. What are its advantages?
Answer: Mobile-First design is an approach where you start designing and developing for mobile devices first, then enhance the layout for larger screens using CSS media queries.
Advantages:

• Ensures better performance on mobile devices.

• Forces prioritization of essential content and features.

• Provides a solid foundation that scales up effectively.

6. What are media queries in CSS? Provide a simple example.
Answer: Media queries are CSS techniques that apply styles based on device characteristics like screen width, height, or orientation.
Example:

css

@media (max-width: 768px) {

  body {

    background-color: lightblue;

  }

}

7. Differentiate between == and === operators in JavaScript.
Answer: == (loose equality) compares values for equality after type conversion.

=== (strict equality) compares both value and data type without type conversion.
Example: '5' == 5 returns true, but '5' === 5 returns false.

8. What is the role of a CSS framework (like Bootstrap)? Mention one advantage and one disadvantage.
Answer: A CSS framework provides pre-designed components, grids, and styles to speed up front-end development.

• Advantage: Saves development time with ready-to-use, responsive components.

• Disadvantage: Can lead to generic-looking websites and include unused code, increasing file size.

9. Explain what a "call-to-action" (CTA) is and why it is a critical element in web design.
Answer: A CTA is a prompt that encourages users to take a specific action (e.g., "Sign Up," "Buy Now"). It is critical because it guides users toward conversions, improves user engagement, and helps achieve business goals.

10. What is the importance of website accessibility (a11y)? Name one guideline from the Web Content Accessibility Guidelines (WCAG).
Answer: Website accessibility ensures that people with disabilities can perceive, understand, and interact with web content. WCAG Guideline: Provide text alternatives for non-text content (e.g., using alt attributes for images).