meet it

A page is built from small rules working as a team.

is how the parts of a page are arranged: what sits where, how big, and how far apart. Every good layout is built from the small pieces you already know.

Start with the whole page on body: font and colour. Then shape each box with padding, borders and round corners. Then line the boxes up with flex.

Finish with the details, like a hover colour for anything clickable. When something looks wrong, check spelling, semicolons and curly brackets first, then which rule wins.

<div class="cards">
  <div class="card">Cats</div>
  <div class="card">Dogs</div>
  <div class="card">Fish</div>
</div>

.cards {
  display: flex;
  gap: 16px;
}
.card {
  padding: 24px;
  border-radius: 12px;
  background-color: #e0f2f1;
}

Press show my page to see it here.

Add a .card:hover rule of your own and run it again.

guess first

Every piece at once. What will you see?

Guess before you run it. Wrong guesses are how you learn, and nothing is marked.

<div class="row">
  <div class="pet">Rex</div>
  <div class="pet" id="star">Pickles</div>
</div>

.row {
  display: flex;
  gap: 10px;
}
.pet {
  background-color: lavender;
}
#star {
  background-color: gold;
}

your turn

Your turn. Style a club card.

Fill in the blanks: give the card padding and round corners, then choose a background colour for when the pointer is on it.

the page you’re styling

<div class="card">
  <h2>Chess club</h2>
  <p>Fridays at four in the library.</p>
</div>

your css

Your code

Press show my page to see it here.

the card has paddingnot checked yet
the corners are roundednot checked yet
the card is white when restingnot checked yet
the card changes colour on hovernot checked yet

fix it

The photos stack up with no gap. Debug it!

the page you’re styling

<div class="gallery">
  <img class="photo" src="cat.svg" alt="A cat">
  <img class="photo" src="dog.svg" alt="A dog">
  <img class="photo" src="tree.svg" alt="A tree">
</div>

your css

Broken code to fix

Press show my page to see it here.

the gallery is a flex rownot checked yet
the photos have a 12px gapnot checked yet

Two things broke at once in the first rule. What could break two lines together?
A missing semicolon joins a line to the next one, so both are skipped.
Add ; after display: flex, then press run.

nailed it

you styled a whole page yourself. :D

Style the page, shape the boxes, then lay them out.
Small rules working together make a whole layout.
When things break, check spelling, semicolons and curly brackets.

new words in your collection

layout

This lesson isn’t saved. A free account remembers every lesson you finish.