My First Webpage
Loading simulation…
flagWhat you'll discover
- arrow_forwardPlan and structure a page with headings, paragraphs and lists
- arrow_forwardWrite at least three CSS rules that style your content
- arrow_forwardChoose a colour scheme and apply it consistently
- arrow_forwardPersonalise a project until it feels truly yours
Structure first, style second
Professional web developers build pages in two passes. First comes the HTML skeleton: what sections exist and in what order — a heading for your name, a paragraph introducing you, a list of things you love. Only then comes CSS to make it beautiful. Working this way keeps you organised and mirrors how real teams split work between structure and design. Sketching your page on paper for thirty seconds before typing is a trick even senior developers still use.
Make it readable
A few design rules instantly make any page look better. Use contrast: dark text on light backgrounds (or the reverse) so words are easy to read. Use spacing: padding inside boxes and margins between them give content room to breathe. Stick to two or three colours that work together rather than a rainbow. And keep text sizes sensible — one big heading, medium sub-headings, comfortable body text. Designers call this visual hierarchy: the most important thing should look the most important.
Personalising is real development
The goals checklist makes sure your page has the essential parts, but everything beyond that is yours: favourite colours, more sections, emoji, borders, a quote you love. This is exactly how real developers grow — start from working code, then change one thing at a time and observe what happens. Experimenting cannot break anything here, and the Start Over button is always there. The best way to learn CSS is to be curious and slightly reckless with it.