Sketching a website

An activity to practice recognizing and drawing parts of a website including semantics and basic CSS.

Go fullscreen: ⌃⌥F

Sketching a website

Set up

  1. Form into pairs
  2. Download the files
  3. Print “mockups.pdf”
  4. Get out a pencil for marking up the paper

  1. Draw boxes Determine what things will become HTML elements.

  2. Write semantics Assign each box a semantically appropriate HTML tag.

  3. Apply basic CSS display, margin, padding, width, max-width

Start

Sketching a website

An activity to practice recognizing and drawing parts of a website including semantics and basic CSS.