🧱 PHASE 1 · HTML PROJECTS

Phase 1
Build It!

All 4 HTML lessons combined into 4 real pages. No CSS yet — pure structure, semantics, and content. Each page should be deployable right now.

4
PROJECTS
~2h
BUILD TIME
HTML
ONLY
✅
PORTFOLIO READY
LESSON 01
Intro to HTML
LESSON 02
Elements & Semantics
LESSON 03
Links, Images & Media
LESSON 04
Forms, Tables & Lists
💼
PROJECT 01 OF 04
Personal Portfolio Page
A complete personal webpage with semantic structure, navigation, profile image, about section, skills, projects, and contact info. Pure HTML — no styling needed to make it meaningful.
semantic structure navigation images + figure links lists
✅ Requirements
  • <header> with name + <nav> with 4 anchor links (#about, #skills, #projects, #contact)
  • <main> with 4 <section> elements, each with an id matching the nav links
  • Profile <figure> with Picsum image + <figcaption>
  • Skills as a <ul> with at least 6 items
  • Projects as a <ol> (ranked list) with 3 items
  • Contact section with mailto, tel, and GitHub links
  • <footer> with © and current year
🧠 Concepts Used
  • Full semantic HTML5 structure
  • Same-page anchor links (href="#id")
  • figure + figcaption for profile image
  • External links with noopener noreferrer
  • mailto: and tel: link schemes
  • Ordered and unordered lists
  • HTML entities (&copy;)
portfolio.html — Complete Solution
HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ali Hassan | Web Developer</title>
  <meta name="description" content="Portfolio of Ali Hassan, web developer from Lahore">
</head>
<body>

  <header>
    <h1>Ali Hassan</h1>
    <p>Web Developer & Python Enthusiast 🐍🌐</p>
    <nav>
      <a href="#about">About</a> |
      <a href="#skills">Skills</a> |
      <a href="#projects">Projects</a> |
      <a href="#contact">Contact</a>
    </nav>
  </header>

  <main>

    <section id="about">
      <h2>About Me</h2>
      <figure>
        <img src="https://picsum.photos/200/200?random=1"
             alt="Ali Hassan profile photo"
             loading="lazy" width="200" height="200">
        <figcaption>Ali Hassan, Lahore 📍</figcaption>
      </figure>
      <p>Hi! I'm a <strong>20-year-old web developer</strong> from
      <em>Lahore, Pakistan</em>. I'm passionate about building
      clean, accessible websites and learning new technologies every day.</p>
    </section>

    <section id="skills">
      <h2>My Skills</h2>
      <ul>
        <li>🌐 HTML5 — Semantic markup & accessibility</li>
        <li>🎨 CSS3 — Flexbox, Grid, Animations</li>
        <li>⚡ JavaScript — DOM manipulation & APIs</li>
        <li>🐍 Python — Data analysis & automation</li>
        <li>🗃️ SQL — Database queries</li>
        <li>📱 Responsive Design — Mobile-first</li>
      </ul>
    </section>

    <section id="projects">
      <h2>Top Projects</h2>
      <ol>
        <li>
          <strong>BitWithBite Study Tracker</strong> —
          A Python app tracking study sessions with CSV export.
          <a href="https://github.com" target="_blank" rel="noopener noreferrer">View Code</a>
        </li>
        <li>
          <strong>Personal Blog</strong> —
          A semantic HTML5 blog with article, aside, and figure elements.
        </li>
        <li>
          <strong>Expense Tracker CLI</strong> —
          Command-line budget tool in Python with JSON persistence.
        </li>
      </ol>
    </section>

    <section id="contact">
      <h2>Contact Me</h2>
      <ul>
        <li>📧 <a href="mailto:ali@example.com">ali@example.com</a></li>
        <li>📞 <a href="tel:+923001234567">0300-1234567</a></li>
        <li>💻 <a href="https://github.com/ali"
                target="_blank" rel="noopener noreferrer">github.com/ali</a></li>
      </ul>
    </section>

  </main>

  <footer>
    <p>&copy; 2025 Ali Hassan. Built with pure HTML5.</p>
  </footer>

</body>
</html>
✨
CSS makes this shine — but structure comes first
This page works and is fully accessible without a single line of CSS. In Phase 2, you'll add a stylesheet that transforms this identical HTML into a beautiful, professional portfolio. The fact that it works now proves your HTML structure is solid.
🍕
PROJECT 02 OF 04
Restaurant Menu Page
A complete restaurant website with logo, navigation, hero section, categorised menu using description lists, table for pricing specials, image gallery with figures, and a reservation form.
description lists tables figure gallery form + fieldset nested lists
✅ Requirements
  • Header with restaurant name + nav (Menu, Gallery, Reserve)
  • Hero <section> with h2 tagline and description paragraph
  • Menu section: 3 <dl> groups (Starters, Mains, Desserts) with dt=dish name, dd=description + price
  • Specials table: weekday, dish, original price, special price — with colspan for header
  • Gallery: 6 <figure> elements with Picsum images and figcaptions
  • Reservation form: name, email, date, time, number guests (type="number" min="1" max="20"), special requests (textarea)
🧠 Concepts Used
  • Description lists (<dl>, <dt>, <dd>)
  • Table with thead/tbody/tfoot and colspan
  • Figure gallery with figcaption
  • Form with fieldset grouping
  • type="number", type="time", type="date"
  • &mdash; and &pound; entities
menu.html — Key Sections
HTML
<!-- Menu section with description lists -->
<section id="menu">
  <h2>Our Menu</h2>

  <article>
    <h3>🥗 Starters</h3>
    <dl>
      <dt>Crispy Samosa (2 pcs)</dt>
      <dd>Flaky pastry filled with spiced potato &mdash; <strong>PKR 250</strong></dd>

      <dt>Chicken Tikka Starter</dt>
      <dd>Tender marinated chicken bites &mdash; <strong>PKR 450</strong></dd>
    </dl>
  </article>
</section>

<!-- Specials table -->
<section id="specials">
  <h2>Weekly Specials</h2>
  <table>
    <caption>Lunch deals — Mon to Fri</caption>
    <thead>
      <tr>
        <th scope="col">Day</th>
        <th scope="col">Special Dish</th>
        <th scope="col">Price</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Monday</th>
        <td>Karahi Chicken + Naan</td>
        <td>PKR 650</td>
      </tr>
      <tr>
        <th scope="row">Tuesday</th>
        <td>Biryani Combo</td>
        <td>PKR 550</td>
      </tr>
    </tbody>
  </table>
</section>

<!-- Reservation form -->
<section id="reserve">
  <h2>Book a Table</h2>
  <form action="/reserve" method="POST">
    <fieldset>
      <legend>Your Details</legend>
      <label for="rname">Full Name</label>
      <input type="text" id="rname" name="name" required>

      <label for="rdate">Date</label>
      <input type="date" id="rdate" name="date" required>

      <label for="rtime">Time</label>
      <input type="time" id="rtime" name="time" required>

      <label for="guests">Number of Guests</label>
      <input type="number" id="guests" name="guests"
             min="1" max="20" value="2">

      <label for="notes">Special Requests</label>
      <textarea id="notes" name="notes" rows="3"></textarea>
    </fieldset>
    <button type="submit">Reserve Table</button>
  </form>
</section>
✨
Description lists are perfect for menus, FAQs, and glossaries
The <dl>/<dt>/<dd> pattern is semantically correct for anything that pairs a term with its definition or description — menus, dictionaries, product specs, FAQ questions and answers. Screen readers understand this pairing natively.
📚
PROJECT 03 OF 04
Wikipedia-Style Article
An encyclopedia-style article on a topic of your choice. Practise long-form semantic HTML with a table of contents, multiple sections, blockquotes, code samples, footnotes, and an information table.
long-form content table of contents blockquote + cite nested lists data table
✅ Requirements
  • Table of Contents as a <nav> with ordered list linking to section IDs
  • At least 4 <section> elements with h2, h3, paragraphs
  • At least 2 <blockquote> with <cite>
  • At least 1 <figure> with image and caption
  • An "Info Box" table (2 columns: property | value)
  • Inline <code> and at least one entity (&mdash;, &trade;, etc.)
  • <aside> with "See Also" related links
🧠 Topic Ideas
  • Python (the language) — history, features, use cases
  • HTML5 — what changed from HTML4
  • The Internet — ARPANET, TCP/IP, WWW
  • Lahore — history, culture, landmarks
  • A sport you love — rules, history, tournaments
  • Any subject you'd actually read about!
✨
This project tests every HTML concept from Phase 1
A real Wikipedia article uses almost every HTML element — headings, paragraphs, links, lists, tables, figures, blockquotes, code, articles, sections, asides, nav. Building one consolidates everything. Choose a topic you genuinely find interesting — you'll write better content.
📝
PROJECT 04 OF 04
Job Application Form
A comprehensive, fully-accessible job application form using every form element type learned. This is the most form-heavy project — covering all input types, validation attributes, select menus, and file upload.
all input types fieldset groups select + optgroup radio + checkbox file upload validation attributes
✅ Fieldset Groups
  • Personal Details: full name, email, phone (tel), DOB, city
  • Education: degree (select), institution (text), graduation year (number min="2000" max="2030"), GPA (number min="0" max="4" step="0.1")
  • Position Applied: role (radio: Frontend/Backend/Fullstack), experience (select: 0-1/1-3/3-5/5+ years)
  • Skills: checkboxes for HTML, CSS, JS, Python, SQL, React
  • Documents: CV file upload (accept=".pdf,.doc"), Cover Letter (textarea)
🧠 Validation Rules
  • Full name: required, minlength="3"
  • Email: type="email", required
  • Phone: type="tel", required
  • GPA: type="number" min="0" max="4.0" step="0.01"
  • Position radios: required on the group
  • CV file: accept=".pdf,.doc,.docx"
  • Cover letter: maxlength="1000", rows="6"
✨
Try submitting with missing required fields
Open your form in a browser, leave required fields empty, and click submit. The browser shows built-in validation errors — red outlines, tooltip messages — all without a single line of JavaScript. This is HTML5 constraint validation working for free. Real-world apps layer JavaScript validation on top, but this HTML-only validation is always the baseline.
🎨
Phase 1 Complete — Time for CSS!

Your HTML pages have great structure. Now CSS will transform them into visually stunning, professional websites. Every property you learn in Phase 2 will apply directly to these HTML files.

HTML5 Structure ✓ Semantic Elements ✓ Links & Images ✓ Forms & Tables ✓ Lists (ul/ol/dl) ✓ Accessibility ✓ 4 Real Projects ✓
Phase 1 Complete4 Projects Built