🛠️ How This Site Works

Great question! Think of building a website like building a LEGO house.

You need three things:

• 🧱 HTML — the LEGO bricks (the structure)
• 🎨 CSS — the paint and decorations (how it looks)
• ⚡ JavaScript — the motor that makes things move (how it acts)

Every website you've ever visited — YouTube, Minecraft.net, NFL.com — is made of these same three things!

HTML stands for HyperText Markup Language. That's a big fancy name, but it just means: "instructions for building a webpage."

HTML uses things called tags. Tags are like labels that tell the browser what each thing is.

For example, this site uses tags like:

• 📦 <section> — a box that holds a chunk of the page
• ✏️ <h1> — a big title (h stands for heading)
• 📝 <p> — a paragraph of text (p stands for paragraph)
• 🔗 <a> — a link you can click (a stands for anchor)
• 🔘 <button> — a button!

Every tag has an opening part and a closing part. Like a sandwich 🥪:

<p> Hi, I'm Jonah! </p>

The <p> is the top bread, the text is the filling, and </p> is the bottom bread. The slash ( / ) means "end of tag."

CSS stands for Cascading Style Sheets. It's the code that makes everything look cool instead of plain and boring.

Without CSS, this site would just be white with black text — like a printout from 1995.

CSS is what gives this site:

• 🌑 The dark background color
• 🟢 The green Minecraft-style header
• 🔴 The red buttons and titles
• 📦 The rounded cards that hold each section
• ✨ The hover effects when you move your mouse over links

CSS works by saying "find this thing, and make it look like this." For example:

button {
  background: red;
  color: white;
}

That tells the browser: "every button should have a red background and white text."

JavaScript is what makes a website do things. HTML and CSS just sit there — JavaScript reacts when you click, type, or move your mouse.

On this site, JavaScript powers the football facts button on the home page. Here's how it works:

• 1️⃣ A list of football facts is stored in the code
• 2️⃣ When you click the button, JavaScript picks a random one
• 3️⃣ It shows the fact on the screen

"Random" in code is like rolling a dice 🎲 — the computer picks a number and uses it to choose a fact from the list.

JavaScript can also do math, remember things while you're on the page, and talk to other computers on the internet. Pretty powerful!

So we have the code — but how does someone in another state visit jonahdotcom.com?

It takes three steps:

Step 1 — GitHub 🐙

The code lives on a website called GitHub. Think of GitHub like a super-powered save file for code. Every time we make a change and "push" it, GitHub saves the new version. It keeps every old version too, so we can never mess up permanently!

Step 2 — GitHub Pages 📄

GitHub has a free feature called GitHub Pages that takes our code and puts it on the internet automatically. It's like GitHub saying: "I'll keep your LEGO build on display so everyone can see it."

Step 3 — The Domain 🏠

A domain is your address on the internet. Without an address, no one knows where to find you! We bought jonahdotcom.com so that when anyone types that in, their browser knows exactly where to go.

When you type jonahdotcom.com into a browser, here's what happens in about half a second:

• 🔍 Your browser asks: "Where is jonahdotcom.com?"
• 📡 A server called DNS looks up the address (like a phone book for the internet)
• 🚀 Your browser zooms to GitHub Pages and grabs the files
• 🖥️ Your browser reads the HTML, CSS, and JS and draws the page on your screen

This site was built by Jonah and his dad as a fun project to learn how websites work.

It was built using:

• 💻 A code editor to write the HTML, CSS, and JavaScript
• 🐙 GitHub to save and share the code
• 📄 GitHub Pages to put it on the internet for free
• 🌐 Cloudflare to connect the jonahdotcom.com address

Total cost to build: about $10 a year — just for the domain name. Everything else was free! 🎉

If Jonah can build a website at 9 years old, so can you. 🚀