Next Chapter Daily

📚 Course Materials

📂 Next Chapter — Course Files

Click a file to open it.

Week 1 — Foundations
📄 Day 1 — Introduction to AI
📄 Day 2 — Prompts & Code
📄 Day 3 — Sequence, Selection, Iteration
📄 Day 4 — Human Lane vs. AI Lane
🕯 Day 5 — GOOLZ.exe Walkthrough
Week 2 — The Browser
🎮 Day 1 — HTML: Reading & Writing
📨 Day 2 — Forms + DOM Basics
🐛 Day 3 — Debugging Day
📦 Day 4 — JavaScript Fundamentals
Week 3 — Project Week
🔬 Scry — divination by data
Week 4 — Backend & Data
🧠 Day 1 — Design Thinking Workshop
🔌 Day 2 — What's an API?
🗃 Day 3 — Databases: Where the Data Lives
💾 Day 4 — CRUD & SQL
🐀 Day 5 — RatTrack NYC (project day)
Week 5 — Full Stack JavaScript
🟢 Day 1 — Node.js: JavaScript Leaves the Browser
⚛ Day 2 — React: Thinking in Components
🔁 Day 3 — Events, Lists, Conditional Rendering
📡 Day 4 — React + APIs (fetch / useEffect)
🚀 Day 5 — Shipping: CF Pages + Serverless
Week 6 — Next.js + Databases
▲ Day 1 — Next.js Intro: React Plus a Server
▲ Day 2 — Connect to Postgres + Prisma
▲ Day 3 — API Routes: READ
▲ Day 4 — API Routes: CREATE
Week 7 — Testing + CRUD
✓ Day 1 — TDD + AI: Tests as the Spec
✓ Day 2 — UPDATE + DELETE: CRUD Complete
✓ Day 3 — Third-Party APIs + the OpenAI API
Week 8 — Ship It
🚢 Day 1 — Project Kickoff + Sprint Planning
🚢 Day 2 — Build Day + Deployment Prep
🚢 Day 3 — Go Live: Ship To Real Users
🚢 Day 4 — Demo Prep: Presenting The Build
🚢 Day 5 — The Phase 2 Gate
Week 9 — Get Paid With AI
💼 Day 1 — Business Thinking + Market Gaps
💼 Day 2 — Zapier + AI Workflows
💼 Day 3 — Extend + RAG + MCP
Capstone
🥚 PEEK — Examines Embedded Kernels (browser build)

25 object(s)

📄 Week 1 Day 1 — Introduction to AI

Week 1 Day 1 — Introduction to AI

Welcome! Today you'll get hands-on with AI tools and start building intuition for how they work.

Exercise 1

Ask AI Something You're Curious About

Open ChatGPT, Claude, or Gemini and ask it a genuine question. Try one of these starters, or make up your own:

Why does the sky change color at sunset?

What would happen if humans could photosynthesize like plants?

Explain quantum entanglement like I'm 12 years old.

Notice: How long is the answer? Does it feel confident? Does it hedge? Does it ask you anything back?

What you'll see: Answers are long and confident-sounding even for genuinely uncertain topics. AI rarely says "I don't know" — it fills in gaps with plausible-sounding text. It almost never asks a clarifying question back unless you tell it to. That confidence without uncertainty is the main thing to internalize on day one.

💡 Tip: AI works best when your question is specific. "Tell me about history" is hard — "What caused the fall of the Roman Empire in 3 bullet points?" is easy.

Exercise 2

Ask AI to Write Something for You

Try this prompt to get a short professional bio:

Write a 2-sentence professional bio for someone who is learning cloud computing and wants to transition into tech. Make it confident and forward-looking.

Read the output. Then try the prompt → output → feedback loop:

Read what it gave you.
Identify one thing you'd change (too formal? too short?).
Tell the AI: "Make it less formal and add a line about my interest in cybersecurity."
Compare version 1 vs version 2. What changed?

🔁 This loop — prompt → read → refine — is the core skill of working with AI. You rarely get perfection on the first try, and that's fine.

Exercise 3

Ask AI Something It Can't Answer

Try one of these and observe what happens:

What is the exact temperature outside my house right now?

What did I eat for breakfast this morning?

Will my team win the game tomorrow?

Notice how AI handles the limits of its knowledge. Does it refuse? Make something up? Offer a workaround? Understanding these failure modes makes you a smarter user.

What you'll see: For real-time questions (temperature, breakfast) AI will usually say it doesn't have access to live data — that's the correct response. For the sports prediction it'll often make a probabilistic guess anyway. The pattern: AI knows what it can't know, but doesn't always stop itself from answering anyway. Always ask yourself "could it actually know this?"

Exercise 4

Prediction Game

Part A — Finish the sentence: Predict what AI will say, then check.

"The most important invention of the 20th century was…"
"If I could have any superpower, I would choose…"
"The best way to learn something new is to…"

What you'll see: AI's completions trend toward the statistically common answer — "the internet," "flight," or "the printing press" for #1; something like "fly" or "teleportation" for #2. Run the same prompt three times: you'll get different wording each time, sometimes different answers entirely. This is the temperature (randomness) built into the model. It's not a bug — it's intentional so responses don't feel robotic.

Part B — Break it on purpose: Try to get AI to produce something weird or wrong.

Write a recipe for a cake made entirely of rocks. Be very specific about baking times.

What you'll see: AI will almost certainly play along — it'll invent "granite flour," "limestone extract," and a bake time like "350°F for 45 minutes." It won't refuse, it'll just comply creatively. This reveals that AI is a pattern-completion engine, not a logic checker. It doesn't stop to ask "wait, can you actually eat rocks?" That's your job.

Exercise 5

AI Can Code

Click the link below to open a live, working web app — built by asking AI to write the code:

🔗 https://simple-hello--fundlush1.replit.app/

You didn't write any of that code. An AI did — from a plain-English description. That's where this course is headed.

💡 By the end of this course, you'll be giving AI instructions like these and understanding what comes back.

Week 1 · Day 1

📄 Week 1 Day 2 — Prompts & Code

Week 1 Day 2 — Prompts & Code

🔬 Lab 1: Prompt Makeover

For each prompt below, compare the vague version to the improved version and study what changed.

Prompt A — Calculator

BAD PROMPT

Make a calculator

BAD OUTPUT (typical)

Here's a simple calculator in Python: def add(a, b): return a + b def subtract(a, b): return a - b # etc.

IMPROVED PROMPT

Write a single-page web calculator using HTML, CSS, and JavaScript. It should look like a classic desktop calculator with buttons for 0–9, +, −, ×, ÷, =, and Clear. Style it with a dark background and large readable buttons. No external libraries.

IMPROVED OUTPUT (typical)

Here's a complete HTML file with an inline CSS grid layout, click handlers for each button, and a display area that updates live. Clear resets to "0", operators chain correctly…

WHAT CHANGED

+ Specified output format (single-page HTML)
+ Listed exact features needed (0–9, ops, Clear)
+ Described visual requirements (dark bg, large buttons)
+ Added constraint (no external libraries)
− Removed ambiguity about language and interface

Stretch Goal — 3-Iteration Table

Iteration	Prompt Change	Result Improvement
1	Added "HTML/CSS/JS, no libraries"	Got a working file instead of snippets
2	Added "grid layout, Win95 aesthetic"	Styled buttons, beveled borders, gray palette
3	Added "keyboard support, chained ops"	Keydown events added, operator logic fixed

Prompt B — Resume

BAD PROMPT

Help me with my resume

BAD OUTPUT (typical)

Sure! Here are some tips for a strong resume: • Use action verbs like "led," "built," and "managed" • Keep it to one page • Tailor it to each job description • Include measurable achievements Would you like help with a specific section?

IMPROVED PROMPT

I'm a cloud engineer and full-stack developer with 8+ years of experience across independent consulting, agency work, and venture-backed startups. I founded Samwise Development (consultancy, 2022–present), contracted at Google IO via Left Field Labs, co-founded Distributron (reached YCombinator interview) and Treetz (indie game studio, team of 6), built Safety+ for Coca-Cola, and started my career at 1SEO Digital Agency and PSU's DARPA-funded Applied Research Lab. Stack: React, Vue, TypeScript, Python, PHP/Laravel, Tailwind, AWS, Azure, GCP, Cloudflare, Docker, Kubernetes, Linux, CI/CD. Certs: CompTIA A+, LPI Linux Essentials. Write a one-page resume optimized for senior contract and consulting roles, emphasizing technical breadth, entrepreneurial track record, and measurable impact. Use bullet points.

IMPROVED OUTPUT (example)

Penn Cameron Porterfield — Cloud Engineer & Full Stack Developer [email protected] · pcporterfield.pages.dev · github.com/melonmelonz Samwise Development — Founder & Consultant (2022–Present) • Full-stack and cloud infrastructure delivery for clients across industries Google IO — Contract Full Stack Developer (2021–2022) • Production pages via Left Field Labs; Preact + Jinja/Python + Tailwind Distributron — Co-founder & Developer (2020–2021) • Alcohol delivery startup; reached YCombinator interview. Vue, JAMstack Treetz — Co-founder, Indie Game Dev (2019–2020) • Unity mobile game; led team of 6 from concept to production Skills: React · Vue · TypeScript · Python · PHP/Laravel · Tailwind AWS · Azure · GCP · Cloudflare · Docker · Kubernetes · CI/CD CompTIA A+ · LPI Linux Essentials WGU B.S. Network & Cloud Engineering (In Progress) · Penn State 2009–2013

WHAT CHANGED

+ Provided real background (years, companies, stack)
+ Named the target role type (senior contract/consulting)
+ Specified tone and format (bullet points, one page)
+ Called out specific emphasis (breadth, entrepreneurial track record, impact)
− Removed the open-ended ask that produced generic tips

Prompt C — Quiz

BAD PROMPT

Give me a quiz

BAD OUTPUT (typical)

Sure! Here's a general knowledge quiz: 1. What is the capital of France? 2. Who wrote Romeo and Juliet? 3. What is 7 × 8?

IMPROVED PROMPT

Create a 5-question multiple-choice quiz about cloud computing fundamentals for someone with 6 months of experience. Include one question about S3, one about IAM, and one about the difference between IaaS and PaaS. Format each question with (A) (B) (C) (D) choices and put the answer key at the bottom.

WHAT CHANGED

+ Defined audience (6 months cloud experience)
+ Specified topic domain and exact subtopics
+ Requested a format (multiple choice, A–D)
+ Asked for answer key placement

💻 Lab 2: Reading Code

You don't need to know how to write code to read it. Let's practice.

Step 1 — Look at this program

name = input("What is your name? ")
color = input("What is your favorite color? ")
print(f"Hello, {name}! {color} is a great color.")

Before reading the explanation — what do you think this program does? Write your guess.

Step 2 — Line by line

Line 1: Asks the user to type their name. The answer is stored in a box called name.
Line 2: Asks for a favorite color. Stored in color.
Line 3: Combines both answers into a sentence and displays it.

The f"..." syntax means "fill in the blanks" — the {name} and {color} get replaced with whatever the user typed.

Step 3 — Q&A with AI

Paste that code into ChatGPT and ask:

Explain this Python code to me line by line, like I've never programmed before.

Then ask a follow-up:

What would happen if I removed the f before the quote on line 3?

Test the prediction. AI should say the {name} and {color} would print literally instead of being replaced.

Step 4 — Modify it

Ask AI to add a third question:

Add a third input that asks for the user's favorite food, then include it in the final printed sentence.

Copy the output, run it, verify it works. You just modified a program using plain English.

🤝 Peer Activity: Prompt Partners

Task Cards

Pair up. Each person picks one task and writes two prompts: a vague one and a specific one. Then swap and run each other's prompts. Compare results.

🎂 Write a recipe for a birthday cake
✉️ Write an email to a professor asking for an extension
📖 Explain a concept from your field to a 10-year-old
📝 Summarize a news article in exactly 3 sentences

💡 Discussion question: Which partner's improved prompt made the bigger difference? Why?

Debrief — Diana's Answer

Diana tried: "Write an email to a professor asking for an extension."

The AI gave a generic template. Then she improved it:

Write a polite email to my computer science professor asking for a 3-day extension on my programming assignment. My grandmother passed away last week and I've been traveling. I want to sound respectful and professional but also genuine, not over-apologetic.

Result: A specific, warm, appropriately toned email that Diana said she "would actually send."

Key insight: The more context you give, the more useful the output. AI doesn't know your situation — you have to tell it.

🔧 Code Reading + Modification Lab

Read each program, figure out what it does, then use AI to modify it.

Exercise 1 — Tip Calculator

bill = float(input("Enter bill amount: $"))
tip_pct = float(input("Tip percentage (e.g. 20): "))
tip = bill * (tip_pct / 100)
total = bill + tip
print(f"Tip: ${tip:.2f} | Total: ${total:.2f}")

Read it: What does :.2f do? (Hint: look at the output format.)

Modify it: Ask AI to split the total evenly between 2, 3, or 4 people. The program should ask "How many people?" and show each person's share.

Exercise 2 — Temperature Converter

temp_f = float(input("Enter temperature in Fahrenheit: "))
temp_c = (temp_f - 32) * 5 / 9
print(f"{temp_f}°F = {temp_c:.1f}°C")

Read it: What formula is being used? Does it match what you learned in school?

Modify it: Ask AI to also convert to Kelvin (K = C + 273.15) and display all three values.

Exercise 3 — Compliment Generator

import random

compliments = [
  "You're crushing it today.",
  "Your curiosity is contagious.",
  "You make hard things look easy.",
  "The world is better with you in it.",
  "You ask the best questions."
]

name = input("What's your name? ")
print(f"{name}, {random.choice(compliments)}")

Read it: What does random.choice() do? What would happen if the list had only one item?

Modify it: Ask AI to add 5 more compliments to the list and make it ask "Want another one? (yes/no)" after the first compliment, looping until the user says no.

Week 1 · Day 2

📄 Week 1 Day 3 — Sequence, Selection, Iteration

Week 1 Day 3 — Prompt-to-Program Lab

Today you built real programs using AI — one for each of the three core building blocks of code: sequence, selection, and iteration.

Exercise 1 — Sequence (Pay Stub Calculator)

The Prompt

Write a JavaScript program that asks the user for their hourly wage and hours worked this week. Calculate their weekly pay (wage x hours). Display: "You earned $[amount] this week."

The Generated Code

let wage = parseFloat(prompt("What is your hourly wage? $"));
let hours = parseFloat(prompt("How many hours did you work this week?"));
let pay = wage * hours;
alert(`You earned $${pay.toFixed(2)} this week.`);

Trace-Through (sample: $15/hr, 40 hrs)

Line	What happens	Value stored
1	Asks for wage, user types 15	wage = 15
2	Asks for hours, user types 40	hours = 40
3	Multiplies 15 × 40	pay = 600
4	Displays the result	"You earned $600.00 this week."

Each line depends on the one before it — that's what makes this a sequence. Swap lines 3 and 4 and the program breaks entirely.

Modification — After-Tax Take-Home

ADDED

+ let tax = pay * 0.08;
+ let takeHome = pay - tax;
+ alert(`Gross: $${pay.toFixed(2)} | Tax (8%): $${tax.toFixed(2)} | Take-home: $${takeHome.toFixed(2)}`);

let wage = parseFloat(prompt("What is your hourly wage? $"));
let hours = parseFloat(prompt("How many hours did you work this week?"));
let pay = wage * hours;
let tax = pay * 0.08;
let takeHome = pay - tax;
alert(`Gross: $${pay.toFixed(2)} | Tax (8%): $${tax.toFixed(2)} | Take-home: $${takeHome.toFixed(2)}`);

💡 At $15/hr for 40 hrs: Gross $600.00 → Tax $48.00 → Take-home $552.00

Exercise 2 — Selection (Temperature Checker)

The Prompt

Write a JavaScript program that asks the user what the temperature is outside (in Fahrenheit). Then display: - Below 32: "It's freezing! Stay inside." - 32 to 60: "It's chilly. Grab a jacket." - 61 to 80: "Perfect weather!" - Above 80: "It's hot. Stay hydrated."

The Generated Code

let temp = parseFloat(prompt("What is the temperature outside (°F)?"));
let message;

if (temp < 32) {
  message = "It's freezing! Stay inside.";
} else if (temp <= 60) {
  message = "It's chilly. Grab a jacket.";
} else if (temp <= 80) {
  message = "Perfect weather!";
} else {
  message = "It's hot. Stay hydrated.";
}

alert(message);

Trace-Through

Input	Which branch fires?	Output
45°F	`else if (temp <= 60)`	"It's chilly. Grab a jacket."
80°F	`else if (temp <= 80)` — catches it exactly	"Perfect weather!"
-10°F	`if (temp < 32)`	"It's freezing! Stay inside."
"hot"	parseFloat("hot") = NaN — no branch matches cleanly	undefined / blank

Entering a word instead of a number produces NaN — the program doesn't crash, but the output is wrong. This is a real-world validation gap.

Modification — The Perfect 72

ADDED

+ if (temp === 72) { message = "The perfect temperature!"; }
Note: this check must come BEFORE the 61–80 else-if, or it never fires.

let temp = parseFloat(prompt("What is the temperature outside (°F)?"));
let message;

if (temp < 32) {
  message = "It's freezing! Stay inside.";
} else if (temp <= 60) {
  message = "It's chilly. Grab a jacket.";
} else if (temp === 72) {
  message = "The perfect temperature!";
} else if (temp <= 80) {
  message = "Perfect weather!";
} else {
  message = "It's hot. Stay hydrated.";
}

alert(message);

💡 Order matters in if/else chains. The 72-degree check had to go before the <= 80 check, or it would have been swallowed by the earlier branch.

Exercise 3 — Iteration (Grocery List)

The Prompt

Write a JavaScript program that has a list of 5 grocery items with prices. Loop through the list and display each item and price. At the end, display the total cost.

The Generated Code

const groceries = [
  { item: "Bread",   price: 3.49 },
  { item: "Milk",    price: 4.99 },
  { item: "Eggs",    price: 5.79 },
  { item: "Apples",  price: 2.50 },
  { item: "Chicken", price: 8.99 }
];

let total = 0;
let output = "";

for (let i = 0; i < groceries.length; i++) {
  output += groceries[i].item + ": $" + groceries[i].price.toFixed(2) + "\n";
  total += groceries[i].price;
}

output += "\nTotal: $" + total.toFixed(2);
alert(output);

Loop Analysis

Question	Answer
Where does the loop start?	`i = 0` — the first item (Bread)
Where does it end?	When `i < groceries.length` is false — after item 5
How many times does it run?	5 times (indices 0 through 4)

Modification — 10% Discount on Items Over $5

ADDED

+ if (groceries[i].price > 5.00) { apply 10% discount, show both prices }

const groceries = [
  { item: "Bread",   price: 3.49 },
  { item: "Milk",    price: 4.99 },
  { item: "Eggs",    price: 5.79 },
  { item: "Apples",  price: 2.50 },
  { item: "Chicken", price: 8.99 }
];

let total = 0;
let output = "";

for (let i = 0; i < groceries.length; i++) {
  let price = groceries[i].price;
  if (price > 5.00) {
    let discounted = price * 0.90;
    output += groceries[i].item + ": $" + price.toFixed(2)
           + " → $" + discounted.toFixed(2) + " (10% off)\n";
    total += discounted;
  } else {
    output += groceries[i].item + ": $" + price.toFixed(2) + "\n";
    total += price;
  }
}

output += "\nTotal: $" + total.toFixed(2);
alert(output);

💡 Discounted items: Eggs ($5.79 → $5.21), Chicken ($8.99 → $8.09). Total drops from $25.76 → $24.28.

This exercise combines all three concepts — the array is a sequence of data, the loop is iteration, and the price check inside is selection. Most real programs use all three at once.

Week 1 · Day 3

📄 Week 1 Day 4 — Human Lane vs. AI Lane

Week 1 Day 4 — Human Lane vs. AI Lane

Today's theme: knowing when to hand the wheel to AI and when to take it back. Structured prompts, ethical judgment, and the question "should we?" vs. "how do we?"

Warm-Up — Human or AI?

The Three Texts

One was written by a human. Two by AI. Which is which?

Text	My Guess	Why
A — "Learning to code gives you the power to create solutions…"	AI	Correct-sounding and motivational, but generic. No specific story, no friction. Reads like an AI generating an inspirational opener.
B — "In today's rapidly evolving digital landscape…"	AI	Absolutely AI. "Rapidly evolving digital landscape," "indispensable asset," "competitive advantage" — corporate buzzword bingo. No human writes like this voluntarily.
C — "I started learning to code because I was tired of having ideas…"	Human	Specific, personal, uncomfortable ("tired of having ideas"). "App that my neighborhood actually uses" — AI wouldn't invent that detail. The friction is the tell.

The tell: AI fills in with confident, polished language. Humans have friction, specificity, and things that don't need to be there but are. Text C has all three.

Exercise 1 — Role Prompting

The Task: Explain what a variable is in JavaScript. Three ways.

Prompt 1 — No Role

Explain what a variable is in JavaScript.

AI Output (paraphrased): "A variable in JavaScript is a named storage location for data. You declare one using var, let, or const. Variables can hold numbers, strings, booleans, objects, or arrays. The value can be changed later unless declared with const…" (continues for several paragraphs)

Accurate. But it starts with jargon ("storage location," "declare") and keeps going. If I'm new, I'm already lost by sentence two.

Prompt 2 — Teacher Role

You are a patient coding teacher for adults who have never programmed before. Explain what a variable is in JavaScript. Use a real-world analogy. Keep it to 3 sentences. No jargon.

AI Output (paraphrased): "Think of a variable like a labeled sticky note. You write something on it — a number, your name, anything — and then you can read it or change it whenever you want. In JavaScript, you make one by writing let myName = "Penn"; — the label is myName, and "Penn" is what's written on it."

This is the one that actually landed. The sticky note clicked. Three sentences, no paragraph of preamble.

Prompt 3 — Technical Writer Role

You are a senior technical writer at a software company. Write a concise reference entry for "variable" in JavaScript. Include: definition, syntax for declaration (const, let, var), one code example, and one common mistake beginners make. Format with headers.

AI Output (paraphrased):

Variable — A named binding that associates an identifier with a value in memory.

Syntax:

const x = 10;       // block-scoped, cannot be reassigned
let   y = 20;       // block-scoped, can be reassigned
var   z = 30;       // function-scoped, avoid in modern JS

Common mistake: Using var inside a loop and expecting it to be block-scoped. Use let instead.

Best code example by far — three declarations side by side with comments. Worth bookmarking as a reference. But I wouldn't start a new student here.

Comparison

Prompt	Tone	Best for	Best code example?
No role	Textbook neutral	Someone who already knows a bit	No — buried in prose
Teacher role	Conversational, analogies	Me, right now	Simple, memorable
Technical writer	Structured reference	Looking something up quickly	Yes — three declarations in one block

💡 Role prompts don't change what AI knows — they change how it communicates what it knows. Same information, completely different delivery.

Exercise 2 — Constraint Prompting

The Prompt

Create an HTML page about me with these constraints: - My name is Penn Porterfield and I'm a student in an AI builder program - Navy blue background (#1a1a2e), white text, amber (#f59e0b) headings - Three sections: About, What I'm Learning, My Goal - No external CSS files — all styles inline or in a <style> tag - Mobile-friendly — text should be readable on a phone - Maximum 50 lines of code - Include at least one link (to my GitHub at github.com/melonmelonz)

Generated Code (32 lines — under 50 ✓)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Penn Porterfield</title>
  <style>
    body { background: #1a1a2e; color: white; font-family: Arial, sans-serif;
           max-width: 600px; margin: 0 auto; padding: 20px; }
    h1, h2 { color: #f59e0b; }
    a { color: #f59e0b; }
    section { margin-bottom: 24px; }
  </style>
</head>
<body>
  <h1>Penn Porterfield</h1>
  <p>Student in an AI Builder program — learning to build with AI tools.</p>
  <section>
    <h2>About</h2>
    <p>Based in Dallas, TX. I write code the old-fashioned way — by asking AI to do it
       and then figuring out what it did.</p>
  </section>
  <section>
    <h2>What I'm Learning</h2>
    <p>AI tools · Prompt engineering · HTML, CSS, JavaScript · How to tell AI output from human writing</p>
  </section>
  <section>
    <h2>My Goal</h2>
    <p>Build things that exist in the real world. Starting small, working up to the ones that matter.</p>
  </section>
  <a href="https://github.com/melonmelonz">GitHub →</a>
</body>
</html>

Constraint Check

Constraint	Result
Under 50 lines	32 lines ✓
Navy background + amber headings	✓ exactly as specified
Three sections	✓ About, What I'm Learning, My Goal
No external files	✓ all in <style> tag
Mobile-friendly	✓ max-width + viewport meta
GitHub link	✓

Pair Comparison — Partner: Destiny

Author	Lines	Notes
Penn	32	Single <style> block, max-width container, no nested wrappers.
Destiny	47	More semantic structure (header/main/footer), per-section spacing, extra accessibility attributes — still well under the 50-line cap.

Same constraints, two valid solutions. Destiny's used the extra room for structure and a11y; mine compressed the styles. Both pass every constraint check.

Modification — Changed Color Scheme

MODIFIED

- background: #1a1a2e; (navy)
- h1, h2 color: #f59e0b; (amber)
+ background: #1a0a1e; (deep purple)
+ h1, h2 color: #e53e3e; (crimson)

The navy/amber scheme was in the constraints but it's the course's default palette — not mine. I kept the structure and swapped the colors to something that actually feels like me.

💡 Constraints control the shape of the output. You still own the taste decisions inside those constraints.

Exercise 3 — System Instruction Practice

Scenario A — Debugger

You are a debugging assistant. When I show you code with a problem: 1. Ask me one clarifying question before giving any answer. 2. Never rewrite my entire code — only identify the specific broken part. 3. Explain what the error means in plain language before suggesting a fix. 4. If the fix involves a concept I might not know, name it so I can look it up.

Why this works: It forces AI to slow down and not just rewrite everything. The clarifying question makes me think about what I actually observed, not just "it's broken."

Scenario B — Brainstormer

You are an app idea generator. When I give you a topic or problem: 1. Give me exactly 5 app ideas — no more, no less. 2. For each idea, explain in one sentence who would use it. 3. Rate each idea's build difficulty from 1 (beginner-friendly) to 5 (complex). 4. Don't explain your ratings unless I ask. Format: numbered list, idea name in bold, then the user sentence, then "Difficulty: X/5"

The formatting constraint is the most important part. Without it, AI writes a paragraph per idea and the list becomes unreadable. Structured output requires structured instructions.

Scenario C — Quiz Mode

You are a quiz bot for a student reviewing Week 1 of an AI builder course. Rules: - Ask one question at a time. Wait for my answer before continuing. - After I answer: tell me if I'm right. If wrong, explain the correct answer in 2–3 sentences. - Questions should cover: what AI is, how prompts work, sequence/selection/iteration, the difference between human lane and AI lane. - After 5 questions, give me a score (e.g. "4/5 — solid!"). Start now.

💡 "Start now" at the end is important — without it, AI often explains what it's about to do instead of just doing it.

Peer Activity — Context Comparison

Round 1: No Context

Build me a landing page for a small business

Result: Generic. "Acme Corp" placeholder. Blue and gray. Hero text: "Welcome to Our Business." A services section with lorem ipsum. Nothing usable.

Round 2: Rich Context (Paws & Strolls)

Build a landing page for "Paws & Strolls," a dog walking service in the Oak Lawn neighborhood of Dallas, TX. Owner: Marcus. Services: - 30-minute walk: $20 - 60-minute walk: $35 - Puppy visit (15 min): $15 Features needed: - Hero section with tagline: "Your dog's favorite part of the day" - Services section with prices - About section (Marcus has 5 years experience, certified in pet first aid) - Contact section with phone and email - Colors: earthy greens and warm browns - Mobile-friendly - "Book a Walk" button (doesn't need to work — just the button)

Result: Marcus's name in the about section. The exact tagline. Actual prices. Earthy green (#4a7c59) and warm brown (#8b5e3c) palette. The button says "Book a Walk." It looked like a real business website.

What Showed Up From the Rich Prompt

Detail in prompt	Appeared in output
Owner name "Marcus"	✓ "Hi, I'm Marcus" in About section
Exact tagline	✓ Verbatim in hero h1
Three service tiers with prices	✓ Cards with $20/$35/$15
"Pet first aid certified"	✓ Mentioned in About
Earthy greens and warm browns	✓ Used in CSS variables
Book a Walk button	✓ Styled but non-functional as requested

Context is not extra work — it's input. AI can only use what you give it. The quality of the output is directly proportional to the quality of the brief.

Applied Judgment Lab — Exercise 1: Accept, Reject, or Modify?

Scenario A — The Professional Email

AI wrote: An email claiming "extensive experience in full-stack development," "expertise in React, Node.js, PostgreSQL, Python, Java, C++, AWS, Docker, Kubernetes, and machine learning," and calling itself an "invaluable asset."

Decision: Reject / Rewrite

- "extensive experience in full-stack development"
- "expertise in React, Node.js, Python, Java, C++, AWS, Docker, Kubernetes, ML"
- "invaluable asset to your team"
+ "currently completing an AI builder program focused on applied AI tools"
+ "I'm early in my technical journey and I'm learning fast"
+ "I'd be a motivated learner who ships things" (something I can back up)

The AI wrote a fiction. That list of skills is someone's 5-year résumé. I have four days of experience. An interviewer who reads that and then talks to me for 10 minutes will catch it immediately — and it kills trust. Honesty + specificity beats impressive lies every time.

Scenario B — The isPrime Function

function isPrime(num) {
  if (num <= 1) return false;
  if (num <= 3) return true;
  if (num % 2 === 0 || num % 3 === 0) return false;
  for (let i = 5; i * i <= num; i += 6) {
    if (num % i === 0 || num % (i + 2) === 0) return false;
  }
  return true;
}

Decision: Modify — Accept the function, ask for a simpler version to study

The code is correct and optimized (the i += 6 trick skips multiples of 2 and 3, which I didn't know). I can use it — but I'd also ask for a naive version I can fully trace through. "This works. Now show me one that's slower but that a beginner can read line by line." Using code I can't explain is a liability.

Scenario C — App Name Suggestions

AI suggested: TruckTracker, StreetEats, FoodRoamer, BiteBus, RollUp

Decision: Modify — pick one, verify, then tweak

StreetEats is the strongest. It's two syllables, says exactly what it is, and sounds like something you'd actually search for. I'd check it on the App Store and USPTO TESS before committing. FoodRoamer and RollUp sound like someone's gym app. BiteBus is a bus company. TruckTracker is what a logistics company uses to follow their drivers. StreetEats wins — but I'd still Google it first.

Applied Judgment Lab — Exercise 2: Ethics Scenarios

Scenario 1 — The Resume

What went wrong: AI made things up. It inflated a prompt ("I'm learning to code") into a portfolio that doesn't exist. The student didn't catch it or chose not to. When the interview happened, the lie became visible and the trust was gone.

The line: AI can draft language, clean up what I wrote, and suggest framing. It cannot invent experience I don't have. My rule: if I can't back it up in a 5-minute conversation, it doesn't go in.

Right use: "Here are three bullet points about a project I did. Make them sound more professional." That's AI refining real truth — not generating fictional truth.

Scenario 2 — The Client Project

What should have happened: Read every line of the generated code before shipping it. If I couldn't explain a function, I should have asked AI to explain it, then asked follow-up questions until I could. "Working" and "understood" are different things. Working is the minimum. Understood is what lets you fix it when it breaks at 2am six months later.

The minimum standard: I can describe what each function does in plain language and identify where I'd look if something breaks. That's the floor for responsible delivery.

Scenario 3 — The Bias Check

When asked to describe a "typical software engineer": male-leaning pronouns, mentions "he" or defaults to he/him, probably young, probably in a hoodie or office setting, probably white or East Asian in many outputs.

When asked to describe a "typical nurse": female-leaning, scrubs, gentle, maybe "she" by default.

Where it comes from: The internet. Specifically: news articles, job boards, blog posts, LinkedIn profiles, Reddit threads, Wikipedia entries. All of them reflect the world as it was historically documented, not as it should be. AI learned the pattern, not the exception.

Why it matters: If you use AI to write job descriptions, marketing copy, or character descriptions without checking, you're amplifying the same stereotypes that already make some people feel like they don't belong in the field. The fix isn't complicated — read the output and ask "who does this leave out?"

Applied Judgment Lab — Exercise 3: Build with Judgment

The Project: About Me Page — Decision Log

AI Output	Decision	Why
Bio that said "aspiring developer with a passion for technology"	REJECTED → "Student in an AI builder program, learning to build with AI tools"	"Aspiring developer" is vague and performative. The replacement says what I'm actually doing right now.
Navy (#1a1a2e) background + amber (#f59e0b) headings as specified in the constraint prompt	MODIFIED → deep purple + crimson	The constraint prompt specified the course's default colors, not mine. I kept the structure and made it mine.
Skills section listing React, Node.js, PostgreSQL, Python	REJECTED → changed to "Currently Learning" section	I haven't learned those yet. A "Skills" section implying proficiency would be dishonest. "Currently Learning" is accurate and still shows direction.
Clean HTML structure (DOCTYPE, viewport meta, semantic section tags)	ACCEPTED	I can explain every tag. The structure is correct and I understand it. No reason to change what works.
About section that mentioned "I love solving complex problems"	REJECTED → removed	Generic filler. If I can't give an example of a complex problem I solved, I shouldn't claim I love solving them.
Footer with copyright © 2025	MODIFIED → changed to 2026	AI's training data had 2025 as the present year. It's 2026. Small thing, but accuracy matters.

The takeaway: AI generated a complete page in seconds. Most of the structure was right. But every sentence that described me personally needed a human read. The code is AI's lane. Whether the words represent me honestly — that's mine.

Peer Activity — Explain AI to a Non-Technical Person

My 2-Minute Explanation (Draft)

"AI — the kind we've been using this week — is basically a very sophisticated autocomplete. Imagine your phone's keyboard suggestion, but instead of suggesting the next word in a text message, it's been trained on most of the internet and can suggest the next word in an essay, a piece of code, or a whole conversation.

Here's the analogy I like: it's like a really well-read intern. They've read everything in the library — every book, article, and forum post. They're fast, never tired, and can draft a first version of almost anything. But they've never actually lived life. They don't know what's true right now, they can confidently say wrong things, and they'll tell you what you want to hear if you push them.

What AI is genuinely good at: first drafts, code boilerplate, summarizing long documents, brainstorming options, explaining things 10 different ways until one clicks.

What AI is bad at: knowing what's true right now, understanding your specific situation, making ethical calls, and knowing when to say 'I don't know.'"

Partner Feedback

Did they understand it?	Jargon they caught	Strongest part
Yes	"Boilerplate" — defined it on the fly as "standard starter code, like a template"	The "well-read intern" analogy — partner said it was the first time AI felt intuitive to them

💡 The intern analogy works because it captures both the capability (reads everything, fast, productive) and the limitation (no real-world judgment, tells you what you want to hear). Keep it.

Week 1 · Day 4

🕯 Week 1 Day 5 — GOOLZ.exe Walkthrough

Week 1 Day 5 — GOOLZ.exe Walkthrough

Light day. No new lecture, no new tooling. Today is a tour of GOOLZ.exe — a four-wisp parlour game that ships embedded inside this very desktop and also lives standalone at /games/pwg/. The point of the day is to play it, read the loop, and notice what's there.

What It Is

Bomberman shape, Lavender-Town mood. Four candle-wisps drift around a graveyard. You set candles, candles knock over gravestones, gravestones fall on rivals. Your own candles will douse you too. Last lantern home wins.

Move	Keys
Drift	WASD or Arrow keys
Set a candle	Space or K
Pause	Esc

It used to be called PWF3. Got renamed and reskinned in May — same engine, ghostly theme, different identity.

Where It Lives

Where	How to open	What it is
This desktop	Double-click `GOOLZ.exe` on the desktop, or use the launch button below	Same game in an iframed Win95 window
Standalone	/games/pwg/	Full-screen client, same backend
Source	`github.com/melonmelonz/goolz`	Lives inside the goolz repo at `/pwg-rooms` and `/games/pwg`

Open Standalone

Today's Assignment

Play three rounds. Lose on purpose at least once to feel where the candles overlap.
Draw the level grid on paper. Mark which tiles are stone (block candles), which are gravestones (topple), which are open.
Write a short post-game in your notes: which design choice felt good, which felt punishing, and what one tweak you'd ship if it were yours.
Open /pwg-rooms in the repo and skim the room file. Don't try to understand all of it — just notice the shape: it's a state object that ticks forward each frame.

💡 No code to write today. The skill being trained is reading a finished thing well enough to describe it back. That's the same muscle Week 2 needs — read AI's code, decide what's good.

Heads-Up

This is the last day of Week 1. Week 2 picks up immediately on HTML and the DOM, then forms, then debugging — and by Day 4 of Week 2 the toy projects start looking less like toys.

Week 1 was about understanding the tools. Week 2 is about using them on something that talks back.

Week 1 · Day 5 · light day

🖩 Calculator

0

Split:

—

Ready

📝 Untitled — Notepad

Ln 1, Col 1

▣ Demo.exe — VELOCICÁLIA

📜 VELOCICÁLIA — Source & How It Works

💣 Minesweeper

010

000

Ready

🕯 Playing With Goolz

Same game · separate window

📊 Report Card — Study Plan

Today

Quick Log -- BeaglePlay / Ada

Default cadence: kernel sprint (~25 hr/wk, May\u2192Aug 2026). One main task + one supporting task per day. Click a task in Today to mark it done.

All problems logged. Newest first.

Date	Problem	Diff	Status	Topic	Notes

—

no data yet

0

Day Streak 🔥

0

Problems This Week

0

Total Logged

0%

Solve Rate

By Difficulty

🖥️ My Computer

💾

Disk C:

⚙️

Control Panel

System Information

OS	Next Chapter Daily v2.3.0
Display	—
Memory	—
Browser	—

Ready

🗑️ Recycle Bin

Empty

🌐 New Tab — Microsoft Internet Explorer

Done