Final project: build and publish a personal web page

This is the project that brings the whole programming path together. You will write a small personal page, test it, and put it on the internet at an address anyone can open. Publishing is easier than most people expect, because a simple page is only a few files. It also brings a responsibility: once a page is public, strangers can read it, so you will decide carefully what goes on it. Use a made-up persona if you prefer; the skills are identical.

Plan before you build

Decide the purpose first. A personal page might introduce you, list a hobby or skill, or show a small portfolio. Write down three sections, such as About, What I am learning and Contact, and a short sentence for each. Sketch the order on paper. Planning for five minutes avoids rewriting later, in the same way that the flowcharts you drew earlier helped you plan an algorithm.

Build the page

Create a folder called personal-site with index.html and style.css inside it. This page uses the semantic elements from the HTML lessons (header, main, section, footer), one h1, headings in order, a descriptive alt for the image, a viewport line so it works on phones, and a language on the html element so screen readers pronounce it correctly. Write your own words and replace the fictional content.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Amina Wanjiru - Garden notes</title>
  <meta name="description" content="Amina's page about learning to grow vegetables and to code.">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>Amina Wanjiru</h1>
    <p>Learning to grow vegetables and to build web pages.</p>
  </header>

  <main>
    <section id="about">
      <h2>About me</h2>
      <p>I keep a small vegetable plot and I am teaching myself computing. This page is my first website.</p>
    </section>

    <section id="learning">
      <h2>What I am learning</h2>
      <ul>
        <li>HTML for structure</li>
        <li>CSS for looks</li>
        <li>JavaScript for behaviour</li>
      </ul>
    </section>

    <section id="contact">
      <h2>Contact</h2>
      <p>Email me at <a href="mailto:amina@example.com">amina@example.com</a>.</p>
    </section>
  </main>

  <footer>
    <p>Made by Amina. Last updated October 2026.</p>
  </footer>
</body>
</html>

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.125rem;
  line-height: 1.6;
  color: #222222;
  background-color: #f6faf6;
  margin: 0;
}

header, main, footer {
  max-width: 40rem;
  margin: 0 auto;
  padding: 1rem;
}

header {
  background-color: #1b5e20;
  color: #ffffff;
  max-width: none;
}

header h1, header p {
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
}

h2 {
  color: #1b5e20;
}

a {
  color: #0b4f9c;
}

a:focus {
  outline: 3px solid #e65100;
  outline-offset: 2px;
}

footer {
  border-top: 1px solid #cccccc;
  font-size: 0.9rem;
}

Check it before you publish

Open the page in your browser and work down this list. It takes ten minutes and catches most problems. The first four are accessibility checks, which help everyone, including people using screen readers or magnification, and are good practice for any page you publish.

Where to publish

Your page is a static site: only ready-made files, no database and no program running on the server. That is the easiest kind to host, and several services give you a free plan for it. Free plans and screens change over time, so treat the steps below as the shape of the process and follow the host's current help page.

The simplest option is Netlify Drop: sign in, open the drop page, drag the whole personal-site folder onto it and the host gives you an address. To use GitHub Pages, create a GitHub repository, push your project to it (see the Git lesson), then open the repository's Settings, choose Pages, set the source to deploy from the main branch at the root folder, and wait a minute or two. To use Vercel, sign in, choose to add a new project, import the repository and accept the defaults for a plain HTML site. Names of menus move around between releases, so follow the on-screen wording.

Addresses, domains and basic web security

A free host gives you an address on its own domain, which is perfectly good for a personal page. If you later want a name such as aminagarden.example, you buy the name from a domain registrar for a yearly fee and point it at your host; the host's help pages explain the steps. The registrar and the host are separate companies. Do not rush this: free addresses are enough to learn and to share a page.

Basic safety for a static page comes down to a few habits. Serve the page over HTTPS, which these hosts do automatically. Keep passwords and tokens out of your files and out of Git. Do not add forms that collect people's details unless you use a trusted form service and know what it does with the data. Load scripts only from sources you trust, and keep your hosting and GitHub accounts protected with a strong Passphrase and multifactor authentication. Finally, tell the world only what you meant to.