Your first document

Practice: build your page shell

Create the complete document shell for a personal page with a doctype, language, useful title, description, and visible content.

15 minute lesson

~~~

We will build one small personal page through the rest of the course.

Create a folder named my-page. Inside it, create index.html.

Start with this document:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Sam's web page</title>
    <meta
      name="description"
      content="Projects, notes, and useful links from Sam."
    >
  </head>
  <body>
    <h1>Sam's web page</h1>
    <p>I am learning how the Web works.</p>
  </body>
</html>

Replace Sam’s name and description with your own.

Open the file in your browser. The heading and paragraph appear inside the page. The title appears in the browser tab.

Check the invisible parts

Use View Page Source. Confirm that the browser received the same structure you wrote.

Then check these details:

doctype is the first line
html has the correct language
head contains the title and metadata
body contains the visible page
every opened element is closed

Save this file. Each practice lesson will improve it.

Done when

You have a valid page shell that opens locally and has a useful browser-tab title.

Lesson completed