SPARK Saga • HTML • CSS • Bootstrap 5
Radical Rules Saga
A classroom poster built from scratch — stage by stage.
Watch raw text evolve into styled CSS art as HTML, CSS, and Bootstrap 5 enter the picture.
R.A.D.I.C.A.L. stands for Respect, Attention, Daily Preparation, Individual Self Control, Code of Honor, Active Participation, Lateness (NOT!) — the seven principles of our studio computer science classes. This saga follows the classroom poster that displays those principles as it transforms across 8 development stages: from a plain text file with no formatting whatsoever, all the way to a fully responsive Bootstrap 5 page with Google Fonts, CSS background art, and a JavaScript superpower hidden inside the rules themselves.
Each stage card below describes what was added or changed. Click Explore Stage to read the full details in a popup, then open the live stage to see it in action. The source code for each stage is right there in the browser — use Ctrl + U (or right-click → View Page Source) to study it.
From Plain Text to CSS Art
Raw Text
Before HTML exists — just words in a file. What does a browser do with that?
First Tags
HTML tags give the content structure. A special inline style adds heart — literally.
Eureka!
Borrow Bootstrap’s framework. The page validates. Google Fonts add personality.
Targeting Structure
A main wrapper gets a CSS tag selector — width constraint and auto margins center it.
Styling the List
First letters get span tags. The li span compound selector targets only those spans.
The Radical Symbol
The radical symbol becomes a CSS background-image behind the list, like a carpet.
Final Polish
Google Fonts, classes, negative margins — and a hidden JavaScript superpower in the rules!
Bootstrap Complete
Bootstrap 5 integrated end-to-end. Resize the window and the content adapts.
Download the original plain-text source to see what Stage 0 started with.