Visual polishbeginner
Gradients, rounded corners and shadows are what separate "a box" from "a card" — they are three properties and they do most of the work in modern UI.
Style the markup to match the target on the left. The HTML is fixed — CSS only.
Published in full, before you start — every point is one of these and there is nothing else.
Gradients, rounded corners and shadows are what separate "a box" from "a card" — they are three properties and they do most of the work in modern UI.
Layout is how you decide where things sit on the page — flexbox is the tool for a row or column of items, and gap is how you space them without fighting margins.
A :hover style tells the user something is clickable, and a transition stops that change from snapping — together they are the cheapest way to make a page feel built rather than assembled.
Padding is the breathing room inside a box; without it text touches its own border and everything looks amateur, no matter how good the colours are.