OIM3690 - AI-Powered Web Development

2026 Spring

Session 11 (2/26)

Today's Agenda

• Announcements
• What We've Learned So Far
• Review Questions
• Layout: Flexbox & Grid
• Flexbox Froggy, Grid Garden & Flexbox Defense
• Your Turn: Update projects.html with layout

Announcements/Updates

• Weekly Learning Logs - wk06.md
  • Reflect on what you learned, not just list what you did
• Mini Project #1 - keep iterating!
  • Show progress at Checkpoint 2
• Quiz 2 - coming in next week, covering CSS topics
• 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?

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 (:hover, :focus, :nth-child)
  • Display types, <div> & <span>, box model
  • Transitions, CSS variables, typography, Google Fonts

Review Questions

• Your friend's <img> won't center even though they added margin: 0 auto. What's the fix and why?
  • If you asked AI "how do I center a div?" - would that same answer work for an image?
• AI-generated CSS has transition: background-color 0.3s paired with a :hover rule. What do they do together? Does transition only work with :hover?
• You want your brand color used in 8 places. Change it once, it updates everywhere. How?
• In DevTools, your CSS rule has a strikethrough. What does that mean? How do you find out which rule is winning?

Mini Exercise: Add a Hover Animation

Open your interests.html from last session. Pick one element and add a smooth hover effect:

.my-element {
  background-color: #eee;
  transition: background-color 0.3s;
}

.my-element:hover {
  background-color: #3b82f6;
  color: white;
}

• Try changing 0.3s to 1s - what happens?
• Try transition: all 0.3s instead - what else animates?
• Done early? Ask AI: "Add a more complex hover animation to my interests.html" - but describe exactly which element and what effect you want before prompting.

~5 minutes, then share what you built.

CSS Diner Check-in

• Did you finish all 32 levels?
• Any levels that stumped you?
• What was the trickiest selector?

Layout: Flexbox & Grid

CSS Layout Evolution

1. Tables (1990s) - Don't do this!
2. Floats (2000s) - Hacky, but it worked
3. Flexbox (2010s) - One-dimensional layouts
4. Grid (2017+) - Two-dimensional layouts

Today we use Flexbox and Grid together.

Flexbox Basics

.container {
  display: flex;
}

This makes all direct children flex items that:

• Line up in a row (by default)
• Shrink/grow to fit
• Can be easily aligned

Flexbox Key Properties

.container {
  display: flex;

  /* Direction */
  flex-direction: row;           /* or column */

  /* Horizontal alignment */
  justify-content: center;       /* or space-between, space-around */

  /* Vertical alignment */
  align-items: center;           /* or flex-start, flex-end */

  /* Spacing between items */
  gap: 20px;
}

Perfect Centering with Flexbox

.container {
  display: flex;
  justify-content: center;  /* horizontal center */
  align-items: center;      /* vertical center */
  height: 100vh;            /* full viewport height */
}

This is the easiest way to center anything!

Grid Basics

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 3 equal columns */
  gap: 20px;
}

Useful patterns:

/* Repeat shorthand */
grid-template-columns: repeat(3, 1fr);

/* Auto-fit: responsive without media queries! */
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

When to Use Which?

Often you'll use both on the same page!

Game Time!

Flexbox Froggy

Help the frogs reach their lily pads using Flexbox!

• Work through levels at your own pace
• ~10 minutes
• Covers: justify-content, align-items, flex-direction, flex-wrap, align-content

Grid Garden

Water the garden using CSS Grid!

• Work through levels at your own pace
• ~10 minutes
• Covers: grid-column, grid-row, grid-template, grid-area

Flexbox Defense

Stop enemies using Flexbox - tower defense style!

• Work through levels at your own pace
• ~10 minutes
• Same properties as Froggy, different context - reinforces Flexbox

Build a Game to Learn Anything

Playing these games taught you layout. Same strategy works for upcoming topics:

• Learning JavaScript events? Build a click counter or quiz game
• Learning DOM manipulation? Build a flashcard app
• Learning APIs? Build a trivia game that fetches real questions

Building something you want to play is one of the fastest ways to actually understand new concepts. This isn't a project requirement - it's a learning strategy.

Your Turn: Update projects.html

Exercise: Add Layout to Your Projects Page

Open the projects.html you created last week and apply layout:

• Wrap your project <div> elements in a container
• Add display: flex or display: grid to the container
• Use gap for spacing between project entries
• Try centering your page title with Flexbox
• Try repeat(auto-fit, minmax(250px, 1fr)) for a responsive grid

Use Copilot: "Make this page use Flexbox layout" or "Add a CSS Grid to the projects section"

Before You Leave

Wrap Up

• [ ] Update your learning log (wk06.md)
• [ ] Push updated projects.html with Flexbox/Grid layout
• [ ] Continue working on Mini Project #1

Before Next Session

• Finish any remaining game levels (Froggy, Garden, Defense)
• Experiment with layout on your personal website
• Explore the full Layout: Flexbox & Grid slides
• Start reviewing CSS topics for Quiz 2

Next session: Forms, responsive design & CSS frameworks. HTML/CSS finale!