Exercise: Your First Web Page

Make a web page announcing a neighborhood game night, watch it update in the browser as you save, and run the five checks that tell you it has everything a page needs.

Novice · HTML · Web Development · Updated

Your neighbors on Maple Street have started a monthly game night, and they need a web page to send around: what it is, when and where, and what to bring. You'll make that page. The skeleton of the page is ready for you, so your job is the words, typed between its tags. Five small checks read your page and tell you when it's done.

This is the course's first exercise, so this lesson also walks you through running the checks, one step at a time. Every exercise after this one is checked the same way.

Before you start

You need the setup from Setup: VS Code, a Browser and Node.js: VS Code with the Live Server extension, a browser, and Node.js. In VS Code's terminal, node --version should print a version that starts with v24 or higher.

Get the exercise code

The exercise code for this lesson is a folder on GitHub, a website where developers keep and share code. In the Exercise box beside the lesson, choose Get the starter on GitHub, then click the green Code button, then Download ZIP. Unzip the file into your html-course folder (on Windows, right-click it and choose Extract All; on macOS, double-click it). The unzipped folder is named after the repository, with -main on the end; you can keep that name.

The folder holds:

  • skeleton.html: the page skeleton, with an empty title, an empty heading and two empty paragraphs, and a note above each one saying what goes there.
  • test/page.test.js: the five checks. You don't need to change or even open it.
  • package.json: tells npm which tools the checks need.
  • README.md: the steps below, in short.

There is no index.html yet. You'll make it.

What to do

  1. Open the folder in VS Code. Choose File > Open Folder and pick the folder you unzipped (the one with package.json directly inside it). If VS Code asks whether you trust the authors of the files, choose Yes, I trust the authors.

  2. Make index.html. In the Explorer on the left, click the New File icon and type index.html: all lowercase, no spaces, nothing after .html. It's the front door of the site, as in Files and Folders for a Website.

  3. Copy the skeleton in. Open skeleton.html, select everything with Ctrl+A (Cmd+A on macOS), copy it with Ctrl+C (Cmd+C), then click into index.html and paste with Ctrl+V (Cmd+V).

  4. Type your page. In index.html, type words in four places, following the notes:

    • between <title> and </title>: the page's name, which shows on the browser tab;
    • between <h1> and </h1>: the main heading;
    • between the first <p> and </p>: what's happening, where and when;
    • between the second <p> and </p>: what to bring, and who can come.

    Type only words, and leave every tag as it is. The lines that start with <!-- and end with --> are comments, notes for whoever edits the page; the browser doesn't show them. Save with Ctrl+S (Cmd+S).

  5. See it in the browser. Right-click index.html in the Explorer and choose Open with Live Server. Your page opens in the browser. Put VS Code and the browser side by side, change a word, save, and watch the page change by itself.

Here is skeleton.html as it comes, before you type anything:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 1. Type the page's name between <title> and </title>. It shows on the browser tab. -->
  <title></title>
</head>
<body>
  <!-- 2. Type the page's main heading between <h1> and </h1>. -->
  <h1></h1>

  <!-- 3. Type your first paragraph between <p> and </p>: what is happening, where and when. -->
  <p></p>

  <!-- 4. Type your second paragraph: what to bring, and who can come. -->
  <p></p>
</body>
</html>

Check your work

The checks are a small program that reads your index.html the way a browser does and looks for five things. You run them from VS Code's terminal.

  1. Open the terminal. Choose Terminal > New Terminal, or press Ctrl+` (Ctrl on macOS too). It opens in the folder you opened in VS Code, which is the folder the checks need.

  2. Install what the checks need. Type this and press Enter:

    npm install

    npm downloads the two tools named in package.json into a new folder, node_modules. It takes a few seconds and ends with a line like found 0 vulnerabilities. You do this once per exercise.

  3. Run the checks. Type this and press Enter:

    npm test

Each check gets a line: ✔ means it passed, and ✖ means not yet. If you run npm test before making index.html, all five say ✖, and the top of the output looks like this:

✖ index.html is in the folder (0.5123ms)
✖ the page has a title (0.1113ms)
✖ the page has one main heading (h1) (0.1601ms)
✖ the page has two paragraphs of text (0.1006ms)
✖ the page has no HTML mistakes (0.1785ms)
ℹ tests 5
ℹ suites 0
ℹ pass 0
ℹ fail 5

That's expected: a red start is how every exercise begins. (The numbers in brackets are how long each check took, and yours will differ.)

Reading a check that hasn't passed yet

Under the list, each check that hasn't passed gets a message that starts Not yet: and says what to fix. Say you've typed the title, the heading and the first paragraph, but not the second paragraph yet. npm test prints:

> exercise-html-your-first-web-page@1.0.0 test
> node --test

✔ index.html is in the folder (0.5115ms)
✔ the page has a title (0.3594ms)
✔ the page has one main heading (h1) (7.3821ms)
✖ the page has two paragraphs of text (0.6523ms)
✔ the page has no HTML mistakes (71.6152ms)
ℹ tests 5
ℹ suites 0
ℹ pass 4
ℹ fail 1
ℹ cancelled 0
ℹ skipped 0
ℹ todo 0
ℹ duration_ms 818.7845

✖ failing tests:

test at test\page.test.js:47:1
✖ the page has two paragraphs of text (0.6523ms)
  [Not yet: Type a paragraph between each <p> and </p>. Paragraphs with text so far: 1 of 2.]

Read it from the bottom up: the last line says what's missing (one paragraph of the two), and the line above it names the check. The test at test\page.test.js:47:1 line says where that check lives in the checks file; you don't need to open it. Fix the page, save, and run npm test again. Press the up arrow key in the terminal to bring back the last command, so you don't have to type it again.

The fifth check, the page has no HTML mistakes, runs an HTML checker over your page. If you delete part of a tag by accident, its message names the line, such as line 11: Unclosed element '<h1>'. Open index.html, go to that line, and compare it with the same line in skeleton.html.

Hints

  • Saved? A white dot on a file's tab in VS Code means it has changes you haven't saved yet. The checks and the browser only see saved files.
  • Check the file's name. If the first check says there's no index.html, or that a file such as Index.html has the wrong name, right-click the file in the Explorer and choose Rename. Files and Folders for a Website explains why the exact name matters.
  • npm isn't recognized, or "running scripts is disabled"? See If something goes wrong in Setup: VS Code, a Browser and Node.js.
  • npm test says it can't find a module? Run npm install first, in the same folder.
  • Words, not tags. Every check is about the words between the tags. If a tag has gone missing, copy that line back from skeleton.html.

When you're done

Every check shows ✔, and the output ends with fail 0:

> exercise-html-your-first-web-page@1.0.0 test
> node --test

✔ index.html is in the folder (0.7384ms)
✔ the page has a title (0.4683ms)
✔ the page has one main heading (h1) (10.0559ms)
✔ the page has two paragraphs of text (0.6817ms)
✔ the page has no HTML mistakes (71.4852ms)
ℹ tests 5
ℹ suites 0
ℹ pass 5
ℹ fail 0
ℹ cancelled 0
ℹ skipped 0
ℹ todo 0
ℹ duration_ms 950.4342

In the browser, your page shows its name on the tab, a big heading and two paragraphs. Now open View Source on it (Ctrl+U, or Cmd+Option+U on macOS). What you see is the file you typed, sent by Live Server the way any web server sends a page. Which of the lines in it does the browser show, and which does it keep to itself?

So what

You made a web page from a file, saw it in a browser and proved it has what a page needs, with the same tools and the same write, save, check loop professional web developers use. Every exercise in this course starts exactly here.

Key terms

Related