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

  • Please watch all your own GitHub repos for issue notifications
  • Keep updating your weekly learning logs after each session
  • Keep working on your personal website!
  • 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

  • index.html, about-me.html, etc. (and future HTML files)
  • images/, css/, js/, media/ for images, styles, scripts and audio/video
  • logs/ learning logs (s01.md, ..., wk04.md, ...)
  • README.md with links to your pages 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 about-me.css inside it.

Step 2: Link it in your <head>:

<link rel="stylesheet" href="css/about-me.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/about-me.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 about-me.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/about-me.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.