Exercise: A Weekend Trip Guide

Build a three-page weekend guide to a lakeside town, with pictures, alt text, links between the pages and a ready-made stylesheet, then put it online and send someone the link.

Apprentice · HTML · Web Development · Updated

A friend is spending a weekend in Lake Harbor, a little town on the shore of Clearwater Lake, and keeps texting you questions: where to get breakfast, what to do on Saturday, how to get there. Instead of answering one text at a time, you'll build them a guide: a home page, a "where to eat" page and a "what to see" page, each with a picture, links between them, and the course's ready-made stylesheet. Then you'll put it online and send the link.

The text is already written, so you can spend your time on what this chapter taught. If you'd rather write about a town you know, swap in your own words and photos: the checks work the same way.

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 the folder where you keep your course projects.

The folder holds:

  • index.html, eat.html, see.html: the three pages, with their text written and comments that say what to add. These are yours to finish.
  • images/: four sample photos you may use, or swap for your own.
  • style.css: the ready-made stylesheet, ready to use.
  • site.test.js and package.json: the checks. 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 page has comments where things go, numbered to match these steps:

<title>Where to Eat in Lake Harbor</title>
<!-- 1. Link the stylesheet, style.css, here. -->
  1. Link the stylesheet on all three pages.
  2. Link the pages together. At the top of every page, add links to the other two, so a visitor can get anywhere from anywhere.
  3. Add the pictures. Each comment names the photo that belongs there. Give every picture alt text that says what it tells the reader on that page.
  4. Link to a map. On the home page, add a link to a map site, such as OpenStreetMap or Google Maps, so your friend can plan the drive.
  5. Put it online with GitHub Pages, as in Put Your Site Online for Free, and open it on your phone. Upload only the pages, style.css and the images folder: leave out node_modules, package.json, package-lock.json and site.test.js.

Check your work

In VS Code, open the terminal (Terminal > New Terminal). The first time, type:

npm install

Then, whenever you want to check your pages:

npm test

At first five of the six checks fail. That's expected: each step you finish turns one green. A failing check's message names the page and says what's missing, for example eat.html needs a link to see.html, such as <a href="see.html">. The last check runs the HTML validator, which reports mistakes such as a closing </img> tag, with the line number.

The checks can't see your pages the way a person does, so the README in the starter also has a short checklist: open each page and look.

Hints

  • A link to one of your own pages is its file name. You wrote these in Links Between Your Own Pages.
  • A picture's src is a path, the same kind of path as a link. The photos are in the images folder, next to the pages.
  • Read your alt text aloud with your eyes closed. Does it tell your friend what they'd see? Adding Pictures has examples.
  • A page that stays plain is missing its link line, or its href is misspelled. Every page needs its own.
  • "There is no picture at…" means the src and the file name don't match, letter for letter. Capitals count.

When you're done

Every check is green:

✔ 1) every page links the stylesheet, style.css
✔ 2) every page links to the other two pages
✔ 3) every page has a picture, and every picture has a src that exists
✔ 4) every picture has alt text that describes it
✔ 5) the guide links to an outside map site
✔ 6) every page passes the HTML validator
ℹ tests 6
ℹ pass 6
ℹ fail 0

Your guide is online at an address such as https://sam-learns-html.github.io/lake-harbor/, and it opens on a phone. Send the link to someone. Then look back: if your friend could only hear the pages, read aloud by a screen reader, would your alt text still tell them where to eat and what to see?

So what

You've built a real website: several pages that link to each other, pictures everyone can understand, a consistent look from one stylesheet, and an address anyone can open. Every site on the web, from a town's tourism page to a national park's, is made of these same pieces.

What's next

You've finished Module 1. Next comes its project, Choose Your Own Adventure: a story game made only of linked pages. You'll write a title page and at least eight story pages, each with a heading, a paragraph or two, a picture with alt text and two or more choices as links, and at least two endings that lead back to the start. It uses the ready-made stylesheet and goes online with GitHub Pages, so your friends can play it on their phones. It starts from a two-page sample story, The Lighthouse at Gull Point, and a sheet for planning your pages.

Then Module 2, Structure and Meaning, makes your HTML say what each part of a page is: the header, the menu, the main story, the footer. Screen readers and search engines use that to understand your page, and the ready-made stylesheet uses it to lay the page out. You'll also add lists, tables, and sections that open and close with no extra code at all.

Key terms

Related