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

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:

<!--
    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:

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:

> 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

Related