- use CSS grid
- use CSS flexbox
- test your code
- Work in pairs.
- Write two truths and a lie each.
- Mark up your content with semantic HTML
- Lay out your page using flexbox and grid
- Test your work with Devtools.
- You can get pictures and choose custom size in the download at https://www.pexels.com/
- If you want to use a different font, get them from https://fonts.google.com/
- You can change the colours if you like
Developers must test their work. Here are the tests for your project. Read your tests before you start coding.
- we have used grid
- we have used flexbox
- we have used at least one media query
- our names are at the bottom
- we have written semantic HTML
- we have looked in the Accessibility tree
- our Lighthouse Access score is 100
- our layout works on desktop and mobile
- our cards are side by side on large screens and stacked on smaller screens
- we have taken a screenshot at laptop and Moto G4 device sizes using Devtools
- when we size the text up by 200%, our layout does not break