12 parts
Build and style real web pages: semantic HTML, the box model, Flexbox, Grid, responsive design, and modern CSS — with live, editable examples.
Build a real web page with semantic HTML: headings, lists, links, images, and landmark tags like header, main and article, with a live preview.
9 min read
Build accessible HTML forms: inputs, labels, selects, checkboxes, validation attributes, and the submit flow, with a live preview.
How CSS selectors target elements and how the box model (margin, border, padding, content) controls size, with editable live examples.
Style text and color in CSS: hex/rgb/hsl, rem vs px vs %, web fonts, and readable typography, with a live, editable preview.
Master CSS Flexbox: main vs cross axis, justify-content, align-items, and flex-wrap, with an interactive playground to see it move.
Build real layouts with CSS Grid: columns, rows, gaps, and placement, with an interactive grid playground to experiment live.
8 min read
Make pages work on any screen: mobile-first CSS, media queries, fluid units, and responsive images, with a live, editable preview.
Understand CSS position (static, relative, absolute, fixed, sticky) and how z-index stacking really works, with editable examples.
10 min read
Add motion with CSS: transitions, transforms, and keyframe animations done tastefully and accessibly, with a live, editable preview you can edit.
7 min read
The modern CSS worth knowing now: custom properties, :has(), container queries, and nesting, with practical examples you can edit live.
A hands-on CSS project: build a responsive card grid that reflows on any screen using Grid and modern CSS, fully editable in your browser.
Put HTML and CSS together: build a clean, responsive landing page from scratch, covering layout, type, and polish, live in your browser.
13 min read
