How This Site Is Built

Hey builder! This page explains how a real website comes together. Short words. Big ideas. You can talk through it on a phone call.

Three Things Every Website Needs

Think of a house. You need a street sign, rooms full of stuff, and a place the house sits. A website is the same idea.

ADDRESS Domain like a house sign Files stack of pages Hosting a computer online

The Six-Step Path

We are on a trail. Two steps are done. Four are still ahead. Nothing goes live until a grown-up says yes.

Draft done Review done 3 Upload next 4 Pages next 5 Connect next 6 Check next
  1. Draft — write the pages on the computer. ✅
  2. Review — look carefully. No private names. No secret places. ✅
  3. Upload — send the files to a safe online folder. (next)
  4. Pages — turn on free hosting so visitors can see it. (next)
  5. Connect — point the domain address at those files. (next)
  6. Check — visit the live site and make sure it works. (next)
Why isn’t it live yet?

It isn’t broken. We build a draft first—like double-checking homework before turning it in. Smart builders wait for the OK.

What’s Already on This Site?

Click around. These pages are real draft files:

Secret Code: What Is an HTML Tag?

Web pages are written in HTML. Words sit between tags. Tags are like bookends.

<p> Hello </p> Opening tag · your words · closing tag

The letter p means paragraph. The slash in </p> means “stop.” Cool, right?

🔎 Treasure Hunt: Find It on This Page

Can you spot these? Point at the screen or shout the answer.

  1. Find the green checkmarks on the six-step path. How many steps are done?
  2. Find the word Hosting in the three-box picture. What does hosting mean?
  3. Find a tag that looks like <p>. What word sits between the bookends?
  4. Find the brown circle logo at the top. Tap Home with it—where do you land?
Tap for answers (no peeking first!)
  1. Two steps are done: Draft and Review.
  2. Hosting is a computer online that shows the pages.
  3. The word is Hello.
  4. You land on the Home page.

Your Turn, Junior Builders

The Society now has a real Fun Facts page and a Kids’ Corner. Below is practice code, plus the exact steps to update those pages.

Good topics: old maps, glass insulators, rivers as old highways. Keep facts general. No private places. No living people’s names.

Did You Know?

  • Old maps were drawn by hand before satellites.
  • Glass insulators kept electricity from jumping off wires.
  • Rivers were the highways before cars and trucks.

The code that makes that box looks like this:

<section class="fun-facts">
    <h2>Did You Know?</h2>
    <ul>
      <li>Old maps were drawn by hand before satellites.</li>
      <li>Glass insulators kept electricity from jumping off wires.</li>
      <li>Rivers were the highways before cars and trucks.</li>
    </ul>
  </section>
Phone-call plan (easy steps)
  1. Open the draft folder and open index.html in a text editor.
  2. Find the first paragraph. Put the cursor after its closing </p>.
  3. Paste the Fun Facts box.
  4. Change one fact to something you chose. Keep it short.
  5. Save. Double-click index.html to open it in the browser.
  6. Show a grown-up. Do not upload or publish today—this is practice.
Nice work, Junior Builders.

Reading real HTML, placing a whole new section, and choosing facts that teach people something—that is careful, creative builder work. Every website starts with small drafts just like yours.

How to Add a Fun Fact

Easy steps for the Junior Historian. Always work with a grown-up.

  1. Open the draft folder and open fun-facts.html in a text editor.
  2. Find the big comment that says HOW TO ADD A FUN FACT.
  3. Copy one whole <article class="fact-card">...</article> block.
  4. Paste it at the bottom of the fact list (before the closing </div>).
  5. Change the fact text and the one-line source. Keep it short and true.
  6. Save. Double-click fun-facts.html to check it in the browser.
  7. Show a grown-up. Do not publish until they say yes.
Remember

Only public facts. No private places. No living people’s names. Sign the page as Junior Historian.

How to Add Art to Kids’ Corner

Easy steps for the Junior Art Director. Always work with a grown-up.

  1. Save the picture file in the kids-corner/ folder (example: kids-corner/river-drawing.jpg).
  2. Open kids-corner.html in a text editor.
  3. Find the big comment that says HOW TO ADD ART.
  4. Copy one whole <figure class="art-tile">...</figure> block.
  5. Paste it into the gallery grid. Change the image filename and the caption.
  6. Use a first name, initials, or no name—never a last name.
  7. Save and open kids-corner.html in the browser to check.
  8. A grown-up must review every piece before it is posted. Do not publish yet.
Color of the Month

The Junior Art Director also picks the Color of the Month shown on Kids’ Corner. Change the swatch color and the name there with a grown-up.

Builder Safety Rules