Sketch those grids
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.
- Form into pairs
- Download the files
- Print “mockup.pdf” and draw with pencil
Or do it digitally
Assign each box a semantically appropriate HTML tag.
Prioritize the content
Use the grey box method, or numbering method.
Determine the grid
Plan the grid basic CSS grid code: columns, rows, areas.
Hints on the next screen…
- Keep it simple
- Think in “areas”
- Not everything has to be in the grid
- More than 1 element can occupy the same area