Lecture 01 · Foundations

What is HTML?

Beginner ~40 min No prerequisites

Introduction to HTML

HTML stands for HyperText Markup Language. It is the standard language used to create and structure content on the web. Every webpage you visit — from Google to Wikipedia — is built on HTML at its core.

HTML is not a programming language. It is a markup language: it uses tags to annotate and describe the meaning of content, telling the browser how to display text, images, links, and other elements.

A brief history

1991 — Tim Berners-Lee publishes the first HTML spec (18 tags)
1995 — HTML 2.0: first formal standard
1997 — HTML 4.01: widespread adoption
2014 — HTML5 becomes the W3C standard (current)
Today — HTML is a "living standard" maintained by WHATWG

Your First HTML File

Try it yourself! Edit the code on the left and click Run (or press Ctrl+Enter) to see it rendered live on the right.

Live Playground — Your First HTML Page

Updated

HTML Editor

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My First Page</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>Welcome to <strong>HTML Mastery</strong>.</p>
  <p>Edit this code and click <em>Run</em>!</p>
</body>
</html>

Browser Preview

💡 Tip: Ctrl+Enter to run · Edit the code and see live output · Click Reset to restore original

Anatomy of an HTML Tag

HTML is built from elements. Most elements have an opening tag, content, and a closing tag:

<p class="intro">Hello!</p>

p

Tag name

class

Attribute

"intro"

Value

Hello!

Content

Self-closing (void) elements

Some elements have no content and don't need a closing tag. Try them below:

Live Playground — Void Elements

Updated

HTML Editor

<p>Before the break</p>
<br>
<p>After a line break</p>

<hr>

<p>Text above the rule</p>

<p>Try adding an image placeholder:</p>
<img src="https://picsum.photos/200/100" 
     alt="A random photo">

<p>Input field: <input type="text" placeholder="Type here..."></p>

Browser Preview

💡 These are "void" elements — no closing tag needed!

🎯 Exercise 1.1

In the playground above, modify the code: add a heading with your name, a paragraph describing yourself, and at least one more void element. Hit Run to see your changes!

Lecture 02 · Foundations

Document Structure

Beginner ~45 min Requires: Lecture 01

The HTML Boilerplate

Every valid HTML5 document follows the same fundamental structure. Try editing the boilerplate below:

Live Playground — HTML5 Boilerplate

Updated

HTML Editor

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" 
        content="width=device-width, initial-scale=1.0">
  <title>My Website — Change This!</title>
  <style>
    body { font-family: sans-serif; padding: 20px; }
    h1   { color: #e25822; }
  </style>
</head>
<body>
  <h1>Page Heading</h1>
  <p>This content lives in <body>.</p>
  <p>The <head> metadata is not visible here,
     but it controls the tab title above.</p>
</body>
</html>

Browser Preview

💡 Notice the <style> tag — try changing the color value!

Block vs Inline Elements

HTML elements fall into two display categories. The playground below demonstrates both clearly:

Live Playground — Block vs Inline

Updated

HTML Editor

<style>
  div  { background:#fde8d8; border:2px solid #e25822;
         margin:4px; padding:6px; }
  span { background:#d8eafd; border:2px solid #2266e2;
         padding:2px 6px; }
  p    { background:#d8fde8; border:2px solid #22e257;
         padding:6px; margin:4px; }
</style>

<p>I am a BLOCK element — full width.</p>
<div>I am also BLOCK — starts new line.</div>

<p>
  Inside this paragraph,
  <span>this span</span> is INLINE — it 
  <span>flows with text</span> naturally.
  <strong>Bold</strong> and <em>italic</em>
  are also inline!
</p>

Browser Preview

💡 Orange border = block element · Blue border = inline element

🎯 Exercise 2.1

In the boilerplate playground above, change the <title> to your name, and add a linked stylesheet using <link rel="stylesheet" href="style.css"> in the head. What changes in the preview?

Lecture 03 · Foundations

Text & Typography

Beginner ~50 min Requires: Lecture 02

Headings

HTML provides six heading levels. Play with all of them below:

Live Playground — Headings & Typography

Updated

HTML Editor

<h1>H1 — Main Page Title</h1>
<h2>H2 — Section Heading</h2>
<h3>H3 — Sub-section</h3>
<h4>H4 — Sub-sub-section</h4>
<h5>H5 — Rarely needed</h5>
<h6>H6 — Almost never used</h6>

<hr>

<p>This is a <strong>bold/important</strong> word.</p>
<p>This is an <em>italic/emphasised</em> word.</p>
<p>This is <mark>highlighted</mark> text.</p>
<p>H<sub>2</sub>O and E = mc<sup>2</sup></p>
<p><s>Strikethrough</s> and <u>underline</u></p>
<p>Inline code: <code>console.log("hi")</code></p>

<blockquote>
  "The best time to plant a tree was 20 years ago.
   The second best time is now."
</blockquote>

Browser Preview

💡 Try removing <strong> and using <b> instead — visually the same but semantically different!

✅ Semantic vs Presentational

Prefer <strong> over <b> and <em> over <i>. Semantic tags convey meaning, not just appearance — crucial for screen readers and SEO.

🎯 Exercise 3.1 — Article Page

Use the playground above to create a mini blog post. Add an <h1> title, 2 paragraphs with <strong> and <em>, and a <blockquote>.

Lecture 04 · Foundations

Links & Navigation

Beginner ~45 min Requires: Lecture 03

The Anchor Tag

The <a> element creates hyperlinks. Try all the different link types below:

Live Playground — Links & Navigation

Updated

HTML Editor

<nav>
  <ul>
    <li><a href="https://www.wikipedia.org" 
           target="_blank" 
           rel="noopener noreferrer">
      External link (opens new tab)
    </a></li>
    <li><a href="#section2">
      Jump to Section 2 (anchor)
    </a></li>
    <li><a href="mailto:hello@example.com">
      Email link
    </a></li>
    <li><a href="tel:+1234567890">
      Phone link
    </a></li>
  </ul>
</nav>

<hr>

<h2 id="section2">Section 2</h2>
<p>You jumped here using an anchor link!</p>

<p>
  <a href="https://example.com/file.pdf" download>
    📄 Download a file
  </a>
</p>

Browser Preview

💡 The "Jump to Section 2" link scrolls within the preview iframe!

⚠️ Security: rel="noopener noreferrer"

Always add rel="noopener noreferrer" when using target="_blank". Without it, the opened page can access your page via window.opener — a security risk.

🎯 Exercise 4.1 — Navigation Menu

Build a styled navigation bar in the playground. Add 4 links, a mailto link, and a section that an anchor jumps to. Try adding basic CSS with <style> to make it look like a real nav bar!

Lecture 05 · Foundations

Images & Media

Beginner ~50 min Requires: Lecture 04

The <img> Element

Images are embedded with the self-closing <img> tag. The alt attribute is required for accessibility. Try different image URLs below:

Live Playground — Images & Media

Updated

HTML Editor

<style>
  img { max-width: 100%; border-radius: 8px; }
  figure { margin: 12px 0; }
  figcaption { font-size: 0.85em; color: #555;
               text-align: center; margin-top: 6px; }
</style>

<!-- Basic image from a public API -->
<img src="https://picsum.photos/300/180?random=1" 
     alt="A beautiful random landscape photo"
     width="300" height="180">

<hr>

<!-- Figure with caption -->
<figure>
  <img src="https://picsum.photos/300/180?random=2" 
       alt="Another stunning photo"
       width="300" height="180">
  <figcaption>
    Fig 1 — A beautiful photograph with a caption
  </figcaption>
</figure>

<hr>

<!-- Broken image (shows alt text) -->
<img src="this-image-doesnt-exist.jpg" 
     alt="A mountain landscape [IMAGE NOT FOUND]"
     width="200" height="100">

Browser Preview

💡 Change the number after ?random= to get a different image. Try ?random=42

🎯 Exercise 5.1 — Image Gallery

In the playground, build a mini gallery with 4 images using <figure> and <figcaption>. Use https://picsum.photos/200/150?random=N (change N for each). Try adding CSS to display them side by side!

Lecture 06 · Core Concepts

Lists & Tables

Beginner ~45 min Requires: Lecture 05

All Three List Types

Live Playground — Lists

Updated

HTML Editor

<h3>Unordered List (ul)</h3>
<ul>
  <li>Apples</li>
  <li>Bananas</li>
  <li>Cherries
    <ul>
      <li>Sweet cherry</li>
      <li>Sour cherry</li>
    </ul>
  </li>
</ul>

<h3>Ordered List (ol)</h3>
<ol start="3">
  <li>Third item (starts at 3!)</li>
  <li>Fourth item</li>
  <li>Fifth item</li>
</ol>

<h3>Description List (dl)</h3>
<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
  <dt>JS</dt>
  <dd>JavaScript — the programming language of the web</dd>
</dl>

Browser Preview

💡 Try changing the ol type attribute: <ol type="A"> or <ol type="i">

Tables

Use tables for tabular data — never for page layout.

Live Playground — Tables

Updated

HTML Editor

<style>
  table  { border-collapse: collapse; width: 100%; }
  th, td { border: 1px solid #ccc; padding: 8px 12px; }
  th     { background: #f0f4ff; color: #333; }
  tr:hover td { background: #f9f9f9; }
  caption { font-weight: bold; margin-bottom: 8px;
            font-size: 1.1em; }
  tfoot td { font-weight: bold; background: #fff8f0; }
</style>

<table>
  <caption>Monthly Sales Report</caption>
  <thead>
    <tr>
      <th scope="col">Month</th>
      <th scope="col">Revenue</th>
      <th scope="col">Growth</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$12,400</td>
      <td>+8%</td>
    </tr>
    <tr>
      <td>February</td>
      <td colspan="2">Data unavailable</td>
    </tr>
    <tr>
      <td>March</td>
      <td>$15,200</td>
      <td>+22%</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>$27,600</td>
      <td>+15% avg</td>
    </tr>
  </tfoot>
</table>

Browser Preview

💡 Try adding a new row for April. Notice how colspan="2" spans columns!

Lecture 07 · Core Concepts

Forms & Inputs

Intermediate ~65 min Requires: Lecture 06

Building a Complete Form

Forms are how users interact with websites. Try filling out this form — it uses only HTML5 validation!

Live Playground — Forms & Inputs

Updated

HTML Editor

<style>
  body  { font-family: sans-serif; padding: 16px; }
  form  { max-width: 360px; }
  label { display: block; font-weight: bold;
          font-size: 13px; margin: 12px 0 4px; }
  input, select, textarea {
    width: 100%; padding: 8px 10px;
    border: 1px solid #ccc; border-radius: 6px;
    font-size: 14px; box-sizing: border-box; }
  input:focus { outline: 2px solid #0066cc;
                border-color: transparent; }
  button { margin-top: 14px; padding: 10px 20px;
           background: #0066cc; color: white;
           border: none; border-radius: 6px;
           cursor: pointer; font-size: 14px; }
  button:hover { background: #0055aa; }
  fieldset { border: 1px solid #ddd; border-radius: 8px;
             padding: 12px; margin: 12px 0; }
  legend { font-weight: bold; padding: 0 8px; }
</style>

<form action="#" method="POST">
  <fieldset>
    <legend>Personal Info</legend>
    
    <label for="name">Full Name *</label>
    <input type="text" id="name" name="name"
           placeholder="Alice Smith" required
           minlength="2" maxlength="50">

    <label for="email">Email *</label>
    <input type="email" id="email" name="email"
           placeholder="alice@example.com" required>

    <label for="age">Age</label>
    <input type="number" id="age" name="age"
           min="13" max="120" placeholder="25">
  </fieldset>

  <fieldset>
    <legend>Preferences</legend>

    <label for="country">Country</label>
    <select id="country" name="country">
      <option value="">— Select —</option>
      <option value="us">United States</option>
      <option value="gb">United Kingdom</option>
      <option value="in">India</option>
    </select>

    <label for="msg">Message *</label>
    <textarea id="msg" name="msg" rows="3"
              placeholder="Your message..." required>

Subscribe to newsletter

Browser Preview

💡 Click "Send Message" without filling required fields to see HTML5 validation!

Lecture 08 · Core Concepts

Semantic HTML

Intermediate ~55 min Requires: Lecture 07

Semantic vs Non-Semantic

See the difference in the playground below — the layout looks identical but the meaning is completely different:

Live Playground — Semantic HTML5 Layout

Updated

HTML Editor

<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body { font-family: sans-serif; font-size: 13px; }
  header { background: #1a1a2e; color: white;
           padding: 10px 16px;
           display: flex; justify-content: space-between;
           align-items: center; }
  nav a  { color: #aac; text-decoration: none;
           margin-left: 12px; }
  nav a:hover { color: white; }
  main   { display: grid;
           grid-template-columns: 1fr 220px;
           gap: 16px; padding: 16px; }
  article { background: #f9f9f9; padding: 14px;
            border-radius: 6px; }
  aside  { background: #fff3e0; padding: 14px;
           border-radius: 6px; }
  footer { background: #333; color: #aaa;
           text-align: center; padding: 10px;
           font-size: 0.8em; }
  time   { color: #888; font-size: 0.85em; }
  h2     { margin-bottom: 8px; }
</style>

<header>
  <strong>🌐 My Site</strong>
  <nav>
    <a href="#">Home</a>
    <a href="#">Blog</a>
    <a href="#">About</a>
  </nav>
</header>

<main>
  <article>
    <header>
      <h2>Understanding Semantic HTML</h2>
      <time datetime="2026-03-01">March 1, 2026</time>
    </header>
    <p>Semantic elements convey meaning to browsers,
       search engines, and screen readers...</p>
    <p>Unlike <div> soup, semantic HTML tells
       <em>why</em> an element exists, not just 
       what it looks like.</p>
  </article>

  <aside>
    <h3>Related Posts</h3>
    <ul>
      <li><a href="#">CSS Grid Guide</a></li>
      <li><a href="#">Accessibility Tips</a></li>
      <li><a href="#">SEO Basics</a></li>
    </ul>
  </aside>
</main>

<footer>
  <p>© 2026 My Site · 
    <address style="display:inline">
      <a href="mailto:hi@mysite.com">hi@mysite.com</a>
    </address>
  </p>
</footer>

Browser Preview

💡 Try replacing <header> with <div> — looks the same but loses meaning for screen readers!

Lecture 09 · Advanced

HTML5 APIs & Features

Intermediate ~60 min Requires: Lecture 08

Interactive HTML5 Components

Modern HTML5 comes with powerful built-in interactive elements — no JavaScript needed for many of them:

Live Playground — HTML5 APIs & Features

Updated

HTML Editor

<style>
  body { font-family: sans-serif; padding: 16px;
         font-size: 14px; }
  details { background: #f0f4ff; border: 1px solid #c0d0ff;
            border-radius: 6px; padding: 10px 14px;
            margin: 8px 0; }
  summary { cursor: pointer; font-weight: bold;
            color: #1a3faa; }
  dialog  { border: none; border-radius: 10px;
            padding: 24px; box-shadow: 0 8px 32px rgba(0,0,0,0.2);
            max-width: 300px; }
  dialog::backdrop { background: rgba(0,0,0,0.4); }
  button  { padding: 8px 16px; background: #1a3faa;
            color: white; border: none; border-radius: 6px;
            cursor: pointer; font-size: 13px; }
  progress, meter { width: 100%; height: 18px; margin: 4px 0; }
</style>

<!-- details/summary accordion -->
<h3>📋 FAQ (click to expand)</h3>
<details>
  <summary>What is HTML?</summary>
  <p>HTML stands for HyperText Markup Language!</p>
</details>
<details>
  <summary>Is HTML a programming language?</summary>
  <p>No — it's a markup language. It describes structure,
     not logic.</p>
</details>

<hr>

<!-- dialog modal -->
<h3>🪟 Dialog Modal</h3>
<button onclick="document.getElementById('demo-modal').showModal()">
  Open Modal
</button>
<dialog id="demo-modal">
  <h3>Hello from <dialog>!</h3>
  <p>This is a native HTML modal — no JS library needed!</p>
  <button onclick="document.getElementById('demo-modal').close()">
    Close ✕
  </button>
</dialog>

<hr>

<!-- progress and meter -->
<h3>📊 Progress & Meter</h3>
<label>Download: <progress value="65" max="100">65%</progress></label>
<label>Battery: <meter value="0.8" min="0" max="1" 
                       low="0.2" high="0.7">80%</meter></label>

<hr>

<!-- datalist autocomplete -->
<h3>🔍 Datalist Autocomplete</h3>
<input list="browsers" placeholder="Type a browser...">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
  <option value="Brave">
</datalist>

Browser Preview

💡 Click the FAQ items, open the modal, and type into the datalist input!

Lecture 10 · Advanced

Accessibility (a11y)

Intermediate ~60 min Requires: Lecture 09

Why Accessibility Matters

Over 1 billion people worldwide have some form of disability. Let's see accessible vs inaccessible patterns side by side:

Live Playground — Accessibility

HTML Editor

<style>
  body { font-family: sans-serif; padding: 14px;
         font-size: 13px; }
  .bad  { background: #fff0f0; padding: 12px;
          border-left: 3px solid #e44; margin: 10px 0; }
  .good { background: #f0fff4; padding: 12px;
          border-left: 3px solid #2a2; margin: 10px 0; }
  label { display: block; margin-bottom: 4px;
          font-weight: bold; }
  input { padding: 6px; border: 1px solid #ccc;
          border-radius: 4px; }
  button { padding: 6px 12px; background: #333;
           color: white; border: none; border-radius: 4px;
           cursor: pointer; }
  button:focus-visible { 
    outline: 3px solid #0066cc;
    outline-offset: 2px;
  }
  img { max-width: 80px; }
  .sr-only { position: absolute; width: 1px;
             height: 1px; overflow: hidden;
             clip: rect(0,0,0,0); }
</style>

<h3>❌ Inaccessible Patterns</h3>
<div class="bad">
  <!-- No label -->
  <input type="text" placeholder="Enter name">
  <br><br>
  <!-- Image without alt -->
  <img src="https://picsum.photos/80/60">
  <br><br>
  <!-- Click target unclear -->
  <span onclick="alert('clicked')">Click me</span>
</div>

<h3>✅ Accessible Patterns</h3>
<div class="good">
  <!-- Proper label association -->
  <label for="a11y-name">Full Name</label>
  <input type="text" id="a11y-name"
         placeholder="Enter your name"
         aria-required="true">
  <br><br>
  <!-- Meaningful alt text -->
  <img src="https://picsum.photos/80/60" 
       alt="A scenic landscape photograph">
  <br><br>
  <!-- Proper button -->
  <button type="button"
          aria-label="Submit the contact form">
    Submit Form
  </button>
  <br><br>
  <!-- ARIA live region -->
  <div aria-live="polite" id="msg-area">
    Screen readers announce changes here.
  </div>
  <button onclick="
    document.getElementById('msg-area')
      .textContent='✅ Form submitted!'">
    Simulate Update
  </button>
</div>

Browser Preview

💡 Use Tab key to navigate — notice how the accessible button has a visible focus ring!

Lecture 11 · Advanced

SEO & Meta Tags

Intermediate ~50 min Requires: Lecture 10

SEO Meta Tags in Action

Meta tags live in the <head> — they're invisible to users but critical for search engines and social sharing. See how they work:

Live Playground — SEO Head & Social Cards

Updated

HTML Editor

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" 
        content="width=device-width, initial-scale=1">
  <title>My Recipe: Chocolate Cake — Bakes & More</title>
  
  <!-- SEO -->
  <meta name="description" 
        content="The best chocolate cake recipe, ready in 45 minutes. Rich, moist, and absolutely delicious!">
  <meta name="robots" content="index, follow">
  <link rel="canonical" 
        href="https://bakesandmore.com/chocolate-cake">

  <!-- Open Graph (Facebook, LinkedIn) -->
  <meta property="og:type"        content="article">
  <meta property="og:title"       
        content="Best Chocolate Cake Recipe">
  <meta property="og:description" 
        content="Rich, moist, and delicious!">
  <meta property="og:image"       
        content="https://picsum.photos/600/300">
  <meta property="og:url"         
        content="https://bakesandmore.com/chocolate-cake">

  <style>
    body { font-family: sans-serif; padding: 16px;
           max-width: 500px; }
    .seo-card { background: #fff; border: 1px solid #ddd;
               border-radius: 8px; overflow: hidden;
               max-width: 400px; margin: 12px 0;
               box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
    .seo-card img { width: 100%; height: 140px;
                    object-fit: cover; display: block; }
    .seo-card .card-body { padding: 10px 14px; }
    .seo-card .site-name { font-size: 0.7em;
                           color: #888; text-transform: uppercase; }
    .seo-card .title { font-weight: bold; margin: 4px 0; }
    .seo-card .desc  { font-size: 0.85em; color: #555; }
    .google-result { background: #fff; padding: 12px;
                    border-radius: 6px; max-width: 400px;
                    margin: 10px 0; }
    .google-url  { color: #1a0dab; font-size: 0.75em; }
    .google-link { color: #1a0dab; font-size: 1.1em;
                   font-weight: normal; cursor: pointer; }
    .google-desc { color: #545454; font-size: 0.85em;
                   margin-top: 2px; }
  </style>
</head>
<body>
  <h2>How Your Page Appears in Search & Social</h2>

  <h3>🔍 Google Search Result Preview:</h3>
  <div class="google-result">
    <div class="google-url">
      bakesandmore.com › chocolate-cake
    </div>
    <div class="google-link">
      Best Chocolate Cake Recipe — Bakes & More
    </div>
    <div class="google-desc">
      The best chocolate cake recipe, ready in 45 minutes. 
      Rich, moist, and absolutely delicious!
    </div>
  </div>

  <h3>📱 Social Media Card Preview:</h3>
  <div class="seo-card">
    <img src="https://picsum.photos/600/300" 
         alt="Chocolate cake OG image">
    <div class="card-body">
      <div class="site-name">bakesandmore.com</div>
      <div class="title">Best Chocolate Cake Recipe</div>
      <div class="desc">Rich, moist, and delicious!</div>
    </div>
  </div>

  <p><em>Edit the meta tags above to see how title, 
  description, and og:image affect the previews!</em></p>
</body>
</html>

Browser Preview

💡 Change the og:description and og:title meta tags — the cards below update when you hit Run!

Lecture 12 · Capstone

Capstone Project: Personal Portfolio

Advanced ~90 min Requires: All Lectures

Congratulations on reaching the final lecture! Build a fully semantic, accessible, SEO-optimised personal portfolio — all in the live playground below. This applies every concept from the course.

ℹ️ Your Sandbox

The playground below is fully unlocked — edit everything. Try adding your real name, projects, and skills. This is your HTML Mastery graduation project!

Live Playground — 🎓 Capstone Portfolio

Updated

HTML Editor — Edit Everything!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" 
        content="width=device-width, initial-scale=1">
  <title>Jane Smith — Front-End Developer</title>
  <meta name="description" content="Jane Smith is a front-end developer specialising in accessible, performant web experiences.">
  <meta property="og:title" content="Jane Smith — Front-End Developer">
  <meta property="og:image" content="https://picsum.photos/600/300">
  <style>
    *, *::before, *::after { box-sizing: border-box; margin:0; padding:0; }
    body   { font-family: 'Segoe UI', sans-serif; color: #1a1a2e; }
    a      { color: #e25822; }

    /* Header */
    header { background: #1a1a2e; color: white; padding: 14px 24px;
             display: flex; justify-content: space-between; align-items: center; }
    header a { color: #aac; text-decoration: none; }
    nav a  { margin-left: 16px; font-size: 0.9em; }
    nav a:hover { color: white; }

    /* Hero */
    .hero  { background: linear-gradient(135deg, #e8f0fe, #fce8d8);
             padding: 48px 24px; text-align: center; }
    .hero h1 { font-size: 2.2rem; margin-bottom: 10px; }
    .hero p  { color: #555; max-width: 500px; margin: 0 auto 20px; }
    .hero .cta { display: inline-block; background: #1a1a2e;
                 color: white; padding: 10px 22px; border-radius: 6px;
                 text-decoration: none; margin: 4px; font-size: 0.9em; }
    .hero .cta:hover { background: #2a2a4e; }

    /* Sections */
    section { padding: 40px 24px; max-width: 800px; margin: 0 auto; }
    h2     { font-size: 1.5rem; margin-bottom: 20px; color: #1a1a2e;
             padding-bottom: 8px; border-bottom: 2px solid #e25822; }

    /* Skills table */
    table  { width: 100%; border-collapse: collapse; }
    th, td { padding: 8px 12px; border: 1px solid #eee; text-align: left; }
    th     { background: #f0f4ff; }
    meter  { width: 120px; height: 14px; }

    /* Projects */
    .projects-grid { display: grid; 
                     grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
                     gap: 16px; }
    article { background: #f9f9fc; border: 1px solid #e0e0f0;
              border-radius: 8px; padding: 16px; }
    article h3 { margin-bottom: 8px; }
    article p  { font-size: 0.87em; color: #555; margin-bottom: 10px; }
    article a  { font-size: 0.85em; }

    /* Timeline */
    ol.timeline { list-style: none; padding: 0; }
    ol.timeline li { padding: 10px 0 10px 24px; border-left: 2px solid #e25822;
                     margin-left: 12px; position: relative; }
    ol.timeline li::before { content: ''; position: absolute;
                             left: -7px; top: 14px; width: 12px;
                             height: 12px; border-radius: 50%;
                             background: #e25822; }
    .timeline time { font-size: 0.8em; color: #888; }

    /* Contact */
    form   { display: flex; flex-direction: column; gap: 12px; max-width: 400px; }
    label  { font-weight: bold; font-size: 0.87em; }
    input, textarea { padding: 8px; border: 1px solid #ccc;
                      border-radius: 6px; font-size: 0.9em; }
    button[type=submit] { background: #e25822; color: white; border: none;
                          padding: 10px; border-radius: 6px; cursor: pointer;
                          font-size: 0.9em; font-weight: bold; }
    button[type=submit]:hover { background: #c94a18; }

    /* Footer */
    footer { background: #1a1a2e; color: #aaa; text-align: center;
             padding: 20px; font-size: 0.85em; }
    footer address { display: inline; font-style: normal; }
    footer a { color: #88aaff; }
  </style>
</head>
<body>

<a href="#main" class="skip-link" 
   style="position:absolute;transform:translateY(-100%);
          background:#e25822;color:white;padding:8px 16px;">
  Skip to main content
</a>

<header>
  <strong>JS</strong>
  <nav aria-label="Main navigation">
    <a href="#about">About</a>
    <a href="#skills">Skills</a>
    <a href="#projects">Projects</a>
    <a href="#timeline">Experience</a>
    <a href="#contact">Contact</a>
  </nav>
</header>

<div class="hero">
  <h1>Hi, I'm Jane Smith 👋</h1>
  <p>Front-End Developer building fast, accessible 
     and beautiful web experiences.</p>
  <a href="#projects" class="cta">See My Work</a>
  <a href="resume.pdf" download class="cta" 
     style="background:#e25822">Download CV</a>
</div>

<main id="main">

  <section id="about" aria-labelledby="about-h">
    <h2 id="about-h">About Me</h2>
    <figure style="float:right;margin:0 0 12px 20px">
      <img src="https://picsum.photos/120/120?random=5"
           alt="Jane Smith smiling in her office"
           width="120" height="120"
           style="border-radius:50%;border:3px solid #e25822">
    </figure>
    <p>I'm a developer with 5 years of experience crafting 
       modern web interfaces. I care deeply about 
       <strong>accessibility</strong>, 
       <strong>performance</strong>, and clean code.</p>
    <p>When I'm not coding, I'm hiking or reading about 
       design systems. Let's build something great!</p>
  </section>

  <section id="skills" aria-labelledby="skills-h">
    <h2 id="skills-h">Skills</h2>
    <table>
      <thead>
        <tr>
          <th scope="col">Skill</th>
          <th scope="col">Level</th>
          <th scope="col">Proficiency</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>HTML5</td>
          <td>Expert</td>
          <td><meter value="0.95" min="0" max="1" 
                     title="95%">95%</meter></td>
        </tr>
        <tr>
          <td>CSS / Tailwind</td>
          <td>Advanced</td>
          <td><meter value="0.85" min="0" max="1"
                     title="85%">85%</meter></td>
        </tr>
        <tr>
          <td>JavaScript</td>
          <td>Intermediate</td>
          <td><meter value="0.7" min="0" max="1"
                     title="70%">70%</meter></td>
        </tr>
        <tr>
          <td>React</td>
          <td>Intermediate</td>
          <td><meter value="0.65" min="0" max="1"
                     title="65%">65%</meter></td>
        </tr>
      </tbody>
    </table>
  </section>

  <section id="projects" aria-labelledby="projects-h">
    <h2 id="projects-h">Projects</h2>
    <div class="projects-grid">
      <article>
        <h3>Weather App</h3>
        <p>A responsive weather dashboard using 
           the Open-Meteo API. Accessible and 
           mobile-first.</p>
        <a href="https://github.com" target="_blank"
           rel="noopener noreferrer"
           aria-label="View Weather App on GitHub">
          View on GitHub →
        </a>
      </article>
      <article>
        <h3>Portfolio Site</h3>
        <p>This site! Built with semantic HTML5, 
           CSS Grid, and zero frameworks.</p>
        <a href="https://github.com" target="_blank"
           rel="noopener noreferrer"
           aria-label="View Portfolio on GitHub">
          View Source →
        </a>
      </article>
      <article>
        <h3>Recipe Finder</h3>
        <p>Search and save recipes using the 
           Spoonacular API. Offline-capable PWA.</p>
        <a href="https://github.com" target="_blank"
           rel="noopener noreferrer"
           aria-label="View Recipe Finder on GitHub">
          Live Demo →
        </a>
      </article>
    </div>
  </section>

  <section id="timeline" aria-labelledby="timeline-h">
    <h2 id="timeline-h">Experience</h2>
    <ol class="timeline">
      <li>
        <time datetime="2023">2023 – Present</time>
        <strong>Senior Front-End Developer</strong>
        at TechCorp Ltd
        <p style="font-size:.87em;color:#555;margin-top:4px">
          Building accessible design systems and 
          performance-optimised interfaces.
        </p>
      </li>
      <li>
        <time datetime="2021">2021 – 2023</time>
        <strong>Front-End Developer</strong>
        at StartupXYZ
        <p style="font-size:.87em;color:#555;margin-top:4px">
          Built React apps and maintained a component library.
        </p>
      </li>
      <li>
        <time datetime="2019">2019 – 2021</time>
        <strong>Junior Web Developer</strong>
        at Agency ABC
        <p style="font-size:.87em;color:#555;margin-top:4px">
          Learned the ropes — HTML, CSS, JavaScript.
        </p>
      </li>
    </ol>
  </section>

  <section id="contact" aria-labelledby="contact-h">
    <h2 id="contact-h">Get In Touch</h2>
    <form action="#" method="POST">
      <label for="p-name">
        Name <span aria-hidden="true">*</span>
      </label>
      <input type="text" id="p-name" name="name"
             autocomplete="name" required
             aria-required="true"
             placeholder="Your name">

      <label for="p-email">Email *</label>
      <input type="email" id="p-email" name="email"
             autocomplete="email" required
             placeholder="you@example.com">

      <label for="p-msg">Message *</label>
      <textarea id="p-msg" name="message" rows="4"
                required placeholder="Say hello!">

Browser Preview

🎓 This is your complete portfolio! Change "Jane Smith" to your name, add your real projects, and make it yours!

🚀 What's Next?

You've completed the HTML curriculum! Your natural next steps:

CSS — Style with Flexbox, Grid, animations
JavaScript — Add interactivity
Tailwind CSS — Utility-first CSS framework
Git & GitHub — Version control
Deployment — Netlify, GitHub Pages, Vercel