C’mon do the sketchin’

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

Go fullscreen: ⌃⌥F

C’mon do the sketchin’

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. Determine extra groups Figure out if we need extra grouping boxes to make the layout.

  4. Apply basic CSS position (relative & absolute), display, width

Start

C’mon do the sketchin’

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