HTML & CSS Code Typing

Selectors & Combinators

Classes, ids, combinators, pseudo-classes, and attribute matches.

Units, Colors & Values

px, rem, ch, hex, rgb(), and timing values.

Custom Properties

Double-dash declarations and var() with fallbacks.

HTML Entities

Ampersand escapes for reserved characters.

Checkpoint: Symbol Fluency

Every markup and stylesheet glyph from this module in one drill.

Keywords

HTML tag names and CSS at-rules, properties, and values.

Declarations

Doctype, meta tags, CSS custom properties, and base rules.

Semantic Landmarks

header, nav, main, article, aside, footer, and ARIA labels.

Forms & Inputs

label, input, select, fieldset, and the attributes they need.

Idiomatic One-Liners

Common flex, grid, and utility patterns you reach for daily.

Layout Property Vocabulary

grid-template, sticky positioning, and logical properties.

Checkpoint: Keywords & Idioms

A semantic pricing block with its stylesheet in one pass.

Control Flow

Media queries, container queries, and :has() conditional styling.

Functions & Methods

CSS functions like calc(), clamp(), minmax(), and color-mix().

Flexbox Navigation

A wrapping nav bar built with flex and gap.

Grid Template Areas

A named-area application shell that reflows on small screens.

Accessible Data Table

caption, thead, scope attributes, and zebra striping.

Realistic Snippet

A responsive landing-page hero with semantic HTML and modern CSS.

Keyframes & Transitions

Entrance animation with a reduced-motion escape hatch.

Checkpoint: Real Snippets

A responsive stat strip with dark-mode overrides.

Speed Run: Design Tokens

A full custom-property sheet typed without stopping.

Speed Run: Button & Badge

A component sheet with modifiers and focus states.

Speed Run: Contact Form

Markup and stylesheet for a labelled form at full pace.

Speed Run: Breakpoint Ladder

Four media queries and a container query in one run.

Speed Run: Utility Sheet

Stack, cluster, center, and screen-reader helpers.

Checkpoint: Sustained Speed

A container-query card component typed in one continuous run.

Assessment Sim 1: Card Grid Page

A complete card grid with custom properties, grid, and dark mode.

Assessment Sim 2: Pricing Section

A two-plan pricing block, markup and stylesheet complete.

Assessment Sim 3: Article Document

A full HTML document with head metadata and prose styles.

Assessment Sim 4: Dashboard Shell

Grid areas, a sidebar nav, and a responsive stat row.

Checkpoint: HTML & CSS Mastery Final

A complete landing page -- the course's graded final.