Project: your profile page

What you will build

This project turns everything you have learned into one page: a personal profile for yourself or a made-up person. It is the kind of page a student, freelancer or job seeker puts online. When you finish you will have:

• a valid page skeleton with a proper head;
• landmarks: header, nav, main, footer;
• headings in order, paragraphs and lists;
• a photo with good alt text;
• a table (for example, skills or timetable);
• a contact form with labels and validation.

Use real details if you are comfortable sharing them; otherwise invent them. Never put private information such as your home address or ID numbers on a public page.

Step 1: the skeleton

Make a file called index.html. Open it in your editor and in a browser (or paste into the editor below):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Riya Verma | Web designer in Pune</title>
  <meta name="description" content="Riya Verma is a student web designer in Pune. See her skills, projects and how to contact her.">
</head>
<body>
  <h1>Riya Verma</h1>
</body>
</html>

Change the name, city and description to yours. Check the tab shows your title.

Step 2: landmarks and navigation

Wrap the page in structure, with in-page links to sections you are about to add:

<body>
  <a href="#main">Skip to main content</a>
  <header>
    <p><strong>Riya Verma</strong></p>
    <nav aria-label="Main">
      <a href="#about">About</a>
      <a href="#skills">Skills</a>
      <a href="#contact">Contact</a>
    </nav>
  </header>
  <main id="main">
    <h1>Hello, I am Riya</h1>
  </main>
  <footer><p>&copy; 2026 Riya Verma</p></footer>
</body>

Step 3: about, with a photo and a list

<section id="about">
  <h2>About me</h2>
  <img src="riya.jpg" alt="Riya smiling, standing in front of a whiteboard" width="300" height="300">
  <p>I am a second-year computer science student who loves turning ideas into clear, friendly web pages.</p>
  <h3>What I enjoy</h3>
  <ul>
    <li>Designing simple layouts</li>
    <li>Learning accessibility</li>
    <li>Sketching ideas on paper first</li>
  </ul>
</section>

Use your own photo, or skip the image and move on. If you use one, give it a truthful alt, width and height.

Step 4: skills table

<section id="skills">
  <h2>Skills</h2>
  <table>
    <caption>Skills and how long I have practised them</caption>
    <thead>
      <tr><th scope="col">Skill</th><th scope="col">Level</th><th scope="col">Years</th></tr>
    </thead>
    <tbody>
      <tr><th scope="row">HTML</th><td>Confident</td><td>1</td></tr>
      <tr><th scope="row">CSS</th><td>Learning</td><td>0.5</td></tr>
    </tbody>
  </table>
</section>

Only list what is true. A short, honest list is better than an impressive false one.

Step 5: contact form

<section id="contact">
  <h2>Get in touch</h2>
  <form action="/contact" method="post">
    <p>
      <label for="name">Your name</label><br>
      <input type="text" id="name" name="name" required autocomplete="name">
    </p>
    <p>
      <label for="email">Your email</label><br>
      <input type="email" id="email" name="email" required autocomplete="email">
    </p>
    <p>
      <label for="message">Message</label><br>
      <textarea id="message" name="message" rows="5" maxlength="500" required></textarea>
    </p>
    <button type="submit">Send message</button>
  </form>
</section>

The form will not deliver messages until a server receives them. For a practice page, that is fine. For a real one, use your hosting's form handler or a form service, and also show an email address as a fallback.

Step 6: check your work

Go through this list:

1. Validate the HTML at validator.w3.org and fix every error.
2. Keyboard: Tab through the page. Can you reach every link and field? Does the skip link work?
3. Zoom to 200 per cent. Does anything get cut off?
4. Headings: is there exactly one h1, and do the others follow in order?
5. Images: does each have a meaningful alt?
6. No CSS needed: the page should be readable and logical even unstyled. That is what you built.
7. Read it aloud to catch typos.

Common mistakes

• Writing it all at once, then hunting for a missing closing tag.
• Using headings for size rather than structure.
• Forgetting alt, label or lang.
• Adding every skill you have heard of instead of true ones.
• Publishing private details, such as phone number or address, without thinking.

Exercise

Extend your page with a "Projects" section listing three things you made or want to make, each with a heading, a short paragraph and a link. Then run the checklist again.

<section id="projects">
  <h2>Projects</h2>
  <article>
    <h3>Neighbourhood bakery site</h3>
    <p>A one-page site with opening hours and a map for a local bakery.</p>
    <p><a href="https://example.com/bakery/">View the bakery site</a></p>
  </article>
  <article>
    <h3>Class timetable</h3>
    <p>A table-based timetable that works with a screen reader.</p>
    <p><a href="https://example.com/timetable/">See the timetable</a></p>
  </article>
  <article>
    <h3>Recipe collection</h3>
    <p>A list of family recipes with ingredient lists and steps.</p>
    <p><a href="https://example.com/recipes/">Browse the recipes</a></p>
  </article>
</section>

When you are ready to make it look good, continue with the CSS course.