CSS Variables and Design Tokens

Custom properties such as –brand-color make styles easier to update. Declare shared values on :root and use var() in component rules.

Transitions and Animations

Transitions animate changes between states. Keyframes describe multi-step motion. Respect reduced-motion preferences to support accessibility.

CSS Forms and Buttons

Consistent input padding, borders, labels, and focus styles improve usability. Keep buttons large enough to activate comfortably on touch devices.

CSS Final Project: Responsive Landing Page

Apply typography, spacing, Grid, Flexbox, custom properties, and media queries to create a polished responsive course landing page.

Flexbox Basics

Flexbox arranges items in one dimension. Use display:flex, gap, justify-content, and align-items to create flexible rows or columns.

Flexbox Responsive Cards

flex-wrap lets items move onto new rows. flex: 1 1 240px gives cards a preferred width while allowing them to grow or shrink.

CSS Grid Basics

Grid arranges items in rows and columns. repeat() and minmax() are useful for responsive layouts that adapt to available width.

Responsive Grid Layouts

Use auto-fit with minmax() to create columns that respond without many breakpoints. Ensure the minimum card width fits smaller screens.

Positioning Elements

position:relative creates a positioning context; absolute positions relative to an ancestor; fixed attaches to the viewport; sticky follows scrolling within constraints.

Media Queries

Media queries apply styles based on viewport characteristics. Start with a mobile-friendly base, then enhance layouts at wider breakpoints.

Pseudo-classes and Pseudo-elements

:hover and :focus-visible style interaction states; ::before and ::after create decorative generated content. Never hide keyboard focus without an alternative.

The CSS Box Model

Every element has content, padding, border, and margin. box-sizing: border-box makes declared widths include padding and borders.