CIW Web Design cheat sheet

Web Design

• HTML defines document structure via elements and attributes; CSS controls presentation; JavaScript controls behavior - the three layers are kept separate so markup stays semantic and styles remain reusable.

• The box model: total rendered width = content width + padding-left + padding-right + border-left + border-right (margin is outside the box and collapses vertically between block siblings).

• box-sizing: border-box makes declared width include padding and border, so layout columns no longer grow when padding is added.

• CSS specificity ranks selectors: inline style (1,0,0,0) > ID (0,1,0,0) > class/attribute/pseudo-class (0,0,1,0) > element/pseudo-element (0,0,0,1); equal specificity is resolved by source order, later wins.

• A fluid grid uses relative units (% , fr, rem) with max-width caps; breakpoints in media queries apply when the viewport satisfies the condition, e.g. @media (min-width: 768px).

• WCAG 2.x conformance levels are A, AA, and AAA; normal body text at AA needs a contrast ratio of at least 4.5:1, large text at least 3:1, and non-text UI components at least 3:1.

• Every image conveying meaning needs an alt attribute; purely decorative images use alt="" so screen readers skip them, and form inputs need an associated (for/id pairing).

• Semantic landmarks (

  , , , , , ) replace generic wrappers and expose navigation structure to assistive technology.

• Responsive images use srcset plus sizes (or with media conditions) so the browser downloads the smallest candidate that fits the layout and pixel density.