The Text

Time for a small project! In this checkpoint, you'll style a whole page on your own, with what you've learned in the first three lessons: colors, text, spacing and sizes.

The exercises here are a bit different from the ones so far. They describe what the page should look like, not which classes to use. There are usually several ways to get there, so pick the classes that make sense to you: the checks look at the result in the preview, not at your classes. If you get stuck, look back at the lesson where you learned what you need.

The project. A recipe website has asked you for a card with its recipe for pancakes. Over three exercises, you'll style its text, give it room and set its sizes. Each exercise continues where the previous one ended: the editor starts with a finished page from the previous step, whose classes may be different from yours. That's fine. Change only the classes, not the elements: the checks look for them.

At the end, the card will look like this:

The text. In this exercise, the text gets its colors and its look:

• The page has a light background with a hint of color, such as amber-50, and dark gray text instead of black.
• The title is big (at least 36 px), bold, in a serif font and in a color of its own, for example a dark orange or amber.
• The line above the title is a small label: at most 14 px, in capital letters, with more space between the letters and in a lighter gray than the text.
• The headings Ingredients and Method are bigger than the text (at least 20 px) and bold.
• The ingredients have bullets in front of them.

A tip: without classes, the list has no bullets. Remember the first lesson: Preflight removed them, and the bullets have to be inside the items to be seen.