Exercise: A Pet Adoption Page

Write Paws & Whiskers' whole "Meet Biscuit" page from a content sheet, with a skeleton, structure elements, a pet-card class and a linked stylesheet with two rules, and let the tests check every part.

Novice · HTML · CSS · Updated

Paws & Whiskers has a beagle named Biscuit who needs a home, and a page about him could be what brings his new family through the door. The shelter's volunteers have written everything that should go on it: his story, his fast facts, and cards for two other pets. Your job is to turn that content sheet into a real web page, with every part labeled so the page is ready for styling, and a stylesheet with your first two rules. Tests check each part as you go.

In this exercise you write a whole page from an empty file, with everything this chapter taught.

Get the exercise code

In the Exercise box beside the lesson, choose Get the starter on GitHub to open its GitHub repository. Click Code, then Download ZIP, and unzip it into your css-in-depth folder. Then open the folder in VS Code.

The folder holds:

  • index.html: empty except for a comment that lists every part of the page, in order. For you to write.
  • styles.css: empty except for a comment that says which two rules to write. For you to finish.
  • content-sheet.txt: every word that goes on the page, from the browser tab to the footer. Ready to use.
  • images/: drawings of Biscuit, Pepper and Clover, standing in for photos. Ready to use.
  • page.test.js and package.json: the tests that check your page. You don't need to change these.

What to do

The content sheet says what goes on the page, but not which element each part should be: choosing them is the work. This is how it starts:

THE TOP OF THE PAGE
-------------------
Site name:  Paws & Whiskers

Menu links (the pages don't exist yet; that's fine for this exercise):
    Home            ->  index.html
    All pets        ->  pets.html
  1. Build the skeleton. The doctype, <html lang="en">, a <head> and a <body>. In the head: the character set, the viewport line, the title from the content sheet, and the <link> to styles.css.
  2. Label the big parts. A <header> with the site name and a <nav> of menu links, a <main>, and a <footer>.
  3. Fill in the main content. The page's one <h1>, Biscuit's picture with alt text, a section for his story, and a section with the fast facts as a list.
  4. Make the cards. A section for the other pets, with an <article class="pet-card"> each for Pepper and Clover: the pet's name as an <h3>, its picture and its text.
  5. Write the two rules. In styles.css, give the h1 a color, and give .pet-card a background-color. Choose any colors you like.

Check your work

Right-click index.html and choose Open with Live Server to see the page; it reloads every time you save.

Then check it with the tests. Open a terminal in VS Code (Terminal > New Terminal) and run npm install once, to download what the tests need. After that, run the tests whenever you like:

npm test

At first every test fails: that's expected, because the page is empty. Each part you finish turns its test green. A failing test's message says what it looked for and what to fix, for example The page has 0 elements with class="pet-card". Make Pepper's and Clover's cards, each with class="pet-card". Capital letters count.

Hints

  • One part at a time. Write the skeleton, save, and check the browser tab shows your title. Then add one landmark, save, and look again. With small steps, a mistake can only be in the part you added last.
  • Open and close first. Type an element's opening and closing tags, then fill in what goes between them, and indent each element inside its parent. Elements, Tags and Attributes shows the shape.
  • Ask what each part is. Is it the top of the page, the menu, a themed group with a heading, or something that makes sense on its own? Structure Elements: header, nav, main, section and footer has a question for each.
  • Alt text says what the picture shows. "Biscuit" names him; it doesn't tell someone who can't see the picture what's in it. The content sheet describes each one.
  • When a rule changes nothing, check the <link> first, then the rule's curly braces, colon and semicolon. A class rule needs its dot: .pet-card. See Hooks for CSS: the class and id Attributes.

When you're done

Every test is green, and npm test prints:

> test
> node --test

✔ 1) the page says its language, its character set and its title (2.256ms)
✔ 2) one h1, in the main content, naming Biscuit (1.4631ms)
✔ 3) the landmarks: a header, a nav, one main and a footer (1.2895ms)
✔ 4) Biscuit's picture is in the main content, and every picture has alt text and a file that is there (2.2857ms)
✔ 5) the fast facts are a list, one item per fact (0.9765ms)
✔ 6) two cards with class="pet-card", each with a heading (1.4707ms)
✔ 7) styles.css is linked in the head, and every style lives in it (0.9156ms)
✔ 8) styles.css: a rule for the h1 that sets its color (20.9833ms)
✔ 9) styles.css: a rule for .pet-card that sets a background-color (9.7452ms)
ℹ tests 9
ℹ suites 0
ℹ pass 9
ℹ fail 0
ℹ cancelled 0
ℹ skipped 0
ℹ todo 0
ℹ duration_ms 679.3226

Your times will differ. Now add a third card, for a pet of your own invention, with the same class. Did it get its background color without a single new line of CSS? That is what a class is for.

So what

You've written a complete, well-labeled page, and the rest of this course styles pages built exactly like it: from here on, each lesson hands you its HTML, so you can spend your time on the CSS. If you want to go deeper into HTML itself, the course HTML in Depth covers forms, tables, accessibility and more, but nothing in this course needs it.

Key terms

Related