Two-Truths-One-Lie

HTML-CSS-W2-InClassProject

Aim

• Mobile first desing
• Use CSS flexbox
• Use Media Queries
• 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
• 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

Testing your work

Developers must test their work. Here are the tests for your project. Read your tests before you start coding.

CSS tests

• we have used flexbox
• we have used at least one media query

HTML tests

• our names are at the bottom
• we have written semantic HTML

Design tests

• 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

Layout examples

Mobile

Laptop