OIM3690 - AI-Powered Web Development

2026 Spring

Session 06 (2/5)

contain

Today's Agenda

  • Announcements/Updates
  • What We've Learned So Far
  • Review Questions
  • HTML Essentials
    • Your Turn: Write HTML from Scratch

Announcements/Updates

  • Keep writing your learning logs after each session
  • Keep working on your personal website!
  • This week: I'll be checking your repos and learning logs
  • Email etiquette: include course number in subject (e.g., "OIM3690: Question about...")

What We've Learned So Far

  • How the web works: DNS, HTTP, client-server model
  • Static vs dynamic websites
  • Three languages of the web: HTML, CSS, JavaScript
  • Using Developer Tools to inspect websites
  • Git & GitHub basics, GitHub Pages deployment

Review Questions

  • What are the three languages of the web? What does each one do?
  • Your friend's website looks broken. How would you investigate what's wrong?
  • How would you use DevTools to change the headline text on any website?
  • You see a cool font on a website and want to know what it is. How would you find out?
  • You changed some CSS in DevTools but it disappeared after refresh. Why?

From Your "I Don't Understand" Lists

Top questions from last session:

  1. What do specific tags mean? (<div>, <span>, <li>, <h1>, <main>, etc.)
  2. What is meta/charset/UTF-8/viewport? (The <head> section)
  3. What are classes and IDs? (And the difference)
  4. CSS basics (colors with #hex, why code is colored in the editor)
  5. What is href? How do links work?

We'll cover #1, #2, and #5 today. #3 and #4 come with CSS later.

HTML Essentials

Your Turn: Write HTML from Scratch

Exercise: Build a Simple Page

Create a new file about-me.html in your oim3690 folder.

Without AI help, write:

  1. The basic HTML skeleton (<!DOCTYPE>, <html>, <head>, <body>)
  2. A <title> for your page
  3. An <h1> heading with your name
  4. A <p> paragraph about yourself
  5. An <a> link to your favorite website

Check Your Work

  • Open your file in the browser (use Live Server or double-click)
  • Does it display correctly?
  • View Page Source - does it match what you wrote?

Common issues:

  • Missing closing tags
  • Typos in tag names
  • Forgetting the href attribute on links

Finished Early?

Try adding (still by hand):

  • An <img> tag (use any image URL)
  • A list (<ul> or <ol>) of your hobbies
  • A second heading (<h2>) to organize content

Tip: Use MDN or ask AI for syntax help

Before You Leave

  • [ ] Start your Learning Log for today
  • [ ] Finish your about-me.html if needed
  • [ ] Push your work to GitHub

Before next session:

  • Make sure your repos are ready (I'll be checking this week!)
  • Review your "I Don't Understand" list - can you cross anything off?
  • Explore more tags: Try <details>, <figure>, <table> - use MDN or AI

Next: HTML Q&A + Introduction to GitHub Copilot

Space for session-specific news, common issues

Give students 2-3 minutes, then discuss