Semantic HTMLbeginner
Using header, nav, main and section instead of div everywhere is what lets screen readers, search engines and your own future self understand the page.
Match the hero on the left. Semantic markup, a gradient, and it has to survive a phone.
Published in full, before you start — every point is one of these and there is nothing else.
Using header, nav, main and section instead of div everywhere is what lets screen readers, search engines and your own future self understand the page.
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.
Most of your users are on a phone; responsive design is writing one layout that reflows instead of two layouts you have to maintain.
Tailwind replaces writing CSS with composing small named classes — the whole skill is knowing which class name maps to which property.
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.