Mini Project: Personal Profile Page

Free PDF of this lesson — save it, print it, revise offline. The video is the same lesson on the Code Scope YouTube channel.

Introduction

Eight lessons gave you the pieces one by one — skeleton, headings, links, images, lists, tables, forms, semantic tags. This project is where the pieces become a page: your own personal profile, the kind of page every developer keeps on the internet. It teaches no new tags. Its real lesson is the professional habit behind every big build: make it in stages, check each stage, and only then move on. (Roman Urdu: Ye project sab pichle lessons ko jor kar aik asal page banata hai — apni profile ka page.)

Key points

This project joins everything from Lessons 1.1–1.8 into one real page — your own profile page. No new tags; the skill is combining.
The lesson builds it in 6 stages — one stage at a time, save and check after each stage:
1. Stage 1 — Semantic structure: the page skeleton with <header>, <main> and <footer> (Lesson 1.7).
2. Stage 2 — Photo + headings: your photo with <img> and alt text, your name in the page's one <h1>, sections in <h2> (Lessons 1.2 + 1.3).
3. Stage 3 — Lists: skills in a <ul>, education or steps in an <ol> (Lesson 1.4).
4. Stage 4 — Table: your marks or education table with <thead> and <tbody> (Lesson 1.5).
5. Stage 5 — Links + contact form: links to your social profiles, and a small contact form with labels (Lessons 1.3 + 1.6).
6. Stage 6 — Classes glimpse: give the main parts class names (like class="card") — the page is now ready to be styled in the CSS series (Lesson 1.8).
Stage-by-stage is the professional way. A big page written in one go hides its mistakes; a stage you just checked cannot surprise you later.(Roman Urdu: Bari cheez hamesha chhote hisson mein banti hai — har stage ke baad check karein.)
This same page becomes your practice page for the CSS series: the class names you add in Stage 6 are the handles CSS will hold to style it. Build the structure honestly today, and styling it later will feel easy.
Final check: scroll the finished page from top to bottom — photo, headings, lists, table, links and form all in place. That full-page view is the project's payoff.

Code examples

Example 1 — The profile page skeleton (all 6 stages in one frame)

<!DOCTYPE html>
<html>
  <head>
    <title>Ali Raza — My Profile</title>
  </head>
  <body>

    <!-- Stage 1 + 2: header, photo, name -->
    <header>
      <img src="images/my-photo.jpg" alt="Photo of Ali Raza">
      <h1>Ali Raza</h1>
      <p>Student of BS Computer Science</p>
    </header>

    <main>
      <!-- Stage 3: skills list -->
      <h2>My Skills</h2>
      <ul>
        <li>HTML</li>
        <li>Computer basics</li>
        <li>Typing</li>
      </ul>

      <!-- Stage 4: marks table -->
      <h2>My Marks</h2>
      <table>
        <thead>
          <tr><th>Subject</th><th>Marks</th></tr>
        </thead>
        <tbody>
          <tr><td>Math</td><td>85</td></tr>
          <tr><td>English</td><td>78</td></tr>
        </tbody>
      </table>

      <!-- Stage 5: links -->
      <h2>Find Me Online</h2>
      <p><a href="https://www.youtube.com/@CodeScopePK" target="_blank">Code Scope on YouTube</a></p>
    </main>

    <footer>
      <p><small>Made by Ali Raza — HTML project</small></p>
    </footer>

  </body>
</html>

What it does: A complete profile page — semantic header/main/footer, a photo with alt text, one h1, a skills list, a real marks table, and an outside link. The contact form (Stage 5's second half) is added the same way as Lesson 1.6's signup form.

What you will see: from top to bottom — your photo, your name in the biggest heading, one line about you; then a "My Skills" section with a bulleted list; a "My Marks" section with a neat two-column table; a "Find Me Online" link that opens YouTube in a new tab; and a small footer line. One page, and every piece of it came from a lesson you have already finished.

Example 2 — Stage 5's second half: the contact form

<h2>Contact Me</h2>
<form>
  <label for="visitor-name">Your Name</label>
  <input type="text" id="visitor-name" name="visitor-name" required>

  <label for="visitor-email">Your Email</label>
  <input type="email" id="visitor-email" name="visitor-email" required>

  <button type="submit">Send</button>
</form>

What it does: The small form that lets a visitor write to the profile's owner — the same label + input pattern as Lesson 1.6's signup form, cut down to the two fields a contact form needs.

What you will see: a "Contact Me" heading with two labelled boxes under it. Click the words "Your Name" and the name box selects itself — the label connection from Lesson 1.6 at work. Press "Send" with a box empty and the browser stops you: both fields are required.

Example 3 — Stage 6: before and after class names

<!-- Stage 1 version: structure only -->
<header>
  <h1>Ali Raza</h1>
</header>

<!-- Stage 6 version: same header, now carrying a class name -->
<header class="profile-header">
  <h1>Ali Raza</h1>
</header>

What it does: Nothing in the structure changes — the Stage 6 pass simply names the page's main parts (profile-header, profile-main, profile-footer), the way Lesson 1.8 taught. The names are handles: CSS grabs an element by its class and styles it.

What you will see: no visual change at all — and that is exactly the point of this stage. If your page looks different after Stage 6, something went wrong. The class name is invisible today and priceless in the CSS series, where .profile-header will find this header in one line.

Quick recap

The project = combination, not new tags — every part of the page comes from Lessons 1.1–1.8.
Build in the lesson's 6 stages: structure → photo + headings → lists → table → links + form → class names.
After every stage: save, refresh, look. A checked stage cannot surprise you later.
The page still has exactly one <h1> — your name; sections take <h2>.
Stage 6's class names change nothing you can see — they make the page ready for the CSS series.

Common mistakes

Writing the whole page without testing — build one stage, save, refresh, look. Only then start the next stage.
Photo mistakes — wrong folder in src (broken image) or an empty alt. In a profile page the photo is the first thing people see: check it twice.
More than one <h1> — sections feel important, but the page still has one main title (your name). Sections take <h2>.

Practice

Build your own profile page with your real information: your photo, your skills, your real marks table, and your real links. Follow the 6 stages in order.
Add one extra section of your choice — for example "My Goals" — with an <h2>, one paragraph, and a list. Give the new section a class name, ready for the CSS series.