CodeRung

COURSE · 02

CSS and Responsive Layout

Keep improving the HTML capstone until it becomes a clear personal site that works on phones and desktops.

Start lesson one
Lessons
8
Estimated
6h
Starting level
Previous course
Outcome
Responsive personal learning site

PART 01

Make styles predictable

  1. 01Connect a stylesheet and understand the cascadeCreate a separate stylesheet, target elements, and use DevTools to see which declaration wins.
  2. 02The box model, sizing, and spacingBuild predictable lesson cards and distinguish content, padding, border, and margin.
  3. 03Typography, color, and readabilityCreate type and color tokens with clear hierarchy and sufficient contrast.
  4. 04Interaction states and form stylingStyle hover, focus, disabled, and invalid states while preserving visible keyboard focus.

PART 02

Finish the responsive page

  1. 05One-dimensional layout with FlexboxTurn navigation and card actions into wrapping, well-aligned one-dimensional layouts.
  2. 06Two-dimensional layout with GridCreate a card grid whose columns adapt automatically.
  3. 07Responsive design and media queriesStart with small screens and add breakpoints only where the content needs them.
  4. 08Capstone: finish the responsive learning siteIntegrate type, color, box model, Flex, Grid, states, and responsive rules into a reviewable site.

Your privacy choices

Necessary storage is always on. Optional analytics and support services load only after consent.