Week 2 of 4 · CSS

Make it beautiful

Weekly goal: A styled, well-laid-out page that looks like your own brand.

Friday unlocks your badge: Style Maker

MonDay 6

First styles

Today's win: Colour arrives. Your page stops looking like a worksheet.

You add to the site: styles.css: your palette variables, fonts, body, links, headings and the gradient text.

You leave with: styles.css linked, with colours and fonts applied.

⏩ Tomorrow every container becomes a neat card.

TueDay 7

The box model and spacing

Today's win: Your containers get padding, borders and rounded corners, and the page is centred.

You add to the site: The .container, the section spacing, the card box and the footer box.

You leave with: Containers look like neat cards, centred on the page.

⏩ Tomorrow: a real navbar.

WedDay 8

Layout with Flexbox

Today's win: A sticky navbar and a footer that line up like a real website.

You add to the site: The navbar with flex, nav links with hover, and the footer text styles.

You leave with: A working navbar and footer.

⏩ Tomorrow: three cards in a row.

ThuDay 9

Layout with Grid and cards

Today's win: The three steps become a row of hover-lifting cards with a gradient number.

You add to the site: Grid for .steps and .footer-grid, card hover and the gradient number badge.

You leave with: A styled 3-card row and a 3-column footer.

⏩ Tomorrow: the Who I am page gets its look.

FriDay 10

Test, debug and showcase Friday showcase

Today's win: Your whole site looks like your own brand, on both pages.

You add to the site: Who I am page: profile, avatar, chips, cards and quiz box, all styled with the same styles.css.

You leave with: A styled two-page site.

⏩ Next week your page starts to react.