Quest 1 · Your first page

Quest 1 · hands-on · ~20 min

20:00

🎯 Mission

You start with: VS Code (or any editor) and your quest-log repo.

You finish with: an index.html that opens in your browser with a heading and a paragraph.

Quest complete when: double-clicking index.html shows "Potion of Healing" as a big heading and the tab says the same.

+40 XP🏆 Hello, World Wide Web

Step 1 · Make the file

(If code isn't found, create recipe/index.html from VS Code's File menu.)

cd quest-log
mkdir recipe
cd recipe
code index.html

Step 2 · Paste the skeleton

HTML is a tree of boxes inside boxes. The browser calls this tree the DOM.

Every page has this shape. <head> holds info about the page; <body> holds what you see. Tags come in pairs: <p> opens, </p> closes.

recipe/index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Potion of Healing</title>
</head>
<body>
  <h1>Potion of Healing</h1>
  <p>Restores 50 HP. Tastes like cherries.</p>
</body>
</html>

Step 3 · Open it

Double-click index.html in your file manager, or run open index.html (macOS) / xdg-open index.html (Linux) / start index.html (Windows).

✅ You should see: a white page with a big bold heading and one line of text. The browser tab reads "Potion of Healing".

Step 4 · Inspect it

Right-click the heading → Inspect.

✅ You should see: the Elements panel with your <h1> highlighted, nested inside <body> inside <html>: the tree from the diagram.

HTML tags are item slots. <h1> is the title slot, <p> is a text slot. The browser reads the slots and draws the screen.

💡 What just happened (plain English)

HTML is the structure of every page. CSS styles it and JavaScript makes it move, but both hang off this tree.

🏁 Checkpoint

☐ index.html opens in the browser
☐ the tab title matches my <title>
☐ I inspected the <h1> in DevTools

🏆 Tick every box → achievement unlocked: Hello, World Wide Web (+40 XP)