Learn HTML — Canvas Assignment Series
A self-paced "learn to hand-code HTML" series authored as inline-styled Canvas pages. Shown here in its native Canvas look inside a sandboxed preview.
- Role
- Designer & Content Author
- Surface
- Canvas Rich Content Editor
- Audience
- Beginners — first time writing HTML
- Pattern
- Self-contained, inline-styled pages
A series of self-paced assignments that teach beginners to hand-write HTML in nothing more than Notepad and a browser. Each lesson is authored directly in the Canvas LMS Rich Content Editor as a single, self-contained, inline-styled HTML page, so it survives Canvas’s HTML sanitizer and renders identically for every learner. The page shown to the side is Assignment 4: Styling Your Page.
The series
The unit builds one HTML concept at a time, each assignment ending with a file the student writes and submits back through Canvas:
- 0 — Hello, HTML! · the template and first tags
- 1 — Headings and Emphasis
- 2 — Lists and Links
- 3 — Tables
- 4 — Styling Your Page (shown here) · the
styleattribute, color, and size - 5 — Collapsible Sections ·
<details>/<summary>
Inside Assignment 4
The displayed page is a complete, scaffolded lesson. It teaches the style
attribute — color, background-color, and font-size — and the difference
between color names and hex codes, then has learners build two themed sections (a
holiday theme in color names, a sports-team or school theme in hex codes). It
opens with explicit “What You’ll Learn” and “Requirements” boxes and closes with a
Troubleshooting section covering the exact errors beginners hit.
Why the preview looks different
The embed keeps Canvas’s native appearance on purpose — light background, Canvas’s sans-serif type, and the page’s own colored section banners and callout boxes. It’s framed and sandboxed, so the page’s inline styles and the site’s dark shell stay fully isolated: a light embed living inside a dark shell, by design.
How it’s built
- One self-contained file per assignment — all styling inlined, no external CSS or JS
- A consistent visual system across the series: colored section banners, callout boxes, code blocks, and collapsible refreshers
- Semantic headings and real worked-example tables, authored to render reliably for every student regardless of browser