HTML Mastery

Web Foundations Curriculum · Beginner to Confident

A structured 12-week programme for students with no prior coding experience. Go from opening a text editor for the very first time to building, validating, and deploying a complete, accessible, semantic multi-page website from scratch.

12Weeks

5Stages

55+Lessons

8Projects

0Prerequisites

Download Official 2026 Curriculum PDF

Core Topics: HTML Structure · Text & Lists · Links & Navigation · Images & Tables · Forms & Validation · Semantic HTML5 · SEO & Accessibility · 4-Page Capstone Website

Learning Pathway: Programme Overview

Stage	Focus	Duration	Level
Stage 1	HTML Foundations — structure, tags, text	3 weeks (Weeks 1–3)	Beginner
Stage 2	Links, Lists & Navigation	2 weeks (Weeks 4–5)	Beginner
Stage 3	Images, Media & Tables	2 weeks (Weeks 6–7)	Intermediate
Stage 4	Forms & User Input	2 weeks (Weeks 8–9)	Intermediate
Stage 5	Semantic HTML5, SEO & Capstone	3 weeks (Weeks 10–12)	Advanced

Curriculum Rationale: Key Decisions Explained

Question	Tech Minds Engineering Rationale
Why HTML first?	HTML is the skeleton of every website. Before a student learns CSS or JavaScript, they must understand document structure. A student who skips HTML foundations will struggle to debug or reason about web pages, DOM trees, and accessibility for the rest of their career.
Why 12 weeks for HTML?	Most beginners rush through HTML in a single weekend and miss the depth. This curriculum takes deliberate time to cover accessibility, semantic meaning, complex forms, native client-side validation, Open Graph metadata, and W3C compliance — the exact skills that separate surface-level coders from strong engineers.
Why build projects every week?	Reading about HTML without writing it creates an illusion of understanding. Every week ends with a concrete project built from an empty file, reinforcing every concept through real keyboard practice and GitHub submissions.
What comes after this course?	This course feeds directly into CSS Mastery, followed by JavaScript Fundamentals, React.js Mastery, and Node.js & Backend Development. Graduates of HTML Mastery are 100% prepared for the next stage of the Tech Minds Web & Full-Stack track.

Environment Check Before Week 1

Ensure you have installed VS Code, the Live Server extension, Google Chrome, and Git using our Developer Environment Setup Guide.

Stage 1: HTML Foundations (Weeks 1 – 3 · Beginner)

Understanding how the web works and writing your first structured HTML documents.

This stage introduces the web and how browsers read markup. Zero prior coding or typing fluency is assumed. By the end of Week 3, you will build, inspect, and view structured web pages on your own computer using nothing more than VS Code and Google Chrome.

Week 1 — Introduction to the Web & HTML (5 hrs)

01: What is the internet? What is a website? (Clients, servers, HTTP, and URLs)
02: How browsers read, parse, and display HTML documents
03: Setting up VS Code, creating a clean project folder, and opening your first file
04: The HTML5 document structure: <!DOCTYPE html>, <html>, <head>, and <body>
05: Your first web page — writing and saving index.html
06: Opening your page in Chrome (and via Live Server) and inspecting the result

Week 1 Project: Build a simple 'About Me' page (index.html) displaying your name and a short introduction about yourself, saved cleanly and opened in Chrome.

Week 2 — Tags, Elements & Attributes (5 hrs)

01: What are HTML tags? Opening tags (<p>) vs closing tags (</p>) and void/self-closing tags
02: What are elements? Distinguishing tags vs elements vs inner text content
03: What are attributes? Adding name="value" metadata to opening tags (lang, id, title)
04: The <title> element — naming your page clearly in the browser tab and search results
05: The <meta charset="UTF-8"> declaration — why character encoding matters for symbols, Naira (₦), and global languages
06: Comments in HTML () — writing helpful notes in your source code

Week 2 Project: Build a structured personal profile page using at least 6 distinct HTML tags with valid attributes, <title>, <meta charset="UTF-8">, and explanatory HTML comments.

Week 3 — Headings, Paragraphs & Text Formatting (5 hrs)

01: Heading tags <h1> through <h6> — document outline hierarchy and why every page needs one clear <h1>
02: The paragraph tag <p> — structuring readable body copy
03: Line breaks with <br> (for addresses/poems, never layout spacing!) and thematic breaks with <hr>
04: Bold and italic semantics: <strong> & <em> (meaning/emphasis) vs <b> & <i> (stylistic offset) — when to use each
05: Superscript (<sup>), subscript (<sub>), and inline code (<code>) tags
06: Whitespace collapsing in HTML — why browsers ignore extra spaces and blank lines in source files

Week 3 Project: Build a formatted technical article page featuring a primary title (<h1>), logical subheadings (<h2>, <h3>), structured paragraphs, thematic breaks, and semantic inline formatting (<strong>, <em>, <code>, <sup>/<sub>).

Stage 1 Code Reference & Annotated Examples

Anatomy of an Element vs Tag vs Attribute

  ┌─────────────── Opening Tag ───────────────┐          ┌─ Closing Tag ─┐
  <p id="intro-summary" lang="en">Welcome to Tech Minds!</p>
     └───────┬────────┘           └─────────┬─────────┘
         Attribute                       Content
  └────────────────────── Complete HTML Element ─────────────────────────┘

Standard HTML5 Boilerplate & Semantic Text Formatting

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Character encoding MUST appear at the top of <head> -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Why Every Developer Starts With HTML | Tech Minds Blog</title>
  </head>
  <body>
    <!-- Primary page title: use only ONE <h1> per page -->
    <h1>Why Every Developer Starts With HTML</h1>

    <p>
      Published by <strong>Tech Minds Engineering Faculty</strong> in
      <em>Bwari, Abuja</em>. Tuition starts from ₦150,000.
    </p>

    <hr />

    <h2>1. Structure Comes Before Style</h2>
    <p>
      Every web application renders a Document Object Model (DOM). Whether a user
      visits on a flagship laptop or a screen reader, tags like
      <code>&lt;h2&gt;</code> and <code>&lt;p&gt;</code> convey clear hierarchy.
    </p>

    <h3>Scientific & Technical Notation</h3>
    <p>
      Water is written chemically as H<sub>2</sub>O, whereas algorithmic time
      complexity for nested loops is often O(n<sup>2</sup>).
    </p>

    <h2>2. Campus Postal Address</h2>
    <p>
      Tech Minds Academy<br />
      G5 Plaza, Sabon-Gari Road<br />
      Bwari, Abuja, Nigeria
    </p>
  </body>
</html>

Connecting pages together, linking across the web, and structuring navigation menus.

The World Wide Web is named after hyperlinks. In Stage 2, you move beyond isolated single files to build multi-page websites connected by clean relative URLs, in-page jump links, clickable phone/email triggers, structured lists, and semantic <nav> bars.

Week 4 — Links & Anchor Tags (5 hrs)

01: The anchor tag <a> — what hypertext is and how links connect the web
02: The href attribute — linking to local files and external web URLs
03: Relative URLs (about.html, ./pages/contact.html, ../index.html) vs absolute URLs (https://...) — when to use each
04: Opening external links in a new tab safely with target="_blank" and rel="noopener noreferrer"
05: Linking to specific sections on the same page using #id fragment identifiers
06: Actionable email links (mailto:) and mobile click-to-call phone links (tel:)

Week 4 Project: Build a 2-page website (index.html Home and contact.html Contact) linked seamlessly in both directions using relative anchor tags, section #id jump links, mailto:, and tel: links.

01: Unordered lists with <ul> and <li> — grouping items where sequence does not change meaning
02: Ordered lists with <ol> and <li> — sequential steps, rankings, and attributes (start, reversed, type)
03: Nested lists — placing sub-lists cleanly inside a parent <li> element
04: Description/definition lists with <dl>, <dt> (term), and <dd> (description) for glossaries and metadata pairs
05: Building a structured site navigation bar using a <ul> of <a> links
06: The <nav> landmark element — marking up primary site navigation semantically for browsers and screen readers

Week 5 Project: Build a 3-page mini website (index.html, courses.html, contact.html) sharing a consistent <nav> bar with unordered list navigation linking all pages cleanly.

Stage 2 Code Reference & Annotated Examples

Relative vs Absolute URL Cheat Sheet

Link Type	Example `href` Value	When to Use It
Relative (Same Folder)	`href="contact.html"`	Linking between pages inside your own website (works locally AND on GitHub Pages!).
Relative (Subfolder / Parent)	`href="courses/html.html"` or `href="../index.html"`	Navigating down into or up out of project subdirectories.
Same-Page Fragment (`#id`)	`href="#curriculum-faq"`	Jumping smoothly to an element with `id="curriculum-faq"` on the current page.
Absolute External URL	`href="https://techmindsacademy.org"`	Linking to a completely different website or domain.
Email & Phone Action	`href="mailto:info@techmindsacademy.org"` / `href="tel:+2348147328332"`	Opening the visitor's email client or phone dialler on mobile devices.

html

<header>
  <!-- aria-label distinguishes primary nav if footer also has a <nav> -->
  <nav aria-label="Primary Navigation">
    <ul>
      <li><a href="index.html" aria-current="page">Home</a></li>
      <li><a href="courses.html">Courses</a></li>
      <li><a href="#faq">FAQ Section</a></li>
      <li><a href="contact.html">Contact Us</a></li>
      <li>
        <a
          href="https://github.com/Bookofharry/techminds-resources"
          target="_blank"
          rel="noopener noreferrer"
        >
          GitHub (Opens New Tab)
        </a>
      </li>
    </ul>
  </nav>
</header>

<main>
  <!-- Nested list example: Notice the inner <ol> lives INSIDE the parent <li>! -->
  <h2>Web Engineering Track Progression</h2>
  <ol>
    <li>
      Frontend Foundations
      <ul>
        <li>HTML Mastery (12 Weeks)</li>
        <li>CSS Mastery (12 Weeks)</li>
        <li>JavaScript Fundamentals (14 Weeks)</li>
      </ul>
    </li>
    <li>React.js Mastery (14 Weeks)</li>
    <li>Node.js &amp; Backend Development (15 Weeks)</li>
  </ol>

  <!-- Description list (<dl>) for key-value pairs or glossaries -->
  <section id="faq">
    <h2>Campus Quick Facts</h2>
    <dl>
      <dt>Campus Address</dt>
      <dd>G5 Plaza, Sabon-Gari Road, Bwari, Abuja</dd>

      <dt>Admissions Desk</dt>
      <dd>
        Email <a href="mailto:info@techmindsacademy.org">info@techmindsacademy.org</a>
        or call <a href="tel:+2348147328332">+234 814 732 8332</a>
      </dd>
    </dl>
  </section>
</main>

Stage 3: Images, Media & Tables (Weeks 6 – 7 · Intermediate)

Adding rich visual media, accessible captions, and structured tabular data.

A modern web page combines text with crisp imagery, embedded media, and structured data tables. Stage 3 emphasises performance (preventing layout shift with explicit dimensions and choosing WebP/SVG) and accessibility (writing meaningful alt text and proper table headers).

Week 6 — Images & Media (5 hrs)

01: The <img> void tag — src, alt, width, height, and loading="lazy" attributes
02: Why alt text matters — screen reader accessibility, broken-network fallbacks, and image SEO
03: Choosing the right image file format: JPEG, PNG, WebP, and SVG
04: Semantic media containers: <figure> and <figcaption>
05: Embedding native HTML5 video with <video>, <source>, controls, poster, and fallback text
06: Embedding audio lectures/podcasts with <audio> and controls

Week 6 Project: Build a Photo Gallery Page showcasing at least 6 optimised images wrapped in <figure> and <figcaption> elements with descriptive alt text, explicit width/height, plus one embedded <video> or <audio> clip.

Week 7 — Tables (5 hrs)

01: Core table structure: <table>, table rows (<tr>), data cells (<td>), and header cells (<th> with scope="col" / scope="row")
02: Organising complex tables semantically with <thead>, <tbody>, and <tfoot>
03: The <caption> element — giving every data table an accessible title
04: colspan — merging cells horizontally across multiple columns
05: rowspan — merging cells vertically across multiple rows
06: When to use <table> (genuine tabular datasets, schedules, pricing matrices, student grades) and when never to use tables (page layout!)

Week 7 Project: Build a Student Results Table displaying subjects, continuous assessment scores, exam scores, total scores, and letter grades — complete with <caption>, <thead>/<tbody>/<tfoot>, and merged colspan/rowspan header cells.

Stage 3 Code Reference & Annotated Examples

Image File Formats Comparison

Format	Best Used For	Transparency?	Scalability	Bandwidth Note
WebP (`.webp`)	Modern photos, hero banners, product cards	Yes	Raster (pixel-based)	25–35% smaller than JPEG/PNG — default choice in 2026!
JPEG (`.jpg`)	Legacy photographs with complex gradients	No	Raster	Good compression, universal fallback.
PNG (`.png`)	UI screenshots, crisp diagrams needing alpha transparency	Yes	Raster	Larger file sizes; avoid for large camera photos.
SVG (`.svg`)	Logos, icons, vector illustrations	Yes	Infinite (Vector XML)	Tiny file size, razor-sharp on Retina screens.

Accessible `<figure>`, `<video>` & Student Results `<table>` (`colspan` + `rowspan`)

html

<!-- 1. Semantic Image with Caption & Lazy Loading -->
<figure>
  <img
    src="images/bwari-campus-lab.webp"
    alt="Tech Minds students pair-programming on laptops at G5 Plaza Bwari campus"
    width="800"
    height="500"
    loading="lazy"
  />
  <figcaption>Morning web engineering studio session at our Bwari, Abuja campus.</figcaption>
</figure>

<!-- 2. Native HTML5 Video with Poster & Multiple Sources -->
<video controls width="800" height="450" poster="images/demo-day-poster.webp" preload="metadata">
  <source src="media/capstone-demo.webm" type="video/webm" />
  <source src="media/capstone-demo.mp4" type="video/mp4" />
  Your browser does not support HTML5 video.
  <a href="media/capstone-demo.mp4">Download the Demo Day recording (MP4)</a>.
</video>

<!-- 3. Complete Student Results Table Using rowspan, colspan, thead, tbody & tfoot -->
<table>
  <caption>2026 Cohort 1 — HTML Mastery End-of-Term Results</caption>
  <thead>
    <tr>
      <th scope="col" rowspan="2">Module Code</th>
      <th scope="col" rowspan="2">Subject Area</th>
      <th scope="colgroup" colspan="3">Assessment Breakdown (%)</th>
      <th scope="col" rowspan="2">Final Grade</th>
    </tr>
    <tr>
      <th scope="col">Weekly Labs (40)</th>
      <th scope="col">Stage Quiz (30)</th>
      <th scope="col">Capstone (30)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>TM-WEB-101</td>
      <td>Semantic Document Structure</td>
      <td>38</td>
      <td>27</td>
      <td>28</td>
      <td><strong>A (93%)</strong></td>
    </tr>
    <tr>
      <td>TM-WEB-102</td>
      <td>Accessible Forms &amp; Validation</td>
      <td>36</td>
      <td>25</td>
      <td>26</td>
      <td><strong>A (87%)</strong></td>
    </tr>
    <tr>
      <td>TM-WEB-103</td>
      <td>SEO Metadata &amp; W3C Standards</td>
      <td>35</td>
      <td>26</td>
      <td>27</td>
      <td><strong>A (88%)</strong></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row" colspan="4">Cumulative Cohort Average</th>
      <td>89.3%</td>
      <td>Distinction</td>
    </tr>
  </tfoot>
</table>

Stage 4: Forms & User Input (Weeks 8 – 9 · Intermediate)

Building interactive, accessible forms that collect and validate real user data.

Forms power every meaningful interaction on the internet — student admissions, bank transfers, e-commerce checkouts, and search bars. Stage 4 teaches you how every form control works under the hood, why every input needs a programmatic <label>, how name attributes map to submitted data, and how native HTML5 validation catches bad input before JavaScript is ever written.

Week 8 — Form Basics & Input Types (6 hrs)

01: The <form> element — action URLs and HTTP method (GET vs POST — never send passwords via GET!)
02: Core <input> types: text, email, password, tel, and number (min, max, step)
03: The <label> element — linking labels explicitly via for="input-id" for usability and screen readers
04: placeholder hints vs value defaults (and why placeholder is never a substitute for <label>!)
05: Submitting forms — <button type="submit"> vs <input type="submit"> vs <button type="reset">
06: Specialized HTML5 inputs: date, time, color, range, and file (accept attribute)

Week 8 Project: Build a User Registration Form collecting full name, email address, password, phone number, date of birth, and profile picture upload — with properly linked <label> tags and a <button type="submit">.

Week 9 — Advanced Inputs & Validation (6 hrs)

01: Checkbox inputs (type="checkbox") — allowing users to select zero, one, or multiple independent options
02: Radio buttons (type="radio") — sharing a common name attribute so users pick exactly one option from a group
03: Dropdown menus with <select>, <option>, and <optgroup>
04: Multi-line text inputs with <textarea> (rows, cols, maxlength)
05: Native HTML5 client-side validation: required, minlength, maxlength, min, max, and regex pattern + title
06: Grouping related form controls semantically using <fieldset> and <legend>

Week 9 Project: Build a complete Tech Minds Course Enrolment Form combining personal details, <select> track selection, radio buttons for study mode (Abuja Campus vs Live Online), equipment checkboxes, <fieldset>/<legend> groups, and full HTML5 validation.

Stage 4 Code Reference & Annotated Examples

Complete Accessible Course Enrolment Form (`<fieldset>`, Validation & All Control Types)

html

<form action="/api/enrol" method="POST">
  <!-- Group 1: Applicant Identity -->
  <fieldset>
    <legend>1. Applicant Personal Details</legend>

    <div>
      <label for="full-name">Full Name (as it should appear on certificate) *</label>
      <input
        type="text"
        id="full-name"
        name="fullName"
        placeholder="e.g. Chinedu Okeke"
        autocomplete="name"
        required
        minlength="3"
        maxlength="80"
      />
    </div>

    <div>
      <label for="student-email">Email Address *</label>
      <input
        type="email"
        id="student-email"
        name="email"
        placeholder="chinedu@example.com"
        autocomplete="email"
        required
      />
    </div>

    <div>
      <label for="phone-ng">Nigerian Phone / WhatsApp Number *</label>
      <input
        type="tel"
        id="phone-ng"
        name="phone"
        placeholder="+2348012345678 or 08012345678"
        pattern="^(\+234|0)[789][01]\d{8}$"
        title="Enter a valid 11-digit Nigerian mobile number (e.g. 08012345678 or +2348012345678)"
        required
      />
    </div>

    <div>
      <label for="dob">Date of Birth *</label>
      <input type="date" id="dob" name="dateOfBirth" required />
    </div>
  </fieldset>

  <!-- Group 2: Programme & Cohort Selection -->
  <fieldset>
    <legend>2. Programme &amp; Learning Mode</legend>

    <div>
      <label for="course-track">Select Enrolled Programme *</label>
      <select id="course-track" name="courseTrack" required>
        <option value="" disabled selected>-- Choose a 2026 Programme --</option>
        <optgroup label="Web &amp; Full-Stack Engineering">
          <option value="html-mastery">HTML Mastery (12 Weeks)</option>
          <option value="css-mastery">CSS Mastery (12 Weeks)</option>
          <option value="js-fundamentals">JavaScript Fundamentals (14 Weeks)</option>
        </optgroup>
        <optgroup label="AI, Data &amp; Cloud">
          <option value="prompt-ai">Prompt Engineering &amp; AI Tools (14 Weeks)</option>
          <option value="data-science">Python, Data Science &amp; ML (14 Weeks)</option>
        </optgroup>
      </select>
    </div>

    <!-- Radio buttons share the SAME name="studyMode" so only one can be selected -->
    <p>Preferred Cohort Format *</p>
    <div>
      <input
        type="radio"
        id="mode-campus"
        name="studyMode"
        value="abuja-campus"
        required
      />
      <label for="mode-campus">Physical Campus (G5 Plaza, Bwari, Abuja)</label>
    </div>
    <div>
      <input
        type="radio"
        id="mode-online"
        name="studyMode"
        value="live-online"
      />
      <label for="mode-online">Live Online Cohort</label>
    </div>
  </fieldset>

  <!-- Group 3: Readiness Checkboxes & Goals -->
  <fieldset>
    <legend>3. Readiness &amp; Learning Goals</legend>

    <div>
      <input type="checkbox" id="has-laptop" name="readiness" value="laptop-ready" />
      <label for="has-laptop">I have a working laptop with VS Code installed</label>
    </div>

    <div>
      <input
        type="checkbox"
        id="accept-handbook"
        name="acceptedHandbook"
        value="yes"
        required
      />
      <label for="accept-handbook">
        I agree to the Tech Minds Student Handbook &amp; 40/30/30 Rubric *
      </label>
    </div>

    <div>
      <label for="career-goal">What do you want to build after graduating?</label>
      <textarea
        id="career-goal"
        name="careerGoal"
        rows="4"
        maxlength="500"
        placeholder="Tell your mentor about your goals..."
      ></textarea>
    </div>
  </fieldset>

  <button type="submit">Submit Enrolment Application</button>
</form>

Stage 5: Semantic HTML5, SEO & Capstone (Weeks 10 – 12 · Advanced)

Writing meaningful, accessible, search-engine-ready HTML and shipping your 4-page Capstone Website.

Stage 5 transforms you from someone who "knows HTML tags" into someone who architects production-grade HTML. You will replace generic "div soup" with semantic landmarks, implement social Open Graph cards and ARIA accessibility attributes, pass strict W3C validation with zero errors, and ship a complete 4-page website deployed live on GitHub Pages.

Week 10 — Semantic HTML5 Elements (6 hrs)

01: What is semantic HTML and why it matters for SEO, screen readers, and developer maintainability
02: Page-level landmarks: <header>, <main> (one visible <main> per page!), and <footer>
03: Choosing the right container: <article> vs <section> vs <div>
04: <aside> — marking up sidebars, callouts, and supplementary content
05: The <address> element — semantic contact information for an author or organisation
06: Inline semantic elements: <time datetime="...">, <mark>, <abbr title="...">, and <blockquote>/<cite>

Week 10 Project: Refactor a poorly written, non-semantic "div-soup" webpage (<div class="header">, <div class="nav">, <div class="box">) into clean, meaningful HTML5 landmarks without losing a single piece of content.

Week 11 — SEO, Meta Tags & Accessibility (6 hrs)

01: Essential SEO <meta> tags: description, author, robots, and canonical <link rel="canonical">
02: The <meta name="viewport" content="width=device-width, initial-scale=1.0"> tag — making pages mobile-ready
03: Open Graph (og:title, og:description, og:image, og:url, og:type) — controlling rich previews on WhatsApp, LinkedIn, and X
04: The <html lang="en"> attribute and skip-to-content links (<a href="#main-content">Skip to main content</a>) for screen readers and keyboard users
05: ARIA roles, aria-label, aria-labelledby, and aria-current="page" (plus the First Rule of ARIA: prefer native HTML elements whenever one exists!)
06: Standards compliance — auditing your markup with the official W3C Markup Validation Service (validator.w3.org) and fixing every error and warning

Week 11 Project: Upgrade an existing multi-page site with complete <head> SEO tags, WhatsApp/LinkedIn Open Graph preview cards, keyboard skip-link, ARIA navigation labels, and a screenshot proving 0 errors on the W3C Validator.

Week 12 — Capstone Project (6 sessions · 10 hrs)

01: Planning a multi-page website — sitemap architecture, target audience, folder layout, and real written content (no Lorem ipsum!)
02: Building the Home Page (index.html) — <header>, <nav>, hero value proposition, featured <section> blocks, and <footer>
03: Building the About Page (about.html) — organisation/personal story, semantic <figure> imagery, and structured milestones
04: Building the Services or Portfolio Page (services.html or portfolio.html) — <article> project/service cards and a structured pricing or specification <table>
05: Building the Contact Page (contact.html) — accessible <form> with full HTML5 validation, <address>, and clickable mailto:/tel: details
06: Final engineering review — W3C HTML Validator audit across all 4 pages, screen-reader/keyboard tab audit, README.md documentation, and live deployment via GitHub Pages

Week 12 Capstone Deliverable: A complete, live 4-Page Semantic Website (Home, About, Services/Portfolio, Contact) passing W3C validation with zero errors and hosted publicly on GitHub Pages.

Stage 5 Code Reference & Annotated Examples

Decision Rule: `<article>` vs `<section>` vs `<div>`

Element	Semantic Meaning & Test Question	Real-World Example
`<article>`	Self-contained, independently syndicatable composition. Test: Would this still make complete sense if republished standalone in an RSS feed or email?	Blog post, news story, student project card, customer testimonial, forum post.
`<section>`	Thematic grouping of content within a document, almost always headed by an `<h2>`–`<h3>`.	"Our Courses" section, "Frequently Asked Questions" section, "Contact Details" section.
`<div>`	Zero semantic meaning. Purely a generic grouping wrapper for future CSS Flexbox/Grid styling when no semantic tag applies.	Flex wrapper around two buttons or decorative layout container.

Production `<head>` Template (SEO + Viewport + Open Graph) & Semantic Page Skeleton

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- Primary SEO Metadata -->
    <title>Amina Studios | Web &amp; Brand Architecture in Abuja</title>
    <meta
      name="description"
      content="Portfolio of Amina Bello — Frontend Web Developer trained at Tech Minds Academy Abuja, specialising in accessible, high-speed websites."
    />
    <meta name="author" content="Amina Bello" />

    <!-- Open Graph Metadata (Controls WhatsApp, LinkedIn & X Link Previews) -->
    <meta property="og:type" content="website" />
    <meta property="og:title" content="Amina Studios | Web Developer Portfolio" />
    <meta
      property="og:description"
      content="Explore accessible HTML5 projects, technical case studies, and web services."
    />
    <meta property="og:url" content="https://amina-bello.github.io/capstone-portfolio/" />
    <meta
      property="og:image"
      content="https://amina-bello.github.io/capstone-portfolio/images/og-cover.webp"
    />
  </head>
  <body>
    <!-- Accessibility: Keyboard users can skip repetitive nav straight to content -->
    <a href="#main-content">Skip to main content</a>

    <header>
      <a href="index.html"><strong>Amina Studios</strong></a>
      <nav aria-label="Primary">
        <ul>
          <li><a href="index.html" aria-current="page">Home</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="portfolio.html">Portfolio</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>

    <main id="main-content">
      <section aria-labelledby="hero-heading">
        <h1 id="hero-heading">Building Accessible Web Experiences in Nigeria</h1>
        <p>
          Next cohort intake opens on
          <time datetime="2026-05-04">4 May 2026</time>. Every page is tested against
          <abbr title="Web Content Accessibility Guidelines">WCAG</abbr> standards.
        </p>
      </section>

      <section aria-labelledby="projects-heading">
        <h2 id="projects-heading">Featured Case Studies</h2>

        <article>
          <h3>Bwari Community Clinic Portal</h3>
          <p>
            A fast, low-bandwidth patient registration portal with validated appointment forms.
          </p>
          <a href="portfolio.html#clinic-portal">Read Clinic Portal Case Study</a>
        </article>
      </section>

      <aside aria-label="Availability Notice">
        <h2>Current Availability</h2>
        <p><mark>Open for junior frontend internships</mark> in Abuja &amp; remote teams.</p>
      </aside>
    </main>

    <footer>
      <address>
        Built by Amina Bello · Bwari, Abuja, Nigeria ·
        <a href="mailto:amina@example.com">amina@example.com</a>
      </address>
      <p><small>&copy; 2026 Amina Studios. Validated HTML5.</small></p>
    </footer>
  </body>
</html>

Week 12 Capstone Architecture Specification

Your submitted GitHub repository (techminds-html-capstone) must follow this exact clean file structure:

text

techminds-html-capstone/
├── index.html          # Home page (hero, overview sections, featured highlights)
├── about.html          # About page (story/mission, <figure> photos, timeline/team)
├── portfolio.html      # Services or Portfolio (<article> items + comparison/pricing <table>)
├── contact.html        # Contact page (validated <form>, <address>, mailto/tel links)
├── images/             # Optimised .webp / .svg assets with lowercase-hyphen filenames
└── README.md           # Live GitHub Pages URL, project summary & W3C validation proof

Assessment & Completion

In accordance with the Tech Minds 40/30/30 Evaluation Rubric, students are evaluated across three components:

Component	Description	Weight
Weekly Projects (×8)	Core page or feature built from scratch and pushed to GitHub at the end of weekly sprints	40%
Stage Assessments (×5)	Short quiz and 1-on-1 mentor code review at the end of each of the 5 stages	30%
Capstone Website	Complete 4-page website (`Home`, `About`, `Services/Portfolio`, `Contact`) — validated, semantic, accessible, and live on GitHub Pages	30%

Learning Outcomes: What Students Can Do on Completion

On completing HTML Mastery, you will be able to:

[x] Write clean, valid HTML5 from scratch without referencing any boilerplate generator or guide
[x] Structure any web page accurately using semantic HTML5 landmark elements (<header>, <nav>, <main>, <article>, <section>, <aside>, <footer>)
[x] Build working navigation menus and multi-page websites using clean relative URLs
[x] Embed optimised images (<figure>/<figcaption>), native <video>/<audio>, and complex accessible data <table> structures (colspan/rowspan)
[x] Build complete, accessible <form> interfaces with explicit <label> bindings and native HTML5 client-side validation
[x] Apply SEO <meta> tags and social Open Graph (og:*) preview metadata to any web page
[x] Use lang, skip links, and ARIA roles/landmarks responsibly for screen reader and keyboard accessibility
[x] Audit HTML source files using the W3C Markup Validator and resolve every error independently
[x] Plan, build, document, and deploy a complete 4-page Capstone Website publicly on GitHub Pages

Tools & Resources: Everything the Student Needs

Every tool used throughout this 12-week course is 100% free:

Tool	Purpose	Cost
VS Code	Primary code editor for writing HTML5	Free
Live Server (VS Code Extension)	Auto-refreshes Google Chrome on every file save	Free
Google Chrome	Primary browser for viewing and testing web pages	Free
Chrome DevTools	Inspect and debug DOM trees and accessibility in the browser	Built-in
W3C Markup Validator (`validator.w3.org`)	Check HTML documents for syntax errors and standards compliance	Free
GitHub & GitHub Pages	Version control (`git`) and free public portfolio hosting	Free

Next Step in the Web & Full-Stack Track

Congratulations on building an unshakeable HTML5 foundation! Your next step is bringing your semantic pages to life with colour, typography, Flexbox, CSS Grid, mobile-first media queries, and smooth animations in CSS Mastery (12 Weeks).

HTML Mastery

Learning Pathway: Programme Overview

Curriculum Rationale: Key Decisions Explained

Stage 1: HTML Foundations (Weeks 1 – 3 · Beginner)

Week 1 — Introduction to the Web & HTML (5 hrs)

Week 2 — Tags, Elements & Attributes (5 hrs)

Week 3 — Headings, Paragraphs & Text Formatting (5 hrs)

Stage 1 Code Reference & Annotated Examples

Anatomy of an Element vs Tag vs Attribute

Standard HTML5 Boilerplate & Semantic Text Formatting

Stage 2: Links, Lists & Navigation (Weeks 4 – 5 · Beginner)

Week 4 — Links & Anchor Tags (5 hrs)

Week 5 — Lists & Navigation Menus (5 hrs)

Stage 2 Code Reference & Annotated Examples

Relative vs Absolute URL Cheat Sheet

Semantic Multi-Page Navigation, Nested Lists & Description Lists

Stage 3: Images, Media & Tables (Weeks 6 – 7 · Intermediate)

Week 6 — Images & Media (5 hrs)

Week 7 — Tables (5 hrs)

Stage 3 Code Reference & Annotated Examples

Image File Formats Comparison

Accessible `<figure>`, `<video>` & Student Results `<table>` (`colspan` + `rowspan`)

Stage 4: Forms & User Input (Weeks 8 – 9 · Intermediate)

Week 8 — Form Basics & Input Types (6 hrs)

Week 9 — Advanced Inputs & Validation (6 hrs)

Stage 4 Code Reference & Annotated Examples

Complete Accessible Course Enrolment Form (`<fieldset>`, Validation & All Control Types)

Stage 5: Semantic HTML5, SEO & Capstone (Weeks 10 – 12 · Advanced)

Week 10 — Semantic HTML5 Elements (6 hrs)

Week 11 — SEO, Meta Tags & Accessibility (6 hrs)

Week 12 — Capstone Project (6 sessions · 10 hrs)

Stage 5 Code Reference & Annotated Examples

Decision Rule: `<article>` vs `<section>` vs `<div>`

Production `<head>` Template (SEO + Viewport + Open Graph) & Semantic Page Skeleton

Week 12 Capstone Architecture Specification

Assessment & Completion

Learning Outcomes: What Students Can Do on Completion

Tools & Resources: Everything the Student Needs

Next Step in the Web & Full-Stack Track

HTML Mastery ​

Learning Pathway: Programme Overview ​

Curriculum Rationale: Key Decisions Explained ​

Stage 1: HTML Foundations (Weeks 1 – 3 · Beginner) ​

Week 1 — Introduction to the Web & HTML (5 hrs) ​

Week 2 — Tags, Elements & Attributes (5 hrs) ​

Week 3 — Headings, Paragraphs & Text Formatting (5 hrs) ​

Stage 1 Code Reference & Annotated Examples ​

Anatomy of an Element vs Tag vs Attribute ​

Standard HTML5 Boilerplate & Semantic Text Formatting ​

Stage 2: Links, Lists & Navigation (Weeks 4 – 5 · Beginner) ​

Week 4 — Links & Anchor Tags (5 hrs) ​

Week 5 — Lists & Navigation Menus (5 hrs) ​

Stage 2 Code Reference & Annotated Examples ​

Relative vs Absolute URL Cheat Sheet ​

Semantic Multi-Page Navigation, Nested Lists & Description Lists ​

Stage 3: Images, Media & Tables (Weeks 6 – 7 · Intermediate) ​

Week 6 — Images & Media (5 hrs) ​

Week 7 — Tables (5 hrs) ​

Stage 3 Code Reference & Annotated Examples ​

Image File Formats Comparison ​

Accessible <figure>, <video> & Student Results <table> (colspan + rowspan) ​

Stage 4: Forms & User Input (Weeks 8 – 9 · Intermediate) ​

Week 8 — Form Basics & Input Types (6 hrs) ​

Week 9 — Advanced Inputs & Validation (6 hrs) ​

Stage 4 Code Reference & Annotated Examples ​

Complete Accessible Course Enrolment Form (<fieldset>, Validation & All Control Types) ​

Stage 5: Semantic HTML5, SEO & Capstone (Weeks 10 – 12 · Advanced) ​

Week 10 — Semantic HTML5 Elements (6 hrs) ​

Week 11 — SEO, Meta Tags & Accessibility (6 hrs) ​

Week 12 — Capstone Project (6 sessions · 10 hrs) ​

Stage 5 Code Reference & Annotated Examples ​

Decision Rule: <article> vs <section> vs <div> ​

Production <head> Template (SEO + Viewport + Open Graph) & Semantic Page Skeleton ​

Week 12 Capstone Architecture Specification ​

Assessment & Completion ​

Learning Outcomes: What Students Can Do on Completion ​

Tools & Resources: Everything the Student Needs ​

Next Step in the Web & Full-Stack Track ​

HTML Mastery

Learning Pathway: Programme Overview

Curriculum Rationale: Key Decisions Explained

Stage 1: HTML Foundations (Weeks 1 – 3 · Beginner)

Week 1 — Introduction to the Web & HTML (5 hrs)

Week 2 — Tags, Elements & Attributes (5 hrs)

Week 3 — Headings, Paragraphs & Text Formatting (5 hrs)

Stage 1 Code Reference & Annotated Examples

Anatomy of an Element vs Tag vs Attribute

Standard HTML5 Boilerplate & Semantic Text Formatting

Stage 2: Links, Lists & Navigation (Weeks 4 – 5 · Beginner)

Week 4 — Links & Anchor Tags (5 hrs)

Week 5 — Lists & Navigation Menus (5 hrs)

Stage 2 Code Reference & Annotated Examples

Relative vs Absolute URL Cheat Sheet

Semantic Multi-Page Navigation, Nested Lists & Description Lists

Stage 3: Images, Media & Tables (Weeks 6 – 7 · Intermediate)

Week 6 — Images & Media (5 hrs)

Week 7 — Tables (5 hrs)

Stage 3 Code Reference & Annotated Examples

Image File Formats Comparison

Accessible `<figure>`, `<video>` & Student Results `<table>` (`colspan` + `rowspan`)

Stage 4: Forms & User Input (Weeks 8 – 9 · Intermediate)

Week 8 — Form Basics & Input Types (6 hrs)

Week 9 — Advanced Inputs & Validation (6 hrs)

Stage 4 Code Reference & Annotated Examples

Complete Accessible Course Enrolment Form (`<fieldset>`, Validation & All Control Types)

Stage 5: Semantic HTML5, SEO & Capstone (Weeks 10 – 12 · Advanced)

Week 10 — Semantic HTML5 Elements (6 hrs)

Week 11 — SEO, Meta Tags & Accessibility (6 hrs)

Week 12 — Capstone Project (6 sessions · 10 hrs)

Stage 5 Code Reference & Annotated Examples

Decision Rule: `<article>` vs `<section>` vs `<div>`

Production `<head>` Template (SEO + Viewport + Open Graph) & Semantic Page Skeleton

Week 12 Capstone Architecture Specification

Assessment & Completion

Learning Outcomes: What Students Can Do on Completion

Tools & Resources: Everything the Student Needs

Next Step in the Web & Full-Stack Track