Scan the QR Code

Attendance QR Code
QR CODE
HERE
To submit your attendance
26.B · CLASS 17
Upcoming

3-Week Schedule

INTAKE 26B
WEEK 9 — THIS WEEK
MON
BUILDPrototype & begin website — wireframe → code translation
WED
BUILDContinue building original website
THU
BUILDBuild time — continue your site
WEEK 10 — NEXT WEEK
MON
HOLIDAYWA Day — no class
WED
BUILDContinue building your website
THU
BUILDBuild time
WEEK 11
MON
BUILDContinue website build
WED
REVIEWPeer feedback round — show your progress
THU
TBA

Today — From Wireframe to Working Code

MONDAY · 25 MAY
🎯

Today's Goal

Take your wireframe and translate at least one section into real HTML & CSS. By the end of class your site should be visible in a browser — even if it's rough.

⏱️

How class runs

0:00 – 0:10   Attendance + recap of wireframes
0:10 – 0:30   Live demo — wireframe → code translation
0:30 – 1:30   Build time (you code your section)
1:30 – 1:45   Show-and-tell, wrap up

💡

The big idea

Every shape on your wireframe is a tag. Every group of shapes is a container. You already designed it — now you're just naming it in HTML.

INTAKE 26B · WEEK 9 · CLASS 17 · S02 STEP 1
The Translation

Every Rectangle → Has a Tag

Your Wireframe
▭ Top bar with logo + menu
▭ Big hero area with headline
▭ Three feature boxes
▭ Footer with contact
→
Semantic HTML
<header> … </header>
<section class="hero">
  <h1>…</h1>
</section>
<section class="features">
  <article> × 3
</section>
<footer> … </footer>
RULE OF THUMB: STRUCTURE FIRST · COLOURS LATER
Live Demo · ~20 min

Watch Me Do One Section

1

Open the wireframe and the editor side by side

VS Code on the left, wireframe (Excalidraw / Figma / paper photo) on the right. Eyes flick between the two.

2

Name the section out loud

"This is a header. It holds a logo and a nav." → that becomes <header>, <nav>.

3

Type the HTML skeleton — no styles yet

Get the tags in. Save. Refresh browser. It will look ugly. That's correct.

4

Add ~5 lines of CSS to roughly match the wireframe

Background colour, padding, flexbox for layout. Just enough so a stranger could match the page to the wireframe.

▸ TIM: SPECIFIC SECTION I'M DEMOING TODAY = ________________
Your Turn · 60 min build

Translate Your Wireframe

Steps

  1. Open your wireframe + your project folder in VS Code
  2. Pick one section to start with (header is easiest)
  3. Write the HTML skeleton — semantic tags, no styles
  4. Save, open in browser, confirm it shows up
  5. Add basic CSS to roughly match the wireframe
  6. Move to the next section — rinse, repeat
CHECK-IN Hand up at 30 min — I'll come round

Rules of Play

  1. HTML first, CSS second. Structure before colour.
  2. Save + refresh every 2 minutes. See what you just changed.
  3. Don't copy-paste from AI yet. Type it. Muscle memory matters.
  4. Ugly is fine. Working > pretty today.
  5. Ask your neighbour first, then me.
DEMO ROUND Last 15 min — 30 sec show per person
Done & Stuck

How to Know You're Winning

✓ SUCCESS LOOKS LIKE

  • Your index.html opens in a browser
  • At least one full section from your wireframe is visible
  • Tags are semantic (header / main / section / footer) — not all divs
  • CSS is in its own file, linked in the head
  • You can point at the screen and at the wireframe and they match

→ STUCK? TRY THIS ORDER

  • Re-read the last 5 lines you typed — out loud
  • Check the browser console (F12) for red text
  • Ask your neighbour to spot the typo
  • Check the cheat sheets folder on the hub
  • Wave me over — bring a specific question
WEEK 9 · CLASS 17 · YOUR SITE BEGINS TODAY 🚀
1 / 7