OIM3690 - AI-Powered Web Development

2026 Spring

Session 08 (2/12)

contain

Today's Agenda

  • Announcements/Updates
  • Intro to Mini Projects
    • Mini Project #1: Website for Someone Else
  • What We've Learned So Far
    • HTML Vocab
  • CSS Essentials
  • Your Turn: Style Your Page

Announcements/Updates

  • Keep updating your weekly learning logs after each session
  • Keep working on your personal website!
  • How is Copilot going? Any surprises?
  • Quiz 1 coming up next week.
    • On paper, in class, closed book/notes
    • It will cover everything from Sessions 01–08.
  • Getting Help
    • Office Hours: By appointment (in-person preferred or Webex)
    • Meet with me in person at least once this semester
    • Email: Specify course # in subject, e.g., "OIM3690: GitHub setup"

💡 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)

oim3690 Repo Structure

  • ex01.html, ex02.html, ... in-class exercises
  • images, css/, js/ for images, styles and scripts
  • logs/ learning logs (s01.md, ..., wk04.md, ...)
  • README.md with links to your exercises and projects

Mini Projects Overview

Throughout this semester, you'll build real websites and apps through mini projects.

  • 3 required projects
  • 1-2 elective projects in areas that interest you

Each project: propose → build → iterate → deploy

Required Projects

# Project Core Skills
1 Website for Someone Else HTML, CSS, client interview
2 Interactive Web Tool JavaScript, DOM, events
3 API-Powered App fetch, APIs, dynamic data
  • Released throughout the semester as you learn each skill layer.

Elective Projects (Choose 1-2)

  • Web Game
  • Redesign a Bad Website
  • Weather Dashboard
  • Chrome Extension
  • Trim Menu Redesign
  • AI-Powered Tool
  • Custom Project (propose your own!)

How Every Project Works

  • PROPOSAL.md - Plan before you code
  • Build → Get feedback → Improve → Repeat
  • Every change = a meaningful commit

Each project lives in its own public repo with GitHub Pages deployment.

Mini Project #1: Website for Someone Else

  • Your first mini project: build a website for a real person.
    • Not for yourself. For someone else. A friend, a family member, a club, a local business.
    • Why? Because real web development starts with understanding what someone else needs.
  • You can use AI tools, but you must document what you learned from AI-generated code.
  • I will check your progress in about 2 weeks. Start finding your "client" now!

How It Works

  1. Find your "client" - someone who needs a simple website
  2. Interview them - what do they want? what content do they have?
  3. Build it - multiple iterations, not one shot
  4. Get feedback - show them, revise, repeat
  5. Document - learning log for each iteration

Project Ideas

  • A personal portfolio for a friend
  • A page for a student club or organization
  • A menu/info page for a local business
  • A fan page someone asked you to make
  • An event page (wedding, birthday, fundraiser)

(I also have a website improvement project from a real company. If you're interested in working with a real client, let me know!)

What We've Learned So Far

  • How the web works: DNS, HTTP, client-server model
  • GitHub Copilot: inline suggestions, chat, edits mode
  • Git & GitHub basics, GitHub Pages deployment
  • HTML document structure, common tags, attributes
  • Semantic HTML: <header>, <nav>, <main>, <footer>, etc.
  • Accessibility basics: alt text, Lighthouse audit

HTML Vocab

Go to HTML Vocabulary. Spend a few minutes matching HTML terms to their visual representations.

CSS Essentials

Your Turn: Style Your Page

Exercise: Add CSS to Your about-me.html

Step 1: Create a css/ folder, then create style.css inside it.

Step 2: Link it in your <head>:

<link rel="stylesheet" href="css/style.css">

Step 3: Start with these three things:

  • Change the font-family on body
  • Change the color of your h1
  • Add some padding to body

Try With Copilot

  • Open your css/style.css and try these prompts:

    • "Add a color scheme using navy and white"
    • "Style the navigation links to be horizontal"
    • "Add spacing between sections"

  • Then get creative. Try your own prompts. Make it look the way you want.

  • Review each suggestion.

    • What properties did Copilot use?
    • Do you understand them?

DevTools CSS Experiment

  1. Open your page in Chrome
  2. Right-click any element > Inspect
  3. In the Styles panel, try changing values live
  4. Find something you like? Copy it to your style.css

DevTools changes disappear on refresh. Save what you want to keep!

Before You Leave

Wrap Up (5 min)

  • [ ] Update your Learning Log for today
  • [ ] Push your styled about-me.html + css/style.css to GitHub
  • [ ] Start thinking: who could you build a website for?

Before Next Session

  • Experiment with CSS on your personal website
  • Find your "client" for Mini Project #1
  • Play with DevTools CSS on websites you visit
  • Review the Mini Project #1 instructions on GitHub

Next session: More CSS. Box model, layout, and making things look professional.