OIM3690 - AI-Powered Web Development

2026 Spring

Session 12 (3/3)

Today's Agenda

• Announcements
• Review & Practice
  • Review questions + Flexbox skill challenges
• Forms & User Input
  • Your Turn: Add a contact form
• Responsive Design & CSS Frameworks
  • Your Turn: Build a responsive page

Announcements/Updates

• Weekly Learning Logs - wk07.md due this week
• Quiz 2 - next session! Covers all CSS topics (selectors, box model, display, layout, responsive)
  • Same format as Quiz 1: paper, closed book, 30 minutes
• Mini Project #1 - keep iterating!
  • Apply what you learn today (forms, responsive design) to your project
• 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?

CP2 Feedback: Naming & Structure

• File names must match slides exactly: about-me.html, projects.html, interests.html
  • Not about_me.html, interest.html, class10-interests.html
• Folder names: css (lowercase, not CSS), logs (no trailing spaces), images, js
• Weekly logs: follow naming convention (wk01.md, wk02.md, ...)
• HTML files go in repo root, not subfolders
• logs folder: .md files and related screenshots. No .py or unrelated files.

CP2 Feedback: Mini Project Repo

• Separate public repo, not inside oim3690
• Must contain PROPOSAL.md (with real content) and README.md
• In your oim3690 README, add a link so I can find it:

## Projects
- [Personal Website](https://github.com/username/username.github.io)
- [Mini Project 1](https://github.com/username/project-repo)

CP2 Feedback: Content & Workflow

• Learning logs need substance, not empty templates or a few words
  • Include: personal reflection, code snippets you tried, specific questions
  • Must be self-written. AI-generated logs will affect your score.
• Commit and push regularly. Zero commits during checkpoint = zero score.
• Check GitHub Issues: many CP1 issues still open (missing css, wrong file locations). Go to your repo's Issues tab, fix them, and reply.

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
• CSS
  • Adding CSS, cascading & specificity, selectors, pseudo-classes
  • Display types, <div> & <span>, box model
  • Transitions & animations, CSS variables, typography, Google Fonts
  • Layout: Flexbox & Grid, centering techniques

Review Questions

• You inspect a website and see display: flex on a container with 5 items. The items are stacked vertically instead of in a row. What property is causing this?
• You want to build something like the Tabliss new-tab page: a clock perfectly centered on the screen. What CSS would you put on the parent container?

Quick Practice: Layout Skills

Solve them yourself first, then ask AI if you get stuck:

• Flexbox Tasks - Tasks 1-3 (nav bar, equal columns, wrapping)
• Grid Tasks - Tasks 1-4 (basic grid, spanning, areas, grid + flex)

Bonus: Can you center the text inside each box in Flexbox Task 3?

Forms & User Input

Why Forms Matter

Forms are how users interact with your website:

• Sign up / Login
• Contact forms
• Search bars
• Settings and checkout

The <form> Element

<form action="/submit" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" placeholder="Your name">

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" placeholder="you@example.com">

  <button type="submit">Send</button>
</form>

• action - where to send data
• method - GET (in URL) or POST (in body)

Input Types

The browser gives you free validation and UI based on the type!

Other Form Elements

<!-- Multi-line text -->
<textarea rows="4" placeholder="Your message"></textarea>

<!-- Dropdown -->
<select>
  <option value="">Choose...</option>
  <option value="us">United States</option>
  <option value="ca">Canada</option>
</select>

<!-- Checkbox -->
<input type="checkbox" id="agree">
<label for="agree">I agree to the terms</label>

Form Accessibility

Always use <label> with for attribute!

<!-- Good: clicking "Name" focuses the input -->
<label for="name">Name:</label>
<input type="text" id="name">

<!-- Bad: no connection between label and input -->
Name: <input type="text">

Labels improve:

• Screen reader support
• Click target (clicking label focuses input)
• Mobile usability

Your Turn: Add a Contact Form

Exercise: Create a Contact Form

Add a contact form to your personal website or projects.html:

• Use <form>, <label>, <input>, <textarea>, <button>
• Include at least: name, email, and a message field
• Use appropriate type attributes (text, email)
• Style it with CSS (try Flexbox for form layout!)

Use Copilot: "Add a styled contact form to this page"

• Can you identify every element and attribute the AI used?
• Did it use any framework classes?

Responsive Design: The Essentials

Making Your Site Work on Mobile

One line you must always include:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Without this, mobile browsers assume your site is desktop-only!

Media Queries

/* Base styles (mobile first) */
.container { width: 100%; }

/* Tablet and up */
@media (min-width: 768px) {
  .container { width: 750px; }
}

/* Desktop */
@media (min-width: 1024px) {
  .container { width: 960px; }
}

Design for mobile first, then add complexity for larger screens.

You Already Know Responsive!

Remember Grid's auto-fit from last session?

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

That's responsive without media queries. Flexbox's flex-wrap does similar things.

Test with DevTools Device Mode (Ctrl+Shift+M): resize and see how your layout adapts.

CSS Frameworks

From Vanilla CSS to Frameworks

You've been writing vanilla CSS (plain CSS from scratch). In practice, most projects use a framework:

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>

You don't memorize these. Just learn to read them.

What You Need to Know

You do NOT need to: memorize classes, set up frameworks, 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)

Explore the full CSS Frameworks slides for details on Bootstrap, Tailwind, shadcn/ui, and v0.dev.

Your Turn: Build a Responsive Page

Exercise: Responsive Profile Cards

Create responsive-cards.html in your oim3690 repo:

• A page with 3-4 cards (team members, hobbies, or anything you like)
• Must include the viewport meta tag
• Cards should reflow responsively on different screen sizes
• Try asking AI to generate it with Tailwind CSS!

AI is encouraged! Use Copilot or ChatGPT to generate the initial page, then:

1. Read every line. Can you identify which classes are Tailwind?
2. Test with DevTools Device Mode (Ctrl+Shift+M). Does it work on mobile?
3. Change at least 2 things manually (a color, spacing, or layout)

Before You Leave

Wrap Up

• [ ] Update your learning log (wk07.md)
• [ ] Push your contact form and responsive-cards.html to GitHub
• [ ] Study for Quiz 2 - review all CSS topics
• [ ] Continue working on Mini Project #1

Quiz 2 Preview

Topics covered:

• CSS selectors (element, class, ID, combining, pseudo-classes)
• Box model, display types, <div> & <span>
• CSS variables, transitions
• Layout: Flexbox & Grid
• Responsive design basics (viewport, media queries)

Format: Paper, closed book, 30 minutes. Same style as Quiz 1.

Before Next Session

• Review all CSS slides and your exercises
• Practice in DevTools: inspect any site, identify Flexbox/Grid layouts
• Try v0.dev - describe a UI and see what it generates

Next session: Quiz 2 + Introduction to JavaScript!