Side Quest: HTML & CSS for the HUD

This territory is yours, Maks. Games aren't only canvases — they have menus, scoreboards and pause screens, and those are built from the two languages every browser speaks. Today you claim the DOM.

You will be able to…

HTML: the bones

An HTML page is made of elements, written with tags: an opening <h1>, some content, a closing </h1>. The names mean things: <h1> is the top headline, <button> a clickable button, <ul> an unordered list holding <li> items, and <div> a plain box for grouping. Elements nest — a list holds items, a box holds a headline — and the browser keeps the whole page as one big tree of boxes called the DOM. Your job is to describe the tree; the browser does the rendering, instantly.

Two notes before you build. Tags can carry attributes — name="value" pairs riding inside the opening tag — and the one you'll use constantly, class, appears in the next section. Also: our buttons won't do anything when clicked yet. Wiring buttons to running OCaml is a later quest (the capstone's control panel does exactly that); today is about structure and style.

The sandboxes below are your workshop: HTML on one panel, CSS on the other, live preview beside them. The Check button inspects the rendered page itself — same rules as the OCaml checks, different universe. First mission: every game ever made starts at the same screen.

CSS: the war paint

HTML says what things are; CSS says how they look. A CSS rule is a selector plus some property: value; declarations: button { color: red; } paints every button. Selecting by tag is a blunt axe, though. To style some elements, label them in HTML with a class — <ul class="scores"> — and aim at the label from CSS with a dot: .scores { … }. You can chain deeper too: .scores li means "the <li> items inside anything classed scores".

The properties you'll use forever: color (text), background, font-family, font-size, padding (space inside a box, between its edge and its content) and margin (space outside, pushing neighbours away).

One more law of the realm: when two rules disagree, the more specific selector wins. If li { background: grey; } and .scores li { background: navy; } both apply, the scoreboard rows go navy — the classed rule outranks the bare tag. That's the "cascading" in Cascading Style Sheets, and it's how you paint: broad strokes first, precise overrides on top. Time to dress a scoreboard:

Flexbox: the centering spell

Ask any web veteran about centering a box and watch their eye twitch — for years it was genuinely hard. Then came flexbox: a layout mode where a container takes charge of arranging its children in a row (or column). You cast it on the parent, not the thing you want centered:

Those three lines are the pause screen of every game you'll ship. Cast them on .screen:

Checked both boxes but the menu still hugs the top? That's the third line of the spell — align-items: center; — which the check graciously doesn't demand, but a shipped pause screen does. Add it and feel the click.

And to be clear about why this matters: this is no detour. In project 2.5, your snake game gets a live scoreboard HUD built from exactly these parts, layered over the canvas. The Phase 4 capstone's whole control panel — buttons, readouts, the works — is HTML and CSS wrapped around an OCaml core. The canvas is the stage; you just learned to build the theatre.

Checkpoint quiz

Loot collected

Next: back to the canvas — and this time, the pictures move.