Discover Toronto

A little curiosity. A whole city.

A place for every lesson.

Use this checklist alongside the teacher guide.

275 unique tutorial and subtopic links, checked September 15, 2026. Find the HTML and CSS comment labels in the named files. Checkboxes are for this session; print to keep a permanent record. Comparison/adaptation rows do not claim a legacy technology or an alternate library is installed.

HTML lessons

Done Chapter Open file / comment block Teaching mode
HTML HOME index.html · H01
css/index.css · C01		 Build
HTML Introduction index.html · H01
css/index.css · C01		 Build
HTML Editors index.html · H01
css/index.css · C01		 Build
HTML Basic index.html · H01
css/index.css · C01		 Build
HTML Elements index.html · H01
css/index.css · C01		 Build
HTML Attributes index.html · H01
css/index.css · C01		 Build
HTML Headings index.html · H03
css/index.css · C01		 Build
HTML Paragraphs index.html · H03
css/index.css · C01		 Build
HTML Styles lab-css.html · L22
css/lab-css.css · C01		 Lab
HTML Formatting attraction.html · H04
css/attraction.css · C05		 Build
HTML Quotations attraction.html · H04
css/attraction.css · C05		 Build
HTML Comments index.html · H01
css/index.css · C01		 Build
HTML Colors lab-css.html · L10
css/lab-css.css · C10		 Lab
RGB lab-css.html · L10
css/lab-css.css · C10		 Lab
HEX lab-css.html · L10
css/lab-css.css · C10		 Lab
HSL lab-css.html · L10
css/lab-css.css · C10		 Lab
HTML CSS lab-css.html · L22
css/lab-css.css · C01		 Lab
HTML Links index.html · H02
css/index.css · C01		 Build
Link Colors lab-css.html · L10
css/lab-css.css · C10		 Lab
Link Bookmarks guide.html · H04
css/guide.css · C02		 Build
HTML Images index.html · H04
css/index.css · C05		 Build
Image Map lab.html · H06
css/lab.css · C05		 Lab
Background Images lab-css.html · L10
css/lab-css.css · C10		 Lab
The Picture Element gallery.html · H04
css/gallery.css · C05		 Build
HTML Project index.html · H01
css/index.css · C01		 Build
HTML Favicon index.html · H01
css/index.css · C01		 Build
HTML Page Title index.html · H01
css/index.css · C01		 Build
HTML Tables events.html · H05
css/events.css · C05		 Build
Table Borders events.html · H05
css/events.css · C05		 Build
Table Sizes events.html · H05
css/events.css · C05		 Build
Table Headers events.html · H05
css/events.css · C05		 Build
Padding & Spacing events.html · H05
css/events.css · C05		 Build
Colspan & Rowspan events.html · H05
css/events.css · C05		 Build
Table Styling events.html · H05
css/events.css · C05		 Build
Table Colgroup events.html · H05
css/events.css · C05		 Build
HTML Lists attraction.html · H05
css/attraction.css · C05		 Build
Unordered Lists attraction.html · H05
css/attraction.css · C05		 Build
Ordered Lists attraction.html · H05
css/attraction.css · C05		 Build
Other Lists attraction.html · H05
css/attraction.css · C05		 Build
HTML Block & Inline index.html · H05
css/index.css · C03		 Build
HTML Div index.html · H05
css/index.css · C03		 Build
HTML Classes index.html · H05
css/index.css · C03		 Build
HTML Id guide.html · H04
css/guide.css · C02		 Build
HTML Buttons booking.html · H04
css/booking.css · C03		 Build
HTML Iframes contact.html · H06
css/contact.css · C06		 Build
HTML JavaScript lab.html · H08
css/lab.css · C05		 JS extension
HTML File Paths index.html · H01
css/index.css · C01		 Build
HTML Head index.html · H01
css/index.css · C01		 Build
HTML Layout attraction.html · H05
css/attraction.css · C05		 Build
HTML Responsive index.html · H04
css/index.css · C90		 Build
HTML Computercode lab.html · H05
css/lab.css · C05		 Lab
HTML Semantics attraction.html · H05
css/attraction.css · C05		 Build
HTML Style Guide lab.html · H11
css/lab.css · C05		 Comparison
HTML Entities lab.html · H05
css/lab.css · C05		 Lab
HTML Symbols lab.html · H05
css/lab.css · C05		 Lab
HTML Emojis lab.html · H05
css/lab.css · C05		 Lab
HTML Charsets index.html · H01
css/index.css · C01		 Build
HTML URL Encode lab.html · H11
css/lab.css · C05		 Comparison
HTML vs. XHTML lab.html · H11
css/lab.css · C05		 Comparison
HTML Forms booking.html · H04
css/booking.css · C05		 Build
HTML Form Attributes booking.html · H04
css/booking.css · C05		 Build
HTML Form Elements lab-forms.html · H04
css/lab-forms.css · C05		 Lab
HTML Input Types lab-forms.html · H04
css/lab-forms.css · C05		 Lab
HTML Input Attributes lab-forms.html · H04
css/lab-forms.css · C05		 Lab
Input Form Attributes lab-forms.html · H04
css/lab-forms.css · C05		 Lab
HTML Canvas lab.html · H07
css/lab.css · C05		 JS extension
HTML SVG lab.html · H07
css/lab.css · C05		 Lab
HTML Media media.html · H04
css/media.css · C05		 Build
HTML Video media.html · H04
css/media.css · C05		 Build
HTML Audio media.html · H05
css/media.css · C05		 Build
HTML Plug-ins media.html · H07
css/media.css · C05		 Modern equivalent
HTML YouTube media.html · H06
css/media.css · C05		 Internet demo
HTML Web APIs lab.html · H08
css/lab.css · C05		 JS extension
HTML Geolocation lab.html · H08
css/lab.css · C05		 JS extension
HTML Drag and Drop planner.html · H05
css/planner.css · C05		 JS extension
HTML Web Storage planner.html · H04
css/planner.css · C05		 JS extension
HTML Web Workers lab.html · H09
css/lab.css · C05		 JS extension
HTML SSE lab.html · H10
css/lab.css · C05		 Local server

CSS lessons

Done Chapter Open file / comment block Teaching mode
CSS HOME index.html · H01
css/index.css · C01		 Build
CSS Introduction index.html · H01
css/index.css · C01		 Build
CSS Syntax index.html · H01
css/index.css · C01		 Build
CSS Selectors index.html · H01
css/index.css · C01		 Build
Grouping Selectors index.html · H01
css/index.css · C01		 Build
CSS How To index.html · H01
css/index.css · C01		 Build
Add Internal CSS lab-css.html · L22
css/lab-css.css · C01		 Comparison
Add Inline Style lab-css.html · L22
css/lab-css.css · C01		 Comparison
Multiple Style Sheets lab-css.html · L22
css/lab-css.css · C01		 Comparison
CSS Comments index.html · H01
css/index.css · C01		 Build
CSS Errors lab-css.html · L21
css/lab-css.css · C21		 Lab
CSS Colors lab-css.html · L10
css/lab-css.css · C10		 Lab
RGB / RGBA lab-css.html · L10
css/lab-css.css · C10		 Lab
HEX / HEXA lab-css.html · L10
css/lab-css.css · C10		 Lab
HSL / HSLA lab-css.html · L10
css/lab-css.css · C10		 Lab
CSS Backgrounds lab-css.html · L10
css/lab-css.css · C10		 Lab
Background Image lab-css.html · L10
css/lab-css.css · C10		 Lab
Background Repeat lab-css.html · L10
css/lab-css.css · C10		 Lab
Background Attachment lab-css.html · L10
css/lab-css.css · C10		 Lab
Background Shorthand lab-css.html · L10
css/lab-css.css · C10		 Lab
CSS Borders lab-css.html · L11
css/lab-css.css · C11		 Lab
Border Width lab-css.html · L11
css/lab-css.css · C11		 Lab
Border Color lab-css.html · L11
css/lab-css.css · C11		 Lab
Border Sides lab-css.html · L11
css/lab-css.css · C11		 Lab
Border Shorthand lab-css.html · L11
css/lab-css.css · C11		 Lab
Rounded Borders lab-css.html · L11
css/lab-css.css · C11		 Lab
CSS Margins lab-css.html · L11
css/lab-css.css · C11		 Lab
Margin Collapse lab-css.html · L11
css/lab-css.css · C11		 Lab
CSS Padding lab-css.html · L11
css/lab-css.css · C11		 Lab
Padding box-sizing lab-css.html · L11
css/lab-css.css · C11		 Lab
CSS Height / Width lab-css.html · L11
css/lab-css.css · C11		 Lab
Min / Max lab-css.html · L11
css/lab-css.css · C11		 Lab
CSS Box Model lab-css.html · L11
css/lab-css.css · C11		 Lab
CSS Outline lab-css.html · L11
css/lab-css.css · C11		 Lab
Outline Width lab-css.html · L11
css/lab-css.css · C11		 Lab
Outline Color lab-css.html · L11
css/lab-css.css · C11		 Lab
Outline Shorthand lab-css.html · L11
css/lab-css.css · C11		 Lab
Outline Offset lab-css.html · L11
css/lab-css.css · C11		 Lab
CSS Text lab-css.html · L12
css/lab-css.css · C12		 Lab
Text Alignment lab-css.html · L12
css/lab-css.css · C12		 Lab
Text Decoration lab-css.html · L12
css/lab-css.css · C12		 Lab
Text Decoration Styles lab-css.html · L12
css/lab-css.css · C12		 Lab
Text Transformation lab-css.html · L12
css/lab-css.css · C12		 Lab
Text Spacing lab-css.html · L12
css/lab-css.css · C12		 Lab
Text Shadow lab-css.html · L12
css/lab-css.css · C12		 Lab
CSS Fonts lab-css.html · L12
css/lab-css.css · C12		 Lab
Font Web Safe lab-css.html · L12
css/lab-css.css · C12		 Lab
Font Fallbacks lab-css.html · L12
css/lab-css.css · C12		 Lab
Font Style lab-css.html · L12
css/lab-css.css · C12		 Lab
Font Size lab-css.html · L12
css/lab-css.css · C12		 Lab
Font Google index.html · H01
css/index.css · C01		 Build
Font Pairings lab-css.html · L12
css/lab-css.css · C12		 Lab
Font Shorthand lab-css.html · L12
css/lab-css.css · C12		 Lab
CSS Icons index.html · H91
css/index.css · C02		 Ionicons adaptation
Icons: Bootstrap index.html · H91
css/index.css · C02		 Ionicons adaptation
Icons: Google index.html · H91
css/index.css · C02		 Ionicons adaptation
CSS Links index.html · H02
css/index.css · C01		 Build
Link Buttons planner.html · H04
css/planner.css · C03		 Build
CSS Lists attraction.html · H05
css/attraction.css · C02		 Build
CSS Tables events.html · H05
css/events.css · C05		 Build
Table Size events.html · H05
css/events.css · C05		 Build
Table Alignment events.html · H05
css/events.css · C05		 Build
Table Styling events.html · H05
css/events.css · C05		 Build
Table Responsive events.html · H05
css/events.css · C05		 Build
CSS Display lab-css.html · L14
css/lab-css.css · C14		 Lab
Visibility / Hide lab-css.html · L14
css/lab-css.css · C14		 Lab
CSS Max-width index.html · H01
css/index.css · C01		 Build
CSS Position lab-css.html · L14
css/lab-css.css · C14		 Lab
Fixed/Absolute Position lab-layout.html · L33
css/lab-layout.css · C33		 Lab
Sticky Position lab-layout.html · L33
css/lab-layout.css · C33		 Lab
CSS Position Offsets lab-css.html · L14
css/lab-css.css · C14		 Lab
CSS Z-index lab-css.html · L14
css/lab-css.css · C14		 Lab
CSS Overflow lab-css.html · L14
css/lab-css.css · C14		 Lab
Overflow X and Y lab-css.html · L14
css/lab-css.css · C14		 Lab
CSS Float lab-css.html · L15
css/lab-css.css · C15		 Lab
Clear / Clearfix lab-css.html · L15
css/lab-css.css · C15		 Lab
CSS Inline-block lab-css.html · L14
css/lab-css.css · C14		 Lab
CSS Align lab-layout.html · L30
css/lab-layout.css · C30		 Lab
Horizontal Align lab-layout.html · L30
css/lab-layout.css · C30		 Lab
Vertical Align lab-layout.html · L30
css/lab-layout.css · C30		 Lab
CSS Combinators lab-css.html · L13
css/lab-css.css · C13		 Lab
CSS Pseudo-classes lab-css.html · L13
css/lab-css.css · C13		 Lab
Interactive lab-css.html · L13
css/lab-css.css · C13		 Lab
Structural lab-css.html · L13
css/lab-css.css · C13		 Lab
CSS Pseudo-elements lab-css.html · L13
css/lab-css.css · C13		 Lab
Text lab-css.html · L13
css/lab-css.css · C13		 Lab
Content lab-css.html · L13
css/lab-css.css · C13		 Lab
CSS Opacity lab-css.html · L19
css/lab-css.css · C19		 Lab
CSS Navigation Bars index.html · H02
css/index.css · C02		 Build
Vertical Navbar lab-layout.html · L33
css/lab-layout.css · C33		 Lab
Horizontal Navbar index.html · H02
css/index.css · C02		 Build
CSS Dropdowns lab-css.html · L18
css/lab-css.css · C18		 Lab
Advanced Dropdowns lab-css.html · L18
css/lab-css.css · C18		 Lab
CSS Image Gallery gallery.html · H04
css/gallery.css · C05		 Build
CSS Image Sprites lab-css.html · L19
css/lab-css.css · C19		 Lab
CSS Attribute Selectors lab-css.html · L13
css/lab-css.css · C13		 Lab
Advanced Attr Selectors lab-css.html · L13
css/lab-css.css · C13		 Lab
CSS Forms booking.html · H04
css/booking.css · C05		 Build
Style Inputs booking.html · H04
css/booking.css · C05		 Build
Input Focus / Icons booking.html · H04
css/booking.css · C05		 Build
Other Form Elements booking.html · H04
css/booking.css · C05		 Build
CSS Counters guide.html · H06
css/guide.css · C06		 Build
Nested Counters lab-css.html · L20
css/lab-css.css · C20		 Lab
CSS Units index.html · H01
css/index.css · C01		 Build
Absolute Units index.html · H01
css/index.css · C01		 Build
Relative Units index.html · H01
css/index.css · C01		 Build
CSS Inheritance lab-css.html · L13
css/lab-css.css · C13		 Lab
CSS Specificity lab-css.html · L13
css/lab-css.css · C13		 Lab
Specificity Hierarchy lab-css.html · L13
css/lab-css.css · C13		 Lab
CSS !important lab-css.html · L13
css/lab-css.css · C13		 Lab
CSS Math Functions lab-css.html · L20
css/lab-css.css · C20		 Advanced lab
CSS Optimization booking.html · H04
css/booking.css · C05		 Build
CSS Accessibility index.html · H02
css/index.css · C04		 Build
CSS Website Layout index.html · H04
css/index.css · C05		 Build
CSS Rounded Corners lab-css.html · L11
css/lab-css.css · C11		 Lab
CSS Border Images lab-css.html · L16
css/lab-css.css · C16		 Lab
CSS Backgrounds lab-css.html · L10
css/lab-css.css · C10		 Lab
Background Size lab-css.html · L10
css/lab-css.css · C10		 Lab
Background Origin lab-css.html · L10
css/lab-css.css · C10		 Lab
Background Clip lab-css.html · L10
css/lab-css.css · C10		 Lab
CSS Colors lab-css.html · L10
css/lab-css.css · C10		 Lab
Color Keywords lab-css.html · L10
css/lab-css.css · C10		 Lab
CSS Gradients lab-css.html · L16
css/lab-css.css · C16		 Lab
Radial Gradients lab-css.html · L16
css/lab-css.css · C16		 Lab
Conic Gradients lab-css.html · L16
css/lab-css.css · C16		 Lab
CSS Shadows lab-css.html · L16
css/lab-css.css · C16		 Lab
Box Shadow lab-css.html · L16
css/lab-css.css · C16		 Lab
CSS Text Effects lab-css.html · L12
css/lab-css.css · C12		 Lab
CSS Custom Fonts lab-css.html · L21
css/lab-css.css · C21		 Lab
CSS 2D Transforms booking.html · H04
css/booking.css · C05		 Build
Scale booking.html · H04
css/booking.css · C05		 Build
Skew / Matrix booking.html · H04
css/booking.css · C05		 Build
CSS 3D Transforms lab-layout.html · L32
css/lab-layout.css · C32		 Advanced lab
3D Perspective lab-layout.html · L32
css/lab-layout.css · C32		 Advanced lab
3D Card Flip lab-layout.html · L32
css/lab-layout.css · C32		 Advanced lab
3D Cube lab-layout.html · L32
css/lab-layout.css · C32		 Advanced lab
3D Carousel lab-layout.html · L32
css/lab-layout.css · C32		 Advanced lab
CSS Transitions lab-css.html · L17
css/lab-css.css · C17		 Advanced lab
Transition Timing lab-css.html · L17
css/lab-css.css · C17		 Advanced lab
CSS Animations lab-css.html · L17
css/lab-css.css · C17		 Advanced lab
Animation Timing lab-css.html · L17
css/lab-css.css · C17		 Advanced lab
Animation Properties lab-css.html · L17
css/lab-css.css · C17		 Advanced lab
CSS Tooltips lab-css.html · L18
css/lab-css.css · C18		 Lab
Tooltip Arrows lab-css.html · L18
css/lab-css.css · C18		 Lab
CSS Image Styling lab-css.html · L19
css/lab-css.css · C19		 Lab
Image Effects lab-css.html · L19
css/lab-css.css · C19		 Lab
Hover Overlays lab-css.html · L19
css/lab-css.css · C19		 Lab
CSS Image Modal gallery.html · H05
css/gallery.css · C05		 JS extension
CSS Image Centering lab-css.html · L19
css/lab-css.css · C19		 Lab
CSS Image Filters lab-css.html · L19
css/lab-css.css · C19		 Lab
CSS Image Shapes lab-css.html · L19
css/lab-css.css · C19		 Lab
CSS object-fit lab-css.html · L19
css/lab-css.css · C19		 Lab
CSS object-position lab-css.html · L19
css/lab-css.css · C19		 Lab
CSS Masking lab-css.html · L23
css/lab-css.css · C23		 Advanced lab
Masking - Gradients lab-css.html · L19
css/lab-css.css · C19		 Advanced lab
Masking - SVG lab-css.html · L23
css/lab-css.css · C23		 Advanced lab
CSS Buttons planner.html · H04
css/planner.css · C03		 Build
Hover Effects planner.html · H04
css/planner.css · C03		 Build
Button Groups planner.html · H04
css/planner.css · C03		 Build
CSS Pagination lab-layout.html · L33
css/lab-layout.css · C33		 Lab
Pagination Styles lab-layout.html · L33
css/lab-layout.css · C33		 Lab
CSS Multiple Columns guide.html · H05
css/guide.css · C05		 Build
Multiple Column Rules guide.html · H05
css/guide.css · C05		 Build
CSS User Interface lab-css.html · L21
css/lab-css.css · C21		 Lab
CSS Variables lab-css.html · L20
css/lab-css.css · C20		 Advanced lab
Overriding Variables lab-css.html · L20
css/lab-css.css · C20		 Advanced lab
Variables and JavaScript lab-css.html · L20
css/lab-css.css · C20		 Advanced lab
Variables in MQ index.html · H04
css/index.css · C90		 Build
CSS @property lab-css.html · L20
css/lab-css.css · C20		 Advanced lab
CSS Box Sizing index.html · H01
css/index.css · C01		 Build
CSS Media Queries index.html · H04
css/index.css · C90		 Build
MQ Examples index.html · H04
css/index.css · C90		 Build
Flexbox Intro lab-layout.html · L30
css/lab-layout.css · C30		 Lab
Flex Container lab-layout.html · L30
css/lab-layout.css · C30		 Lab
Flexbox Justify Content lab-layout.html · L30
css/lab-layout.css · C30		 Lab
Flexbox Align Items lab-layout.html · L30
css/lab-layout.css · C30		 Lab
Flex Items lab-layout.html · L30
css/lab-layout.css · C30		 Lab
Flex Responsive lab-layout.html · L30
css/lab-layout.css · C30		 Lab
Grid Intro lab-layout.html · L31
css/lab-layout.css · C31		 Lab
Grid Container lab-layout.html · L31
css/lab-layout.css · C31		 Lab
Grid Tracks lab-layout.html · L31
css/lab-layout.css · C31		 Lab
Grid Gaps lab-layout.html · L31
css/lab-layout.css · C31		 Lab
Grid Align lab-layout.html · L31
css/lab-layout.css · C31		 Lab
Grid Items lab-layout.html · L31
css/lab-layout.css · C31		 Lab
Grid Item Named lab-layout.html · L31
css/lab-layout.css · C31		 Lab
Grid Item Align lab-layout.html · L31
css/lab-layout.css · C31		 Lab
Grid Item Order lab-layout.html · L35
css/lab-layout.css · C35		 Lab
Grid 12-column Layout lab-layout.html · L31
css/lab-layout.css · C31		 Lab
CSS @supports lab-css.html · L20
css/lab-css.css · C20		 Advanced lab
RWD Intro index.html · H04
css/index.css · C90		 Build
RWD Viewport index.html · H01
css/index.css · C90		 Build
RWD Grid View lab-layout.html · L34
css/lab-layout.css · C34		 Lab
RWD Media Queries index.html · H04
css/index.css · C90		 Build
RWD Images gallery.html · H04
css/gallery.css · C05		 Build
RWD Videos media.html · H04
css/media.css · C05		 Build
RWD Frameworks lab-layout.html · L34
css/lab-layout.css · C34		 Comparison
RWD Templates lab-layout.html · L34
css/lab-layout.css · C34		 Comparison

How to handle comparison chapters

Icon provider chapters use Ionicons as requested: compare the loading script, icon name and CSS font-size/colour with the provider in the chapter. No Font Awesome, Bootstrap or Google icon package is installed.

Framework/template chapters: compare a premade framework class with the hand-written float grid in lab-layout.html L34. Use this completed site as the template, then make a new page manually. XHTML is a syntax comparison; deprecated browser plug-ins are replaced with supported object/embed media.

Optimization: inspect lazy loading, dimensions, system font fallback and the Network panel. Shared CSS extraction and minification are intentionally postponed to keep the source easy to teach.