Final Project: Build a Complete Web Page — HTML Fundamentals (Lesson 16)

This is it — the capstone. You will combine everything from the course into one complete web page: a personal profile page with proper structure, semantic layout, an image, a list, a table, a contact form, accessibility and an SEO-ready head. By the end you will have a real page you can keep and grow.

What you are building

A single-page personal profile — the kind of thing that becomes a starting point for a portfolio or personal site. It uses skills from every module: document structure, headings and text, links and navigation, an image, a list, a table, a form, semantic layout, accessibility and a complete head.

The project steps

1
Set up the document
Start with the full skeleton and a complete head: charset, viewport, a unique title and meta description.
2
Build the semantic layout
Add header with a nav, a main region, several sections, and a footer.
3
Add content
Include a heading and intro, an image with alt text, a list of skills or interests, and a small table.
4
Add a contact form
Create a labelled form with name, email and message, plus validation and a submit button.
5
Check quality
Run the accessibility and best-practice checklist, and validate the HTML.

A starter template

Here is a working starting point that uses elements from across the course. Edit it freely in the live preview — change the content to be about you, then keep extending it.

HTML · editable

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Alex Rivers — Profile</title>
  <meta name="description" content="The personal profile page of Alex Rivers, web learner.">
</head>
<body>
  <header>
    <h1>Alex Rivers</h1>
    <nav>
      <a href="#about">About</a>
      <a href="#skills">Skills</a>
      <a href="#contact">Contact</a>
    </nav>
  </header>
  <main>
    <section id="about">
      <h2>About me</h2>
      <p>I am <strong>learning HTML</strong> with ConvertAtlas Academy.</p>
    </section>
    <section id="skills">
      <h2>Skills</h2>
      <ul>
        <li>HTML structure</li>
        <li>Forms and tables</li>
        <li>Accessibility</li>
      </ul>
    </section>
    <section id="contact">
      <h2>Contact me</h2>
      <form>
        <label for="name">Name</label><br>
        <input type="text" id="name" name="name" required><br><br>
        <label for="email">Email</label><br>
        <input type="email" id="email" name="email" required><br><br>
        <label for="message">Message</label><br>
        <textarea id="message" name="message" rows="3"></textarea><br><br>
        <button type="submit">Send</button>
      </form>
    </section>
  </main>
  <footer>
    <p>&copy; 2026 Alex Rivers</p>
  </footer>
</body>
</html>

Your starter template — make it your own in the live preview.

Make it personalThere is no single right answer. The goal is a complete, valid page that uses what you learned. Make it about you — your real interests make the best practice.

Project completion checklist

Full document with doctype, lang, charset and viewport
Unique title and meta description
Semantic layout: header, nav, main, sections, footer
A heading hierarchy with one h1
An image with descriptive alt text
A list and a table with real content
A contact form with labels and validation
Descriptive link text throughout
The page passes the W3C validator

Final project: your profile page

Complete the checklist by extending the starter template: add an image with alt text, add a small table (for example, a weekly schedule), and make the content genuinely about you. When every box is ticked, you have built a complete web page from scratch.

You did itCongratulations — you have completed HTML Fundamentals! You can now build a full, semantic, accessible web page from nothing. Next, the CSS course will teach you to make it beautiful, and JavaScript will make it interactive.

Quick quiz

1. What should every page start with?

2. Which layout approach should the project use?

3. What makes the contact form accessible?

4. How do you confirm your HTML is clean?

5. What comes after HTML in the web stack?

Key takeaways

The final project combines every skill: structure, content, forms, semantics, a11y and SEO head.
Build a complete, valid personal profile page from scratch.
Use the checklist and the W3C validator to confirm quality.
Next steps: CSS for styling and JavaScript for interactivity.

What you are building

The project steps

A starter template

Project completion checklist

Related lessons