OIM3690 - AI-Powered Web Development

2026 Spring

Session 09 (2/19)

contain

Today's Agenda

  • Announcements
  • Quiz 1
  • Quick Review
  • CSS Essentials (continued)
  • Your Turn: Create projects.html

Announcements/Updates

  • Weekly Learning Logs - keep writing wk05.md
    • Push to your oim3690 repo before each session
  • Personal Website - keep building and improving username.github.io
  • Mini Project #1 - find your "client" and start PROPOSAL.md
    • Submit proposal first, then code iteratively
    • Goal: meaningful progress by Checkpoint 2
  • Getting Help
    • Office Hours: by appointment (in-person preferred or Webex)
    • Email: include course # in subject, e.g., "OIM3690: CSS question"
  • Questions?

📝 Quiz 1

📝 Quiz 1

  • Paper quiz - no computers, closed book/notes
  • 30 minutes
  • Topics:
    • How the web works (DNS, HTTP, status codes)
    • Git & GitHub (commit vs push, GitHub Pages)
    • HTML structure, semantic tags, accessibility, etc.
  • Question types:
    • Quick concepts (use your words to explain)
    • Code reading (what does this do? what's wrong?)
    • Think like a builder (explain your reasoning)

📝 Quiz 1

Please put away all electronics.

Read each question carefully before answering.

Good luck!

What We've Learned So Far

  • How the web works: DNS, HTTP, client-server model
  • Git & GitHub basics, GitHub Pages deployment
  • GitHub Copilot: inline suggestions, chat, edits mode
  • HTML: document structure, common tags, attributes
  • Semantic HTML: <header>, <nav>, <main>, <footer>
  • Accessibility basics: alt text
  • CSS basics: adding CSS, cascading, basic properties, colors

Quick Review

  • What are the three ways to add CSS to a page? Which one should you normally use?
  • What does "cascading" mean in CSS? If you have the same property in an external stylesheet and an inline style, which wins?

CSS Essentials (continued)

Where We Left Off

Last session we covered:

  • What CSS is and why it matters
  • Three ways to add CSS (external, internal, inline)
  • Cascading and priority rules
  • Basic properties: color, font-family, padding
  • Color formats: named, hex, RGB

Today: typography, Google Fonts, the box model, and display types

Typography

font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;      /* or 400, 700, etc. */
font-style: italic;
text-align: center;     /* left, right, justify */
text-decoration: underline;
line-height: 1.5;

Using Google Fonts

<!-- In <head> -->
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"
      rel="stylesheet">

body {
  font-family: 'Roboto', sans-serif;
}

Browse fonts at fonts.google.com

The Box Model

Every Element is a Box

  • Content - the actual content
  • Padding - space inside the border
  • Border - the edge
  • Margin - space outside the border

Box Model Properties

.box {
  /* Content size */
  width: 200px;
  height: 100px;

  /* Padding (inside) */
  padding: 20px;

  /* Border */
  border: 2px solid black;

  /* Margin (outside) */
  margin: 10px;
}

Shorthand Properties

/* All four sides */
padding: 10px;

/* Vertical | Horizontal */
padding: 10px 20px;

/* Top | Right | Bottom | Left (clockwise) */
padding: 10px 20px 10px 20px;

/* Individual sides */
padding-top: 10px;
margin-left: 20px;

Box Sizing

/* Default: width doesn't include padding/border */
box-sizing: content-box;

/* Better: width includes padding/border */
box-sizing: border-box;

/* Apply to all elements (recommended) */
* {
  box-sizing: border-box;
}

Display Property

/* Block: takes full width, starts on new line */
display: block;    /* div, p, h1 default */

/* Inline: flows with text, no width/height */
display: inline;   /* span, a, strong default */

/* Inline-block: flows inline but accepts width/height */
display: inline-block;

/* None: hides element completely */
display: none;

<div> and <span>

<div> - Block container (groups elements)

<div class="card">
  <h2>Title</h2>
  <p>Content here...</p>
</div>

<span> - Inline container (style part of text)

<p>The price is <span class="price">$99</span> today!</p>

DevTools: Visualize the Box Model

  1. Right-click any element > Inspect
  2. See applied styles in Styles panel
  3. Look at the box model diagram at the bottom
  4. Hover over elements to see padding/margin highlighted
  5. Edit values live to experiment

Your Turn: Create projects.html

Exercise: Create Your Projects Page

Step 1: Create projects.html with this starter:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Projects</title>
    <link rel="stylesheet" href="css/projects.css">
</head>
<body>
    <h1>My Projects</h1>
    <p>A collection of projects from OIM3690.</p>
    <div>
        <h2>Project 1</h2>
        <p>Coming soon...</p>
    </div>
    <div>
        <h2>Project 2</h2>
        <p>Coming soon...</p>
    </div>
</body>
</html>

Style It With CSS

Step 2: Create css/projects.css and try these:

  • Add padding and margin to elements
  • Add border to your project sections (try solid, dashed, dotted)
  • Try a Google Font on the page
  • Open DevTools and visualize the box model on your elements

Step 3: Use Copilot to suggest improvements. Review each suggestion:

  • What properties did it use?
  • Do you understand them?

Before You Leave

Wrap Up

  • [ ] Update your learning log (wk05.md)
  • [ ] Push projects.html + css/projects.css to GitHub
  • [ ] If you haven't: find your "client" for Mini Project #1

Before Next Session

  • Experiment with box model on your personal website
  • Review the CSS Essentials slides for anything you missed
  • Play with DevTools on websites you visit: inspect the box model

Next session: CSS selectors (class, ID, and more) + a fun game!