HTML — Your Content

HTML is the skeleton of a webpage. Every chunk of content lives inside a tag that names what it is — a heading is a heading because it sits in an <h1>, not because it's big.

This activity is mostly writing about yourself, so don't worry too much about writing code.

Anatomy of a tag

Most HTML tags wrap their content. You write an opening tag, then the content, then a matching closing tag with a slash:

<h1>Your Name</h1>

<h1> opens, Your Name is the content, </h1> closes. Forget the closing slash and the browser keeps treating everything after as a heading.

Some tags take attributes — extra information added inside the opening tag. The most common one is href on a link:

<a href="https://example.com">Click me</a>

Here <a> is the tag, href="https://example.com" is the attribute (the link's destination), and Click me is the content the user clicks on.

Step 1 — Paste the starter HTML

Head to the Starter Code page, copy the entire HTML block, and paste it into CodePen's HTML pane (the top-left one).

The preview now shows a plain, unstyled page — just black text on a white background. That's HTML on its own. We'll add CSS in the next activity to make it look like a magazine.

Step 2 — The five sections

Walk through what you just pasted, top to bottom:

• Hero (<header class="hero">) — the magazine cover. Big name, italic last name, and a tagline.
• About (<section class="section">) — a <p class="lead"> for the magazine-style intro paragraph, then a normal <p> underneath. <strong> bolds words.
• Skills & Interests (<section class="section section--accent">) — a <ul> (unordered list) with <li> items. Each <li> is one skill.
• Highlights (<section class="section">) — each <article> is one project or achievement, with a year, a title (<h3>), and a short description.
• Footer (<footer>) — contact links. <a href="mailto:..."> makes an email link; <a href="https://..."> is a regular web link.

You don't need to memorize these tags right now. You just need to recognize them and fill them with your content.

Tag cheatsheet

Every tag in the starter, grouped by what it's for. Keep this handy as you edit.

Structure — invisible boxes that organize the page.

Text — the words people read.

Lists & links

Behind the scenes

Step 3 — Fill in the hero (5 min)

1. Replace YOUR NAME with your first name.
2. Change web developer in the tagline to whatever fits you (future artist, aspiring engineer, competitive baker).

Save. Watch the preview update. First win.

Step 4 — Fill in About + Skills (5 min)

About: Replace the placeholder paragraphs with 2–4 sentences about who you are. Write as if introducing yourself to a teacher you respect — concrete and honest. Use <strong> to bold the 1–3 words that matter most.

Skills: Replace the <li> items with 4–8 of your own. Mix technical and non-technical:

• HTML, CSS, Python, Figma, Photoshop
• Spanish, French, Mandarin
• Soccer, debate, public speaking
• First aid, lifeguarding, tutoring

Add or remove <li> lines as needed. Don't list things you can't actually do.

Step 5 — Fill in Highlights + Footer (7 min)

Highlights: For each <article>, fill in:

• The year (<div class="project-year">).
• The title (<h3>) — the project, role, or achievement.
• The description (<p>) — 1–2 sentences. Lead with action verbs ("coached," "organized," "built," "raised") over passive labels ("was involved in," "participated in").

Duplicate or delete <article> blocks as needed. Aim for three.

Footer: Replace mailto:you@email.com with your real or portfolio email. Replace the # hrefs with your actual links if you have them — otherwise leave them as # for now. Update Your Name in the signoff to your actual name.

If you're stuck on what to write

All of you have done something:

• What do you do on the weekend?
• What clubs or sports were you in last year?
• Who have you helped — a younger sibling, a classmate, a teammate?
• What would a friend say you're good at?

Tutoring a sibling counts. Being on a team counts. Running a Minecraft server for your friends counts.

When the preview looks broken

If your page suddenly looks wrong (everything is huge, or a chunk of text disappears, or nothing renders), 99% of the time it's one of two things:

• A missing closing tag. You wrote <h1> somewhere but forgot the matching </h1>. Scroll up from where the page breaks and look for an unclosed tag.
• A typo in a tag name. Something like <h1 with no >, or <sectoin> instead of <section>. The browser quietly ignores tags it doesn't recognize.

Fix the typo or add the missing </tag> and the preview should snap back. If you're really stuck, paste the starter HTML again and re-do your edits.

Stretch challenges

• Add a section. Copy a <section class="section"> block, paste it under the highlights, and rename the title to something the starter doesn't have ("Languages I Speak", "What I'm Reading", "Currently Learning"). Renumber the <div class="section-number"> so the badge reads 04.
• Custom emphasis. Use <strong> on the 1–3 words in your About paragraph that matter most. The CSS gives those a subtle highlighter background.
• Real links. Replace the # placeholders in the contact list with real LinkedIn, GitHub, or some other social media URLs (whichever you're comfortable making public).