Learn how to create HTML that not only gets things on the screen, but does so in a way that makes life easier for screen readers, scrapers, and the rest of your code.
Overview
Syllabus
Introduction
- Craft meaningful HTML
- Working with CodePen
- Working with VS Code
- Explore content and add it to CodePen
- Identify major elements of a page
- Identify headings and paragraphs
- Enhance an article with emphasis and links
- Ordered, unordered, and definition lists
- Challenge: First pass at article markup
- Solution: First pass at article markup
- Move your code from CodePen to Visual Studio Code (VS Code)
- Understand the head code
- Add semantic navigation
- Add images, figures, and figure captions
- Add footers with address, time, and date
- Add quotes, line breaks, and citations
- When to use div and span elements
- Challenge: Identify semantic problems
- Solution: Identify semantic problems
- Controlling breaks with or
- Displaying code with , , and
- Providing scripting alternatives with
- Providing details with and
- Understanding the misunderstood
- Next steps
Taught by
Jen Kramer
