Build your first complete HTML webpage

Your mission

Create a personal learning page with a complete document head, semantic regions, internal navigation, an introduction, a skills list, a three-day schedule, and a labeled demo notes field. Add your own image when available. State clearly that the notes are not sent or saved.

1. Open the downloaded index.html in your editor and build the page in small stages using the earlier HTML examples.
2. Check each requirement by interacting with it: follow links, read table headers, and click labels.
3. Review on a narrow screen and with the keyboard. Save the finished file, reopen it, and explain one choice you made in each section.

Build in your own files. The interactive examples below are references to explore. This project has no in-page code editor or automatic solution checks; use the starter download and self-review checklist.

Before you begin: HTML metadata.

Plan your build

This project brings the HTML course together. Build a personal learning portfolio that introduces you and records your progress. It is an HTML project: default browser styling is enough, and no JavaScript or browser API is required. You can return later to improve the appearance with CSS.

Plan the content before writing tags. The page needs a main title, a short introduction, a list of skills you are learning, a small learning schedule, and a notes or contact-form demonstration. Add a navigation link to each main section so a reader can move around the page.

Choose a photo you have permission to use, or leave a clearly described place for one until you have a file. Write alternative text that fits its purpose. A media player is an optional extension, not a reason to block your first complete page. If you add spoken media, include its transcript or captions.

Reuse the tags you already know

Explore the target in stages

<header aria-label="Lesson example">
<h1>Sam’s learning notebook</h1>
<nav aria-label="Main">
<a href="#about">About</a> · <a href="#skills">Skills</a>
</nav>
</header>
<main aria-label="Lesson example">
<section id="about">
<h2>About me</h2>
<p>I am learning HTML.</p>
</section>
<section id="skills">
<h2>Skills</h2>
<ul>
<li>Headings</li>
<li>Links</li>
</ul>
</section>
</main>
<footer aria-label="Lesson example">
<p>© 2026 Sam</p>
</footer>

A starting body fragment

<header>
  <h1>Sam’s learning notebook</h1>
  <nav aria-label="Main">
    <a href="#about">About</a> · <a href="#skills">Skills</a> ·
    <a href="#notes">Notes</a>
  </nav>
</header>
<main>
  <section id="about">
    <h2>About me</h2>
    <p>I am learning to build webpages.</p>
  </section>
  <section id="skills">
    <h2>Skills</h2>
    <ul>
      <li>Headings</li>
      <li>Links</li>
    </ul>
  </section>
  <section id="notes">
    <h2>Notes</h2>
    <label for="note">My next goal</label
    ><textarea id="note" name="note"></textarea>
    <p>Demo only: this note is not saved.</p>
  </section>
</main>
<footer><p>&copy; 2026 Sam</p></footer>

This is a starting body fragment, not a finished answer to every requirement. Put it inside the complete document from lesson 2. The navigation targets match section ids. Each section has a heading. The notes field has a visible label, and the page tells the truth about its behavior: typing does not save anything.

Build and check one part at a time

First complete the document head with a useful title and description. Then write your introduction and headings. Add lists and internal links next. When the structure reads clearly, add a schedule with a caption and header associations. This order makes it easier to find a mistake than pasting a large finished page and changing everything at once.

A contact form needs a working service to deliver messages. For this HTML-only project, label it as a demonstration and use a non-submitting button or no button. Do not show Message sent when nothing was sent. If you later connect a service, revisit validation, privacy, and error handling.

Before calling the page finished, follow every link, inspect the image path, read the heading outline, and test keyboard navigation. Open it at a narrow width too. A code validator can help find invalid nesting, but it cannot tell you whether the writing is understandable or whether alternative text fits the image.

Before you call it finished

A polished-looking template can hide gaps in understanding. You should be able to explain why each heading, list, table, and label exists. Avoid adding unexplained scripts or styling simply to make the result look like another website.

Use the preview to inspect the page in stages: structure, schedule, then a demo notes field. Follow its navigation and use the field's label. Decide which part you will build next in your own file.

Need a hint?

Open one hint, try a change, and test it before opening the next. The explained example follows separately.