You're going to build a website for a bakery where the website is made up of two major components:
- A Title
- Bread Cards, which repeat
Here's what the site will look like when it's done:
Add some style to the container dive and title component to make it look like this:
You can do this in any order you like, but a recommended order might be:
- Add a super light grey background to the container.
- Make sure the font is right for the whole body.
- Make sure the background of the title is black.
- Adjust the padding and margin.
- Adjust the font sizes.
- Adjust the text alignment.
- Make any final tweaks.
Add some style to the container dive and title component to make it look like this:
You can do this in any order you like, but some of the best places to start include:
- Adding a background to the cards.
- Adjusting margin & padding for the cards.
- Adjust typography.
Then move on to some of the smaller, subtler details. Pay close attention to the mockups.
Uh oh! Looks like the developer messed up the last bread and didn't follow the conventions of the component when building it, so the css rules don't quite seem to apply.
Let's fix this component.
Now that you've fixed the bakery, it's time to add a bread of your own. Have fun!