How To Create A Simple Web Page Layout With HTML And CSS. Quiz

Discover core concepts behind building a simple one-page site using HTML for structure and CSS for layout and responsiveness. This quiz checks basic knowledge about layout structure, Flexbox, and responsive design for beginners.

1. Purpose of HTML and CSS

   What roles do HTML and CSS play when creating a web page?

   1. HTML is used for interactivity, and CSS handles databases.
   2. CSS replaces HTML for modern websites.
   3. CSS provides both structure and content, while HTML controls colors.
   4. HTML defines the structure, and CSS controls the appearance and layout.

   Explanation: HTML provides the backbone or structure of a web page, organizing content like text and images. CSS styles this structure, controlling colors, positioning, and layout. CSS does not provide structure or content or replace HTML, and neither language is responsible for databases or interactivity.

2. Web Page Sectioning

   When organizing a web page into parts such as a logo, navigation, and feature blocks, which HTML element is commonly used to separate these sections?

   1. div
   2. img
   3. link
   4. span

   Explanation: The div element is a generic container often used to group related sections for styling or layout. img displays images, span is for in-line text, and link is for linking external resources like stylesheets.

3. Applying Flexbox Layout

   Which CSS property enables you to lay out elements in a row or column with automatic sizing and alignment?

   1. position: absolute
   2. display: flex
   3. visibility: hidden
   4. float: left

   Explanation: The display: flex property activates Flexbox, allowing easy row or column layouts with flexible sizing and alignment. position: absolute takes elements out of the flow, float: left aligns elements horizontally but lacks Flexbox's power, and visibility: hidden only hides content.

4. Making Layout Responsive

   Which mechanism allows you to apply specific CSS styles only when a screen width is below a chosen threshold, like 600px?

   1. @keyframes rule
   2. @media rule
   3. @font-face rule
   4. @import rule

   Explanation: The @media rule lets you define CSS that applies only under certain conditions, such as maximum screen width. @import loads stylesheets, @font-face defines custom fonts, and @keyframes is for animations, none of which manage responsive breakpoints.

5. Spacing and Backgrounds in CSS

   If you want to add space around an HTML block and give it a black background, which properties should you use?

   1. outline and z-index
   2. font-weight and overflow
   3. border and display
   4. background-color and padding

   Explanation: background-color sets the background shade, while padding adds space inside the element's border. border and display relate to outlines and layout method, font-weight and overflow affect text styling and scroll behavior, and outline, z-index control stacking and visual highlights.