Home / Schedule / Week 2 / Wednesday, 5/27

HTML essentials · Reading AI's code (Part 1)

Topic Slides

HTML Essentials Foundation Reading AI-Generated Code AI Track

Agenda Slides Open fullscreen ↗

Checkpoint 1

Due Sunday, 5/31
← Monday, 5/25 Monday, 6/1 →

Post-Class Notes

TL;DR

We went deep on HTML structure and how to read the code AI gives you. Every page shares the same skeleton, and semantic tags like <header> and <main> give your page real meaning and structure. When AI writes HTML for you, run the READ-FIND-ASK-VERIFY loop, and keep MDN open as your reference.

What we covered
  • Every HTML page starts with the same skeleton: <!DOCTYPE html>, <html>, <head>, <body>. The <head> holds metadata (charset, viewport, title, links to stylesheets); the <body> holds everything visible on the page
  • Semantic HTML means using tags that describe their purpose (<header>, <nav>, <main>, <footer>, <section>) instead of generic <div> for everything. <div> and <span> are the main generic containers with no built-in meaning; most other tags carry meaning about their content
  • When AI generates HTML for you, use the READ-FIND-ASK-VERIFY workflow: read the code, find what you do not understand, ask AI to explain it, then verify the explanation makes sense
  • VS Code Command Palette (Ctrl+Shift+P on Windows, Cmd+Shift+P on macOS) is the most important shortcut to learn. From there you can access any VS Code feature, including "Format Document" to auto-format your code
  • If you have not set up your AI tools yet, follow the AI Tools Setup Guide for step-by-step instructions. The VS Code Setup Guide covers extensions and settings
  • MDN Web Docs is the authoritative reference for HTML, CSS, and JavaScript. Bookmark it: developer.mozilla.org. The Structuring a web document article is a good read for understanding page layout planning

To do before Monday (6/1):

  1. Find your MP1 client and start the conversation. Read the full MP1 instructions. Note the new guidance on planning your layout before coding
  2. Create about-me.html in your oim3690 repo. Use AI to generate it, then review and understand every tag before committing and pushing
  3. Make sure hello.html from today is committed and pushed to your oim3690 repo
  4. Update logs/wk02.md. Include what you built this week, what you learned, questions you still have, and how you used AI (what you prompted, what it generated, what you changed)
  5. CP1 due Sunday 5/31: repos exist with correct structure, first 2 logs written with code snippets and AI usage blocks
  6. Monday 6/1: CSS essentials -- selectors, cascade, properties