Intermediate
Advanced forms, responsive images, SVG/Canvas, accessibility patterns (live regions, focus management, skip links), performance (preload, lazy loading, fonts), Web Components, structured data, and internationalization.
Progress: 0 / 35 topics completed
Advanced Forms
Autocomplete Attribute
Use the autocomplete attribute to help browsers and password managers fill forms correctly.
The Output Element
Display live form calculation results with the semantic <output> element.
novalidate and Custom Validation
Disable native browser validation with novalidate and implement custom logic using the Constraint Validation API.
The form Attribute
Associate inputs and buttons with a form using the form attribute, even when they are outside the <form> element.
Advanced File Inputs
Control file uploads with accept, multiple, capture, and drag-and-drop integration.
Multi-Step Form Structure
Build accessible multi-step forms using <fieldset>, aria-current, and progress indicators.
Advanced Media
Responsive Images with srcset and sizes
Serve correctly sized images for every screen using srcset, sizes, and the picture element.
Video Tracks and Captions
Add captions, subtitles, and descriptions to video with the <track> element and WebVTT format.
Inline SVG
Embed SVG directly in HTML for CSS-styleable, accessible, and interactive vector graphics.
Canvas Element Basics
Draw shapes, text, and images programmatically with the HTML5 <canvas> element.
Advanced Tables
Column Groups
Style and group table columns with <colgroup> and <col> elements.
Complex Table Accessibility
Make complex tables with multi-level headers accessible using scope, id, and headers attributes.
Responsive Table Patterns
Make data tables work on mobile with horizontal scroll, stacked layout, and card transforms.
Structured Data and SEO
JSON-LD Structured Data
Add schema.org JSON-LD to enable rich results in Google Search (stars, FAQs, events, breadcrumbs).
Breadcrumb Navigation
Build accessible, SEO-friendly breadcrumb trails with nav, aria-label, and JSON-LD.
Hreflang for Multilingual Sites
Tell search engines about language and regional variations of your pages with hreflang.
Favicon and Web App Icons
Set favicons, touch icons, and web app manifests for browsers, bookmarks, and home screens.
Microdata
Embed schema.org structured data directly in HTML using itemscope, itemtype, and itemprop.
Pagination HTML
Build accessible pagination with nav, aria-label, aria-current, and proper link semantics.
Advanced Accessibility
Skip Navigation Links
Add skip links that let keyboard users jump past repeated navigation to the main content.
ARIA Live Regions
Announce dynamic content changes to screen readers with aria-live, role="status", and role="alert".
Focus Management
Control keyboard focus for SPAs, modals, and dynamic content with tabindex and focus().
Accessible Modals and Dialogs
Build accessible modal dialogs using the native <dialog> element and ARIA attributes.
Keyboard Navigation Patterns
Implement ARIA patterns for keyboard navigation in tabs, accordions, menus, and tree views.
Accessible Tooltips
Build keyboard and screen-reader accessible tooltips using aria-describedby and role="tooltip".
Performance and Loading
Resource Hints
Speed up pages with preload, prefetch, preconnect, and dns-prefetch link hints.
Lazy Loading
Defer offscreen images and iframes with loading="lazy" to speed up initial page load.
Font Loading Optimization
Eliminate flash of invisible/unstyled text with font-display, preload, and self-hosted fonts.
Image Optimization in HTML
Maximize image performance with fetchpriority, decoding, WebP/AVIF, aspect-ratio, and object-fit.
HTML APIs and Web Components
The Template Element
Define reusable HTML fragments with <template> that are parsed but not rendered until cloned.
Custom Elements
Create reusable HTML elements with the Custom Elements API and HTMLElement lifecycle callbacks.
Shadow DOM Basics
Encapsulate styles and markup with Shadow DOM to build truly isolated reusable components.
Web Components Overview
Combine Custom Elements, Shadow DOM, and HTML Templates to build reusable, framework-agnostic UI components.