An event page

Open project · after lesson 9: A hero and a row of cards

Make a page for a real or made-up event (a sports day, a concert, a games club): a header, a menu of sections, three cards side by side with what is on, and a footer.

One way it could look. Yours will be different.

You'll use

These light up when your code uses them. Click one to see where you learned it.

page sections (<header>, <nav>, <main>, <section>, <footer>)Flexbox (display: flex)Flexbox settings (flex-wrap, gap, justify-content, align-items, flex)class selectors (.name)

Try it yourselfYour edits are saved in this browser.

Milestones

Tick each one when it is true of your project. Nobody marks it: be honest with yourself.

It uses page sections: header, nav, main and footer.
Three or more cards sit side by side with Flexbox, with space between them.
When the preview is narrow, the cards still fit (they wrap or shrink).

Make it yours

Menu links that jump to each section.
A different colour for each card.
A hover style for the menu links.

Looking back

What was the hardest part, and how did you get past it?

Tick every milestone first.

An event page

You'll use

Milestones

Make it yours

Looking back

★ An event page

★ An event page

Built with

Milestones

The hardest part