🖨 XP Quests Workbook

All cheat sheets + glossary in one printable pack

Name: ______________________

Reference

🧱 HTML Cheat Sheet

Every brick you have learned, in one place. Print me out!

The pattern

<tag attribute="extra info"> content </tag>
 ↑opening tag                          ↑closing tag (has a /)

The skeleton (every page starts like this)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Shows in the browser TAB</title>
    <style> /* CSS goes here */ </style>
  </head>
  <body>
    ...everything people SEE goes here...
    <script> /* JavaScript goes here, at the end */ </script>
  </body>
</html>

Content bricks

Tag	What it does	Learned in
`<h1>...<h6>`	Headlines, biggest to smallest. One `<h1>` per page.	L1, L3
`<p>`	A paragraph of normal text.	L1
`<strong>`	Bold, important words.	L3
`<ul> + <li>`	Bullet list + its items (bricks inside bricks).	L3
`<ol> + <li>`	Numbered list + its items.	L3
`<img src="..." alt="...">`	A picture. No closing tag! `src`=which picture, `alt`=words if it can't be seen.	L3
`<a href="...">`	A link. `href`=where to go (a URL or a file next door).	L4
`<button>`	A clickable button (give it an `id` so JS can find it).	L8
`<div>`	A plain box for grouping bricks. Name it with `class="..."`.	L6

Meaningful boxes (semantic tags)

Same as <div>, but their NAMES tell everyone (humans and AIs!) what the box is for:

Tag	What it's for
`<header>`	The top of the page — usually the hero section
`<main>`	The main content in the middle
`<section>`	One chapter of the page (features, reviews...)
`<footer>`	The bottom strip — small print and links

Attributes you know

Attribute	Meaning
`src="..."`	Which file/picture to load (on `<img>`, `<script>`)
`alt="..."`	Backup words for a picture
`href="..."`	Where a link goes (on `<a>`)
`class="..."`	A group name — many bricks can share it (CSS: `.name`)
`id="..."`	A unique name — only ONE brick has it (CSS: `#name`, JS: `getElementById`)

How to make and open a page

Create a file that ends in .html (like myshop.html) in a text editor.
Write your tags and content, then save (⌘S).
Open the file in a browser (double-click it, or drag it onto the browser).
Changed something? Save again, then press refresh (⌘R) in the browser.

Reference

🎨 CSS Cheat Sheet

The paint of the house. Print me out!

The pattern

selector {            /* WHO gets painted        */
  property: value;    /* WHAT about them: choice */
}

Rules live inside a <style> tag in the <head>. Every rule needs its { } braces, and every line ends with ;

Selectors — WHO

Selector	Picks	Example
`h1`	Every element of that tag	`h1 { color: purple; }`
`.card`	Everything with `class="card"`	`.card { padding: 16px; }`
`#buy`	The ONE element with `id="buy"`	`#buy { background: gold; }`

Properties — WHAT

Property	Changes	Example value
`color`	Text color	`tomato`, `#222`
`background-color`	Fill color of the box	`gold`, `lavender`
`font-family`	The letter style	`sans-serif`
`font-size`	Letter size	`20px`
`text-align`	Text position	`center`
`padding`	Space INSIDE the box edge	`16px`
`margin`	Space OUTSIDE the box	`24px`
`border`	The frame around the box	`3px solid purple`
`border-radius`	Round corners	`12px`, `50%`=circle

The box model 📦

┌─ margin ──────────────────────┐   space to OTHER boxes
│  ┌─ border ────────────────┐  │   the frame
│  │  ┌─ padding ─────────┐  │  │   space inside the frame
│  │  │     content       │  │  │   your text / picture
│  │  └───────────────────┘  │  │
│  └─────────────────────────┘  │
└───────────────────────────────┘

Flexbox — the train 🚂

.row {                      /* the PARENT is the track   */
  display: flex;            /* kids line up in a row     */
  gap: 16px;                /* space between train cars  */
  justify-content: center;  /* where the train sits      */
  align-items: center;      /* line up tops and bottoms  */
}

Remember: display: flex goes on the parent, and it moves the children.

Sneaky facts

CSS never shows errors. Misspell colr and it is silently ignored — check spelling first when styling "does nothing".
A missing } kills every rule that comes after it.
If .card styles nothing, check the HTML really says class="card" — letter for letter.

Reference

⚡ JavaScript Cheat Sheet

The electricity of the house. Print me out!

Where it lives

<script>
  ...your JavaScript...
</script>      <!-- at the END of <body>, after your HTML bricks -->

Why at the end? The browser reads top-to-bottom — the bricks must exist BEFORE the script tries to find them.

The magic 3-line spell

const btn = document.getElementById("buy");   // 1. find the brick
btn.addEventListener("click", function () {   // 2. when clicked...
  document.getElementById("msg").textContent = "🎉 Thanks!";  // 3. ...do this
});

Piece	What it means
`const btn = ...`	Make a name (`btn`) for something, so you can use it later
`document.getElementById("buy")`	Find the ONE brick with `id="buy"`
`addEventListener("click", ...)`	"When this gets clicked, run my function"
`function () { ... }`	A recipe of steps, waiting to be run
`el.textContent = "..."`	Replace the words inside a brick
`el.style.backgroundColor = "gold"`	Change CSS from JavaScript

Memory boxes (variables)

const price = 5;        // a box that never changes
let coins = 0;           // a box you can refill
const name = "Robo";     // quotes = words (a string)
coins = coins + 1;       // refill: old value + 1
"Price: " + price        // gluing words and numbers

5 + 5 is 10 (math), but "5" + 5 is "55" (gluing!). Quotes decide.

Decisions (if / else)

if (coins >= 10) {          // ask a question
  msg.textContent = "Rich!";
} else if (coins === 1) {   // another question
  msg.textContent = "One coin.";
} else {                    // everything else
  msg.textContent = "Keep clicking!";
}

= PUTS a value in a box. === ASKS "are these equal?". One changes, three checks!
Comparers: === equal, > bigger, < smaller, >= bigger-or-equal.

Functions (your own spells)

function cheer(name) {          // DEFINE the spell (nothing happens yet)
  return "Go " + name + "!";    // return = hand the answer back
}
cheer("Robo Sneakers");         // CAST the spell (now it happens)

Defining is writing the recipe; calling is cooking it. A function that's never called does nothing.
Forgot return? You get undefined — "the box came back empty."

Lists & loops

const features = ["fast", "cool", "cheap"];  // a train of boxes
features[0]              // "fast" — counting starts at ZERO!
features.length          // 3

let html = "";
for (const f of features) {          // for each thing in the train...
  html = html + "<li>" + f + "</li>";
}
list.innerHTML = html;   // innerHTML reads the words as HTML bricks

Sneaky facts

If the button does nothing: the id in getElementById("...") probably doesn't match the id in the HTML. Letter for letter!
JavaScript DOES show errors — but secretly. Right-click the page → Inspect → Console to see red error messages. Real engineers live in that console.
"click" must be spelled exactly — "clik" listens for an event that never happens.

Reference

📖 Glossary — Web Words Explained

Every strange word from the lessons, explained in normal-kid language.

The big three

Word	What it means
HTML	The language for the content and structure of a page — the walls of the house. (HyperText Markup Language)
CSS	The language for how a page looks — the paint. (Cascading Style Sheets)
JavaScript	The language that makes a page do things — the electricity. Not related to Java (confusing, we know).

HTML words

Word	What it means
Tag	A label in angle brackets. `<h1>` opens, `</h1>` (with the slash) closes.
Element	A complete brick: opening tag + content + closing tag. `<p>Hi!</p>` is one element.
Attribute	Extra info inside an opening tag: `<img src="cat.jpg" alt="a cat">`. Name = value, in quotes.
class	A group name you invent for bricks: `class="card"`. Many bricks can share one class. CSS finds them with `.card`.
id	A unique name for exactly ONE brick: `id="buy"`. CSS finds it with `#buy`, JavaScript with `getElementById("buy")`.
Skeleton	The frame every page needs: `<!DOCTYPE html>`, `<html>`, `<head>` (invisible info) and `<body>` (visible stuff).
Semantic tag	A box with a meaningful name — `<header>`, `<main>`, `<section>`, `<footer>` — so readers (and AIs) instantly know what it's for.
Nesting	Bricks inside bricks, like `<li>` items living inside a `<ul>` list. Inner bricks must close before outer ones.

CSS words

Word	What it means
Selector	The WHO of a CSS rule — which bricks get painted. `h1`, `.card`, `#buy`.
Property	The WHAT — which thing about them changes: `color`, `padding`, `font-size`.
Value	The choice: `purple`, `16px`, `center`.
Box model	The secret: every element is a box with layers — content, then padding (space inside), then border (the frame), then margin (space to other boxes).
Flexbox	A layout tool: put `display: flex` on a parent box and its children line up like train cars.

JavaScript words

Word	What it means
Script	A list of instructions for the browser to run, inside a `<script>` tag at the end of `<body>`.
Function	A recipe of steps with a name (or no name), waiting to be run — like a saved spell.
Event / listener	An event is something that happens (a click!). A listener (`addEventListener`) is a robot ear that waits for it and then runs your function.
Console	The browser's secret window where errors appear in red. Right-click → Inspect → Console. Engineers live here.
const	Makes a name for a thing so you can use it later: `const btn = ...`. Short for "constant".
Variable	A labeled memory box that holds a value. `const` = a box that never changes, `let` = a box you can refill.
String	Words in quotes: `"hello"`. Even `"5"` is words, not a number — quotes decide!
Number	A value with no quotes that math works on: `5 + 5` is `10`, but `"5" + 5` is `"55"` (gluing).
if / else	Code that chooses a path: `if (question) { do this } else { do that }`. Remember: `=` puts, `===` asks.
Parameter	The ingredient slot of a function: in `function cheer(name)`, `name` is the slot you fill when you call it.
return	How a function hands its answer back. No return = `undefined` (an empty box).
undefined	JavaScript's way of saying "this box is empty / doesn't exist". You'll meet it a thousand times. It's a clue, not a disaster.
Array	A train of boxes in one variable: `["fast", "cool", "cheap"]`. Counting starts at ZERO: `[0]` is the first one.
Loop	Code that repeats: `for (const f of features) { ... }` runs once for every item in the train.
innerHTML	Like `textContent`, but the words are read as HTML bricks — so `"<li>fast</li>"` becomes a real list item.

General words

Word	What it means
Browser	The app that reads HTML files and draws them — Chrome, Safari, Firefox.
File	A saved document. Web pages end in `.html`.
URL	An internet address, like `https://google.com`. In `href` or `src`, it can also just be a neighbor file's name.
Landing page	A one-page website whose whole job is to make one product look amazing. Anatomy: hero → features → footer.
Hero section	The big top part of a landing page: giant headline, one-sentence promise, and a button.
Vibe coding	Building software by telling an AI what you want. Works best when you can READ what the AI wrote — which is the whole point of this course.
Prompt	Your work order to the AI. A pro prompt says: WHAT to build, WHO it's for, the PARTS, the RULES, and the BEHAVIOR.
Iterate	Improving in small steps: ask for one small change, test it, then ask for the next. Beats "redo everything" every time.
Bug report	How pros ask for help: "I expected X. Instead Y happens. Here's the console error: [paste]. Here's my code: [paste]."
Code review	Reading code BEFORE accepting it — skimming the structure, checking the names, following one thread. Never paste in what you haven't skimmed.
classList	JavaScript's sticker tool: `el.classList.add("open")`, `.remove`, `.toggle` — put a class sticker on or take it off, so different CSS applies. All over AI code.