Style Ada's Page (Project)

Use everything you learn to make Ada's page beautiful.

What you'll learn

Style text with colours and fonts
Add spacing with padding and margin
Arrange a row with flexbox

Before you start

flexbox-layout

You don get di CSS tools. Now use dem to give Ada's page a real makeover.

Your styling plan

Make h1 red (use #ec5252) and give di page a soft background colour
Give di menu cards padding, margin and a nice border
Use display: flex to arrange di cards for one line with gap
Center everything with justify-content

Open di playground, put your HTML for di HTML tab and your CSS for di CSS tab, run am and see di result. Try to make am look like a shop people go trust.

Project

Ada's page makeover

Style Ada's HTML page from di HTML course using CSS.

Give di page a background colour
Style di h1 with colour and font-size
Add padding, margin and border to cards
Use flexbox to arrange di cards for one line

← Previous: Layout with Flexbox