The Right Size

One last thing: the sizes. On a wide screen, the card now stretches across the whole page, and the lines of the method are long and hard to follow. Try the 1280 px button in the Preview width bar.

• The card is never wider than 448 px, and on wide screens, it's in the middle of the page. On a phone, it fits the screen: try 375 px.
• The pancake sits in the middle of a square, 64 × 64 px, in the honey color of the recipe website's logo, #f8d78b. The palette doesn't have that color. The square is 16 px above the label.

A tip: in the lesson on spacing and sizing, you put a paw in the middle of a square box. The same trick works for the pancake.

That's the whole card. With three lessons behind you, you've turned plain HTML into a finished design: colors and fonts, spacing that holds it together, and sizes that work on a phone and on a big screen. In the next lesson, Borders, Shadows and Images, you'll learn to give cards like this one rounded corners, a shadow and a photo.