CSS lab · Practical guide
Try the missions from Theta and the Mission of Harmony — CSS on your computer. With Pixel, choose colors, fonts, frames and spacing: the HTML structure is already built.
ZIP · about 34 KB · 13 checkpoints · in English
First setup
The first time, ask an adult to help you prepare a computer, a browser and an editor that saves plain text. If you do not have an editor, prepare one before starting. There is no online editor here: you work on your own files.
Click Download the CSS lab and find the ZIP in your downloads. On Windows: right-click the ZIP → Extract All → Extract. On Mac: double-click the ZIP. Open theta-css-lab-en: you should see README.txt and start. It may be inside another folder created during extraction. Do not work inside the ZIP.
Inside theta-css-lab-en, find start. Copy and paste the WHOLE folder onto your Desktop, then rename only the copy my-square. Do not make an empty folder or move the original: keep it so you can start again.
Open my-square: it must contain index.html, base.css and style.css. Keep them together and do not rename them. If you cannot see .html or .css in their names, ask an adult to show file extensions. Do not add extensions without checking.
Open index.html from my-square in your browser. If double-clicking opens another app, drag index.html into an empty browser tab. You should see My Ondyria square, with a shop, window display and market.
Open the text/code editor you prepared with an adult. Choose File → Open and select style.css inside my-square. You should see code, not the city. Keep both the editor and the browser open. Do not use Word or Pages.
Follow page 10 of the book in your copy of style.css. Save in the editor (Ctrl+S on Windows, Command+S on Mac), then return to the square in your browser and click Refresh (↻). You do not need to download the ZIP or reopen the website for every test.
You see the simple square model in the browser and the code of style.css in the editor. The shop and heading are not fixed yet: that is deliberate. Now you can follow the story. If the browser shows only text with symbols such as <html>, you opened the file as text: go back to step 4. If a working folder already exists, use a new name such as my-square-2: do not replace your earlier work.
On page 10, go to the end of style.css, after the last }, and add the p block on new lines. Keep the existing code and do not copy the ``` signs around the printed code boxes. Then replace p with .notice as the book asks: edit that block, rather than adding a second one. After saving and refreshing, only “Notice: shop open.” should change, not the menu or the other notice.
On page 21, add the new .notice block with font-size and line-height: you removed the earlier color block on page 15. From then on, edit the values in the new block rather than making another copy.
style.css contains the rules you will edit. base.css is the ready-made scenery: do not edit it. Edit index.html only when the book asks: in the Extra on page 11 and on page 34. After the Extra, restore the HTML as instructed.
Follow the book
Five missions, then the signed-canopy challenge and a square to make your own.
p and .notice
Change all the paragraphs, then select only the right notice. Pages 10–11.
color and background-color
Make the shop’s words stand out from their background with good contrast. Pages 15–16.
font-size and line-height
Choose the heading’s font and give the first notice a comfortable size and line spacing. Pages 20–21.
border, padding and margin
Tell the frame, the space inside and the space outside apart. Try border-radius too. Pages 24–25.
display: flex, gap and flex-wrap
Put the stalls side by side and let those that do not fit wrap onto another row. Pages 28–29.
Inside the download
Begin with start and continue in your copy. The other folders contain ready-made results: use them after trying or to start again from a checkpoint.
start P. 6m1 Pp. 10–11m2 Pp. 15–16m3-title P. 20m3 P. 21m4 Pp. 24–25row P. 28m5 P. 29challenge P. 33corrected Pp. 33 and 39final-1 P. 34final-2 P. 35final P. 36row keeps everything on one row; challenge changes too many canopies. They are not the final solutions. Always copy a whole folder. Do not mix checkpoints or overwrite your work. The instructions are also in README.txt.
Before rewriting everything, check these four things.
Save in the editor, then refresh the page in the browser. They are two separate steps.
The open index.html must be in the same folder as the style.css you are editing.
Use plain text and the name style.css, not style.css.txt. The file already exists: use Save rather than creating another document with Save As. If you are asked to convert the file or choose a format, ask an adult for help.
Check the selector, braces, colons and semicolons. When the book asks you to change a value, edit the existing rule. If you are stuck, keep your attempt and copy the previous checkpoint folder with a new name.
Beyond the mission
The book introduces selected CSS fundamentals through a story and practical exercises. It is a starting point, not a complete reference. The lab contains what you need for the book; these optional resources help you go further.
MDN Web Docs is an external technical resource in English. Start with a topic you know, ask an adult or teacher for help when needed, and keep your original files before experimenting. Each link opens a new tab.
Explore selectors, colors and style rules. Try one change at a time in a copy of your square.
Read on MDN: Revisit CSS basics — opens a new tabRevisit the box model: content, padding, border and margin. Compare it with the frames in the mission.
Read on MDN: Understand spacing — opens a new tabLearn more about arranging items and sharing space, starting with the stalls and rows in your square.
Read on MDN: Explore Flexbox — opens a new tabLook up a property when you need it. This reference also includes advanced topics: you do not need them all to finish the book.
Read on MDN: Look up CSS — opens a new tabYour square is waiting
Keep your attempts: comparing them is part of the mission.