Responsive Images: srcset, sizes and picture
Lessons in this course
- Semantic Landmarks: From div Soup to header, nav, main & footerFree
- Headings and the Outline: h1 to h6 Without Skipped Levels Locked
- Machine-Readable Text: time, data, abbr and address Locked
- Labels, fieldset and legend: Every Control Gets a Name Locked
- Input Types, inputmode and autocomplete: The Right Field for Every Value Locked
- Constraint Validation I: required, min, max and step Locked
- Constraint Validation II: pattern, minlength and maxlength Locked
- What a Form Sends: name/value Pairs, disabled vs readonly, GET vs POST Locked
- Images Done Right: alt Text, width/height and Layout Shift Locked
- Responsive Images: srcset, sizes and picture Locked
- Video: controls, poster, preload and the Autoplay Rules Locked
- Captions with track and WebVTT: Timing and Reading Speed Locked
- Embedding with iframe: title, loading, sandbox and Aspect Ratio Locked
- The head: charset, viewport, title and meta description Locked
- Open Graph Tags: How Your Links Look When Shared Locked
- Canonical URLs and hreflang: One Page, Many Addresses Locked
- data-* Attributes and dataset: Custom Data in Markup Locked
- Data Tables: caption, thead, tbody and Spanning Cells Locked
- Accessible Tables: th, scope and headers/id Locked
- Final Project: Audit and Score the Finch UL 2 Product Page Locked