Find your next topic
This directory lists the published learning library. Follow the course in order or jump directly to a reference or practical task.
HTML course
- HTML introduction: describe your first page
- Build a complete HTML document
- Elements, attributes, and the document tree
- Headings, paragraphs, and meaningful text formatting
- Create meaningful links and fragment targets
- Images, useful alternatives, and reliable file paths
- Choose ordered, unordered, and description lists
- Build an accessible data table
- Classes, IDs, colors, and maintainable styles
- Div, span, and the difference between meaning and display
- Organize a page with semantic landmarks
- Write a labeled email form
- Text, email, URL, telephone, search, and password inputs
- Checkboxes, radio groups, select, datalist, and textarea
- Numbers, ranges, dates, times, and color controls
- File uploads, hidden fields, and button behavior
- Constraint validation, custom errors, and server boundaries
- Accessible forms: instructions, errors, and completion
- Responsive images: srcset, sizes, and picture
- Add an accessible disclosure with details and summary
- Audio, video, captions, and useful media alternatives
- Iframes, sandbox permissions, and embedding boundaries
- SVG and canvas: choose the right graphics model
- Head metadata, viewport, and search-friendly documents
- Native semantics, accessible names, and ARIA basics
- Dialogs, popovers, and choosing the right interaction
- Character references, Unicode, and URL encoding
- Browser APIs, permissions, and progressive enhancement
- Guest progress, local storage, and honest persistence
- Templates, data attributes, and reusable components
- HTML quality: maintainability, performance, and review
- Obsolete HTML and a safe migration strategy
- Debug HTML with evidence: source, DOM, network, and focus
- HTML interview questions that test reasoning
Reference
- Complete HTML attribute applicability index
- ARIA attributes: names, relationships, states, and announcements
- Document roots: html, head, and body
- Identity and application data: id, class, and data-*
- Inline presentation and policy: style, title, and nonce
- Quotation elements: blockquote, q, and cite
- Responsive images: img, picture, and source
- Table elements and header relationships
- The form element: successful controls and submission
- Disclosures: details and summary
- Experimental implementation: headingoffset and headingreset
- Form relationships: label, fieldset, and legend
- Image maps: map and area
- Language and translation: lang, dir, and translate
- Meaningful text: em, strong, b, i, small, mark, s, and u
- Microdata: itemscope, itemtype, itemprop, itemid, and itemref
- Page metadata: title and meta
- Abbreviations and definitions: abbr and dfn
- Component attributes: slot, part, exportparts, and is
- Document resources: link, style, and base
- Experimental element: geolocation and a respectful fallback
- The dialog element: modal and nonmodal interactions
- The input element and its control types
- Timed media: audio, video, source, and track
- Visibility and interaction: hidden and inert
- Direction isolation: bdi and bdo
- Event handlers and draggable behavior
- Focus attributes: tabindex, autofocus, and accesskey
- Obsolete HTML: migration by intent
- Page landmarks: main, header, footer, nav, and search
- Reusable markup: template and slot
- The button element: explicit actions and submitters
- The iframe element: embedding with boundaries
- Editing hints: contenteditable, spellcheck, and input assistance
- External resources: object and embed
- Form constraints: required, pattern, min, max, step, and length
- Ruby annotations: ruby, rt, and rp
- Scripts and fallback: script and noscript
- Sections and headings: article, section, aside, h1–h6, and hgroup
- The textarea element: multiline plain text
- Choices: select, option, optgroup, and selectedcontent
- Code and technical text: pre, code, kbd, samp, and var
- Fetching attributes: crossorigin, referrerpolicy, integrity, and loading
- Popover controls: popover, popovertarget, and popovertargetaction
- Text structure: p, div, span, br, hr, and wbr
- The canvas element: pixels with an accessible alternative
- Foreign content: inline SVG and MathML
- Machine-readable values: data and time
- The a element: links with a clear destination
- The datalist element: suggestions without forced choices
- Edits and notation: ins, del, sub, and sup
- List elements: ul, ol, li, and menu
- Results and measurements: output, meter, and progress
- The address element: contact information in context
- Description lists: dl, dt, and dd
- Figures and captions: figure and figcaption
Examples
- A reading journal with a clear heading
- From document scaffold to visible content
- A fragment link that reaches its section
- An ordered procedure with meaningful steps
- A labeled email control with native constraints
- Landmarks around a walking-guide article
- A workshop schedule with explicit headers
- A disclosure that works without custom JavaScript
Exercises
- Repair missing HTML names
- Repair a page that looks right but reads badly
- Repair labels and submission data in a signup form
- Make a comparison table understandable cell by cell
- Give a responsive image a reliable fallback
Quizzes
- Document structure knowledge check
- Form labels and validation knowledge check
- Browser parsing and security boundaries
- Accessible forms and native interactions
- Responsive media and document performance
Projects
- Build a complete community event page
- Build a booking form with a local review step
- Build an honest product comparison page
- Build a searchable help centre without a framework