CSS from scratch to layout
A progressive path in 9 lessons. Each lesson points to editable examples and ready snippets.
1What CSS is and where to start
Understand the role of CSS on the web and how to attach styles to HTML.2Selectors and specificity
Target the right element without overusing IDs and !important.3Box model and spacing
Content, padding, border, margin, and box-sizing.4Flexbox: axes and alignment
Distribute items in one dimension with flex.5CSS Grid for layouts
Build responsive grids with repeat and minmax.6Typography and responsiveness
clamp(), contrast, and comfortable reading on any screen.7Project: building a complete layout
Combine sticky header, grid, cards, and theme on one page.8Modern responsive beyond media queries
clamp, container queries, scroll-snap, and layouts that adapt to the component.9CSS accessibility
Visible focus, forms, contrast, and motion — CSS in service of everyone.
Understand the role of CSS on the web and how to attach styles to HTML.2Selectors and specificity
Target the right element without overusing IDs and !important.3Box model and spacing
Content, padding, border, margin, and box-sizing.4Flexbox: axes and alignment
Distribute items in one dimension with flex.5CSS Grid for layouts
Build responsive grids with repeat and minmax.6Typography and responsiveness
clamp(), contrast, and comfortable reading on any screen.7Project: building a complete layout
Combine sticky header, grid, cards, and theme on one page.8Modern responsive beyond media queries
clamp, container queries, scroll-snap, and layouts that adapt to the component.9CSS accessibility
Visible focus, forms, contrast, and motion — CSS in service of everyone.