My progress
Menu

Level 2 · Web Development Basics · Course 2.2 CSS and Responsive Design

Module 15: Page Layouts

Goal: understand the box model and arrange pages with Flexbox and Grid: menus in a row, cards side by side, and a header, content and footer that sit where they should.

You'll need: your styled site from Module 14.

Lessons

  1. 1The box model15–25 minutes✓
  2. 2Flexbox basics15–25 minutes✓
  3. 3Flexbox for real layouts15–25 minutes✓
  4. 4CSS Grid15–25 minutes✓
  5. 5Page layout and positioning15–25 minutes✓

🛠️Module practice: lay out your site

  1. Add box-sizing: border-box for all elements.
  2. Header with your name on the left and the menu on the right (Flexbox), sticky at the top.
  3. Content centred in a .container with a maximum width.
  4. A section of cards on the home page using Grid with auto-fit and minmax.
  5. Footer at the bottom of the screen on short pages.
  6. Check at different window widths, then commit.

✅Module check

Explain in a few sentences, in your own words:

What's the box model, and when would you use Flexbox and when Grid?

Show a good answer

A good answer mentions: every element is a box of content, padding, border and margin, and box-sizing: border-box makes the width include padding and border. Flexbox arranges items in one direction (a menu, a row of buttons, centring), with content deciding sizes; Grid arranges items in rows and columns at once (galleries, page areas), with the layout deciding sizes. They're often combined.

📝Module quiz

10 questions · 10 marks each · 100 marks in all · pass mark 70% · retry as often as you like ·

1. A box has width: 200px, 10px padding and a 1px border, without border-box. How wide is it?

Why each option is right or wrong

  • “200px” (Incorrect): That's true only with box-sizing: border-box.
  • “220px” (Incorrect): This adds padding on both sides but forgets the 1px border on each side.
  • “211px” (Incorrect): This adds padding and border on one side only.
  • “222px” is correct.

    With the default content-box sizing, width sets only the content area. Padding and border are added on both sides: 200 + 10 + 10 + 1 + 1 = 222px.

    • box-sizing: border-box makes width include padding and border, so it would be exactly 200px.
    • Common practice: set border-box on everything to avoid surprises.

📖 Revise: Lesson 1: The box model

Question ID module-15-q1 · Report a mistake in this question
2. Why can't you set a width on a link (<a>) by default?

Why each option is right or wrong

  • “Width only works on images and tables” (Incorrect): Width works on any block or inline-block element.
  • “Links have a fixed width set by the browser” (Incorrect): Their width follows their text, not a fixed value.
  • “Width on links needs JavaScript to apply” (Incorrect): CSS can do it once the display type changes.
  • “Links are inline elements, which ignore width” is correct.

    Inline elements flow inside text, like words in a sentence, so they take only as much space as their content. Width and height don't apply until you change the display type.

    • Fix: display: inline-block or display: block.
    • Block elements like <div> and <p> accept width by default.

📖 Revise: Lesson 1: The box model

Question ID module-15-q2 · Report a mistake in this question
3. Logo on the far left, menu on the far right of a header. Which Flexbox setting?

Why each option is right or wrong

  • “justify-content: center” (Incorrect): This bunches both items together in the middle.
  • “align-items: stretch” (Incorrect): This affects the cross axis (height in a row), not the left-right spacing.
  • “flex-wrap: wrap” (Incorrect): Wrap lets items move to a new line; it doesn't push them apart.
  • “justify-content: space-between” is correct.

    With the header as a flex container, space-between puts the first item at the start, the last at the end, and all spare space between them.

    • Vertical centring too: add align-items: center.

📖 Revise: Lesson 3: Flexbox for real layouts

Question ID module-15-q3 · Report a mistake in this question
4. Three cards each have flex: 1. What happens to their widths?

Why each option is right or wrong

  • “Each card becomes 1 pixel wide” (Incorrect): The number is a share of space, not pixels.
  • “The first card takes all the space” (Incorrect): All three have the same flex value, so they share.
  • “They keep their content's natural widths” (Incorrect): That's closer to the default; flex: 1 makes them grow to fill the space equally.
  • “They share the available width equally” is correct.

    flex: 1 tells each item to take one share of the free space. Three equal shares mean three equal widths, whatever the container's size.

    • Unequal shares: flex: 2 on one card makes it twice as wide as the others.

📖 Revise: Lesson 2: Flexbox basics

Question ID module-15-q4 · Report a mistake in this question
5. A photo gallery in rows and columns: Flexbox or Grid?

Why each option is right or wrong

  • “Flexbox, because it's newer than Grid” (Incorrect): Grid is actually the newer of the two. Choose by the layout's shape.
  • “A table, so the photos line up in cells” (Incorrect): Tables are for data, and they don't adapt well to phones.
  • “Floats, which are the classic way to make galleries” (Incorrect): Floats are an older technique; Grid does this better and more simply.
  • “Grid, because the layout runs in two directions” is correct.

    Flexbox arranges items along one direction at a time. Grid controls rows and columns together, which is exactly what a gallery needs.

    • Flexbox: navigation bars, button rows, aligning items in a line.
    • Grid: galleries, dashboards, whole page layouts.

📖 Revise: Lesson 4: CSS Grid

Question ID module-15-q5 · Report a mistake in this question
6. What does 1fr mean in CSS Grid?

Why each option is right or wrong

  • “One fixed row of content” (Incorrect): fr is about sharing space, and it works for rows and columns.
  • “One font size unit” (Incorrect): Font units are things like rem and em.
  • “One frame per second of animation” (Incorrect): fr in Grid has nothing to do with animation.
  • “One share of the free space” is correct.

    fr means fraction. Grid gives fixed-size tracks their space first, then divides what's left according to the fr values.

    • Example: 1fr 2fr gives one third and two thirds.
    • Mix: 200px 1fr gives a fixed sidebar and a flexible main area.

📖 Revise: Lesson 4: CSS Grid

Question ID module-15-q6 · Report a mistake in this question
7. How do you centre a block of content that has a maximum width?

Why each option is right or wrong

  • “Use text-align: center on the body” (Incorrect): This centres text inside blocks, not the block itself.
  • “Set position: absolute with left: 50%” (Incorrect): That alone shifts the left edge to the middle, so the block sits off-centre.
  • “Add float: center to the block” (Incorrect): There's no float: center in CSS.
  • “Give it a max-width and margin: 0 auto” is correct.

    Setting the left and right margins to auto makes the browser share the leftover space equally on both sides, centring the block. max-width lets it shrink on small screens.

    • Common pattern: the main content column of most websites.

📖 Revise: Lesson 5: Page layout and positioning

Question ID module-15-q7 · Report a mistake in this question
8. An AI uses position: absolute for every part of a page. What goes wrong?

Why each option is right or wrong

  • “The page loads more slowly” (Incorrect): Positioning doesn't affect load speed.
  • “Nothing, because absolute positioning is precise” (Incorrect): Precise on one screen size, broken on others.
  • “Search engines can't read absolutely positioned text” (Incorrect): They can read it. The problem is the layout.
  • “Elements overlap or break on other screen sizes” is correct.

    Absolute positioning takes elements out of the normal flow and pins them at fixed spots. When text grows, screens shrink or content changes, nothing moves to make room, so things overlap.

    • Use absolute for small overlays like badges.
    • Use Flexbox and Grid for the main layout.

📖 Revise: Lesson 5: Page layout and positioning

Question ID module-15-q8 · Report a mistake in this question
9. Your footer floats in the middle of a short page. What's a fix?

Why each option is right or wrong

  • “Give the footer position: fixed; bottom: 0” (Incorrect): That pins the footer over the content on every page, hiding text on long pages.
  • “Add empty paragraphs above the footer” (Incorrect): The amount needed changes with every screen size.
  • “Set the footer's margin-top to 500px” (Incorrect): Too much on long pages, maybe too little on tall screens.
  • “Make body a column flex container with min-height: 100vh and give main flex: 1” is correct.

    The body becomes at least as tall as the screen. Main grows to fill any spare height, which pushes the footer to the bottom on short pages, while long pages scroll normally.

    • 100vh: 100% of the viewport height.

📖 Revise: Lesson 5: Page layout and positioning

Question ID module-15-q9 · Report a mistake in this question
10. How do you centre something both ways with Flexbox?

Why each option is right or wrong

  • “On the item itself: margin: center;” (Incorrect): margin: center isn't valid CSS.
  • “On its container: text-align: center; vertical-align: middle;” (Incorrect): These work for inline content in some cases, not for centring a block both ways.
  • “On the item itself: position: centre;” (Incorrect): There's no position: centre value.
  • “On its container: display: flex; justify-content: center; align-items: center;” is correct.

    justify-content centres along the main axis (horizontal in a row) and align-items centres along the cross axis (vertical). Together they centre both ways.

    • The container needs height: otherwise there's no vertical space to centre in.

📖 Revise: Lesson 2: Flexbox basics

Question ID module-15-q10 · Report a mistake in this question

ProLearners Assist