A real layout
Build a restaurant's menu section: a responsive grid of cards, each with a title row (name left, price right), a description, and a corner badge on specials. Every layout tool you've learned, working together.
Break the design into layers
Real projects rarely use one layout technique alone. A menu page, a product listing or a news site combines a wrapping collection, components with their own inner layout, and small decorations placed precisely on top. The skill this project practises is deciding which tool owns which job, so that each piece of CSS stays small and independent. When a teammate later asks for three columns on big screens or a new badge style, they should only need to touch one rule — and nothing else should break.
Before writing CSS for a component-heavy page, name the layout jobs and give each one the right tool. Professionals call this working outside in: the overall structure first, then each component, then details like badges and hover states.
- The collection — many cards that should wrap to fit any screen: Grid with repeat(auto-fit, minmax(…, 1fr)) and a gap.
- Each card — a box with padding, background and rounded corners; position: relative so decorations can be anchored.
- The title row — name left, price right: Flexbox with justify-content: space-between and align-items: baseline.
- The badge — position: absolute in the card's corner.
- Polish — consistent spacing values, readable text, a gentle hover.
Use align-items: baseline for a name and price of different font sizes: their text sits on the same line, which looks far tidier than centring.