Final HTML Project

Welcome back.

You reached the final lesson of this HTML course.

Congratulations.

Your browser survived.

Your keyboard survived.

And most importantly, you survived the mysterious world of angle brackets.

In this lesson, we will build a complete HTML page using everything you learned:

document structure;
headings and paragraphs;
links;
images;
lists;
tables;
forms;
semantic HTML.

No CSS yet.

No JavaScript yet.

Only HTML.

Because before we decorate the house, we need walls, doors, windows, and a roof.

Otherwise we are just painting the air.

What You Will Build

You will build a simple personal learning website.

The page will include:

a header;
navigation;
main content;
sections;
articles;
an image;
a list;
a table;
a contact form;
an aside;
a footer.

This is not just a random exercise.

This is your first complete HTML page.

Small?

Yes.

Simple?

Yes.

Important?

Absolutely.

Small pages become big websites.

Just like small bugs become three-hour debugging adventures.

Project Setup

Create a project folder:

mkdir html-final-project
cd html-final-project
touch final-project.html
mkdir images

Put one image inside the images folder.

For example:

images/profile.jpg

You can use any image:

a profile photo;
a laptop photo;
a course image;
a cat that looks like it manages a development team.

All valid.

Basic HTML Structure

Open final-project.html and start with this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Learning Website</title>
</head>
<body>

</body>
</html>

This is the foundation.

Not beautiful yet.

But correct.

And correct structure is the first victory.

A beautiful broken page is still broken.

A simple correct page can grow.

Header and Navigation

Inside body, add a header:

<header id="top">
  <h1>My Learning Website</h1>
  <p>A simple HTML project built step by step.</p>

  <nav>
    <a href="#about">About</a>
    <a href="#lessons">Lessons</a>
    <a href="#schedule">Schedule</a>
    <a href="#contact">Contact</a>
  </nav>
</header>

The header introduces the page.

The nav contains navigation links.

Each link points to a section on the same page.

For example:

<a href="#about">About</a>

points to:

<section id="about">

This is how internal page navigation works.

Small detail.

Very useful.

Like a tiny elevator inside your page.

Main Content

After the header, add main:

<main>

</main>

The main element contains the main content of the page.

This is where the real content lives.

Not the footer.

Not repeated navigation.

Not random chaos wearing sunglasses.

The important content goes here.

About Section

Inside main, add this section:

<section id="about">
  <h2>About This Project</h2>

  <p>This page is my final HTML project. It uses many HTML elements that I learned during the course.</p>

  <img src="images/profile.jpg" alt="Profile image for the learning project" width="300">

  <p>The goal is to practice structure, content, links, images, lists, tables, forms, and semantic HTML.</p>
</section>

This section uses:

section;
h2;
p;
img;
alt;
width.

That is already a lot of HTML.

The page is waking up.

Slowly.

Like a developer before coffee.

Lessons Section

Now add a list of what you learned:

<section id="lessons">
  <h2>What I Learned</h2>

  <p>During this course, I learned the most important HTML basics.</p>

  <ul>
    <li>HTML document structure</li>
    <li>Headings and paragraphs</li>
    <li>Lists and links</li>
    <li>Images and media</li>
    <li>Tables and forms</li>
    <li>Semantic HTML</li>
  </ul>
</section>

A list is the right element here.

Why?

Because this is a group of related items.

HTML likes when we choose the right element.

The browser becomes calm.

The developer becomes calm.

Everybody wins.

Almost.

Featured Lessons

Now add a section with articles:

<section>
  <h2>Featured Lessons</h2>

  <article>
    <h3>Links and Navigation</h3>
    <p>This lesson explains how pages connect to each other using links.</p>
  </article>

  <article>
    <h3>Forms and User Input</h3>
    <p>This lesson explains how users can send information through forms.</p>
  </article>
</section>

Each article is a small independent block of content.

It has its own heading.

It has its own meaning.

It can stand alone.

Very responsible.

Unlike some CSS layouts we will meet later.

Schedule Table

Now add a table:

<section id="schedule">
  <h2>Study Schedule</h2>

  <p>This table shows a simple study plan.</p>

  <table>
    <caption>Weekly HTML Practice Plan</caption>

    <thead>
      <tr>
        <th>Day</th>
        <th>Topic</th>
        <th>Time</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>Monday</td>
        <td>HTML Structure</td>
        <td>30 minutes</td>
      </tr>
      <tr>
        <td>Wednesday</td>
        <td>Links and Images</td>
        <td>45 minutes</td>
      </tr>
      <tr>
        <td>Friday</td>
        <td>Forms and Tables</td>
        <td>45 minutes</td>
      </tr>
    </tbody>
  </table>
</section>

This is a good use of a table.

Rows.

Columns.

Structured data.

No layout crimes.

The frontend police can relax.

For now.

Contact Form

Now add a form:

<section id="contact">
  <h2>Contact Me</h2>

  <p>Use this form to send a simple message.</p>

  <form action="#" method="post">
    <label for="name">Name</label>
    <input id="name" name="name" type="text" required>

    <label for="email">Email</label>
    <input id="email" name="email" type="email" required>

    <label for="topic">Topic</label>
    <select id="topic" name="topic">
      <option value="question">Question</option>
      <option value="feedback">Feedback</option>
      <option value="project">Project</option>
    </select>

    <label for="message">Message</label>
    <textarea id="message" name="message" rows="5" required></textarea>

    <button type="submit">Send Message</button>
  </form>
</section>

This form will not send a real email yet.

That needs backend or a form service.

But the HTML structure is correct.

And correct structure matters.

Many websites on the internet skipped that part and went directly to suffering.

Aside

Add a small study tip:

<aside>
  <h2>Study Tip</h2>
  <p>Practice HTML by building small pages. Reading is useful, but building is where your brain finally wakes up.</p>
</aside>

The aside contains related extra information.

It is not the main content.

It is a side note.

Like a wise friend standing nearby with coffee.

Footer

After main, add a footer:

<footer>
  <p>&copy; 2026 My Learning Website</p>
  <p><a href="#top">Back to top</a></p>
</footer>

The link goes back to:

<header id="top">

This is a simple but useful feature.

A small victory.

Like closing all browser tabs after fixing one bug.

Complete Project Code

Here is the complete page:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Learning Website</title>
</head>
<body>
  <header id="top">
    <h1>My Learning Website</h1>
    <p>A simple HTML project built step by step.</p>

    <nav>
      <a href="#about">About</a>
      <a href="#lessons">Lessons</a>
      <a href="#schedule">Schedule</a>
      <a href="#contact">Contact</a>
    </nav>
  </header>

  <main>
    <section id="about">
      <h2>About This Project</h2>

      <p>This page is my final HTML project. It uses many HTML elements that I learned during the course.</p>

      <img src="images/profile.jpg" alt="Profile image for the learning project" width="300">

      <p>The goal is to practice structure, content, links, images, lists, tables, forms, and semantic HTML.</p>
    </section>

    <section id="lessons">
      <h2>What I Learned</h2>

      <p>During this course, I learned the most important HTML basics.</p>

      <ul>
        <li>HTML document structure</li>
        <li>Headings and paragraphs</li>
        <li>Lists and links</li>
        <li>Images and media</li>
        <li>Tables and forms</li>
        <li>Semantic HTML</li>
      </ul>
    </section>

    <section>
      <h2>Featured Lessons</h2>

      <article>
        <h3>Links and Navigation</h3>
        <p>This lesson explains how pages connect to each other using links.</p>
      </article>

      <article>
        <h3>Forms and User Input</h3>
        <p>This lesson explains how users can send information through forms.</p>
      </article>
    </section>

    <section id="schedule">
      <h2>Study Schedule</h2>

      <p>This table shows a simple study plan.</p>

      <table>
        <caption>Weekly HTML Practice Plan</caption>

        <thead>
          <tr>
            <th>Day</th>
            <th>Topic</th>
            <th>Time</th>
          </tr>
        </thead>

        <tbody>
          <tr>
            <td>Monday</td>
            <td>HTML Structure</td>
            <td>30 minutes</td>
          </tr>
          <tr>
            <td>Wednesday</td>
            <td>Links and Images</td>
            <td>45 minutes</td>
          </tr>
          <tr>
            <td>Friday</td>
            <td>Forms and Tables</td>
            <td>45 minutes</td>
          </tr>
        </tbody>
      </table>
    </section>

    <section id="contact">
      <h2>Contact Me</h2>

      <p>Use this form to send a simple message.</p>

      <form action="#" method="post">
        <label for="name">Name</label>
        <input id="name" name="name" type="text" required>

        <label for="email">Email</label>
        <input id="email" name="email" type="email" required>

        <label for="topic">Topic</label>
        <select id="topic" name="topic">
          <option value="question">Question</option>
          <option value="feedback">Feedback</option>
          <option value="project">Project</option>
        </select>

        <label for="message">Message</label>
        <textarea id="message" name="message" rows="5" required></textarea>

        <button type="submit">Send Message</button>
      </form>
    </section>

    <aside>
      <h2>Study Tip</h2>
      <p>Practice HTML by building small pages. Reading is useful, but building is where your brain finally wakes up.</p>
    </aside>
  </main>

  <footer>
    <p>&copy; 2026 My Learning Website</p>
    <p><a href="#top">Back to top</a></p>
  </footer>
</body>
</html>

Practice

Build your own version of this page.

Change:

the title;
the image;
the lesson list;
the schedule;
the form topics;
the footer text.

Do not only copy.

Change it.

Break it a little.

Fix it.

That is how learning becomes real.

Mini Challenge

Create a second page called:

about.html

Add:

a header;
navigation back to final-project.html;
one image;
one list;
one paragraph about what you learned;
a footer.

Then link to it from the main project page.

Now you have more than one page.

That is how a website starts growing.

Like a plant.

But with more angle brackets.

Summary

Today you built a complete HTML project.

You used:

document structure;
headings;
paragraphs;
navigation links;
images;
lists;
tables;
forms;
semantic elements;
footer links.

This is a real foundation.

Not styled.

Not interactive.

But structurally correct.

HTML is the skeleton of the web.

CSS will dress it.

JavaScript will make it dance.

But without HTML, there is nothing to dress and nothing to dance.

Course Complete

Congratulations.

You finished the HTML course.

You now understand the basic structure of web pages.

Next step?

CSS.

Because now that the page exists, we can finally make it look less like it was designed by a calculator.