LESSON 25

Project: Build a Personal Profile Page

Learning objective: Apply your HTML skills to build a complete personal profile page.

Understand

Time to build something real using only HTML.

You will create a personal profile page: a header with your name, a main area introducing yourself with a photo and a list of skills, a small contact form, and a footer. Use semantic elements and accessible images and labels. Do not worry about styling yet — that comes in the CSS section.

Analogy: This is your first portfolio piece — the skeleton you will dress up with CSS next.

See It in Action

A suggested outline for your profile page:

<header><h1>Your Name</h1></header>
<main>
  <img src="me.jpg" alt="Photo of me">
  <section><h2>About Me</h2><p>...</p></section>
  <section><h2>Skills</h2><ul><li>HTML</li></ul></section>
  <form> ... contact ... </form>
</main>
<footer><p>Contact: you@email.com</p></footer>
How it works: Each part maps to a skill you learned: semantic layout, an accessible image, a heading structure, a list, and a form.

Try It Yourself

  1. Build the profile page from the outline.
  2. Add a real photo with alt text and a skills list.
  3. Add a contact form with labelled fields, then validate.

Quick Quiz

What should this project use to describe its structure?

Challenge

Build and validate a complete personal profile page using the HTML skills from this section.

Success condition: You have a valid, semantic profile page with a heading, photo, skills list, contact form, and footer.