Project: Build Your Personal Page

Bring everything together into one real page

9 min read

You have learned page structure, text, links, images, lists, tables, forms, semantic tags, and classes and ids. That is genuinely everything you need to build a real personal page, so that is exactly what this final lesson is about.

Planning your page

Before writing any code, it helps to jot down, even just in your head, what you want your page to include. A typical personal page might have:

A header with your name and a short tagline.
A short "about me" section written as a paragraph or two.
A list of hobbies or interests.
A link to somewhere else, like an email address or another site you like.
A footer with a small closing line.

You do not need all of these, and you can add more of your own. This is your page, so make choices that feel like you.

Starting from the skeleton

Remember the basic skeleton from module one: doctype, html, head, and body. Every page you build starts there.

<!DOCTYPE html>
<html>
<head>
</head>
<body>

</body>
</html>

Filling in the body

Now bring in the semantic sections from the last module, and fill each one with the tags you learned earlier: headings, paragraphs, lists, links, and maybe even an image or a small form.

<body>
<header>
<h1>Jordan's Corner of the Web</h1>
<p>Student, baker, and beginner web builder</p>
</header>

<main>
<h2>About Me</h2>
<p>I am learning HTML on Gwecode and this is my very first website.</p>

<h2>My Hobbies</h2>
<ul>
<li>Baking bread</li>
<li>Painting</li>
<li>Watching old movies</li>
</ul>

<h2>Get In Touch</h2>
<p>You can reach me by <a href="mailto:jordan@example.com">email</a>.</p>
</main>

<footer>
<p class="callout">Built while learning HTML on Gwecode.</p>
</footer>
</body>

Notice every tag here is one you already know. There is no new syntax in this lesson - just the same building blocks from every earlier lesson, arranged into one complete page.

Checking your work

As you build your own version, check a few things: does every opening tag have a matching closing tag (except for the self-closing ones like img and input)? Does your content sit inside the body? Do your section tags make sense for what is inside them?

What comes next

This page is a real, working website, and it is entirely yours. From here you could keep adding sections, add more pages linked together with the anchor tag, or start learning CSS to change how it all looks. Whatever you choose, you built this with your own hands, one tag at a time, and that is worth being proud of.

Quick check

Q1 In the final project, which tags wrap the introductory and closing content of the page?

Q2 Which tags do NOT need a separate closing tag?

Want to save your progress? It's free.

Create a free account