Free to read · Three levels
HTML and CSS: semantic documents and adaptable interfaces
A complete theory course connecting semantic markup, accessible interaction, responsive layout, and maintainable CSS.
Start learningIn this course
Learn why documents remain meaningful without their styling, how the cascade and layout algorithms resolve competing constraints, and how to verify an interface across content sizes and interaction modes. Each level contains six developed lessons with two complete local examples, common diagnostic mistakes, and worked exercises.
The examples use synthetic content and self-contained HTML documents. Rendering descriptions state intended relationships, while official standards and platform documentation support the explanations. No course example requires a network service, a package installation, or real form submission.
What you will learn
- Author meaningful documents, navigation, tables, and labeled forms.
- Explain matching, cascade, inheritance, and intrinsic sizing.
- Build flexible Grid and Flexbox layouts with coherent source order.
- Design themes, progressive enhancements, and accessible native interactions.
- Measure rendering behavior and verify print completeness.
Your learning path
Three levels
Foundations
Meaningful content, native forms, selectors, and boxes.
- Documents, browsers, and a reliable workflow
- Semantic text, links, and navigation
- Images, lists, and data tables
- Forms, labels, and native controls
- Selectors, inheritance, and the cascade
- The box model, sizing, and normal flow
Adaptable interfaces
Flexible layouts, typography, media, and complete form states.
- Flexible one-dimensional layout
- Grid tracks and intrinsic sizing
- Responsive layout and media conditions
- Typography, color, and writing direction
- Responsive images and media sizing
- Form layout, focus, and error states
Maintainable presentation systems
Architecture, tokens, performance, enhancement, interaction, and print.
- CSS architecture and cascade layers
- Custom properties and adaptable themes
- Rendering costs and visual stability
- Progressive enhancement and container queries
- Accessible disclosure and interaction patterns
- Printing and paged media
Who this is for
- New web authors learning structure and styling.
- Developers strengthening responsive layout, accessibility, and CSS architecture.
Before you start
- Basic file editing and browser use.
- A current browser with developer tools; no JavaScript framework is required.