THETA AND THE MISSION OF HARMONY - CSS
English lab - Wave 1: Creation / Book 2

WHERE DO I START?

For your first setup, ask an adult to help you prepare a computer, a browser
and a text/code editor that saves plain text. If you do not have an editor,
prepare one before starting. Do not install programs on your own.

1. Find the downloaded ZIP. On Windows: right-click the ZIP, choose
   "Extract All", then "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 when you extracted the ZIP.
   Do not work inside the ZIP.
2. Find "start" inside that folder. Copy and paste the WHOLE start folder
   onto your Desktop. Rename only the copy "my-square". Do not make an
   empty folder or move the original: keep it so you can start again.
   If my-square already exists, use a new name such as "my-square-2".
   Do not replace your earlier work.
3. Open "my-square" and check that it contains these three files:

   my-square/
     index.html
     base.css
     style.css

   Keep the files together. 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.
4. Open index.html from "my-square" in your browser. If double-clicking
   opens another app, drag the file into an empty browser tab.
   You should see "My Ondyria square", with a shop, window display and market.
5. Open your editor. Choose File > Open and select style.css INSIDE
   "my-square". You should see code, not the city. Do not use Word or Pages.
   Keep both the editor and the browser open.
6. 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, the button with a circular arrow.
   You do not need to download the ZIP or reopen the website for every test.

After downloading and preparing the tools, the page runs without an
account, Internet connection or server.

HOW DO I KNOW I AM READY?

You see the simple square model in the browser and the code of style.css
in the editor. The shop and its heading are not fixed yet: that is deliberate.
If the browser shows only text with symbols such as <html>, you opened the
file as text: go back to step 4. Now you can follow the story.

WHERE DO I WRITE THE FIRST RULE?

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. 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 this point, change
the values in the new block without making another copy of it.

THE CITY IN THE BROWSER

This lab uses a simple model of Ondyria, not the story illustrations.
The shop, window display and stalls are ready-made HTML elements.
CSS changes their colors, fonts, borders, spacing and layout.
The shapes inside the window stand for bottles, a vase and scrolls.

WHICH FILES DO I EDIT?

- style.css: the CSS rules you will work on.
- index.html: the ready-made structure. Edit it only when the book asks,
  in the Extra on page 11 and on page 34. After the page 11 Extra, restore
  the HTML as the book explains.
- base.css: the ready-made scenery and settings. Do not edit this file.

Use plain text, not a Word document or formatted text. Keep the name
style.css: do not add .txt. The file already exists, so 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.
When the book asks you to change a value, edit the existing rule.
Do not keep adding new copies of the same rule at the end of the file.

HOW DO I USE THE OTHER FOLDERS?

You can complete the whole journey in your copy of "start".
The other folders are checkpoints: each already contains the result
of a stage. Look at them after trying, or use one to start again.
Always copy the WHOLE folder. Do not mix files from different stages
or overwrite your own work. Each folder contains all three files.

Folder        Book pages / result
start         Page 6: starting point
m1            Pages 10-11: only the chosen notice changes color
m2            Pages 15-16: the shop uses color pair A
m3-title      Page 20: heading font and size
m3            Page 21: first notice size and line spacing
m4            Pages 24-25: window border, padding and margin
row           Page 28: one row, still to be improved
m5            Page 29: stalls can wrap onto another row
challenge     Page 33: deliberate mistake, all canopies change
corrected     Pages 33 and 39: only the signed canopy changes
final-1       Page 34: new sentence and color pair B
final-2       Page 35: purple window border
final         Page 36: complete example with a 24px gap

The mistakes are deliberate: "row" shows the limits of one row;
"challenge" changes too many elements. They are not the results to keep.
Some initial color combinations are hard to read: you will fix them.
Restore the given values after each Extra before continuing.
The final project is an example; the book allows other choices too.

IF YOU CANNOT SEE THE CHANGE

- Did you save in the editor and refresh the page in the browser?
- Is the open index.html in the SAME folder as the style.css you are editing?
- Are all three files still together, with their original names?
- Did you keep the dots, braces, colons and semicolons shown in the CSS?
- Did you change only the requested rule, leaving the others intact?

If needed, undo the last change or start from a copy of the previous stage.
Keep your attempts: comparing them helps you understand.

EDIT -> SAVE -> REFRESH -> OBSERVE
