OIM3690 - AI-Powered Web Development

2026 Spring

Session 13 (3/5)

Today's Agenda

• Announcements
• Warm-Up: CSS Vocabulary
• Forms & User Input
  • Your Turn: Build and test a 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, layout, forms, 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?

Project Repo Naming & GitHub Pages

• Only your personal website repo should be named <username>.github.io
• Name project repos something descriptive (e.g., pet-adoption-site)
• Set up GitHub Pages so your project site is live at https://<username>.github.io/<repo-name>
• Let's try it: publish your oim3690 repo using Pages (demo)

Reminder: GitHub Student Developer Pack

If your application was denied, try again. Many students succeed on the second attempt.

• Make sure your GitHub billing name matches your student document exactly
• Verify your school email in your GitHub account before applying
• Try applying while connected to the school network
• If you can't reapply right away, wait 24-48 hours, clear cache, or try another browser

The Pack includes Copilot Pro, free domain names, and cloud credits for backend deployment.

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, CSS variables, typography, Google Fonts
  • Layout: Flexbox & Grid

Warm-Up: CSS Vocabulary

How well do you know your CSS terms?

curio-team.github.io/vocabs/?name=css

• Match CSS terms to their definitions
• Try different difficulty levels

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: Build and Test a Form

Try It: Echo Test Form

I built a server that echoes back whatever your form submits.

1. Create a simple HTML file with this form:

   <form action="https://oim.108122.xyz/echo/view" method="GET">
     <input name="username" placeholder="Your name">
     <input type="password" name="password" placeholder="Password">
     <input name="message" placeholder="Say something">
     <button type="submit">Send</button>
   </form>
   

2. Submit it. Look at the URL bar. Can you see the password?
3. Now change method to POST and submit again. Where did the data go?
4. Notice what the server echoes back: your IP, browser, OS. POST sends a lot more than just form inputs to the server.

Exercise: Build a Contact Page

Create contact.html in your oim3690 repo:

• 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: "Create a styled contact page with a form"

• 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, everything looks tiny on mobile and users have to pinch-to-zoom.

Try it yourself:

1. Open any of your HTML files in DevTools Device Mode (Ctrl+Shift+M)
2. Remove the viewport tag, reload. See how the page shrinks?
3. Add it back, reload. Notice the difference.
4. Push to GitHub Pages and open the URL on your phone.

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?

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.

Responsiveness Is Not Optional

From now on, every page you build must work on different screen sizes.

• Always include the viewport meta tag
• Test with DevTools Device Mode (Ctrl+Shift+M) before you call it done
• Push to GitHub Pages and check on your phone
• If using AI to generate code, tell it explicitly: "Make it responsive" or "Use mobile-first design"
  • Then verify. AI-generated layouts can still break on small screens.

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>

What You Need to Know

You do NOT need to: memorize classes 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, and shadcn/ui.

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 contact.html 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
• Forms (HTML form elements, input types, labels, accessibility)
• 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 describing a UI to Copilot and see what it generates. You can also explore v0.dev, Lovable, or Replit

Next session: Quiz 2 + Introduction to JavaScript!