Overview
How to structure and write web content for readability, clear focus, solid UX, and accessible color and typography, with do and do-not examples in HTML, CSS, and copy.
Readability & typography
Plain language, defining jargon, microcopy basics, line measure, body type sizing, and responsive type that respects user defaults.
Structure & hierarchy
Headings, landmarks, lists, page hierarchy, progressive disclosure, emphasis, calls to action, and whitespace -- how to make a page scannable and focused.
Forms & interactions
Link text, navigation labels, form field labels, error messages, and mobile-first DOM order so users can act on the content you've structured.
Microcopy & error states
How to write button labels, validation errors, empty states, loading states, success confirmations, and 404 pages so users always know what just happened and what to do next.
Color & contrast
WCAG contrast targets, color tokens, dark mode, and how to make links identifiable without relying on colour alone.
Images & media
Meaningful alt text, decorative images, video controls, captions, and audio practices for accessible, scannable pages.
Information architecture
Site-level wayfinding -- primary, utility, and footer navigation, breadcrumbs, taxonomies, search UX, and URL slug design that survive content growth.