What & why

When designing websites it’s extremely helpful to plan ahead so we have a direction before writing a line of code.

Sketching the layout, determining the HTML semantics & drawing the grid will make coding more straight-forward and understandable.

Let’s get some practice planning websites by working backwards from an already complete design.

Set up

1. Form into pairs
2. Download the files
3. Print “mockup.pdf” and draw with pencil
   Or do it digitally

Instructions

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

2. Prioritize the content
   Use the grey box method, or numbering method.

3. Determine the grid
   Plan the grid basic CSS grid code: columns, rows, areas.
   Hints on the next screen…

Grid hints

• Keep it simple
• Use fr units
• Think in “areas”
• Not everything has to be in the grid
• More than 1 element can occupy the same area