# 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 October 30, 2026

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:

```text
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:

```bash
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:

```text
> 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

- [Semantic HTML](https://www.ask-codey.com/glossary/semantic-html)
- [External stylesheet](https://www.ask-codey.com/glossary/external-stylesheet)

## Related

- [Elements, Tags and Attributes](https://www.ask-codey.com/lessons/css-html-elements-tags-and-attributes)
- [The Page Skeleton, and Three Places CSS Can Go](https://www.ask-codey.com/lessons/css-html-page-skeleton)
- [Structure Elements: header, nav, main, section and footer](https://www.ask-codey.com/lessons/css-html-structure-elements)
- [Hooks for CSS: the class and id Attributes](https://www.ask-codey.com/lessons/css-html-class-and-id)

Source: https://www.ask-codey.com/lessons/exercise-css-pet-adoption-page