I want to give a page meaningful structure.
Establishing a Foundation of Semantic HTML →JOURNEY TO WEB COMPONENTS / TRACK 01
Web Foundations for Component Authors
Before we invent a tag, we need to understand the page it will join.
These seven lessons cover the browser skills the component tracks assume. If you already use semantic HTML, responsive CSS, querySelector, and event listeners, you can move straight to the next track.
A CHECKPOINT, NOT A DETOUR
You can skip this track
You are ready for the component track if you can give a page meaningful landmarks, make a layout respond to its container, select an element, and handle an event. Nothing here needs to become a gate.
Start building Web Components →FIND THE MISSING PIECE
I want to ... then read
I want to label controls and use ARIA carefully.
Implementing Accessibility Best Practices in HTML & ARIA Essentials →I want to keep HTML readable and check it for mistakes.
Crafting Incredible HTML: Best Practices & Real-World Examples →I want to write accessible CSS and visible focus styles.
CSS Fundamentals for Accessible Design →I want to make one layout work at different sizes.
Responsive Layouts & Advanced CSS Techniques →I want to organize CSS and expose reusable design values.
Advanced CSS: Optimization & Best Practices →I want to make a page respond without reloading.
Exploring JavaScript Essentials for Enhancing HTML →Build the foundation
01 / Give the page structure
Establishing a Foundation of Semantic HTMLReplace a page of divs with header, nav, main and footer so visitors can jump straight to navigation, content or footer.- Implementing Accessibility Best Practices in HTML & ARIA EssentialsLabel every control and image, add ARIA only where plain HTML cannot say it, and manage keyboard focus for screen reader users.
- Crafting Incredible HTML: Best Practices & Real-World ExamplesKeep HTML readable with consistent formatting, check it with a tool, and review it the way a stranger would.
02 / Make the structure hold up
CSS Fundamentals for Accessible DesignWrite CSS that works for low-vision, keyboard and screen reader users: selectors, specificity, color, focus styles and units.- Responsive Layouts & Advanced CSS TechniquesRearrange one page for phone and desktop with Flexbox, Grid and media queries, with legible type and spacing.
- Advanced CSS: Optimization & Best PracticesKeep CSS files small and rules understandable, and expose a few named CSS variables so a component can be re-themed.
03 / Add behavior
Exploring JavaScript Essentials for Enhancing HTMLMake a page react with JavaScript: hide a paragraph on a button press, update a list as you type, and load data from a server.