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
| 🧒 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 |
🎬 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!"
📦 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!"
🔀 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" 📦
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
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 */ │
│ } │
└─────────────────────────────────────────────────────────┘
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! ↔️ │
└─────────────────────────────────────────────────────────┘
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 */ │
│ } │
└─────────────────────────────────────────────────────────┘
Session16/
├── README.md ← 📖 This lesson plan
├── index.html ← 🏠 Your webpage structure
├── styles.css ← 🎨 Your styling rules
└── .gitignore ← 🙈 Files Git should ignore
- ✅ Completed Session 15 (Testing APIs)
- ✅ A text editor (VS Code recommended)
- ✅ A web browser (Chrome, Firefox, Edge)
📂 Create a new folder for your project:
mkdir library-frontend
cd library-frontend📄 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!
🌐 Double-click index.html to open it in your browser!
┌──────────────────────────────────────────────────────────┐
│ 📚 My Library ← ─ □ ✕ │
├──────────────────────────────────────────────────────────┤
│ │
│ Hello, World! │
│ │
│ │
│ │
└──────────────────────────────────────────────────────────┘
🎉 You made your first webpage!
✏️ 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>© 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. │
│ │
└─────────────────────────────────────────────────────────┘
📄 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" │
│ │
└─────────────────────────────────────────────────────────┘
✏️ 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>✏️ 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;
}✏️ 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! 🎯 │
│ │
└─────────────────────────────────────────────────────────┘
✏️ 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;
}git init
git add .
git commit -m "Create HTML & CSS library interface" 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 │
└─────────────────────────────────────────────────────────┘
🔄 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..."
- 📄 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
Add 4 more book cards with different titles and authors.
Create a new book-detail.html page that shows more info about one book:
- Full description
- Publication year
- Genre
- Reviews
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;
}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);
}| 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:) |
👨👩👧 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!)
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 │
│ │
└─────────────────────────────────────────────────────────┘
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! 🏗️