🌐 Web Basics & HTTP

📸 Lesson Snapshot

Learn how the web works and use Postman to explore APIs before building your own! (Ages 8-18)

Session Date: Saturday, December 13, 2025 at 11:00 AM EST

---

🎯 Age-Tiered Learning Goals

	🌱 Elementary (8-11)	🌿 Middle School (12-14)	🌳 High School (15-18)
📡 HTTP	Understand that computers talk to each other	Know the 4 main HTTP methods	Understand request/response headers
🔌 APIs	Use Postman to see data from the internet	Call multiple APIs and understand JSON	Analyze API design patterns
🏁 By End	Get data from a fun API	Test several APIs with different methods	Design API requests independently

---

🎬 Before You Code: Hands-On Activities (15 minutes)

🍕 Activity 1: The Restaurant Game - Understanding Client/Server (Whole Class)

Setup: One student is the "Customer" (Client), one is the "Waiter" (HTTP), one is the "Kitchen" (Server)

Round 1: How a restaurant works ✅

    CUSTOMER                  WAITER                   KITCHEN
    (Client)                  (HTTP)                   (Server)

    "I'd like a         →    Carries order    →    Receives order
     pizza please"            to kitchen             Makes pizza

    Receives pizza     ←    Brings food      ←    Pizza ready!
    and eats it              to table               Sends it out

Round 2: What if something goes wrong? 🤔

    Customer: "I'd like a dragon burger"
    Kitchen: "Sorry, we don't have that!" (404 - Not Found) ❌

    Customer: "I'd like 1000 pizzas RIGHT NOW"
    Kitchen: "Whoa, slow down!" (429 - Too Many Requests) 🛑

    Customer: "What's on the menu?"
    Kitchen: "Here's everything we have!" (200 - OK) ✅

💬 Discussion:

"The internet works like a restaurant! Your browser (customer) sends requests, and servers (kitchen) send back responses. HTTP is the waiter that carries messages back and forth!"

---

💃 Activity 2: HTTP Method Dance (Whole Class)

Stand up and learn the four main HTTP methods with actions:

    GET    📖  "Give me data!"
           [Pretend to READ a book]

    POST   ✏️  "Here's new data!"
           [Pretend to WRITE in a notebook]

    PUT    🔄  "Update this data!"
           [Pretend to ERASE and REWRITE]

    DELETE 🗑️  "Remove this data!"
           [Pretend to throw paper away]

🎮 Play "HTTP Says":

• 👨‍🏫 Teacher calls: "HTTP says... GET a book!"
• 👨‍🎓 Students: Do the reading motion
• 👨‍🏫 Teacher calls: "POST a new message!" (no "HTTP says")
• 🚫 Students who move are out!

🔑 Key Insight:

"These four actions - Read, Create, Update, Delete - are called CRUD. Almost every app in the world uses them!"

---

🎭 Activity 3: Status Code Charades (Groups)

Each group gets status codes to act out:

    200 OK         👍  Give thumbs up, big smile
    201 Created    🎉  Celebrate like you made something new
    400 Bad Request 🤷  Look confused, shake head
    404 Not Found  🔍  Search around, look puzzled
    500 Server Error 💥  Fall down dramatically

Other groups guess the status code!

💬 Discussion:

"Status codes are like quick messages. Just like texting '👍' means OK, '200' means the request worked!"

---

🗺️ Visual Concept Map

    HOW THE WEB WORKS

    ┌─────────────────┐              ┌─────────────────┐
    │     CLIENT      │              │     SERVER      │
    │   (Your Phone   │              │   (Computer     │
    │    or Browser)  │              │    far away)    │
    └────────┬────────┘              └────────┬────────┘
             │                                │
             │    ┌─────────────────────┐     │
             │    │  THE INTERNET       │     │
             │    │                     │     │
             └────▶   REQUEST ─────────────▶──┘
                  │  "GET /api/books"   │
                  │                     │
             ┌────◀   RESPONSE ─────────◀─────┐
             │    │  Here's your data!  │     │
             │    └─────────────────────┘     │
             ▼                                ▼

    📱 Examples of Clients:          🖥️ Examples of Servers:
    • Web browser                    • YouTube
    • Phone apps                     • Instagram
    • Postman                        • Your Library API!
    • Video games

---

📡 HTTP Methods Visual

    THE FOUR MAIN HTTP METHODS (CRUD)

    ┌─────────────────────────────────────────────────────────┐
    │                                                         │
    │   GET         POST        PUT         DELETE            │
    │   📖          ✏️          🔄          🗑️                │
    │                                                         │
    │   READ        CREATE      UPDATE      DELETE            │
    │                                                         │
    │   "Give me    "Here's     "Change     "Remove           │
    │    the data"   new data"   this"       this"            │
    │                                                         │
    └─────────────────────────────────────────────────────────┘

    📚 Library Examples:
    ───────────────────────────────────────────────────────────
    GET /books        → 📋 Show me all books
    GET /books/1      → 📖 Show me book #1
    POST /books       → ➕ Add a new book
    PUT /books/1      → ✏️ Update book #1
    DELETE /books/1   → 🗑️ Remove book #1

---

🚦 Status Codes Cheat Sheet

    ┌─────────────────────────────────────────────────────────┐
    │                 STATUS CODE FAMILIES                    │
    └─────────────────────────────────────────────────────────┘

    2️⃣XX - SUCCESS! 🎉
    ┌─────────────────────────────────────────┐
    │ 200 OK          ✅ "Here's your data!"  │
    │ 201 Created     🆕 "I made a new thing!"│
    │ 204 No Content  ✔️ "Done, nothing to show"│
    └─────────────────────────────────────────┘

    4️⃣XX - YOUR MISTAKE 🤦
    ┌─────────────────────────────────────────┐
    │ 400 Bad Request ❓ "I don't understand" │
    │ 401 Unauthorized 🔒 "Who are you?"      │
    │ 404 Not Found   🔍 "That doesn't exist" │
    └─────────────────────────────────────────┘

    5️⃣XX - SERVER'S MISTAKE 💥
    ┌─────────────────────────────────────────┐
    │ 500 Server Error 🔥 "Something broke!"  │
    │ 503 Unavailable  ⏳ "Try again later"   │
    └─────────────────────────────────────────┘

---

📁 Folder & File Map

Session11-WebBasics/
├── 📄 README.md (this file)
├── 📄 HTTP_CHEATSHEET.md
└── 📁 exercises/
    └── 📄 api_explorer.md

---

📋 Prerequisites

• ✅ Completed Session 10 (OOP Checkpoint)
• ✅ Postman installed (we'll do this together)

---

🛠️ Step-by-Step Build Guide

1️⃣ Understand What We're Building

🤔 Think about apps you use every day:

    YOUR PHONE APP                    THE SERVER
    ┌─────────────┐                  ┌─────────────┐
    │  YouTube    │                  │  YouTube's  │
    │    App      │ ──── HTTP ────▶  │  Computers  │
    │             │ ◀── Videos ───   │             │
    └─────────────┘                  └─────────────┘

    The app doesn't store all videos -
    it ASKS the server for them!

💬 Discussion:

"Your phone app is like a window. The actual data lives on servers - powerful computers that store everything and send it to you when you ask!"

---

2️⃣ See HTTP in Action

🔍 Let's spy on web traffic!

1️⃣ Open Chrome 2️⃣ Press F12 (or right-click → Inspect) 3️⃣ Click the "Network" tab 4️⃣ Go to any website 5️⃣ Watch all the requests appear!

    WHAT YOU'LL SEE:
    ┌────────────────────────────────────────────────────────┐
    │ Name              Method    Status    Size             │
    ├────────────────────────────────────────────────────────┤
    │ example.com       GET       200 ✅    15 KB            │
    │ logo.png          GET       200 ✅    5 KB             │
    │ styles.css        GET       200 ✅    3 KB             │
    │ api/data          GET       200 ✅    1 KB             │
    └────────────────────────────────────────────────────────┘

    Each row = one HTTP request!

👥 Group Activity:

Count how many requests your favorite website makes. Who found the site with the most requests?

---

3️⃣ Install Postman

📮 Postman is like a web browser for APIs!

1️⃣ Go to: https://www.postman.com/downloads/ 2️⃣ Download for your operating system 3️⃣ Install with default settings 4️⃣ Create a free account (or skip for now)

    WHY POSTMAN?

    🌐 Browser:                 📮 Postman:
    Shows HTML pages            Shows raw data
    For humans to read          For programmers to test
    Limited to GET              All methods (GET, POST, etc.)

---

4️⃣ Make Your First Request

🎯 Let's talk to GitHub's servers!

1️⃣ Open Postman 2️⃣ Click "+" to create a new request 3️⃣ Enter URL: https://api.github.com 4️⃣ Make sure "GET" is selected 5️⃣ Click "Send"

    WHAT YOU'RE DOING:

    ┌────────────┐         ┌────────────┐
    │  Postman   │ ──────▶ │  GitHub's  │
    │  (You)     │  "Hello │  Servers   │
    │            │   there!"│           │
    └────────────┘         └────────────┘
                                 │
                                 ▼
    ┌────────────────────────────────────────┐
    │ {                                      │
    │   "current_user_url": "https://...",   │
    │   "emojis_url": "https://...",         │
    │   ...                                  │
    │ }                                      │
    └────────────────────────────────────────┘

    GitHub responded with JSON data! 🎉

---

5️⃣ Understand the Response

🔍 Look at what GitHub sent back:

{
  "current_user_url": "https://api.github.com/user",
  "emojis_url": "https://api.github.com/emojis",
  "events_url": "https://api.github.com/events"
}

📝 This is JSON! Notice:

• 📦 Curly braces { } contain the data
• 🔑 Key-value pairs like "name": "value"
• 💾 Just like your Library Manager save files!

👥 Pair Discussion:

"Where have we seen JSON before?" (Answer: Session 8 - File Operations!)

---

6️⃣ Try the GitHub Users API

👤 Get information about a GitHub user:

• Method: GET
• URL: https://api.github.com/users/octocat

{
  "login": "octocat",
  "id": 583231,
  "avatar_url": "https://avatars.githubusercontent.com/u/583231?v=4",
  "name": "The Octocat",
  "company": "@github",
  "followers": 9847
}

🎯 Try your own username!

• URL: https://api.github.com/users/YOUR-USERNAME

---

7️⃣ Explore Fun APIs

🎮 Try these APIs in Postman:

    🐕 DOG FACTS API
    ─────────────────────────────────────
    GET https://dog-api.kinduff.com/api/facts

    Response:
    {
      "facts": ["Dogs have three eyelids."],
      "success": true ✅
    }


    👤 RANDOM USER API
    ─────────────────────────────────────
    GET https://randomuser.me/api/

    Response:
    {
      "results": [{
        "name": { "first": "John", "last": "Doe" },
        "email": "john.doe@example.com"
      }]
    }


    🌤️ WEATHER API (Philadelphia)
    ─────────────────────────────────────
    GET https://api.open-meteo.com/v1/forecast?latitude=39.95&longitude=-75.16&current_weather=true

    Response:
    {
      "current_weather": {
        "temperature": 72.5,
        "windspeed": 5.2
      }
    }

🏆 Group Challenge:

Each group picks a different API. Who can find the most interesting data?

---

8️⃣ Send Data with POST

✏️ POST is how you CREATE new things!

• Method: POST
• URL: https://jsonplaceholder.typicode.com/posts
• Body (select "raw" and "JSON"):

{
  "title": "My First Post",
  "body": "Hello from Postman!",
  "userId": 1
}

Click Send and see the response:

{
  "title": "My First Post",
  "body": "Hello from Postman!",
  "userId": 1,
  "id": 101
}

🎉 The server added an ID! This is like when your Library adds a new book.

---

9️⃣ Compare to Your Library Manager

    💻 YOUR CONSOLE APP:              🌐 AS AN API:
    ─────────────────────────────────────────────────────

    myLibrary.AddBook(new Book       POST /api/books
    {                                {
        Title = "Harry Potter",          "title": "Harry Potter",
        Author = "J.K. Rowling",         "author": "J.K. Rowling",
        PageCount = 309                  "pageCount": 309
    });                              }

    myLibrary.GetAllBooks();         GET /api/books

    myLibrary.FindBook("Harry");     GET /api/books?search=Harry

    myLibrary.DeleteBook(1);         DELETE /api/books/1

🔑 Key Insight:

"In Sessions 12-15, we'll turn YOUR Library Manager into an API that works just like these!"

---

🔟 Create a Postman Collection

💾 Save your requests for later:

1️⃣ Click "Save" on any request 2️⃣ Create a collection called "CoderDojo Learning" 3️⃣ Save all your practice requests there

    YOUR COLLECTION:
    ┌─────────────────────────────────────┐
    │  📁 CoderDojo Learning              │
    │                                     │
    │    📄 GitHub API                    │
    │    📄 GitHub Users                  │
    │    📄 Dog Facts                     │
    │    📄 Weather                       │
    │    📄 Create Post (POST)            │
    └─────────────────────────────────────┘

---

📊 REST API Summary

REST is a way of designing APIs that uses standard HTTP:

🎬 Action	📡 HTTP Method	🔗 URL Example	📚 Library Equivalent
📋 List all books	GET	/api/books	GetAllBooks()
📖 Get one book	GET	/api/books/1	FindBook(1)
➕ Add a book	POST	/api/books	AddBook(...)
✏️ Update a book	PUT	/api/books/1	UpdateBook(...)
🗑️ Delete a book	DELETE	/api/books/1	DeleteBook(1)

---

💭 Group Reflection (5 minutes)

🔄 Circle Share - Answer one: 1️⃣ "HTTP is like... because..." 2️⃣ "The difference between GET and POST is..." 3️⃣ "Status code 404 means..." 4️⃣ "An API is like..."

---

✅ Run & Test Checklist

• 🔍 Opened Chrome DevTools and saw network requests
• 📮 Installed Postman
• 🐙 Successfully called the GitHub API
• 🧪 Tried at least 3 different public APIs
• ✏️ Sent a POST request with JSON data
• 💾 Saved requests to a collection

---

🏆 Bonus Challenges

🎯 Challenge 1: API Explorer (All Levels)

Find and test 3 APIs from https://github.com/public-apis/public-apis

🔍 Challenge 2: Query Parameters (Middle+)

Use the GitHub API to find repositories: https://api.github.com/search/repositories?q=pokemon

🔐 Challenge 3: API Key (High School)

Sign up for a free API key at openweathermap.org and make authenticated requests.

---

📖 Vocabulary Wall

🏷️ Term	📝 Kid-Friendly Definition	💡 Example
📡 HTTP	The language browsers and servers speak	"Hey server, GET me that page!"
🔌 API	A way for programs to talk to each other	GitHub's API lets you get user data
📤 Request	Asking for something	GET /books
📥 Response	The answer you get back	{ "books": [...] }
📦 JSON	A format for data that looks like JavaScript	{"name": "Harry Potter"}
🔢 Status Code	A number that says if it worked	200 = OK ✅, 404 = Not Found ❌
📮 Postman	A tool for testing APIs	Like a browser for programmers

---

🏠 Take-Home Connection

👨‍👩‍👧‍👦 Talk to a family member:

"Today I learned how the internet works! When you use an app, it sends requests to servers that send back data. I used a tool called Postman to talk directly to servers and get data!"

🎮 Activity: Open the Developer Tools (F12) on a website you visit often. Count how many HTTP requests it makes!

🤔 Questions to explore:

• 🏆 Which website makes the most requests?
• 🔴 Can you find any requests that failed (red color)?
• 📦 What kind of data is being sent back?

---

🔮 What's Next

In Session 12, we'll create our first ASP.NET Core Web API and make YOUR Library Manager accessible over HTTP! 🚀