Examples you can study.

Downloadable HTML, CSS, and Bootstrap demos to read, copy, break, and revise.

Two small repositories for practicing the separation between HTML structure and CSS presentation.

A four-page navigation exercise for practicing repeated structure and active states.

A guided demo for making Bootstrap feel more deliberate and closer to a Figma direction.

Starter files for the first in-class HTML demo, intended for Phoenix Code or any basic code editor.

A side-by-side comparison of Flexbox for one-dimensional layouts and CSS Grid for two-dimensional layouts.

Mobile-first layout using media queries to progressively enhance from one column to two, then three.

Visual comparison of block, inline, and inline-block display values — the default browser flow before Flexbox or Grid.

Live comparison of static, relative, absolute, sticky, and fixed positioning with labeled specimens for each.

Hands-on specimens for flex axes, alignment, growth ratios, and wrapping — the properties you use most in practice.

Grid track definitions, column spanning, and named template areas — two specimens that cover the properties used in real page layouts.

Three reusable layout recipes — stacked mobile sections, content plus sidebar, and an auto-fit card gallery.

Four-step walkthrough of CSS custom properties — defining tokens in :root, consuming them with var(), scoping overrides, and using fallback values.