Skip to content

Comprehensive HTML Course: Beginner → Pro

A stand-alone HTML curriculum that also plugs into CSS, JavaScript, and full-stack tracks.

Stage 1 — Foundations Easy

Goal: understand HTML structure and build single-page documents.

  1. What is HTML & How the Web Works
    OverviewRole of HTML in the stack; browsers, servers, request/response.
  2. HTML Document Structure
    Overview<!DOCTYPE>, <html>, <head>, <body>; parsing basics.
  3. Basic Text & Formatting
    OverviewHeadings, paragraphs, inline vs block, emphasis, strong.
  4. Links & Navigation
    OverviewRelative vs absolute URLs, anchor attributes, in-page links.
  5. Images & Media
    Overview<img>, alt text, dimensions, responsive considerations.
  6. Lists & Simple Layout
    OverviewOrdered/unordered/definition lists; nesting; basic structure.

Mini Project About Me Page

Stage 2 — Core Skills Medium

Goal: build multi-page, semantic, accessible sites with forms and tables.

  1. Semantic HTML
    Overview<header>, <nav>, <main>, <article>, <section>, <footer>.
  2. HTML Entities & Special Characters
    OverviewCommon entities: &nbsp;, &amp;, &copy;.
  3. Tables for Data
    Overview<table> semantics, headers, captions, accessibility.
  4. Forms & User Input
    Overview<form>, inputs, labels, selects, buttons, input types.
  5. Meta & Head Elements
    OverviewCharset, viewport, SEO basics, favicon, social cards.
  6. Accessibility Essentials
    OverviewLabels, alt text, landmarks, keyboard navigation, ARIA basics.

Mini Project Restaurant Website

Stage 3 — Advanced Hard

Goal: master HTML5 features, media, APIs, and performance.

  1. HTML5 New Elements & Attributes
    Overview<figure>, <figcaption>, <details>, <summary>, <time>.
  2. Media Integration
    Overview<video>, <audio>, captions with <track>.
  3. HTML5 Forms & Validation
    OverviewValidation attributes, datalist, placeholders, required fields.
  4. Embedding External Content
    Overview<iframe>, sandboxing, privacy & security considerations.
  5. SVG in HTML
    OverviewInline SVG vs image, basic shapes, accessibility.
  6. Canvas API Intro
    OverviewWhen to use Canvas vs SVG; drawing primitives.
  7. HTML APIs Overview
    OverviewGeolocation, Drag-and-Drop, Web Storage.
  8. Performance & Optimization
    OverviewDefer/async scripts, media lazy-loading, minification.

Capstone Portfolio Site

Projects

About Me Page Easy
Open brief
Restaurant Website Medium
Open brief
Portfolio Site Hard
Open brief

Bundled Learning Modules

Syllabus Meta