🌐 HTML & CSS Foundations

📸 Lesson Snapshot

Build beautiful web pages with HTML structure and CSS styling! Learn the building blocks of every website. (Ages 8-18)

Session Date: Saturday, March 7, 2026 at 11:00 AM EST

🎯 Age-Tiered Learning Goals

	🧒 Elementary (8-11)	🧑 Middle School (12-14)	🎓 High School (15-18)
🏗️ HTML	Create basic pages with headings and paragraphs	Use semantic elements properly	Build accessible, well-structured pages
🎨 CSS	Change colors and fonts	Use Flexbox for layouts	Implement responsive Grid layouts
🏁 By End	Style a simple book card	Build a complete book display	Create a responsive library interface

🎨 Before You Code: Hands-On Activities (15 minutes)

🎮 Activity 1: The House Blueprint Game (Whole Class)

🎬 Setup: Students stand in a circle

📖 Scenario: HTML is like a house blueprint

    BUILDING A HOUSE 🏠 = BUILDING A WEBPAGE 🌐

    ┌─────────────────────────────────────────────────────────┐
    │                                                         │
    │   HOUSE PARTS              WEBPAGE PARTS                │
    │   ──────────              ─────────────                 │
    │                                                         │
    │   🏠 Foundation     =     <!DOCTYPE html>               │
    │      "What type           "What type of                 │
    │       of building"         document"                    │
    │                                                         │
    │   🚪 Front Door     =     <header>                      │
    │      "Entry point"        "Top of page"                 │
    │                                                         │
    │   🛋️ Living Room    =     <main>                        │
    │      "Main area"          "Main content"                │
    │                                                         │
    │   🍳 Kitchen        =     <section>                     │
    │      "Specific room"      "Specific area"               │
    │                                                         │
    │   🚗 Garage         =     <footer>                      │
    │      "Bottom area"        "Bottom of page"              │
    │                                                         │
    └─────────────────────────────────────────────────────────┘

💬 Discussion:

"Just like a house has rooms with specific purposes, a webpage has sections! The <header> is like your front entrance, <main> is your living room where the action happens, and <footer> is like the basement - always at the bottom!"

💃 Activity 2: The Box Model Dance (Whole Class)

📦 Stand up and become a CSS box!

    THE CSS BOX MODEL - YOU ARE THE CONTENT! 🧍

    Stand in place - YOU are the content!

    Step 1: CONTENT 📝
    ┌─────────────────────────────────────────────────────────┐
    │  Stand still with arms at your sides                    │
    │  "I am the CONTENT - the actual text or image!"         │
    └─────────────────────────────────────────────────────────┘

    Step 2: PADDING 🧸
    ┌─────────────────────────────────────────────────────────┐
    │  Stretch arms out to make space around yourself         │
    │  "PADDING is space between ME and my border!"           │
    │  "It's like a cushion around me!"                       │
    └─────────────────────────────────────────────────────────┘

    Step 3: BORDER 📦
    ┌─────────────────────────────────────────────────────────┐
    │  Draw a box shape in the air around yourself            │
    │  "BORDER is the line around my box!"                    │
    │  "It can be thick, thin, solid, or dashed!"             │
    └─────────────────────────────────────────────────────────┘

    Step 4: MARGIN 🌌
    ┌─────────────────────────────────────────────────────────┐
    │  Take a big step back from your neighbor                │
    │  "MARGIN is space between ME and other boxes!"          │
    │  "It's my personal space bubble!"                       │
    └─────────────────────────────────────────────────────────┘

💡 Key Insight:

"Every element on a webpage is a box! Content + Padding + Border + Margin = The complete box!"

🃏 Activity 3: Tag Matching Card Game (Groups)

🔀 Match the HTML tags with what they do:

    ┌─────────────────────────────────────────────────────────┐
    │  MATCH THE TAGS! 🏷️                                     │
    │                                                         │
    │  HTML TAG              WHAT IT DOES                     │
    │  ────────              ────────────                     │
    │                                                         │
    │  <h1>                  "A clickable link"               │
    │  <p>                   "The biggest heading"            │
    │  <a>                   "An image"                       │
    │  <img>                 "A paragraph of text"            │
    │  <ul>                  "A container box"                │
    │  <li>                  "An unordered list"              │
    │  <div>                 "A list item"                    │
    │                                                         │
    └─────────────────────────────────────────────────────────┘

    ANSWERS: ✅

    <h1>  → "The biggest heading" 📰
    <p>   → "A paragraph of text" 📝
    <a>   → "A clickable link" 🔗
    <img> → "An image" 🖼️
    <ul>  → "An unordered list" 📋
    <li>  → "A list item" •
    <div> → "A container box" 📦

🗺️ Visual: HTML Document Structure

    THE ANATOMY OF AN HTML PAGE 🦴

    <!DOCTYPE html>              ← 📜 "I'm an HTML5 document!"
    <html lang="en">             ← 🌍 The whole page starts here
    │
    ├── <head>                   ← 🧠 The brain (invisible info)
    │   │
    │   ├── <meta charset>       ← 🔤 Character encoding
    │   ├── <title>              ← 📑 Browser tab title
    │   └── <link>               ← 🎨 Connect to CSS file
    │
    └── <body>                   ← 💪 The body (visible content)
        │
        ├── <header>             ← 🎩 Top section (logo, nav)
        │   └── <nav>            ← 🧭 Navigation links
        │
        ├── <main>               ← ⭐ Main content area
        │   │
        │   ├── <section>        ← 📦 Grouped content
        │   │   └── <article>    ← 📰 Self-contained content
        │   │
        │   └── <aside>          ← 📎 Sidebar content
        │
        └── <footer>             ← 👟 Bottom section
            └── <p>              ← 📝 Copyright, links

    </html>                      ← 🏁 End of page

🗺️ Visual: CSS Box Model

    THE CSS BOX MODEL 📦

    ┌─────────────────────────────────────────────────────────┐
    │                      MARGIN                             │
    │    (Space outside - your personal bubble) 🌌            │
    │                                                         │
    │    ┌───────────────────────────────────────────────┐    │
    │    │                 BORDER                        │    │
    │    │    (The edge of your box) 📦                  │    │
    │    │                                               │    │
    │    │    ┌───────────────────────────────────┐      │    │
    │    │    │           PADDING                 │      │    │
    │    │    │    (Cushion around content) 🧸    │      │    │
    │    │    │                                   │      │    │
    │    │    │    ┌───────────────────────┐      │      │    │
    │    │    │    │                       │      │      │    │
    │    │    │    │       CONTENT         │      │      │    │
    │    │    │    │    (Your text/image)  │      │      │    │
    │    │    │    │         📝            │      │      │    │
    │    │    │    │                       │      │      │    │
    │    │    │    └───────────────────────┘      │      │    │
    │    │    │                                   │      │    │
    │    │    └───────────────────────────────────┘      │    │
    │    │                                               │    │
    │    └───────────────────────────────────────────────┘    │
    │                                                         │
    └─────────────────────────────────────────────────────────┘

    CSS CODE:
    ┌─────────────────────────────────────────────────────────┐
    │  .box {                                                 │
    │      margin: 20px;     /* 🌌 Space outside */          │
    │      border: 2px solid black;  /* 📦 The edge */       │
    │      padding: 15px;    /* 🧸 Cushion inside */         │
    │      width: 200px;     /* ↔️ Content width */           │
    │  }                                                      │
    └─────────────────────────────────────────────────────────┘

🗺️ Visual: Flexbox Layout

    FLEXBOX - FLEXIBLE BOXES! 🤸

    flex-direction: row (default)
    ┌─────────────────────────────────────────────────────────┐
    │                                                         │
    │    ┌─────────┐  ┌─────────┐  ┌─────────┐               │
    │    │  Box 1  │  │  Box 2  │  │  Box 3  │    →→→        │
    │    └─────────┘  └─────────┘  └─────────┘               │
    │                                                         │
    │    Items flow LEFT to RIGHT like reading a book 📖     │
    └─────────────────────────────────────────────────────────┘

    flex-direction: column
    ┌─────────────────────────────────────────────────────────┐
    │                                                         │
    │    ┌─────────────────┐                                  │
    │    │     Box 1       │  ↓                               │
    │    └─────────────────┘  ↓                               │
    │    ┌─────────────────┐  ↓                               │
    │    │     Box 2       │  ↓                               │
    │    └─────────────────┘  ↓                               │
    │    ┌─────────────────┐  ↓                               │
    │    │     Box 3       │                                  │
    │    └─────────────────┘                                  │
    │                                                         │
    │    Items stack TOP to BOTTOM like a tower 🗼           │
    └─────────────────────────────────────────────────────────┘

    justify-content: space-between
    ┌─────────────────────────────────────────────────────────┐
    │                                                         │
    │  ┌─────┐              ┌─────┐              ┌─────┐      │
    │  │  1  │              │  2  │              │  3  │      │
    │  └─────┘              └─────┘              └─────┘      │
    │                                                         │
    │    Space is spread BETWEEN items evenly! ↔️             │
    └─────────────────────────────────────────────────────────┘

🗺️ Visual: CSS Grid Layout

    CSS GRID - LIKE A SPREADSHEET! 📊

    grid-template-columns: 1fr 1fr 1fr (3 equal columns)

    ┌─────────────────────────────────────────────────────────┐
    │                                                         │
    │    Column 1      Column 2      Column 3                 │
    │    ┌──────────┬──────────┬──────────┐                   │
    │    │          │          │          │                   │
    │    │  Cell 1  │  Cell 2  │  Cell 3  │  Row 1            │
    │    │          │          │          │                   │
    │    ├──────────┼──────────┼──────────┤                   │
    │    │          │          │          │                   │
    │    │  Cell 4  │  Cell 5  │  Cell 6  │  Row 2            │
    │    │          │          │          │                   │
    │    └──────────┴──────────┴──────────┘                   │
    │                                                         │
    │    Like a chocolate bar - neat rows and columns! 🍫    │
    └─────────────────────────────────────────────────────────┘

    CSS CODE:
    ┌─────────────────────────────────────────────────────────┐
    │  .grid-container {                                      │
    │      display: grid;                                     │
    │      grid-template-columns: 1fr 1fr 1fr;               │
    │      gap: 10px;  /* Space between cells */             │
    │  }                                                      │
    └─────────────────────────────────────────────────────────┘

📁 Folder & File Map

Session16/
├── README.md           ← 📖 This lesson plan
├── index.html          ← 🏠 Your webpage structure
├── styles.css          ← 🎨 Your styling rules
└── .gitignore          ← 🙈 Files Git should ignore

✅ Prerequisites

✅ Completed Session 15 (Testing APIs)
✅ A text editor (VS Code recommended)
✅ A web browser (Chrome, Firefox, Edge)

🛠️ Step-by-Step Build Guide

1️⃣ Create Your Project Folder

📂 Create a new folder for your project:

mkdir library-frontend
cd library-frontend

2️⃣ Create Your First HTML File

📄 Create file: index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>📚 My Library</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

🔍 Understanding each part:

    LINE BY LINE 📖

    <!DOCTYPE html>
    ↑ Tells the browser: "This is HTML5!"

    <html lang="en">
    ↑ The whole page starts here. lang="en" means English.

    <head>
    ↑ Invisible info - like the brain 🧠

    <meta charset="UTF-8">
    ↑ "I can display emojis and special characters!"

    <meta name="viewport" ...>
    ↑ "Make me look good on phones too!"

    <title>📚 My Library</title>
    ↑ What shows in the browser tab

    <link rel="stylesheet" href="styles.css">
    ↑ "Connect my CSS styling file!"

    <body>
    ↑ Visible content starts here - like the body 💪

    <h1>Hello, World!</h1>
    ↑ A big heading!

3️⃣ Open in Browser

🌐 Double-click index.html to open it in your browser!

    ┌──────────────────────────────────────────────────────────┐
    │ 📚 My Library               ← ─ □ ✕                      │
    ├──────────────────────────────────────────────────────────┤
    │                                                          │
    │   Hello, World!                                          │
    │                                                          │
    │                                                          │
    │                                                          │
    └──────────────────────────────────────────────────────────┘

🎉 You made your first webpage!

4️⃣ Add Semantic Structure

✏️ Update index.html with proper sections:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>📚 My Library</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- 🎩 Header - Top of page -->
    <header>
        <h1>📚 My Library</h1>
        <nav>
            <a href="#books">Books</a>
            <a href="#about">About</a>
            <a href="#contact">Contact</a>
        </nav>
    </header>

    <!-- ⭐ Main - Primary content -->
    <main>
        <section id="books">
            <h2>📖 Our Books</h2>
            <p>Welcome to our library! Browse our collection below.</p>
        </section>
    </main>

    <!-- 👟 Footer - Bottom of page -->
    <footer>
        <p>&copy; 2026 My Library. Made with ❤️ at CoderDojo</p>
    </footer>
</body>
</html>

🔍 What are semantic elements?

    SEMANTIC = MEANINGFUL 💡

    ┌─────────────────────────────────────────────────────────┐
    │                                                         │
    │  NON-SEMANTIC          SEMANTIC                         │
    │  (Generic)             (Meaningful)                     │
    │  ─────────────         ──────────────                   │
    │                                                         │
    │  <div>                 <header>  🎩                     │
    │  <div>                 <nav>     🧭                     │
    │  <div>                 <main>    ⭐                     │
    │  <div>                 <section> 📦                     │
    │  <div>                 <article> 📰                     │
    │  <div>                 <aside>   📎                     │
    │  <div>                 <footer>  👟                     │
    │                                                         │
    │  Semantic elements tell the browser (and humans!)       │
    │  WHAT the content IS, not just that it exists.          │
    │                                                         │
    └─────────────────────────────────────────────────────────┘

5️⃣ Create Your CSS File

📄 Create file: styles.css

/* 🎨 CSS Styles for My Library */

/* 🌍 Global styles - apply to everything */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 💪 Body styles */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f4f4f4;
}

/* 🎩 Header styles */
header {
    background-color: #2c3e50;
    color: white;
    padding: 20px;
    text-align: center;
}

/* 🧭 Navigation styles */
nav {
    margin-top: 10px;
}

nav a {
    color: white;
    text-decoration: none;
    margin: 0 15px;
    padding: 5px 10px;
}

nav a:hover {
    background-color: #3498db;
    border-radius: 5px;
}

/* ⭐ Main content styles */
main {
    max-width: 1200px;
    margin: 20px auto;
    padding: 20px;
}

/* 📦 Section styles */
section {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* 👟 Footer styles */
footer {
    background-color: #2c3e50;
    color: white;
    text-align: center;
    padding: 15px;
    position: fixed;
    bottom: 0;
    width: 100%;
}

🔍 CSS Selectors explained:

    CSS SELECTORS - HOW TO TARGET ELEMENTS 🎯

    ┌─────────────────────────────────────────────────────────┐
    │                                                         │
    │  SELECTOR        TARGETS                EXAMPLE         │
    │  ────────        ───────                ───────         │
    │                                                         │
    │  element         All of that type       h1 { }          │
    │                  "All headings"                         │
    │                                                         │
    │  .class          Elements with class    .card { }       │
    │                  "Things marked .card"                  │
    │                                                         │
    │  #id             One specific element   #hero { }       │
    │                  "The one called hero"                  │
    │                                                         │
    │  element element Nested elements        nav a { }       │
    │                  "Links inside nav"                     │
    │                                                         │
    │  :hover          When mouse is over     a:hover { }     │
    │                  "Links being hovered"                  │
    │                                                         │
    └─────────────────────────────────────────────────────────┘

6️⃣ Add Book Cards

✏️ Update your section in index.html:

<section id="books">
    <h2>📖 Our Books</h2>
    <p>Welcome to our library! Browse our collection below.</p>

    <!-- 📚 Book cards container -->
    <div class="book-grid">
        <!-- 📕 Book Card 1 -->
        <article class="book-card">
            <div class="book-cover">📕</div>
            <h3>The Great Gatsby</h3>
            <p class="author">By F. Scott Fitzgerald</p>
            <p class="pages">180 pages</p>
            <span class="status available">Available</span>
            <button class="checkout-btn">Check Out</button>
        </article>

        <!-- 📗 Book Card 2 -->
        <article class="book-card">
            <div class="book-cover">📗</div>
            <h3>To Kill a Mockingbird</h3>
            <p class="author">By Harper Lee</p>
            <p class="pages">281 pages</p>
            <span class="status available">Available</span>
            <button class="checkout-btn">Check Out</button>
        </article>

        <!-- 📘 Book Card 3 -->
        <article class="book-card">
            <div class="book-cover">📘</div>
            <h3>1984</h3>
            <p class="author">By George Orwell</p>
            <p class="pages">328 pages</p>
            <span class="status checked-out">Checked Out</span>
            <button class="checkout-btn" disabled>Unavailable</button>
        </article>

        <!-- 📙 Book Card 4 -->
        <article class="book-card">
            <div class="book-cover">📙</div>
            <h3>Pride and Prejudice</h3>
            <p class="author">By Jane Austen</p>
            <p class="pages">279 pages</p>
            <span class="status available">Available</span>
            <button class="checkout-btn">Check Out</button>
        </article>
    </div>
</section>

7️⃣ Style the Book Cards with Flexbox

✏️ Add to styles.css:

/* 📚 Book Grid - Using CSS Grid! */
.book-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

/* 📖 Individual Book Card */
.book-card {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
}

.book-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* 📕 Book Cover Emoji */
.book-cover {
    font-size: 4rem;
    margin-bottom: 10px;
}

/* 📝 Book Title */
.book-card h3 {
    color: #2c3e50;
    margin-bottom: 10px;
}

/* ✍️ Author */
.author {
    color: #666;
    font-style: italic;
    margin-bottom: 5px;
}

/* 📄 Pages */
.pages {
    color: #888;
    font-size: 0.9rem;
    margin-bottom: 10px;
}

/* ✅ Status Badge */
.status {
    display: inline-block;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: bold;
    margin-bottom: 10px;
}

.status.available {
    background-color: #d4edda;
    color: #155724;
}

.status.checked-out {
    background-color: #f8d7da;
    color: #721c24;
}

/* 🔘 Checkout Button */
.checkout-btn {
    background-color: #3498db;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s;
}

.checkout-btn:hover {
    background-color: #2980b9;
}

.checkout-btn:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

8️⃣ Make It Responsive with Media Queries

✏️ Add to the bottom of styles.css:

/* 📱 Responsive Design - Media Queries */

/* Tablets and smaller desktops */
@media (max-width: 768px) {
    header {
        padding: 15px;
    }

    nav a {
        display: block;
        margin: 5px 0;
    }

    .book-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }

    footer {
        position: static;
    }
}

/* Mobile phones */
@media (max-width: 480px) {
    header h1 {
        font-size: 1.5rem;
    }

    .book-grid {
        grid-template-columns: 1fr;
    }

    .book-card {
        padding: 15px;
    }

    main {
        padding: 10px;
        margin-bottom: 0;
    }
}

🔍 How media queries work:

    RESPONSIVE DESIGN 📱💻🖥️

    ┌─────────────────────────────────────────────────────────┐
    │                                                         │
    │  @media (max-width: 768px) { ... }                     │
    │                                                         │
    │  ↑ "When the screen is 768px or smaller,               │
    │     use these special styles"                           │
    │                                                         │
    │  SCREEN SIZE BREAKDOWN:                                 │
    │                                                         │
    │  🖥️ Desktop     >1024px    Full layout, multiple cols  │
    │  💻 Tablet      768-1024px  Adjusted layout            │
    │  📱 Mobile      <768px      Single column, stacked     │
    │                                                         │
    │  The page ADAPTS to fit any device! 🎯                 │
    │                                                         │
    └─────────────────────────────────────────────────────────┘

9️⃣ Add More HTML Elements

✏️ Add a search bar above your book grid:

<!-- 🔍 Search and Filter Section -->
<div class="search-bar">
    <input type="text" id="search" placeholder="🔍 Search books...">
    <select id="filter">
        <option value="all">All Books</option>
        <option value="available">Available Only</option>
        <option value="checked-out">Checked Out</option>
    </select>
</div>

✏️ Add styling for the search bar:

/* 🔍 Search Bar */
.search-bar {
    display: flex;
    gap: 10px;
    margin: 20px 0;
    flex-wrap: wrap;
}

.search-bar input {
    flex: 1;
    min-width: 200px;
    padding: 10px 15px;
    border: 2px solid #ddd;
    border-radius: 5px;
    font-size: 1rem;
}

.search-bar input:focus {
    border-color: #3498db;
    outline: none;
}

.search-bar select {
    padding: 10px 15px;
    border: 2px solid #ddd;
    border-radius: 5px;
    font-size: 1rem;
    background-color: white;
    cursor: pointer;
}

🔟 Commit Your Work

git init
git add .
git commit -m "Create HTML & CSS library interface"

📊 Visual: Common CSS Properties

    CSS PROPERTIES CHEAT SHEET 📋

    ┌─────────────────────────────────────────────────────────┐
    │  TEXT PROPERTIES ✏️                                     │
    │  ─────────────────                                      │
    │  color: #333;              Text color                   │
    │  font-size: 16px;          Text size                    │
    │  font-family: Arial;       Font type                    │
    │  font-weight: bold;        Bold text                    │
    │  text-align: center;       Alignment                    │
    │  text-decoration: none;    Remove underline             │
    └─────────────────────────────────────────────────────────┘

    ┌─────────────────────────────────────────────────────────┐
    │  BOX PROPERTIES 📦                                      │
    │  ───────────────                                        │
    │  width: 200px;             Width                        │
    │  height: 100px;            Height                       │
    │  margin: 10px;             Space outside                │
    │  padding: 15px;            Space inside                 │
    │  border: 1px solid #ccc;   Border                       │
    │  border-radius: 10px;      Rounded corners              │
    └─────────────────────────────────────────────────────────┘

    ┌─────────────────────────────────────────────────────────┐
    │  BACKGROUND 🎨                                          │
    │  ────────────                                           │
    │  background-color: #fff;   Solid color                  │
    │  background-image: url();  Image                        │
    │  box-shadow: 0 2px 5px;    Drop shadow                  │
    └─────────────────────────────────────────────────────────┘

    ┌─────────────────────────────────────────────────────────┐
    │  LAYOUT 🏗️                                              │
    │  ────────                                               │
    │  display: flex;            Flexbox container            │
    │  display: grid;            Grid container               │
    │  position: relative;       Positioning                  │
    │  gap: 10px;                Space between items          │
    └─────────────────────────────────────────────────────────┘

💬 Group Reflection (5 minutes)

🔄 Circle Share - Answer one:

"HTML is like ___ because..."
"The box model reminded me of..."
"Flexbox/Grid makes it easy to..."
"One CSS property I want to experiment with is..."

✅ Run & Test Checklist

📄 HTML file has proper structure (doctype, html, head, body)
🏷️ Used semantic elements (header, main, section, footer)
🎨 CSS file is linked and working
📦 Box model is understood (margin, border, padding, content)
📚 Book cards display in a grid
🖱️ Hover effects work on cards and buttons
📱 Page looks good on mobile (resize browser to test)
✅ All navigation links work

🚀 Bonus Challenges

⭐ Challenge 1: Add More Books (Elementary)

Add 4 more book cards with different titles and authors.

⭐⭐ Challenge 2: Create a Book Detail Page (Middle School)

Create a new book-detail.html page that shows more info about one book:

Full description
Publication year
Genre
Reviews

⭐⭐⭐ Challenge 3: CSS Animations (High School)

Add CSS animations:

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.book-card {
    animation: fadeIn 0.5s ease-out;
}

⭐⭐⭐ Challenge 4: CSS Variables (High School)

Use CSS custom properties for theming:

:root {
    --primary-color: #2c3e50;
    --secondary-color: #3498db;
    --success-color: #27ae60;
    --danger-color: #e74c3c;
}

header {
    background-color: var(--primary-color);
}

📖 Vocabulary Wall

Term	📝 Kid-Friendly Definition	💻 Example
🏷️ HTML	Language that structures web pages	`<h1>Hello</h1>`
🎨 CSS	Language that styles web pages	`color: blue;`
📦 Element	A piece of content with tags	`<p>Text</p>`
🏷️ Tag	Markers that define elements	`<h1>` and `</h1>`
✨ Attribute	Extra info added to elements	`<a href="...">`
🎯 Selector	Targets elements to style	`h1`, `.class`, `#id`
📦 Box Model	Content + Padding + Border + Margin	Every element is a box!
🤸 Flexbox	Layout system for flexible boxes	`display: flex;`
📊 Grid	Layout system for rows & columns	`display: grid;`
📱 Responsive	Adapts to different screen sizes	`@media (max-width:)`

🏠 Take-Home Connection

👨‍👩‍👧 Talk to a family member:

"Today I learned HTML and CSS! HTML is like the skeleton of a webpage - it creates the structure. CSS is like the clothes and makeup - it makes things look pretty! Every website you visit uses these languages."

🌍 Real-world examples:

🛒 Amazon uses HTML to list products
📘 Facebook uses CSS for its blue color scheme
🎮 Video game websites use CSS animations
📰 News sites use CSS Grid for article layouts

📝 Activity: Open any website and right-click → "Inspect" to see the HTML and CSS! Try changing some colors and see what happens. (Don't worry, you can't break it - refresh to reset!)

🎉 You Did It!

    YOUR FIRST WEBPAGE! 🏆

    ┌─────────────────────────────────────────────────────────┐
    │                                                         │
    │  You learned:                                           │
    │                                                         │
    │  📄 HTML Structure                                      │
    │     doctype, html, head, body                          │
    │                                                         │
    │  🏷️ Semantic Elements                                   │
    │     header, main, section, article, footer             │
    │                                                         │
    │  🎨 CSS Styling                                         │
    │     Colors, fonts, spacing, borders                    │
    │                                                         │
    │  📦 Box Model                                           │
    │     Content, padding, border, margin                   │
    │                                                         │
    │  🏗️ Modern Layouts                                      │
    │     Flexbox and CSS Grid                               │
    │                                                         │
    │  📱 Responsive Design                                   │
    │     Media queries for mobile                           │
    │                                                         │
    └─────────────────────────────────────────────────────────┘

🔮 What's Next!

    SESSIONS 17-18: COMING UP! 🚀

    🎯 Session 17: JavaScript Basics
    ─────────────────────────────────────
    • Make your page interactive!
    • Handle button clicks
    • Change content dynamically

    🔗 Session 18: Connecting to APIs
    ─────────────────────────────────────
    • Fetch data from YOUR Library API
    • Display real books
    • Build a complete web app!

    Your webpage is about to come ALIVE! 🎉

Keep building! 🏗️

Navigation Menu

Repository navigation

README.md

README.md

🌐 HTML & CSS Foundations

📸 Lesson Snapshot

🎯 Age-Tiered Learning Goals

🎨 Before You Code: Hands-On Activities (15 minutes)

🎮 Activity 1: The House Blueprint Game (Whole Class)

💃 Activity 2: The Box Model Dance (Whole Class)

🃏 Activity 3: Tag Matching Card Game (Groups)

🗺️ Visual: HTML Document Structure

🗺️ Visual: CSS Box Model

🗺️ Visual: Flexbox Layout

🗺️ Visual: CSS Grid Layout

📁 Folder & File Map

✅ Prerequisites

🛠️ Step-by-Step Build Guide

1️⃣ Create Your Project Folder

2️⃣ Create Your First HTML File

3️⃣ Open in Browser

4️⃣ Add Semantic Structure

5️⃣ Create Your CSS File

6️⃣ Add Book Cards

7️⃣ Style the Book Cards with Flexbox

8️⃣ Make It Responsive with Media Queries

9️⃣ Add More HTML Elements

🔟 Commit Your Work

📊 Visual: Common CSS Properties

💬 Group Reflection (5 minutes)

✅ Run & Test Checklist

🚀 Bonus Challenges

⭐ Challenge 1: Add More Books (Elementary)

⭐⭐ Challenge 2: Create a Book Detail Page (Middle School)

⭐⭐⭐ Challenge 3: CSS Animations (High School)

⭐⭐⭐ Challenge 4: CSS Variables (High School)

📖 Vocabulary Wall

🏠 Take-Home Connection

🎉 You Did It!

🔮 What's Next!

FilesExpand file tree

README.md

Latest commit

History

README.md

File metadata and controls

🌐 HTML & CSS Foundations

📸 Lesson Snapshot

🎯 Age-Tiered Learning Goals

🎨 Before You Code: Hands-On Activities (15 minutes)

🎮 Activity 1: The House Blueprint Game (Whole Class)

💃 Activity 2: The Box Model Dance (Whole Class)

🃏 Activity 3: Tag Matching Card Game (Groups)

🗺️ Visual: HTML Document Structure

🗺️ Visual: CSS Box Model

🗺️ Visual: Flexbox Layout

🗺️ Visual: CSS Grid Layout

📁 Folder & File Map

✅ Prerequisites

🛠️ Step-by-Step Build Guide

1️⃣ Create Your Project Folder

2️⃣ Create Your First HTML File

3️⃣ Open in Browser

4️⃣ Add Semantic Structure

5️⃣ Create Your CSS File

6️⃣ Add Book Cards

7️⃣ Style the Book Cards with Flexbox

8️⃣ Make It Responsive with Media Queries

9️⃣ Add More HTML Elements

🔟 Commit Your Work

📊 Visual: Common CSS Properties

💬 Group Reflection (5 minutes)

✅ Run & Test Checklist

🚀 Bonus Challenges

⭐ Challenge 1: Add More Books (Elementary)

⭐⭐ Challenge 2: Create a Book Detail Page (Middle School)

⭐⭐⭐ Challenge 3: CSS Animations (High School)

⭐⭐⭐ Challenge 4: CSS Variables (High School)

📖 Vocabulary Wall

🏠 Take-Home Connection

🎉 You Did It!

🔮 What's Next!