Back to Spring 2026 Slide 1 / 15

Your Ideas Are Becoming Real

Blue Moon Ice Cream Shoppe — Port Austin, MI

Last week you brainstormed ideas for a real business website. Today we learn the basics of how websites work — and start building one!

The Basics

What IS a Website?

A website is just a collection of files that a browser can read and display.

Files

HTML, CSS, images — the ingredients of every page

Server

A computer that's always on, serving your site to visitors

Browser

Chrome, Safari, Edge — the window to your website

Remember Week 1? The Digital Restaurant — your website is the menu!

bluemoonicecream.com
DNS Lookup
192.168.45.102
Domain Names

Your Address on the Internet

A domain name is a human-friendly name for a computer's address. Instead of remembering 192.168.45.102, you just type bluemoonicecream.com!

DNS (Domain Name System) is like a giant phone book that translates names into numbers.

Domains cost about $10–15 per year to register.

Your Ideas

Domain Names You Picked

Last week you brainstormed these domain names. Which is the winner?

bluemoonpa.com
bluemoonofthethumb.com
bluemoon-pa.com
bluemoonofpa.com
bluemoonicecream.com
bluemoonicecreamshoppe.com
getbluemoon.com
bluemoonscoop.com

Time to vote! Which one should we pick?

HTML + CSS

Anatomy of a Web Page

<!-- This is HTML -->
<html>
  <head>
    <title>Blue Moon</title>
  </head>
  <body>
    <h1>Welcome!</h1>
    <p>Best ice cream</p>
  </body>
</html>

Welcome!

Best ice cream

HTML = the structure (bones)
CSS = the style (skin & clothes)

Every website you've ever visited is built with HTML and CSS. Even this slideshow!

Your Feature Ideas

What Should the Site Have?

You brainstormed these features last week. Let's prioritize!

Must Have

Flavors
Menu
About Us
Address / Map
Social Media

Nice to Have

Flavor of the Week
Job Application
Pet Friendly
Fun Facts
Water Outside
The Real Shop

About Blue Moon

63 W Spring St, Port Austin, MI — right in the heart of downtown
Hand-dips Michigan-made Guernsey Dairy ice cream
Famous Blues Brothers statues in the dining room — photo op!
Very nut-allergen cautious — they also carry non-dairy options
Security

The Lock Icon

Ever notice the little padlock in your browser's address bar? That means the site is secure.

HTTPS

The "S" stands for Secure — data is encrypted between you and the server

SSL Certificate

A digital ID card that proves the website is who it says it is

Why It Matters

Without it, hackers could read passwords and credit cards sent over the internet

Blue Moon's website will have HTTPS from day one — we'll set up a real SSL certificate!

The Cloud

Where Websites Live

Your website files need a computer that's always on and always connected. That's called hosting.

AWS Lightsail
Visitors see your site!
AWS (Amazon Web Services) — the same cloud that powers Netflix, NASA, and millions of websites
Lightsail — our server in the cloud, always on, always ready
Blue Moon's site will be hosted on our Lightsail instance — the same server that runs Warrior Coding!
Organization

Plan Before You Build

Real developers don't just start typing code — they write a plan first. We use a system to keep everything organized.

designs/
  00-implementation-guides/ ← How-to docs
  01-to-do/ ← Plans ready to build
  02-partial/ ← Work in progress
  03-completed/ ← Done!
Every project starts with a Plan.md file — a written plan in Markdown
Plans move through folders: to-do → partial → completed
Blue Moon already has a plan file! We'll review and update it together today
AI + You

AI Is Your Planning Partner

AI tools like Claude can help you plan, but you make the decisions.

You Have the Idea

"I want a menu page with flavor cards and allergen info"

AI Writes the Plan

AI drafts a detailed plan with pages, features, colors, and layout

You Review & Adjust

Read it, change what's wrong, add what's missing — it's YOUR site

Then Build Together

AI helps write code, but you decide what gets built and how

The Blue Moon plan was drafted by AI from your brainstorm last week. Today we'll review it together and make changes!

Workflow

How a Plan Becomes a Website

1 Brainstorm — What should the site have? (You did this last week!)
2 Write the Plan — Create a Plan.md file listing pages, features, and design choices
3 Review & Revise — Read it as a team, fix what's wrong, remove what doesn't belong
4 Build — Write the HTML & CSS, one page at a time
5 Deploy & Iterate — Put it live, get feedback, improve

Today we're doing steps 3, 4, and 5 — all in one session!

Roadmap

Our Build Plan

Two weeks to build and launch a real website!

WK 1 Today: Build the site — home page, menu, about, contact, map
WK 2 Next week: Add a login, maintenance screens, and a database

By the end of today, Blue Moon will have a real website online!

Today's Mission Plan

20 min Slides — Websites, domains, security, the cloud, and planning with AI
10 min Vote — Pick our domain name!
20 min Review the Plan — Read our Plan.md together, discuss and make changes
40 min Build — Build the site together: home, menu, about, contact
20 min Game Time — Review and play the multiplayer Vertical Shooter!
10 min Wrap Up — What did you learn? Sneak peek at next week's login system

Your Challenge

Before next week, visit 3 ice cream shop websites and write down 1 thing you like from each one.

Cool colors?
Great photos?
Easy to navigate?
Flavor gallery?
Nice map?
Fun fonts?

Bring It Next Week!

Share your favorite ice cream shop website with the class. We'll steal the best ideas for Blue Moon!