OIM3690 - AI-Powered Web Development

2026 Spring

Session 07 (2/10)

contain

Today's Agenda

  • Announcements/Updates
  • What We've Learned So Far
  • Review Questions
  • HTML Q&A
  • Semantic HTML + Accessibility
  • Introduction to GitHub Copilot
  • Your Turn: AI-Assisted Refactoring
  • Before You Leave

Announcements/Updates

  • Repo & Logs
    • Keep writing learning logs after each session: s01.md, s02.md, ...
    • Write meaningful commit messages
  • Personal Website
    • Keep building your username.github.io repo
  • Office Hours
    • By appointment: in-person (preferred) or Webex
    • Required: Meet with me in person at least once this semester
  • Email etiquette: include course number in subject (e.g., "OIM3690: Question about...")

💡 Learning Logs → Weekly

  • Old: one log per session (s01.md, s02.md, ...)
  • New: one log per week (wk01.md, wk02.md, ...)
  • Why? Focus on deeper reflection, not more files
    • Synthesize what you learned across both sessions each week
    • Quality > quantity
  • Action: keep your existing s01.md–s06.md as-is, start writing wk04.md from this week
    • No need to rename or combine old logs
    • Week numbers are continuous (no skipping, even during Spring Break)

Learning Log Template

This is a starting point. Feel free to adapt it to fit your style.

# Week X (Dates) - [Topics]

## What I learned this week
[Key concepts — focus on understanding, not syntax]

## Code I'm proud of (optional)
[A snippet + what it does and why]

## Challenges I faced
[What was hard? How did I work through it?]

## AI usage (if any)
[What I asked, how I used/modified the output]

## Questions going forward
[What's still unclear? What do I want to explore?]

What We've Learned So Far

  • How the Web Works
    • DNS, HTTP, client-server model
    • Static vs dynamic websites
  • Tools & Workflow
    • Developer Tools for inspecting websites
    • Git & GitHub basics, GitHub Pages
  • HTML Fundamentals (from last session)
    • Three languages: HTML, CSS, JavaScript
    • Document structure: <!DOCTYPE>, <html>, <head>, <body>
    • Common tags: headings, paragraphs, links, images, lists
    • Attributes: href, src, alt

Review Questions

  • You wrote <a href="babson.edu">Babson</a> but the link doesn't work. What went wrong?
  • Your page has two <h1> tags. Is that a problem? Why or why not?
  • You forgot to add alt text to an image. Why does this matter?
  • Looking at AI-generated code for your portfolio, what HTML tags did you see that we didn't cover in class?

HTML Q&A

  • What confused you when writing HTML last session?
  • Any tags you tried but couldn't get working?
  • What's still on your "I Don't Understand" list?

Explore More Tags

We can't cover every HTML tag in class. You're expected to explore!

Resources:

Tags to try: <details>, <summary>, <mark>, <time>, <figure>, <figcaption>

Semantic HTML

What is "Semantic"?

Semantic = meaningful

Compare these two approaches:

<!-- Non-semantic (what AI often generates) -->
<div class="header">
  <div class="nav">...</div>
</div>

<!-- Semantic (better!) -->
<header>
  <nav>...</nav>
</header>

Same visual result, but semantic HTML tells the browser what the content means.

Why Does Semantic HTML Matter?

  • Accessibility: Screen readers understand your page structure
  • SEO: Search engines rank semantic pages higher
  • Maintainability: Easier to read and update
  • AI: Helps AI tools generate better code for you

Semantic Tags to Know

Tag Use for
<header> Top of page or section
<nav> Navigation links
<main> Main content (only ONE per page)
<section> Thematic grouping of content
<article> Self-contained content
<aside> Sidebar, related content
<footer> Bottom of page or section

The "Div Soup" Problem

AI-generated code often looks like this:

<div class="header">
  <div class="logo">My Site</div>
  <div class="nav">
    <div class="nav-item">Home</div>
  </div>
</div>

No semantic meaning. Harder for screen readers. Harder to maintain.

Better Version

<header>
  <h1>My Site</h1>
  <nav>
    <a href="/">Home</a>
  </nav>
</header>

Clear structure. Screen readers understand it. Proper heading hierarchy.

Quick Accessibility Check

For each <img> in your code:

  • Does it have an alt attribute?
  • Does the alt actually describe the image?
  • Decorative images should use alt=""

Try it: DevTools > Lighthouse > Accessibility audit. What score do you get?

Introduction to GitHub Copilot

Copilot Modes

Mode What it does How to use
Inline suggestions Auto-completes as you type Just start typing
Chat Ask questions, get explanations Open Copilot Chat panel
Edits Modify selected code Select code, use Copilot Edits

We'll focus on Edits mode today. It's great for improving existing code!

Copilot Edits: The Basics

  1. Select the code you want to improve
  2. Open Copilot Edits (Ctrl+I or Cmd+I)
  3. Describe what you want
  4. Review the suggestion before accepting

Key skill: Learning to write good prompts for AI!

Your Turn: AI-Assisted Refactoring

Choose Your Path

Option 1: Refactor existing page
Improve about-me.html with semantic HTML

Option 2: Create something new
Build a new page: My Favorites, Recipe, Timeline, etc.

Requirements (both options):

  • Use semantic tags: <header>, <main>, <section>, <footer>
  • Explore at least 2-3 new tags from the next slide
  • Use Copilot to help, but understand before you accept

Copilot Prompts to Try

Example prompts to get started:

  1. "Wrap this content in semantic HTML tags"
  2. "Add a <figure> with caption for this image"
  3. "Create a navigation menu with anchor links"
  4. "Make this page more accessible"

Key habit: Always review Copilot's suggestions. Ask yourself: Does this make sense? Is it what I wanted?

Tags to Explore

Pick at least 2-3 to try:

  • <details> / <summary> - Collapsible content (great for FAQs)
  • <figure> / <figcaption> - Images with captions
  • <video>, <audio>, <iframe> - Embed multimedia
  • <table> - Display data in tables (not for layout!)
  • <blockquote> - Quotations
  • <mark> - Highlight text
  • <time> - Dates and times

How to learn: Ask Copilot, check MDN, or inspect websites!

Reflect (2 min)

Think about your experience:

  • What new tags did you try? How did they work?
  • Did Copilot help or confuse you? Give an example.
  • Is your code better than before? Why?

Write down: One thing Copilot got right, one thing you had to fix.

Share with a Neighbor (5 min)

Show and tell:

  1. What new HTML tag did you use? Demo it!
  2. Share one useful Copilot prompt
  3. What surprised you?

Take note of interesting tags your classmates discovered.

Before You Leave

  • [ ] Update your Learning Log for today
  • [ ] Push your work to GitHub (whatever you created or improved)
  • [ ] Document: What new tags did you learn? What Copilot prompts worked well?

Before Next Session

  • Experiment with Copilot on your personal website
  • Review your "I Don't Understand" list. Can you cross anything off?
  • Read your AI-generated portfolio code. Can you spot any "div soup"?

Next session: CSS. Making your HTML look good!

Give students 2-3 minutes, then discuss