Beginner Project: Build Your Personal Profile Page

In this beginner HTML project you will build a personal profile page from scratch. You will combine headings, an image, paragraphs, lists and links into one complete, real web page.

What you will build

You will make a simple "About me" page, like a small online business card. It will have:

• A heading with your name
• A photo of you (or an avatar)
• A short bio
• A list of your skills and a list of your hobbies
• Your goals as a numbered list
• Links to your email and favourite websites

The page will look plain because we are only using HTML. That is perfect. You are building a solid structure, and later you can make it beautiful with CSS.

Tip: You don't have to use real personal details. You can invent a character, like a chef, a musician or a gamer.

Step 1: Set up the folder and boilerplate

Create a folder called profile-page. Inside it, create an images folder and an index.html file. Put a photo in images and name it profile.jpg. Your folder should look like this:

profile-page/
├── index.html
└── images/
    └── profile.jpg

Open index.html in VS Code and add the boilerplate:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Maya Chen – Junior Web Developer</title>
  </head>
  <body>

  </body>
</html>

Change the name in the <title> to yours. Save the file and open it in your browser. The page is empty, but the tab should show your title.

Step 2: Add a heading, photo and bio

Inside the <body>, add your name as the <h1>, your photo and a short introduction.

<h1>Maya Chen</h1>
<img src="images/profile.jpg" alt="Maya smiling in front of a bookshelf" width="300" height="300">
<p>Hi! I'm Maya, a <strong>junior web developer</strong> from Manchester. I'm learning HTML and I love building small, useful websites.</p>
<p>Before coding, I worked in a café for five years, so I know a lot about <em>really</em> good coffee.</p>

Save and refresh. You should see your name, your photo and two paragraphs. If the photo is broken, check that the path and file name match exactly, including upper and lower case. Change the width and height to match your own photo's shape.

Step 3: Add lists of skills, hobbies and goals

Now add sections with <h2> headings. Skills and hobbies don't need an order, so use <ul>. Goals have an order, so use <ol>.

<h2>My skills</h2>
<ul>
  <li>HTML structure and semantics</li>
  <li>Writing clear alt text</li>
  <li>Customer service</li>
</ul>

<h2>My hobbies</h2>
<ul>
  <li>Baking bread</li>
  <li>Hiking in the Peak District</li>
  <li>Board games
    <ul>
      <li>Carcassonne</li>
      <li>Ticket to Ride</li>
    </ul>
  </li>
</ul>

<h2>My goals for this year</h2>
<ol>
  <li>Finish this HTML course.</li>
  <li>Learn CSS to style my pages.</li>
  <li>Build a website for a local shop.</li>
</ol>

Refresh the browser. You will see three sections with bullet points, a nested list of board games, and a numbered list of goals.

Step 4: Add contact links and a footer

Finally, add a contact section with an email link and links to websites you like. Add a footer line with a copyright symbol.

<h2>Contact me</h2>
<p>Send me an email at <a href="mailto:maya@example.com">maya@example.com</a>.</p>
<p>Websites I learn from:</p>
<ul>
  <li><a href="https://developer.mozilla.org" target="_blank" rel="noopener">MDN Web Docs (opens in a new tab)</a></li>
  <li><a href="https://www.w3.org/WAI/" target="_blank" rel="noopener">Web Accessibility Initiative (opens in a new tab)</a></li>
</ul>

<hr>
<p><small>&copy; 2026 Maya Chen. Built with HTML.</small></p>

Click each link to test it. The email link should open your email program.

Common mistake: Forgetting to close a tag, like a missing </ul>. If part of your page looks strange, check that every opening tag has a matching closing tag, in the right order.

The complete profile page code

Here is the full page. Compare it with yours, or copy it and change the details.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Maya Chen – Junior Web Developer</title>
  </head>
  <body>
    <!-- Introduction -->
    <h1>Maya Chen</h1>
    <img src="images/profile.jpg" alt="Maya smiling in front of a bookshelf" width="300" height="300">
    <p>Hi! I'm Maya, a <strong>junior web developer</strong> from Manchester. I'm learning HTML and I love building small, useful websites.</p>
    <p>Before coding, I worked in a café for five years, so I know a lot about <em>really</em> good coffee.</p>

    <!-- Skills and hobbies -->
    <h2>My skills</h2>
    <ul>
      <li>HTML structure and semantics</li>
      <li>Writing clear alt text</li>
      <li>Customer service</li>
    </ul>

    <h2>My hobbies</h2>
    <ul>
      <li>Baking bread</li>
      <li>Hiking in the Peak District</li>
      <li>Board games
        <ul>
          <li>Carcassonne</li>
          <li>Ticket to Ride</li>
        </ul>
      </li>
    </ul>

    <h2>My goals for this year</h2>
    <ol>
      <li>Finish this HTML course.</li>
      <li>Learn CSS to style my pages.</li>
      <li>Build a website for a local shop.</li>
    </ol>

    <!-- Contact -->
    <h2>Contact me</h2>
    <p>Send me an email at <a href="mailto:maya@example.com">maya@example.com</a>.</p>
    <p>Websites I learn from:</p>
    <ul>
      <li><a href="https://developer.mozilla.org" target="_blank" rel="noopener">MDN Web Docs (opens in a new tab)</a></li>
      <li><a href="https://www.w3.org/WAI/" target="_blank" rel="noopener">Web Accessibility Initiative (opens in a new tab)</a></li>
    </ul>

    <hr>
    <p><small>&copy; 2026 Maya Chen. Built with HTML.</small></p>
  </body>
</html>

In the browser you get a complete profile page: a big name, a photo, a short bio, three lists, working links and a small copyright line at the bottom. Open DevTools with Inspect and click around to see how the elements are nested.

Ideas to extend your profile page

Finished? Great work! Try some of these to practise more:

• Add a "Glossary" or "Fun facts" section using a description list (<dl>, <dt>, <dd>).
• Add a small menu at the top with links to each section using id and #.
• Create a second page, projects.html, and link both pages to each other.
• Add a favourite quote with <blockquote>.
• Add a phone link with tel: or a downloadable CV with the download attribute.

Practice exercise

Add a "Favourite places" section to your profile page with an <h2>, a photo with good alt text and correct width and height, and a short paragraph. Then add a link at the top of the page that jumps straight to this new section.

Hint: give the new <h2> an id like id="favourite-places", and link to it with href="#favourite-places".

Key takeaways

• A real page combines the boilerplate, headings, paragraphs, images, lists and links.
• Build step by step: save and refresh after each change to catch mistakes early.
• Choose elements for their meaning: <ul> for skills, <ol> for ordered goals, <strong> for important words.
• Check paths, alt text and closing tags whenever something looks wrong.
• Your plain HTML page is a strong base; CSS will make it look great later.