Projects›Core· 90 min read

Project: Personal Profile Page

Your first real project. Combine headings, images, lists and links into a personal profile page you can show off.

What you will learn

Plan a page before coding it
Combine the core tags into one cohesive page
Produce something you are proud to share

The brief

Build a single-page profile about yourself using only what you have learned. No CSS needed yet — this is about structure.

Requirements checklist

The full page skeleton with a proper <title>.
An <h1> with your name.
A photo (or any image) with good alt text.
A short paragraph about yourself.
A <h2> “My Skills” with an unordered list.
A <h2> “My Goals” with an ordered list.
A “Contact me” section with an email link and a phone link.
Use semantic tags: <header>, <main>, <footer>.

Start here, then make it yours

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Asha Rao — Profile</title>
</head>
<body>
  <header>
    <h1>Asha Rao</h1>
    <p>Aspiring Web Developer at CodingClave</p>
  </header>

  <main>
    <img src="https://picsum.photos/200" alt="Photo of Asha" width="160">

    <h2>About Me</h2>
    <p>Write two or three sentences about yourself here.</p>

    <h2>My Skills</h2>
    <ul>
      <li>HTML</li>
      <li>Teamwork</li>
    </ul>

    <h2>My Goals</h2>
    <ol>
      <li>Master HTML &amp; CSS</li>
      <li>Build five projects</li>
      <li>Get my first job</li>
    </ol>
  </main>

  <footer>
    <p>Email: <a href="mailto:asha@email.com">asha@email.com</a></p>
  </footer>
</body>
</html>

Live preview

This starter ties together everything you have learned. The full page skeleton wraps three semantic regions: <header> holds your name (<h1>) and tagline, <main> holds the photo (<img> with alt), an About paragraph, a “My Skills” <ul> and a “My Goals” <ol>, and <footer> holds an email link (mailto:). Swap every placeholder for your own details and add more sections.

Note: Output: A tidy, unstyled profile page: your name and tagline up top, a photo with About / Skills (bullets) / Goals (numbers) in the middle, and an email link in the footer.

Tip: Replace every piece with your own real details. Add more sections — hobbies, favourite books, your projects. Make it you.

✍️ Practice

Complete the profile page with all eight checklist items.
Add at least one section of your own that is not on the checklist.

🏠 Homework

Polish your profile page and save it safely — you will add CSS styling to this exact page in the CSS module.