Unit project: style your About Me page
Remember the About Me page you built at the end of Unit 1? Same page. Same HTML. This time you're not adding structure — you're finishing it: paint, trim, and the surfaces that make a frame feel like a room.
What you're building
Below is that page's HTML again, unchanged except for one small class
added to the intro paragraph so you have something to select. Nothing
about the structure needs to change. Everything you do this time happens
in the styling sheet.
By the time you're done, the page should have:
- A colored
header, withcolorchosen so the heading reads clearly against it. - A styled
h1— a real typeface, a real size, real weight. - An intro paragraph (
.tagline) in its own color, sized to half its container's width — while every other paragraph keeps a plain, different baseline color. That difference is the cascade at work: a class rule overriding a tag rule everywhere else. - A
mainregion with padding, margin, and a visible border — the full box model, on one real element. - An interests list (
ul) turned into a flexbox: spaced out withgap, centered, and wrapping instead of overflowing on a narrow screen. - That same list laid out as a row instead of a column once the screen
is wide enough — mobile-first, with a
min-widthmedia query doing the work. - A centered
footer.
Where to start
Style one region at a time and check the preview after each — header,
then h1, then the paragraphs, then main's box, then the interests
list, then the media query, then footer. Every property below was
covered in this unit's seven lessons; nothing here is new syntax, only
new combinations.
This is the biggest exercise in the unit
The same rules apply as always: infinite attempts, a hint after two failed runs, the full solution after three. There's no single correct color palette — the checks care about the properties you set, not your particular choice of color, as long as it's the one the prompt names.
What comes next
Once every check here passes, every concept in this unit is mastered — and the page you're looking at isn't a throwaway practice file. Unit 3 comes back to this exact page one more time, to make it interactive.
Exercise
Unit project: style your About Me page
Style the About Me page below. Nothing in the HTML needs to change — every declaration you need was covered in this unit's lessons.
- header — background-color: steelblue; and color: white;. - h1 — font-family: Georgia, serif;, font-size: 32px;, and font-weight: bold;. - p (every plain paragraph) — color: slategray;. - .tagline (the intro paragraph) — color: crimson; and width: 50%;. - main — width: 600px;, padding: 20px;, margin: 16px;, and border: 2px solid slategray;. - ul — display: flex;, flex-direction: column;, justify-content: center;, align-items: center;, gap: 8px;, and flex-wrap: wrap;. - Underneath, @media (min-width: 600px) { ul { flex-direction: row; } }. - footer — text-align: center;.