Project: Personal Profile Page

Introduction

This first project turns the core HTML skills into a small, complete page. You will build a personal profile page with a standard document skeleton, headings, paragraphs, an image, links, contact information, and semantic header, main, and footer regions.

Prerequisites

Project Goal

Build a one-page profile that includes:

  • a page title and meta description
  • a site header
  • a profile image with good alt text
  • short introduction paragraphs
  • a list of skills
  • links to projects or social profiles
  • contact information
  • a footer

Suggested folder:

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

Start with the Skeleton

Create index.html:

The title appears in the browser tab. The h1 is the visible page heading.

Add Main Profile Content

Use <main> for the unique content of the page:

If your image is decorative or a placeholder, use a better description or replace it with meaningful content.

Use descriptive link text. Avoid a list of repeated "click here" links.

Add Contact Information

<address> is appropriate for page owner contact details:

html
<section aria-labelledby="contact-heading">
  <h2 id="contact-heading">Contact</h2>
  <address>
    Email: <a href="mailto:alex@example.com">alex@example.com</a><br>
    Location: Shanghai, China
  </address>
</section>

Only include information you are comfortable publishing. HTML is public.

Complete Example

DevTools Check

Open the page with Live Server, then inspect:

  • Does the page have one visible <h1>?
  • Is main content inside <main>?
  • Does the image load with 200 status?
  • Does the image have useful alt text?
  • Do all links have meaningful text?
  • Does the DOM match your source structure?

Run Lighthouse Accessibility and SEO. Fix obvious issues before moving on.

Upgrade Ideas

  • Add a <nav> linking to sections: About, Skills, Contact
  • Add id anchors to each section
  • Add Open Graph metadata
  • Add a downloadable resume link
  • Add CSS later without changing the semantic structure

FAQ

Can I use a placeholder image?

Yes for practice, but write alt honestly. If the image is only decorative, use alt="".

Should the skills be a list?

Yes. Skills are a group of related items, so <ul> is appropriate.

Can I include phone number and address?

Only if you want that information public. HTML pages can be copied, indexed, and archived.

Why use aria-labelledby on sections?

It connects the section landmark to its visible heading. It is not mandatory for every section, but it is a useful practice in project pages.

What comes next?

Project: blog article page — build a longer article with article, time, anchor links, code blocks, quotes, and SEO metadata.