Spokane, Washington
Meet me at the river.
A small invitation to spend an afternoon outside. Bring a sketchbook. Notice one thing you usually walk past.
Make a planChoose a place, a time, and someone to invite.
Work with a partner · No AI
There’s more
under the surface.
This invitation is made from a few elements and a handful of rules. Peel it back. Find what changes the thing you see.
Your goal
Point to one part of a page, find its source, change it on purpose, and explain the result.
An invitation, taken apart.
Look before you edit.The source beneath it
HTML identifies the parts. CSS describes how those parts look.
<article class="notice">
<p class="location">Spokane, Washington</p>
<h1>Meet me at the river.</h1>
<p>A small invitation…</p>
<a href="#plan">Make a plan</a>
<p id="plan">Choose a place…</p>
</article>.notice {
padding: 32px;
border: 4px solid #172128;
}
.notice h1 {
font-size: 48px;
}The heading begins at 48px. Before using the controls, predict what a smaller value will change.
1
Inspect and predict
With a partner, name the title, location, invitation text, and link. Find each in the HTML. Explain what the heading tag contributes.
Before comparing the smaller heading, finish this sentence aloud: “If font-size changes from 48px to 32px, I expect…” Then use the control and check your prediction.
Reveal the CSS boxes. Find the space between the article’s border and its content. That is padding. It belongs inside the box.
2
Make one deliberate change
Open the starter. CodePen’s HTML panel contains what belongs inside <body>; the downloaded file includes the full document. Put CSS in its own panel or keep the downloaded style.css beside index.html.
Opens a new tab with the supplied example. Sign in to your own CodePen account if you want to save a Pen. Nothing from your coursework is sent until you choose to open it.
- Run the unchanged starter and locate its heading.
- Replace the invitation with a place or activity that matters to you. Keep one
h1. - Find
.notice h1in the CSS. Write a prediction, then change onlyfont-sizefrom48pxto32px. - Compare the result. Undo the change, then redo it. Explain which result better suits your invitation.
- Change the article’s
paddingfrom32pxto16px. Identify what moved and what did not.
Stop here: your invitation contains your content, and you can explain both edits. More effects are optional, not required.
3
Explain it without help
Swap roles. One person points to an element; the other finds the HTML and the CSS rule that affects it. Explain a new prediction before touching the code.
- Which tag makes the title a heading?
- Which selector changes that heading’s size?
- What is the difference between changing text and changing padding?
- Can you restore the original appearance without using AI?
If a step is unclear, return to the original starter, change only one value, and ask your partner to describe the result. Ask the instructor about the first result you cannot explain.
4
Keep a small piece of evidence
Save one screenshot or working Pen link, the specific source line you changed, and two sentences: what you predicted and what happened. Add one question or next step.
Use the opening studio instructions for submission. This is practice evidence, not an extra project.
CodePen unavailable?
Download both files into one folder, keeping their names. Open index.html in a browser and edit either file in a plain-text code editor. Save and refresh to see the result. You can also copy the source below into CodePen’s HTML and CSS panels.
Full HTML for CodePen
<main>
<article class="notice">
<p class="location">Spokane, Washington</p>
<h1>Meet me at the river.</h1>
<p>A small invitation to spend an afternoon outside. Bring a sketchbook. Notice one thing you usually walk past.</p>
<a href="#plan">Make a plan</a>
<p id="plan">Choose a place, a time, and someone to invite.</p>
</article>
</main>Full CSS
* { box-sizing: border-box; }
body { margin: 0; padding: 24px; background: #e3e9ec; color: #172128; font: 18px/1.5 system-ui, sans-serif; }
.notice { max-width: 520px; margin: 24px auto; padding: 32px; background: #efc55b; border: 4px solid #172128; }
.location { font-size: 14px; }
.notice h1 { font-size: 48px; line-height: 1.05; letter-spacing: -0.04em; }
.notice a { color: #172128; text-underline-offset: 4px; font-weight: 700; }
.notice a:focus-visible { outline: 3px solid #0756d4; outline-offset: 4px; }
Delivery check: the page opens, the stylesheet loads, your heading is present, the link goes to the plan, and you can locate both edits in the source.