Exercise: Fix the Coffee Shop Page

Find and fix six mistakes in a coffee shop's home page, using the developer tools to see what the browser made of it, until every test passes.

Novice · HTML · Updated

The Daily Grind, a neighborhood coffee shop on Maple Street, has a home page, and the owner knows something is off: the tagline shows up as big as the shop's name, the browser tab doesn't say the shop's name, and the tooltip on the opening hours says only Open. There are six mistakes in the file. Some you can see on the page, and some the browser repairs so quietly you'd never notice. Your job is to find every one, with the developer tools as your magnifying glass, and fix it in the file. Tests tell you when each fix is right.

Before you start

You need VS Code with Live Server, a browser and Node.js, which the lesson Setup: VS Code, a Browser and Node.js installs. Nothing else from earlier exercises is needed.

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 practice folder.

The folder holds:

  • index.html: The Daily Grind's home page, with six mistakes. This is the file you fix.
  • page.test.js: the tests that check your page. You don't need to change this file.
  • package.json and .gitignore: ready to use. They tell npm which checking tools the tests need.
  • README.md: the same instructions as this lesson, in short.

Open the folder in VS Code (File > Open Folder).

What to do

Open index.html with Live Server, and look at the page before you look at the file. Then fix the file until the page has everything in this list:

  1. The doctype is the very first line.
  2. The <html> start tag says the page is in English.
  3. The browser tab shows The Daily Grind.
  4. The <h1> holds only the shop's name, The Daily Grind.
  5. Hovering over the opening hours shows the tooltip Open seven days a week.
  6. Every element closes in the right order: the inner one first.

Keep the words, the prices and id="hours" as they are. The mistakes are in the HTML around them. The starter's first line inside <body> is a comment that reminds you how many there are:

<!-- This page has six mistakes. README.md says what the finished page needs. -->

Check your work

Open VS Code's terminal (Terminal > New Terminal). The first time only, download the checking tools:

npm install

Then run the tests:

npm test

At first all 7 tests fail. That's expected: as you fix the mistakes, the tests turn green, and the last one runs a validator over the whole file. When a test fails, its message says what it looked for, such as Add <title>The Daily Grind</title> inside the <head>. The validator's messages name the line it's unhappy with.

Hints

  • Look before you fix. Right-click the big heading and choose Inspect. In the Elements panel, open the <h1> and see what ended up inside it. Developer Tools: Inspecting a Page shows how.
  • Compare the two views. View Source shows the file as you wrote it; the Elements panel shows what the browser built. Where they disagree, the browser repaired a mistake.
  • Read the attributes. Choose the hours paragraph in the Elements panel and count its attributes. If there are more than you wrote, a value lost its quotes (see Attributes).
  • Check the skeleton line by line. The Page Skeleton lists every line a page starts with. Which ones are missing here?
  • Boxes inside boxes. The last paragraph opens <strong>, then <em>. Which one has to close first? Elements and Tags has the rule.
  • One fix at a time. Fix one mistake, save, run npm test, and see which tests have turned green.

When you're done

Every test has a green check mark beside it, from the page starts with the doctype to the validator finds no errors, and the summary at the end of the run says:

ℹ tests 7
ℹ suites 0
ℹ pass 7
ℹ fail 0

The shop's name is the page's one main heading, with the tagline back to normal size below it, the tab says The Daily Grind, and the tooltip reads in full. Now open View Source and the Elements panel side by side one more time. Do they agree everywhere? Which of the six mistakes could you see on the page, and which would you never have found without the tools?

So what

Most pages you'll work on in a web job weren't written by you, and many have mistakes the browser hides. Looking at what the browser built, fixing the file, and letting a check confirm it is how real pages get fixed.

Key terms

Related