IT Academy styleguide

Paper

Swatches show the current theme. Values: light / dark.

Stage

Always dark. Gold text is allowed here.

Scale

h1 and display step down on phones (32/40 and 40/44).

Stage scale

Geist Mono, tabular.

Tokens

Press play to see each duration and easing.

Board reorder

Rows slide to their new rank (320ms); a team that moves up gets a brief gold edge.

Button

primary, secondary, ghost, danger · sm, md, lg · default, disabled, with icon

Icon

57 line icons on a 16px grid (GB Docs set plus Academy icons). currentColor.

Logo

GB brand lockups, never stretched or re-coloured. On Stage they sit on a Linen plate.

Paper

Stage

ChoiceOption

Every state, on both surfaces. Arrow keys move inside a ChoiceGroup.

OrderList

Drag the handle, use the arrow buttons, or focus a row, press Space and use the arrow keys.

MatchPairs

Tap a word then its match. Pairs share a number.

AnswerFeedback

CodeBlock

1<h1>Hello</h1>2<p>Welcome to my page.</p>3<script src="app.js"></script>

1<h1>Hello</h1>2<p>Welcome to my page.</p>3<script src="app.js"></script>

CodeBlock in lesson MDX

A fenced block: the language is a plain label, no line numbers, long commands scroll inside the block; prompt blocks wrap.

sudo apt update && sudo apt upgradecurl -fsSL https://claude.ai/install.sh | bash

Create a hello.js that prints a greeting, then run it and tell me what happened.

LeaderboardRow

Normal, you, moved up (gold edge fades), team with member count.

SessionCodeDisplay

ChallengeRunner

One renderer per challenge type. Answers are checked by the dev mock (sample challenges only).

Leaderboard

Team / everyone toggle, top 5 plus your own row.

HostSessionBuilder

Create and colour teams, add members, drag (or use Move to) between teams, size warning, printable join cards.

StageBoard in StageLayout

The projector view.

IT Academy

academy.gbholdings.ng/join7K3 Q9P

Lesson 00 · How a web page reaches you

Round 3 results

1. 1Falcons31,240pts
2. 2Lions31,180pts
3. 3Waves4960pts
4. 4Rockets2720pts
5. 5Comets3610pts

3D renderer (React Three Fiber)

2D renderer (SVG), kitchen closed

Autoplay (lesson hook)

<Sim id="journey-of-a-request" autoplay />: one trip on its own when the scene is first in view, then it waits for Send. Not under reduced motion, never in a challenge.

Terminal (F2): practice before real setup

A light React terminal with a live folder tree. Try mkdir projects, cd projects, ls -a, echo hi > note.txt, cd /mnt/c, exit, then rm -rf projects (it asks first).

Terminal: waiting for a yes or no

rm -r never runs straight away. The learner reads what would be deleted, then answers with the buttons or y / n.

Playground

No tests. Press the button in the preview: its clicks show in the console.

<h1>My page</h1>
<p>Press the button.</p>
<button id="go">Count</button>

body {
  font-family: system-ui, sans-serif;
  padding: 16px;
}
button {
  padding: 8px 16px;
}

let clicks = 0;
document.getElementById("go").addEventListener("click", () => {
  clicks = clicks + 1;
  console.log("Clicked", clicks, "times");
});
console.log("Ready");

An endless loop

The loop guard stops it after a second with an error in the console. The page never freezes.

console.log("Starting");
while (true) {
  // nothing ever stops this
}

<p>This page has a loop that never ends.</p>

VoiceInput: recording (static)

Driven by fixed levels so the waveform, stop button, pulse ring and timer can be reviewed without a microphone.

ExplainReview (host console)

Text, AI score, reason, what was missing, flags. 0-3 sets the host's score.