The Odin Project: Google SERP recreation

Recreating the header of this webpage

Aim of project

  • To make use of a CSS grid.

Reflection post-project

What I learned using the project:

  • HTML:
  1. Giving semantic tag classes, so that I can use CSS Grid more easily.
  2. Using the section tag instead of main tag, best practice.
  • CSS:
  1. The grid: Using grid areas, creating sub-grids, controlling grid items via e.g. align-items.
  2. Flexbox: Using flexbox within a grid.
  3. General CSS: Specificity (e.g. the .options-head span class).