5. A page you designed yourself

Unit A · On the network

A page you designed yourself

What we are making: the same data as Session 4, on a page that somebody would actually want to look at. No new hardware.

Why a whole session on this

Your page works and it is unreadable. Black text on white, default size, no layout. On a phone it renders as a tiny desktop site and nobody can read the number that matters.

This is worth a session because from here to May, the page is the product. Nobody at the exhibition will read your C++. They will look at the page for four seconds and decide whether your project works.

💡 Tip

This session introduces no new hardware and no new C++ idea. It is deliberately a slower one, in the middle of a unit that has moved quickly. Use the time.

The one line that matters most

Without this, every phone renders your page at desktop width

1page += "<meta name='viewport' content='width=device-width,initial-scale=1'>";

That single line is the difference between a page that is usable on a phone and one that is not. It tells the browser: this page was designed for the width of this screen, do not pretend to be a desktop.

Write the head once, use it everywhere

Put all the styling in one function. Then every page you serve for the rest of the year gets it for free.

Written once, in about fifteen lines

1String pageHead(String title) {

2 String h = "<html><head>";

3 h += "<meta charset='utf-8'>";

4 h += "<meta name='viewport' content='width=device-width,initial-scale=1'>";

5 h += "<meta http-equiv='refresh' content='3'>";

6 h += "<style>";

7 h += "body{font-family:system-ui,sans-serif;margin:0;padding:22px;background:#f4f2ee}";

8 h += ".card{background:#fff;border-radius:14px;padding:22px;max-width:430px}";

9 h += "h2{margin:0 0 14px;font-size:19px;color:#16293d}";

10 h += ".big{font-size:60px;font-weight:700;color:#16293d;line-height:1}";

11 h += ".unit{font-size:20px;color:#66727f;font-weight:400}";

12 h += ".age{font-size:13px;color:#66727f;margin-top:10px}";

13 h += ".bad{color:#b3451f}";

14 h += "a.btn{display:block;text-align:center;padding:16px;border-radius:10px;";

15 h += "background:#1b4f8a;color:#fff;text-decoration:none;font-size:17px;margin-top:18px}";

16 h += "</style></head><body><div class='card'><h2>" + title + "</h2>";

17 return h;

18}

Line 4 — the viewport line. The most important one.
Line 9 — 60 pixels. Genuinely that big. A dashboard is read from a metre away, not held to your face.
Line 14 — display:block with real padding turns a link into a thumb-sized button. A control you cannot hit while holding a ladder is not a control.

💡 Tip

system-ui means 'whatever this device's own interface font is'. It looks native on every phone and costs nothing to download — which matters when the page is served by a board with no internet connection.

The four-second rule

A stranger should get four things in four seconds. Everything else belongs on a second page.

Element	Why	Example
The number	Biggest thing on the page, readable from a metre away	23
Its unit	Next to it, smaller. A number with no unit is not information	cm
Its age	Small, always present. This is what makes the page trustworthy	updated 2 s ago
One action	If there is something to do, one obvious control. Not five	Silence alarm

One number, one unit, one age, one action. That is the whole design.

Do it

Write pageHead() and rebuild your Session 4 page using it.
Open it on a phone, not a laptop. Hold it at arm's length. Can you read the number?
Make it bigger until you can. Yes, bigger than feels sensible.
Add the age line. Every number on every page you build from now on carries its age.
Show it to somebody from another team for four seconds, then take it away.
Ask them: what does it measure, is it OK, and what would you do about it?

⚠ Careful

Every question they got wrong is a fix, and the fix is almost never technical. It is a label, a unit, or making the number bigger.

What you learned

The viewport line is the difference between usable and unusable on a phone.
Write the styling once, in a function, and reuse it all year.
Big number, unit, age, one action.
From here on, the page is the product.
Test it on somebody for four seconds. Fix what they got wrong.

Challenge optional — only if you finish early

Make your page look right on a phone held sideways as well as upright.

4. A button that reaches back