OIM3690 - AI-Powered Web Development

2026 Spring

Session 14 (3/10)

contain

Today's Agenda

Announcements/Updates

  • Weekly Learning Logs - wk08.md due this week
  • Mini Project #1 - keep iterating!
  • Communication
    • Office Hours: Walk-in or by appointment
    • Email: Specify course # in subject, e.g., "OIM3690: GitHub settings"
    • You are required to meet with me at least once this semester
  • Questions?

What We've Learned So Far

  • How the Web Works - DNS, HTTP, client-server model
  • Tools - Git & GitHub, GitHub Pages, Copilot, DevTools
  • HTML - document structure, common tags, semantic HTML, accessibility, forms
  • CSS
    • Adding CSS, cascading & specificity, selectors, pseudo-classes
    • Display types, <div> & <span>, box model
    • Transitions, CSS variables, typography, Google Fonts
    • Layout: Flexbox & Grid
    • Responsive design

Quiz 2

Quiz 2

  • Paper, closed book, ~30 minutes
  • Covers CSS topics: selectors, specificity, box model, display, layout, forms, responsive design
  • Focus on understanding, not memorization
  • When you're done, work on the checklist on the next two slides.

When You're Done

Check your repos:

  • [ ] Are all three of your sites live on GitHub Pages?
    • username.github.io (personal website)
    • username.github.io/oim3690 (course repo)
    • Mini Project #1 repo
  • [ ] Have you created a contact.html page in your oim3690 repo?
  • [ ] Open each on your phone or DevTools Device Mode. Is it responsive?
  • [ ] Does your oim3690 README have links to your mini project repos?
  • [ ] Fix anything that's broken. Push your changes.

Try Something New

Create a playground.html page in your oim3690 repo. Try all of these:

  • [ ] Embed a YouTube video (<iframe>)
  • [ ] Embed a Google Map of Babson campus
  • [ ] Add audio or video (<audio controls>, <video controls>)
  • [ ] Make a collapsible FAQ with <details> and <summary>
  • [ ] Draw something with <canvas> (ask AI to help!)
  • [ ] Add a favicon to your site (<link rel="icon">)

CSS Frameworks

From Vanilla CSS to Frameworks

You've been writing vanilla CSS. In practice, most projects use a framework:

Framework Style You'll see it in...
Bootstrap Component-based Existing websites, enterprise
Tailwind CSS Utility-first AI-generated code, modern projects
shadcn/ui Components + Tailwind AI-generated UIs (v0.dev, Replit)

When AI writes CSS for you, it's usually Tailwind or shadcn/ui.

Tailwind CSS: Reading the Code

<button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-700">
  Click Me
</button>
Class Means
bg-blue-500 Blue background
text-white White text
px-4 Horizontal padding
rounded Rounded corners
hover:bg-blue-700 Darker on hover

What You Need to Know About Frameworks

You do NOT need to: memorize classes or write framework code from scratch

You DO need to:

  • Recognize framework classes when you see them
  • Understand what AI-generated code is doing
  • Modify AI output (change a color, adjust spacing)

JavaScript: First Look

Why JavaScript?

HTML gives your page structure. CSS gives it style.

JavaScript makes it do things.

  • Respond to clicks and user input
  • Change content dynamically
  • Animate elements
  • Fetch data from servers
  • Build interactive applications

Your First JavaScript Experience

  1. Download 15-js-demo.html from GitHub (OIM3690/resources/templates)
  2. Open the file in a web browser and interact with it
  3. Read the source code carefully (right-click > View Page Source, or open in VS Code)
  4. Write down one question about the code in your learning log
    • It can be about anything: syntax, meaning, purpose, behavior

What to Look For

As you read the code, notice:

  • Where is the JavaScript? (hint: <script> tag)
  • How does it find HTML elements? (document.querySelector, document.getElementById)
  • How does it respond to user actions? (addEventListener, onclick)
  • What happens when you open the Console (F12 > Console tab)?

Don't worry about understanding everything yet. Curiosity is the goal.

JavaScript Basics

Before You Leave

Wrap Up

  • [ ] Update your learning log (wk08.md)
  • [ ] Continue working on Mini Project #1
  • [ ] Explore the JS demo file. What questions do you have?

Before Next Session

  • Read through the JS demo source code again
  • Experiment: try changing text, colors, or timing in the demo
  • Open DevTools Console on any website and type document.title

Next session: More JavaScript!