Build a Personal Web Page With Your Child: A Weekend Project

A personal web page is one of the most satisfying first projects: it's about something your child cares about, it looks finished, and they can show it to people. Here's how to do it over a weekend.

Step 1: choose a topic (15 minutes)

Pick something your child could talk about for ten minutes: a pet, a football team, a favourite animal, a game, a family trip. Ask them three questions:

• What do you want people to learn?
• What are three facts or things to include?
• Which picture would look best at the top?

Sketch the page on paper with boxes for the heading, text and pictures. Planning on paper first is what real web designers do.

Step 2: the structure (30 minutes)

Create a file called index.html. Here's a starting point for a page about a pet:

<!DOCTYPE html>
<html>
<head>
  <title>All About Max</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>All About Max</h1>
    <p>My dog, my best friend.</p>
  </header>

  <main>
    <h2>Favourite things</h2>
    <ul>
      <li>Fetch</li>
      <li>Walks in the park</li>
      <li>Sleeping on the sofa</li>
    </ul>

    <h2>Fun fact</h2>
    <p>Max can catch a ball in mid-air.</p>
  </main>
</body>
</html>

The <link> line connects a separate CSS file, which you'll create next. See HTML for kids if the tags are new.

Step 3: the style (45 minutes)

Create style.css in the same folder:

body {
  font-family: Arial, sans-serif;
  background-color: #fff8e7;
  margin: 0;
}

header {
  background-color: #ff8c42;
  color: white;
  padding: 20px;
  text-align: center;
}

main {
  max-width: 600px;
  margin: 20px auto;
  padding: 0 20px;
  line-height: 1.6;
}

h2 {
  color: #c0501a;
}

Let your child change the colours until it feels like theirs. See CSS for kids for what each line does.

Step 4: pictures (30 minutes)

Add a photo or a drawing:

<img src="max.jpg" alt="Max catching a ball" width="300">

If you use photos of people, think together about what's safe to put online. A good rule: no full names, no addresses, no school names.

Step 5: add something extra

Pick one:

• A second page and a link between them: <a href="facts.html">More facts</a>.
• A button that changes the background colour with a little JavaScript.
• A table or list of favourite things ranked in order.

Step 6: share it

You can show the page on your own computer, or look into free hosting services if you want a real address. If you publish anything online, keep personal details out of it and check it together first.

What your child learns

• Planning before building.
• Structure with HTML and style with CSS.
• Debugging when something doesn't show up.
• Finishing and sharing a project.

Keep going

Once your child has a page, ideas multiply: a fan site, a recipe page, a portfolio of their projects. Our free HTML course and CSS course take them step by step.