# Exercise: A Fan Page for Your Favorite Band

Build a two-page fan site for a band you love, with a heading outline, paragraphs, a link to the band's site, jump-to links and an album page linked both ways, and let the tests check every heading and link.

Novice · HTML · Updated October 30, 2026

Every band you love has fans who make pages about it, and now you can be one of them. In this exercise you build a small fan site for a band of your choice: a home page with the band's story, a link to its official site and a row of links that jump to each section, and a page for one of its albums, linked both ways. If you'd rather not choose a band, the starter has everything you need about The Neon Lanterns, the made-up band from this chapter's lessons. Tests check your headings, your text and every link as you go.

## 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 where you keep your practice folders. Then open the folder in VS Code.

The folder holds:

- `index.html`: the home page, with the page skeleton and a comment that lists what goes where. For you to finish.
- `albums/paper-moon.html`: the page for one album, with the skeleton and a comment. For you to finish. Writing about a band of your own? Rename it after one of its albums, in lowercase with hyphens for spaces.
- `sample-content.txt`: the text about The Neon Lanterns, ready to copy from.
- `page.test.js` and `package.json`: the tests that check your pages. You don't need to change these.

## What to do

The comment inside each page's `<body>` lists its parts, in order from the top. This is how the home page's comment starts:

```html
<!--
    1. One h1: the band's name. Give it id="top", for the back-to-top link at the end.

    2. A "Jump to" paragraph under the h1: a link to each of your h2 sections, such as href="#tour".
-->
```

1. **Plan the outline.** Write the home page's headings first, with nothing under them: one `<h1>` for the band, an `<h2>` for each section (such as *About the Band*, *Albums* and *Tour Dates*), and an `<h3>` for each album under *Albums*. Read them down the page: they should look like a table of contents.
2. **Fill in the words.** Three or more paragraphs about the band, with at least one `<strong>` or `<em>`, and `<i>` or `<small>` wherever the meaning calls for one.
3. **Link out.** Link to the band's official site with its whole address, and give the link text that makes sense on its own.
4. **Build the album page**, with its own `<h1>` and a paragraph or two, and link the two pages to each other.
5. **Add the jump-to row and a back-to-top link.** Give each `<h2>` an id, and link to each one from a *Jump to* paragraph under the `<h1>`.
6. **Extras, if you like:** a booking email link, a box office phone link, and a link on the album page that jumps to the home page's tour dates.

Lists come in Module 2, so the jump-to row is a paragraph of links for now, and pictures come in the next chapter, so none are needed yet.

## Check your work

Right-click `index.html` and choose **Open with Live Server** to see the page; it reloads every time you save. Click every link, both ways.

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 almost every test fails: that's expected, because the pages are empty. Each part you finish turns its test green. A failing test's message says which page it checked and what to fix, for example *albums/paper-moon.html: the link to "index.html" leads to albums/index.html, which isn't there.*

## Hints

- **Headings are an outline, not a size.** Choose each level for its place under the heading above it. *Headings and the Page Outline* has the two rules the tests check.
- **Directions from where the page stands.** From the album page, the home page is one folder up. *Links Between Your Own Pages* shows how to say that in a path.
- **Ids and links must match exactly.** A link to a spot and the id it points at are spelled the same, capital letters included. See *Links Within a Page, Email and Phone Links*.
- **Name the destination.** Link text such as *click here* fails a test on purpose. Read each link's words on their own: do they say where it goes?
- **The validator test lists line numbers.** Go to that line in VS Code: a missing closing tag is the usual cause.

## When you're done

Every test is green, and `npm test` prints:

```text
> test
> node --test

✔ 1) each page has exactly one h1 (1.2898ms)
✔ 2) the home page has two or more sections, each with an h2 (0.3776ms)
✔ 3) no page skips a heading level (1.462ms)
✔ 4) the home page has three or more paragraphs (0.4039ms)
✔ 5) strong or em marks words that matter (0.4839ms)
✔ 6) a link to another site, with a whole address and link text that makes sense on its own (0.2385ms)
✔ 7) the home page and an album page link to each other, and every link to your own pages leads to a real file (1.285ms)
✔ 8) a jump-to row: two or more links to spots on the home page, and every # link has a matching id (0.879ms)
✔ 9) every page passes the HTML validator (85.6453ms)
ℹ tests 9
ℹ suites 0
ℹ pass 9
ℹ fail 0
ℹ cancelled 0
ℹ skipped 0
ℹ todo 0
ℹ duration_ms 881.2336
```

Your times will differ. Now read only your home page's headings, from top to bottom. Would a friend who has never heard of the band know what the page covers, and where to find the tour dates?

## So what

Headings, paragraphs and links are most of what's on the web. With them you've built a real, linked site about something you care about, and every page you make from here builds on the same pieces.

## Key terms

- [Heading hierarchy](https://www.ask-codey.com/glossary/heading-hierarchy)
- [Hyperlink](https://www.ask-codey.com/glossary/hyperlink)
- [Relative Path](https://www.ask-codey.com/glossary/relative-path)
- [Fragment identifier](https://www.ask-codey.com/glossary/fragment-identifier)

## Related

- [Headings and the Page Outline](https://www.ask-codey.com/lessons/html-headings-and-the-page-outline)
- [Bold, Italic and What They Mean](https://www.ask-codey.com/lessons/html-emphasis-and-importance)
- [Links to Other Sites](https://www.ask-codey.com/lessons/html-links-to-other-sites)
- [Links Between Your Own Pages](https://www.ask-codey.com/lessons/html-links-between-your-own-pages)
- [Links Within a Page, Email and Phone Links](https://www.ask-codey.com/lessons/html-links-within-a-page)

Source: https://www.ask-codey.com/lessons/exercise-html-band-fan-page