# Exercise: Trading Cards

Turn three plain Forest Friends cards into real-looking trading cards with border-box, rem spacing, borders, rounded corners and auto margins, and let the tests check each part.

Apprentice · CSS · Web Development · Updated October 30, 2026

Forest Friends is a trading card game, and its starter deck is ready to print, except that the cards don't look like cards yet. Mossy the Tortoise, Fern the Fox and Pip the Owl are plain text and pictures, one after another down the left side of the page. Your job is to give each one a frame, room to breathe inside it, a box for its stats, and a place in the middle of the page, using everything this chapter taught about the box model. Tests check each part as you go.

## Before you start

You need Node.js to run the tests. *Setup: VS Code, a Browser and Node.js* installs it, along with VS Code and Live Server.

## 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.

The folder holds:

- `index.html`: the page, with all three cards. It's ready, and you don't change it.
- `styles.css`: the colors and fonts are ready. The box model is yours to add, below the line that says *Yours: the box model*.
- `images/`: a picture for each friend.
- `page.test.js` and `package.json`: the tests. You don't need to change these.

Open the folder in VS Code, right-click `index.html` and choose **Open with Live Server**.

## What to do

Each card in `index.html` looks like this one, and every card has the same classes:

```html
<article class="card card-fern">
  <img class="card-picture" src="images/fern.svg" alt="Fern the Fox, an orange fox with a white-tipped tail, grinning">
  <h2 class="card-name">Fern the Fox</h2>
  <p class="card-type">Clever trickster</p>
  <ul class="stats">
    <li>Strength: 4</li>
    <li>Speed: 8</li>
    <li>Wisdom: 6</li>
  </ul>
  <p class="card-quote">"Why run, when you can outsmart?"</p>
</article>
```

The comment at the top of `styles.css` lists the work, and the README says the same:

1. **Border-box for everything**, in a rule at the very top of the file.
2. **A fixed width for each card**, about `20rem`, **centered** on the page with auto margins.
3. **Padding inside each card and a margin below it**, both in rem.
4. **A border** on all four sides of each card, **with rounded corners**.
5. **Pictures that never get wider than their card.**
6. **A stats box**: each `.stats` list gets padding in rem and a border or a background color.
7. **Make it yours**: spacing for the name, the type and the quote, a frame around each picture, and a different border color for each friend (`.card-mossy`, `.card-fern`, `.card-pip`).

## Check your work

In VS Code, open a terminal (**Terminal > New Terminal**). Run `npm install` once, to download what the tests need, then run the tests as often as you like:

```bash
npm install
npm test
```

At first nine of the ten tests fail. That's expected: only the first one passes, because the link to `styles.css` is already there. Each part you add turns its test green. A failing test's message says which card it checked and what to fix, for example *Mossy the Tortoise's card has no border on the top. A border needs a style, such as border: 4px solid green.*

The tests read the styles the browser works out for each element, but they can't see the page. The README's **How it should look** checklist covers that part: go through it with the page open in your browser.

## Hints

- **Start with border-box.** Every width you set after it means the whole card, border to border. The rule is in *box-sizing: Making Width Mean What You Think*.
- **One line for the card's margins.** The three-value shorthand sets the top, then the left and right, then the bottom. *Margin, Padding and Border in Practice* has the table.
- **No border showing?** A border needs a style, such as `solid` or `dashed`.
- **Heading's margin poking out of the card?** That's margin collapsing. Padding at the top of the card keeps the margin inside.
- **Check your numbers in the box model diagram.** Inspect a card and compare the padding, border and margin with what you wrote.

## When you're done

Every test is green, and the end of the test run says:

```text
ℹ tests 10
ℹ suites 0
ℹ pass 10
ℹ fail 0
```

On the page, three framed cards sit one under another in the middle of the screen, each with its picture, name, type, a boxed set of stats and its quote. Now set your browser's font size to *Large*. Do the cards, their text and their spacing all grow together? If one part stays small, look for a `px` that should be a `rem`.

Then put the deck online, as in *Put Your Page Online for Free*, and send the link to someone who likes card games.

## So what

The cards you styled are the same thing as a product card in a shop, a profile card in an app or a post in a feed: a box with a frame, padding, a fixed width and a smaller box inside it. You'll style hundreds of them, and every one starts with the box model.

## What Module 2 unlocks

That's Module 1 done: you can write the HTML a page needs, and give it colors, fonts, spacing and sizes that respect its reader. The Module 1 project, *A Fan Page for Your Favorite Band*, puts all of it on one page about a band, an artist, a team or a game you love, online at a link you can send a friend.

Sooner or later, every CSS writer types a rule, saves, and sees nothing change. Module 2 answers that question, "I changed it and nothing happened. Why?", by showing how the browser decides which rule wins when two disagree. Then it shows you how to style exactly the element you mean without adding a class to everything: the third item in a list, a link that's been visited, a card that has a picture, a box that's checked. By the end of it, you'll build a recipe checklist whose ingredients cross themselves out when you tick them, with no JavaScript at all.

## Key terms

- [Box model](https://www.ask-codey.com/glossary/box-model)
- [Box sizing](https://www.ask-codey.com/glossary/box-sizing)
- [Border radius](https://www.ask-codey.com/glossary/border-radius)
- [Auto margin](https://www.ask-codey.com/glossary/auto-margin)
- [rem unit](https://www.ask-codey.com/glossary/rem-unit)

## Related

- [The Box Model: Content, Padding, Border and Margin](https://www.ask-codey.com/lessons/css-box-model)
- [Margin, Padding and Border in Practice](https://www.ask-codey.com/lessons/css-margin-padding-border)
- [box-sizing: Making Width Mean What You Think](https://www.ask-codey.com/lessons/css-box-sizing)
- [Units: px, rem, em, % and Viewport Units](https://www.ask-codey.com/lessons/css-units)
- [Put Your Page Online for Free](https://www.ask-codey.com/lessons/css-share-your-page-online)

Source: https://www.ask-codey.com/lessons/exercise-css-trading-cards