Workshop › My business card › Step 3 of 12

Put them in a box

What we are doing

The name and the line belong together: they will be one card. A <div> groups them, and class="card" gives the group a name we can style later.

```html
<div class="card">
  <h1>Ada Lovelace</h1>
  <p>Learning to build websites</p>
</div>
```

What it means

• <div> ... </div> wraps the heading and the paragraph into one box.
• class="card" is an attribute: extra information inside the opening tag. It names the box.
• Moving the two lines two spaces to the right shows they are inside the box; it is only for reading.

Your turn

Put <div class="card"> above the h1 and </div> below the p, and indent the two lines inside.

Skills: HTML structure

← A line about you Your first CSS →

All steps

1. Your name as a heading
2. A line about you
3. Put them in a box
4. Your first CSS
5. Make the box look like a card
6. Center the card
7. A soft shadow
8. Color your name
9. Add your links
10. Links in a row
11. Links that react
12. Build it yourself: a card that reacts