Module 5: CSS & Bootstrap

Teaching Principle: Generate CSS with AI, but open the page and confirm the layout actually looks right. Tweak values and re-check.

---

Lesson 5.1 — CSS Selectors and the Box Model

Duration: 50 minutes

Learning Objectives

• Link a CSS file to an HTML page.
• Use selectors: element, class, id, and grouping.
• Explain the box model: margin, border, padding, content.
• Style a simple card with the box model.

Instructor Notes

CSS controls appearance. Show how selectors target elements. Draw the box model on a whiteboard. Stress that padding is inside the border, margin is outside.

Presentation Outline

1. What is CSS? (5 min).
2. Linking CSS and basic rules (10 min).
3. Selectors: element, class, id (15 min).
4. The box model (15 min).
5. Live styled card (5 min).

Demonstration

1. Create style.css and link it with <link>.
2. Style h1, a .card class, and a #main id.
3. Add padding, border, margin to .card.
4. Open in browser and inspect the box model in dev tools.

AI Prompts

• "Act as a CSS teacher. Write CSS for a card with padding 20px, border 1px solid gray, and margin 10px. Explain the box model."
• "Explain the difference between id and class selectors in CSS with examples."

Starter Code

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS Box</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="card" id="main">Hello Card</div>
</body>
</html>

/* style.css */
/* TODO: style .card with padding, border, margin */

Final Code

/* style.css */
body {
  font-family: Arial, sans-serif;
}

.card {
  padding: 20px;
  border: 1px solid gray;
  margin: 10px;
  background: #f9f9f9;
}

#main {
  color: navy;
}

Exercises

• Exercise 1: Change .card padding to 40px and reload to see the difference.
• Exercise 2: Add a second .card and confirm both are styled.
• Exercise 3: Use an id selector to make one card red.

Homework

• Assignment 1: Create a profile card with image, name, and bio styled via class selectors.
• Assignment 2: Ask AI to explain margin vs padding and paste the summary.

Quiz

1. CSS stands for:
   • a) Computer Style Sheets
   • b) Cascading Style Sheets ✅
   • c) Creative Style System
   • d) Color Style Sheets
2. To link CSS you use:
   • a) <script>
   • b) <link rel="stylesheet"> ✅
   • c) <style src>
   • d) <css>
3. A class selector uses:
   • a) #
   • b) . ✅
   • c) @
   • d) *
4. Padding is space:
   • a) Outside the border
   • b) Inside the border, around content ✅
   • c) The border itself
   • d) Between pages
5. Margin is space:
   • a) Inside the element
   • b) Outside the border, between elements ✅
   • c) The font size
   • d) The background

---

Lesson 5.2 — Flexbox Layout

Duration: 50 minutes

Learning Objectives

• Use display: flex to align items.
• Control direction with flex-direction.
• Center items with justify-content and align-items.
• Build a responsive nav bar with Flexbox.

Instructor Notes

Flexbox is for 1-dimensional layouts (rows/columns). Show justify-content: center and align-items: center. Build a simple navbar to make it concrete.

Presentation Outline

1. Why Flexbox? (5 min).
2. display: flex and direction (10 min).
3. Justify and align (15 min).
4. Wrap and gap (10 min).
5. Live navbar build (10 min).

Demonstration

1. Create a flex container with 3 items.
2. Use justify-content: space-between for a navbar.
3. Use align-items: center to vertically center.
4. Add gap and flex-wrap; resize window to see behavior.

AI Prompts

• "Write CSS using Flexbox to create a navbar with logo on the left and links on the right, vertically centered."
• "Explain justify-content vs align-items in Flexbox with examples."

Starter Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Flex</title>
  <style>
    /* TODO: make .nav a flex container, space-between, centered */
  </style>
</head>
<body>
  <nav class="nav">
    <span>Logo</span>
    <span>Home</span>
    <span>About</span>
  </nav>
</body>
</html>

Final Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Flex</title>
  <style>
    .nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      padding: 10px;
      background: #eee;
    }
  </style>
</head>
<body>
  <nav class="nav">
    <span>Logo</span>
    <span>Home</span>
    <span>About</span>
  </nav>
</body>
</html>

Exercises

• Exercise 1: Change justify-content to center and observe.
• Exercise 2: Add 5 more links and use flex-wrap.
• Exercise 3: Make a vertical flex column with flex-direction: column.

Homework

• Assignment 1: Build a navbar with logo left and 4 links right using Flexbox.
• Assignment 2: Write one sentence explaining justify-content.

Quiz

1. Flexbox is best for:
   • a) 3D graphics
   • b) 1-dimensional row/column layouts ✅
   • c) Databases
   • d) Servers
2. To start Flexbox you set:
   • a) display: block
   • b) display: flex ✅
   • c) float: flex
   • d) position: flex
3. justify-content controls:
   • a) Vertical alignment
   • b) Horizontal distribution (main axis) ✅
   • c) Font size
   • d) Color
4. align-items: center centers items:
   • a) On the cross axis ✅
   • b) On the page only
   • c) In the database
   • d) Never
5. gap in Flexbox sets:
   • a) Space between flex items ✅
   • b) Font color
   • c) Image size
   • d) Page title

---

Lesson 5.3 — CSS Grid

Duration: 50 minutes

Learning Objectives

• Use display: grid for 2D layouts.
• Define columns with grid-template-columns.
• Place items with grid-area/spans.
• Build a responsive photo gallery grid.

Instructor Notes

Grid is for 2-dimensional layouts (rows AND columns). Compare with Flexbox. Show repeat(3, 1fr) for equal columns. Build a gallery that wraps responsively.

Presentation Outline

1. Grid vs Flexbox (5 min).
2. grid-template-columns and rows (15 min).
3. fr unit and repeat() (10 min).
4. Responsive with auto-fit/minmax (10 min).
5. Live gallery build (10 min).

Demonstration

1. Create a grid container with grid-template-columns: repeat(3, 1fr).
2. Add 6 boxes; show 3-column layout.
3. Change to repeat(auto-fit, minmax(100px, 1fr)) for responsiveness.
4. Resize window and verify reflow.

AI Prompts

• "Write CSS Grid code for a responsive gallery with 3 equal columns that becomes 1 column on small screens."
• "Explain the difference between Flexbox and CSS Grid for a beginner."

Starter Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Grid</title>
  <style>
    /* TODO: make .gallery a grid with 3 equal columns */
  </style>
</head>
<body>
  <div class="gallery">
    <div>1</div><div>2</div><div>3</div>
    <div>4</div><div>5</div><div>6</div>
  </div>
</body>
</html>

Final Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Grid</title>
  <style>
    .gallery {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
    }
    .gallery div {
      background: lightblue;
      padding: 20px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="gallery">
    <div>1</div><div>2</div><div>3</div>
    <div>4</div><div>5</div><div>6</div>
  </div>
</body>
</html>

Exercises

• Exercise 1: Change to 4 columns and reload.
• Exercise 2: Use auto-fit + minmax for responsiveness.
• Exercise 3: Make one item span 2 columns with grid-column: span 2.

Homework

• Assignment 1: Build a 6-item responsive gallery with Grid.
• Assignment 2: Write 2 differences between Grid and Flexbox.

Quiz

1. CSS Grid is best for:
   • a) Only rows
   • b) 2D layouts (rows and columns) ✅
   • c) Servers
   • d) Audio
2. To start Grid you use:
   • a) display: grid ✅
   • b) display: flex
   • c) grid: on
   • d) float: grid
3. 1fr means:
   • a) 1 pixel
   • b) One fraction of available space ✅
   • c) 1 font
   • d) 1 frame
4. repeat(3, 1fr) creates:
   • a) 3 equal columns ✅
   • b) 3 rows only
   • c) 1 column
   • d) A circle
5. For responsive columns you can use:
   • a) auto-fit with minmax ✅
   • b) color: red
   • c) float
   • d) display: none

---

Lesson 5.4 — Bootstrap Components

Duration: 50 minutes

Learning Objectives

• Add Bootstrap via CDN to a page.
• Use Bootstrap buttons, cards, and a navbar.
• Apply the Bootstrap grid (.container, .row, .col).
• Verify a Bootstrap layout renders correctly.

Instructor Notes

Bootstrap is a CSS framework that gives ready components. Show the CDN link. Emphasize it speeds up layout but you should still understand the underlying CSS. Verify with browser.

Presentation Outline

1. What is Bootstrap? (5 min).
2. Adding the CDN (10 min).
3. Buttons and cards (15 min).
4. Bootstrap grid system (10 min).
5. Navbar + live page (10 min).

Demonstration

1. Add Bootstrap CDN <link> to <head>.
2. Create a Bootstrap button and a card.
3. Use .container > .row > .col for a 3-column layout.
4. Add a navbar; open page and verify styling.

AI Prompts

• "Generate a Bootstrap 5 page with a navbar, a card with an image and button, and a 3-column grid using the CDN."
• "Explain how to add Bootstrap to an HTML page using the CDN."

Starter Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Bootstrap</title>
  <!-- TODO: add Bootstrap CDN link -->
</head>
<body>
  <!-- TODO: add a navbar, a card, and a 3-column grid -->
</body>
</html>

Final Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Bootstrap</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <nav class="navbar navbar-light bg-light">
    <span class="navbar-brand">MyShop</span>
  </nav>

  <div class="container mt-4">
    <div class="row">
      <div class="col-md-4">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Product 1</h5>
            <button class="btn btn-primary">Buy</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Exercises

• Exercise 1: Add 2 more .col-md-4 cards to complete the row.
• Exercise 2: Change the button color class (btn-success).
• Exercise 3: Add a second navbar link and verify.

Homework

• Assignment 1: Build a 3-product Bootstrap store page with navbar and cards.
• Assignment 2: Ask AI "what is the Bootstrap grid system?" and summarize.

Quiz

1. Bootstrap is:
   • a) A programming language
   • b) A CSS framework with ready components ✅
   • c) A database
   • d) A server
2. To use Bootstrap quickly you add:
   • a) A CDN link in <head> ✅
   • b) A Python file
   • c) A MySQL query
   • d) Nothing
3. A Bootstrap button uses the class:
   • a) .button
   • b) .btn .btn-primary ✅
   • c) .link
   • d) .click
4. Bootstrap grid columns use:
   • a) .col ✅
   • b) .box
   • c) .grid-item
   • d) .cell
5. You should still learn CSS because:
   • a) Bootstrap is enough alone
   • b) Understanding CSS helps you customize and debug ✅
   • c) It is required by law
   • d) Bootstrap breaks otherwise

← Back to Module README