1. What purpose does the <aside> tag serve in a webpage?

A. To contain the main content B. To hold content related tangentially to the main content, like sidebars C. To include navigation menus D. To create page footers only

2. Which layout technique is best for arranging items in a single dimension (row or column)?

A. CSS Grid B. Flexbox C. Float D. Positioning

3. Why is it important to have correct content hierarchy on a webpage?

A. It makes the page more colorful B. It helps users and search engines understand content structure and importance C. It reduces bandwidth D. It hides unnecessary elements

4. Which section in the webpage contains “Quick Links” and “Office Hours”?

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

5. Which CSS property allows you to apply different styles based on the screen size?

A. display B. media queries C. float D. border

6. In CSS, how are ID selectors denoted?

A. Using a hash symbol (#) before the ID name B. Using a dot (.) before the ID name C. Using brackets [] around the ID name D. Using parentheses before the ID name

7. What is one advantage of breadcrumbs on a website?

A. They improve SEO by hiding content B. They provide a clear navigation path for users C. They add decorative images D. They speed up page load times

8. Why are media queries important in responsive web design?

A. They allow the use of JavaScript to dynamically change content B. They enable different CSS styles to be applied based on screen size C. They add animations to improve user experience D. They validate the HTML and CSS code automatically

9. When should you choose CSS Grid over Flexbox for layout?

A. When aligning items in a single row or column B. When creating complex two-dimensional layouts involving rows and columns C. When only vertical alignment is needed D. When you want animations on elements

10. How many columns should the course cards display on large screens, according to the layout requirements in the assignment?

A. 1 column B. 2 columns C. 3 columns D. 4 columns

11. What is the primary purpose of semantic HTML?

A. To add decorative elements to a webpage B. To structure content in a meaningful way for browsers and assistive technologies C. To increase page load speed D. To apply CSS styles automatically

12. Which tag is used to represent an independent piece of content such as a course card?

A. <aside> B. <article> C. <div> D. <section>

13. What is a key reason why valid HTML matters?

A. It ensures faster coding B. It helps browsers render pages correctly and improves accessibility C. It reduces the need for CSS D. It makes JavaScript unnecessary

14. What does the <main> tag represent in an HTML document?

A. The website footer area B. The main content of the document unique to that page C. The navigation menu D. A sidebar section

15. What happens to navigation on screens less than or equal to 600px wide as per the responsive design instruction?

A. Navigation becomes horizontal B. Navigation becomes vertical C. Navigation is hidden entirely D. Navigation turns into a dropdown menu only

16. Which is an example of a valid semantic HTML tag?

A. <blink> B. <header> C. <center> D. <font>

17. What is one benefit of semantic HTML for accessibility?

A. It allows screen readers to better understand page structure B. It makes pages load faster on mobile devices C. It automatically fixes broken links D. It increases font sizes on all devices

18. Which tag contains the copyright and contact information on a webpage?

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

19. What is the recommended number of columns for course cards on medium screens (601px - 900px)?

A. 1 B. 2 C. 3 D. 4

20. What is cross-browser testing?

A. Testing a website's security features B. Checking a website’s appearance and functionality across different browsers C. Validating HTML and CSS code D. Testing on different operating systems only

21. What is the key difference between Flexbox and CSS Grid?

A. Flexbox is for two-dimensional layouts; Grid is for one-dimensional layouts B. Flexbox arranges items in one dimension; Grid arranges items in two dimensions C. Grid works only on large screens; Flexbox only on small screens D. Flexbox requires media queries; Grid does not

22. What is the primary purpose of media queries in CSS?

A. To add animations to elements B. To apply different styles based on device characteristics like screen size C. To format text sizes only D. To validate CSS code

23. What effect should you use to indicate a navigation link is being hovered over?

A. :active B. :visited C. :hover D. :focus

24. Which of the following is an advantage of using breadcrumbs in website navigation?

A. They reduce the number of pages on the site B. They improve the site’s SEO and help users understand their location C. They create animations on the page D. They replace the need for a footer

25. Which of the following selectors targets an element by its class attribute?

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

26. Which of the following best describes the purpose of semantic HTML tags?

A. To make webpages load faster B. To describe the structure and meaning of content C. To add decorative styles to the webpage D. To embed multimedia content

27. According to the assignment instructions, the navigation menu includes which of the following links?

A. Home, About, Courses, Contact B. Home, Services, Blog, Contact C. About, Products, Help, Login D. Courses, Contact, FAQ, Signup

28. Which of the following is NOT a semantic HTML tag?

A. <article> B. <div> C. <nav> D. <footer>

29. What does the W3C HTML Validator do?

A. It checks if your HTML meets web standards and identifies errors B. It applies CSS styles automatically C. It monitors user behavior D. It optimizes images

30. Which CSS selector targets an element by its ID attribute?

A. .header B. #header C. header D. *

31. Which CSS property controls the space outside the border of an element?

A. padding B. margin C. border-width D. height

32. When structuring a webpage, which element is used to define different sections but not independent articles?

A. <article> B. <section> C. <footer> D. <aside>

33. Why is cross-browser testing necessary?

A. To ensure all browsers display and function correctly and consistently B. To reduce file sizes C. To avoid adding styles D. To improve server speed

34. What is the correct order of the CSS box model from innermost to outermost?

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

35. For the sidebar positioning on medium screens (601px – 900px), where should it appear according to the instructions?

A. Above the main content B. Next to the main content C. Below the main content D. Hidden completely

36. Which tag is used to represent the main content of an HTML document?

A. <section> B. <main> C. <article> D. <aside>

37. Which of the following is NOT part of the CSS box model?

A. content B. margin C. border D. font-size

38. What is the advantage of semantic HTML for accessibility?

A. It allows screen readers to understand the content structure better B. It speeds up loading times C. It adds animations D. It makes text larger

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

A. The main content area B. The footer section C. A navigational menu containing links D. An article or blog post

40. Which tag is used to group related links or content alongside the main content?

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

41. Which CSS selector targets elements by their class attribute?

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

42. What is the main purpose of media queries in responsive web design?

A. To validate HTML code automatically B. To apply different CSS styles based on screen size or device features C. To optimize loading speed of images D. To add interactivity to elements on hover

43. What is one function of a website footer?

A. To add decorative images B. To provide copyright information and important links C. To contain the main navigation menu D. To display advertisements only

44. What is the main difference between HTML and CSS?

A. HTML controls website structure; CSS controls visual appearance B. HTML is a programming language; CSS is not C. HTML styles the website; CSS adds functionality D. HTML validates code; CSS creates animations

45. What does the :hover pseudo-class do?

A. Applies styles when an element is clicked B. Applies styles when an element is hovered over with a mouse or pointer C. Applies styles to active links only D. Applies styles only on keyboard focus

46. When using Flexbox to arrange navigation links, what layout direction typically aligns items horizontally?

A. column B. row C. grid D. block

47. Why is it important to validate HTML and CSS using W3C Validators?

A. To make the webpage look colorful B. To ensure code adheres to web standards and avoid errors C. To increase server response time D. To automatically generate content

48. When would you choose CSS Grid over Flexbox?

A. For simple one-dimensional layouts B. For complex two-dimensional layouts involving rows and columns C. When styling individual elements only D. When you want no control over positioning

49. What is a breadcrumb?

A. A visual navigation aid showing the user’s path within a website B. A background image decoration C. A font style D. A type of header

50. Why should the <font> tag be avoided in modern HTML?

A. It is used only for complex animations B. It is deprecated and replaced by CSS for styling C. It improves page loading time D. It is required for accessibility