1. What is the effect of a :hover CSS selector?

A. It changes an element when clicked B. It changes an element when the mouse pointer is over it C. It changes an element when focused by keyboard D. It changes the element after a timeout

2. Which CSS property is primarily used to change the layout direction in Flexbox?

A. grid-template-columns B. flex-direction C. display: block D. float

3. What is the primary role of HTML in web development?

A. Styling the content B. Structuring the content C. Adding interactivity D. Managing server requests

4. Which of the following is a correct order of the box model layers from innermost to outermost?

A. margin → border → padding → content B. content → padding → border → margin C. padding → content → margin → border D. border → margin → padding → content

5. What is a content hierarchy in web design?

A. The order of downloading images B. The organization of information to indicate importance C. The CSS style sheet order D. The order of JavaScript execution

6. How does semantic HTML improve accessibility?

A. By adding visual effects B. By providing meaningful tags that assist screen readers C. By making the website load faster D. By preventing copy-paste

7. When should you ideally use CSS Grid over Flexbox?

A. For linear layouts B. For two-dimensional layouts with rows and columns C. For simple button effects D. For styling text

8. What is cross-browser testing primarily used for?

A. To optimize the website for search engines B. To verify that a website works correctly across different browsers C. To translate website content into multiple languages D. To minify CSS and JavaScript files

9. What does the #main-nav selector in CSS specifically target?

A. Elements with the class "main-nav" B. Elements of any type with ID equal to "main-nav" C. Main navigation links by default D. All navigation elements on the page

10. Why does valid HTML matter?

A. It ensures compatibility, accessibility, and maintainability of web pages B. It makes the page colorful C. It reduces server load D. It increases page views

11. What is the role of the CSS display property set to "flex"?

A. It enables grid layout B. It applies Flexbox layout to an element C. It hides an element D. It makes the element inline

12. Why is it important to use semantic HTML tags in web development?

A. They improve website loading speed B. They enhance accessibility and SEO C. They allow for embedded scripting D. They reduce the file size of the webpage

13. Which CSS selector targets elements with a specific ID?

A. .menu-item B. *menu-item C. #header D. header

14. How would a developer ensure the navigation links are aligned horizontally in CSS?

A. Use Flexbox with flex-direction: row B. Use Grid with grid-template-rows C. Use float: left on the links D. Use margin: auto

15. What is the recommended tag to group navigation links?

A. <main> B. <nav> C. <footer> D. <section>

16. Which of these is NOT a semantic HTML tag?

A. <article> B. <section> C. <font> D. <header>

17. What is a key reason to avoid using the <font> tag in modern HTML?

A. It is deprecated and does not separate content from presentation B. It is only supported in Firefox C. It is slower to load D. It conflicts with JavaScript

18. What is a key advantage of using media queries in responsive web design?

A. To add animations to a webpage B. To load different JavaScript files depending on the browser C. To style a website differently based on device screen size D. To compress CSS files automatically

19. Which media query breakpoint typically applies styles for medium screens, like tablets?

A. ≤ 600px B. 601px – 900px C. ≥ 901px D. ≥ 1200px

20. Which tag is considered semantic and is used to define the main content of a webpage?

A. <div> B. <header> C. <main> D. <section>

21. Why is cross-browser testing crucial?

A. To increase SEO ranking B. To ensure consistent appearance and function across different browsers C. To improve server performance D. To design the site layout

22. Why is website footer an important section?

A. It prevents the page from loading slowly B. It contains information such as copyright, contact, and important links C. It is required by all HTML validators D. It automatically adapts to mobile layouts

23. What does the class selector ".menu-item" target in CSS?

A. An element with ID "menu-item" B. All elements with class "menu-item" C. All <menu-item> tags D. The first element called "menu-item"

24. Why is the <font> tag discouraged in modern HTML?

A. It is not supported by modern browsers B. It lacks flexibility compared to CSS styling C. It slows down page loading significantly D. It is only allowed in the <head> section

25. What does the ID selector "#header" target in CSS?

A. All elements with ID "header" B. The first element with class "header" C. The element with the ID "header" D. All <header> tags

26. Which of the following best describes the box model in CSS?

A. It defines margin, border, padding, and content areas B. It is used for responsive design C. It controls the font size D. It is used for database queries

27. What is the correct order of the CSS box model from inside to outside?

A. Margin → Border → Padding → Content B. Content → Padding → Border → Margin C. Padding → Content → Margin → Border D. Border → Margin → Padding → Content

28. What is a key difference between Flexbox and Grid layouts?

A. Flexbox is one-dimensional, Grid is two-dimensional B. Flexbox only works in Chrome C. Grid is deprecated D. Flexbox cannot align items

29. What is the function of the <article> tag?

A. To wrap a standalone piece of content suitable for syndication B. To create a sidebar C. To add footer content D. To group navigation links

30. Why is it important to use semantic HTML tags?

A. To make the webpage load faster B. To improve accessibility and SEO C. To make the webpage look colorful D. To allow JavaScript to run

31. How would you arrange navigation links horizontally using Flexbox?

A. By setting display: block on the parent container B. By setting display: flex and flex-direction: row on the navigation container C. By using CSS Grid with one column D. By adding float: left to each navigation link

32. What is the role of the W3C CSS Validator?

A. To check CSS files for errors and compliance with standards B. To update CSS files automatically C. To compress CSS D. To convert CSS to JavaScript

33. What advantage does the <footer> tag provide?

A. It enhances layout spacing B. It semantically defines the footer section for copyright, links, and contacts C. It makes content bold D. It adds header functionality

34. When should you prefer CSS Grid over Flexbox for layout?

A. When you want simple horizontal alignment only B. When the layout requires two-dimensional control of rows and columns C. When you want to align items vertically only D. When the layout involves only inline elements

35. What is a key consideration when writing media queries?

A. Use pixel-perfect breakpoints only B. Make breakpoints based on design and device usage patterns C. Avoid changing any layout at different widths D. Write media queries only for desktop

36. What is a benefit of using breadcrumb navigation for users?

A. Provides shortcuts to the homepage B. Reduces loading time significantly C. Helps users track their location in complex sites D. Prevents unauthorized access

37. Which of the following best describes the use of an ID selector?

A. Style multiple elements with the same property B. Target a unique element in the document C. Select all elements of a certain type D. Select children of a specific element

38. Which of the following is NOT a function typically found in a website footer?

A. Displaying copyright information B. Main navigation links C. Important links (privacy policy, terms) D. Contact email

39. What does the <nav> HTML element represent?

A. A container for navigation links B. The main content C. Section titles D. Footer links

40. When would you prefer using Flexbox instead of Grid?

A. For content arranged in a single row or column B. For arranging items in both rows and columns simultaneously C. For styling background images D. For creating animations

41. What is the main advantage of using breadcrumbs in website navigation?

A. To make websites colorful B. To help users understand their location in the site hierarchy C. To add more links to the footer D. To speed up loading time

42. Which tag is traditionally used to represent a section of content about a particular topic?

A. <footer> B. <section> C. <nav> D. <header>

43. One benefit of using breadcrumbs on a website is:

A. To improve server response times B. To add decorative graphics to the page C. To help users understand their current location within site hierarchy D. To reduce the size of the navigation bar

44. Which tag would you use to add a sidebar containing supplementary information?

A. <footer> B. <nav> C. <aside> D. <header>

45. Which of the following should you include in the <header> of a webpage?

A. Site title and tagline B. Course cards C. Footer links D. Sidebar content

46. What is the purpose of the W3C HTML Validator?

A. To style the web content B. To check HTML for errors and compliance with standards C. To test cross-browser functionality D. To optimize website speed

47. What is the main purpose of using the <main> tag in HTML?

A. To define the website footer B. To contain navigation links C. To represent the central content unique to the page D. To create a sidebar with additional information

48. Why are media queries used in CSS?

A. To create media players B. To make the website responsive to different screen sizes C. To embed videos D. To change fonts

49. Which of these layout changes would you apply for screens less than or equal to 600px wide?

A. Course cards in three columns B. Navigation becomes vertical C. Sidebar stays on the left D. No changes needed

50. In which tag would you include “Quick Links” and “Office Hours” on a webpage?

A. <footer> B. <aside> C. <nav> D. <main>