HTML
CSS Selectors Your Markup Makes Possible
The structure you write decides which selectors are available. Attribute selectors, sibling combinators and structural pseudo classes can replace a su...
HTML
A complete HTML path: document structure, text, links, media, tables, forms, semantic markup, HTML5, metadata, accessibility, SEO, tooling, projects and assessment.
113 notes in 20 topics
Topics in HTML
HTML Basics 7
Text and Formatting 5
Links and Navigation 5
Images and Media 7
Lists 3
Tables 5
Forms 9
Semantic HTML 5
HTML5 Features 7
Head and Metadata 5
HTML with CSS 5
HTML with JavaScript 5
Accessibility 6
HTML SEO 10
DevTools and Debugging 4
Editor Productivity 3
HTML Best Practices 4
HTML Projects 6
Advanced Projects 5
Practice and Exams 7
Notes
HTML
Writing Markup That CSS Can Lay Out
Grid and flexbox changed what markup a layout needs. Fewer wrappers, source order that matches reading order, and the reorder trap that breaks keyboar...
HTML
Responsive Design Starts in the Markup
The viewport tag, flexible images, relative units and the mobile first habit. Half of responsive design is decided before a single media query is writ...
HTML
Loading Scripts: defer, async and type=module
Where a script tag sits and which attribute it carries decides whether your page paints in half a second or four. Three loading behaviours, and when e...
HTML
The DOM: What the Browser Builds From Your Markup
Your file is text. The DOM is the live tree the browser built from it, and they are not the same thing. Knowing the difference is what makes debugging...
HTML
Selecting and Changing Elements
querySelector, classList, dataset and the methods that actually get used. The small set of DOM operations that covers most day to day work.
HTML
Events and Event Delegation
How a click travels through the DOM, why one listener can serve a thousand elements, and the keyboard events that inline handlers always forget.
HTML
Forms and JavaScript
Read values, submit without a page reload, validate with the built in API, and handle errors accessibly. All of it built on a real form element.
HTML
Accessibility: What It Means and Where HTML Fits
Most of accessibility is choosing the right element. The rest is a short list of habits. Here is the framework and the small number of things that fix...
HTML
Accessible Names and the Accessibility Tree
Every control has a name, a role and a state, and the browser works them out in a fixed order. Knowing that order explains almost every screen reader...
HTML
Keyboard Navigation, Focus and tabindex
If it cannot be reached with the Tab key it does not work. Focus order, visible focus indicators, the three values of tabindex and the traps to avoid.
HTML
ARIA Basics: Roles, States and Properties
ARIA fills gaps that HTML cannot. It also breaks pages when used carelessly. The rules, the attributes worth knowing, and the ones to leave alone.