OIM3690 - AI-Powered Web Development

2026 Spring

Session 04 (1/29)

Today's Agenda

• Reminders & Warm-up
• Quick Check: Is your site live?
• How Websites Work
• Hands-on: Analyze your AI-generated code
• Building your "I Don't Understand" list

Announcements / Reminders

• Start your learning logs in logs/ folder (naming: s01.md, s02.md, etc.)
• Email etiquette: include course number in subject (e.g., "OIM3690: Question about...")
• Required: Meet with me in person at least once this semester

Warm-up

• What are the two repos you created? What's the difference?
• What file should be the "homepage" of a website?
• What's the difference between "commit" and "push"?
• How did you preview your website locally before pushing?

Clarification: Your Two Repos

• They are separate repos, not folders inside each other
• username.github.io is your "front door" to the world
• oim3690 is for practicing and documenting your learning

How Websites Work

Hands-on: Analyze Your Code

Exercise: Explore Your Website

Open your username.github.io site and open DevTools (F12):

• Go to Elements panel
• Can you find these in your HTML?
  • A heading (<h1> or <h2>)
  • A paragraph (<p>)
  • A link (<a>) if you have one
  • An image (<img>) if you have one

Exercise: Where Does Styling Come From?

With an element selected in DevTools, look at the Styles panel:

• Can you find what makes your heading that color?
• Can you find what sets the font size?
• Can you find what controls the spacing around elements?
• Try changing a value - what happens?

Hint: Look for properties like color, font-size, margin, padding

Exercise: Check the Console

Go to the Console panel in DevTools:

• Are there any red errors?
• Are there any yellow warnings?
• Type document.body.style.background = 'yellow' and press Enter
• What happened?

Building Your "I Don't Understand" List

What Don't You Understand?

Look at your AI-generated code. Write down:

• Tags you don't recognize
  • <div>, <span>, <section>?
• CSS properties that are confusing
  • display: flex? position: relative?
• JavaScript that looks like magic
  • addEventListener? querySelector?

Write at least 10 things on paper.

Why This Matters

• You have a working website
• But you probably don't understand everything in it
• That's okay and expected
• This list is your learning roadmap
• We'll cover these topics throughout the semester

The goal isn't to memorize everything. It's to know enough to evaluate and modify AI code.

Share Your List

In pairs, share:

• What's on your list?
• Did you find anything in common?
• What are you most curious about?

Before You Leave (5 min)

• Start your Learning Log for today
• Work on in-class exercises (okay to continue later)
• Note down questions for next time
• Push your work to GitHub