CSS Box Model — Interactive Learning Website

A visual, interactive educational website that teaches the CSS Box Model using the Feynman Technique. Built with pure HTML, CSS, and Vanilla JavaScript — no frameworks, no dependencies.

---

Live Pages

Page	File	Purpose
Landing	index.html	Core concepts + interactive playgrounds
Deep Dive	pages/know-more.html	Full Feynman-style deep explanation

---

Project Structure

css-box-model/
├── index.html                  ← Landing page
├── README.md                   ← This file
├── DESCRIPTION.md              ← Project overview & design notes
│
├── css/
│   └── style.css               ← Full design system (variables, components, layout)
│
├── js/
│   ├── main.js                 ← Entry point, initializes all modules
│   ├── boxPlayground.js        ← Box model visualization logic
│   ├── divPlayground.js        ← Real <div> playground + live CSS panel
│   └── utils.js                ← Scroll reveal, nav effects, smooth scroll
│
└── pages/
    └── know-more.html          ← Deep dive page (8 detailed sections)

---

Features

Landing Page (index.html)

Hero Section

• Feynman-style hook ("Every element is a box.")
• Mint-toned radial gradient background
• Smooth scroll-reveal animations on load

Four Layers Explainer

• Card grid explaining Content, Padding, Border, Margin
• Color-coded with the Minty Fresh palette
• Hover lift animations

Box Model Playground

• Live sliders for: Content Width, Content Height, Padding, Border, Margin
• Real-time nested box visualization with labeled layers
• box-sizing toggle: content-box ↔ border-box
• Dynamic total element size readout (width × height)
• Color chips showing each layer's contribution

Interactive DIV Playground

• Sliders control a real <div> element's CSS properties
• Visual margin indicator (dashed border around the element)
• Live CSS code panel — updates in real time as sliders move
• Values flash mint-white on change for clear feedback
• 3-column layout: Controls | Visualization | Code Panel

Deep Dive Page (pages/know-more.html)

Eight fully explained sections using the Feynman Technique:

1. Why the Box Model exists
2. How browsers render elements (layout pipeline timeline)
3. Width & height calculation formulas
4. Padding in depth (with live before/after demos)
5. Border in depth (all border styles shown)
6. Margin & interactions with neighbors
7. Margin collapsing — the "larger value wins" rule
8. content-box vs border-box comparison

---

Tech Stack

• HTML5 — semantic structure, no frameworks
• CSS3 — custom properties, grid, flexbox, transitions
• Vanilla JavaScript — ES6 modules, IntersectionObserver, no libraries

---

Design System

Typography — Helvetica

Role	Weight	Style
Hero headings	Bold 700	Normal
Section titles	Bold 700	Normal
Subheadings	Regular 400	Normal
Body text	Light 300	Normal
Labels / captions	Light 300	Oblique
Callouts / emphasis	Bold 700	Oblique

Type scale: 64px hero → 40px section titles → 24px subheadings → 17px body → 13px labels

Color Palette — Minty Fresh

Role	Hex
Accent / Primary	#558B71
Interactive / Hover	#7FCFA8
Soft Tint	#98FBCB
Page Background	#F7F9F8
Primary Text	#1A1A1A
Secondary Text	#6B6B6B

Box model layer colors:

Layer	Color
Content	#BFFEED
Padding	#98FBCB
Border	#7FCFA8
Margin	rgba(85, 139, 113, 0.20)

---

Running the Project

No build step required. Open directly in a browser:

# Option 1 — open the file directly
open index.html

# Option 2 — serve locally (recommended, enables ES modules)
npx serve .
# or
python3 -m http.server 8080

Then visit http://localhost:8080.

Note: ES module imports (type="module") require a local server. Opening index.html directly as a file:// URL may not load JS modules in some browsers. The inline <script> fallback in index.html handles the playground logic independently for file:// usage.

---

JavaScript Architecture

Each module is self-contained and exported as a named function:

main.js
  ├── initNav()           — sticky nav scroll effect
  ├── initSmoothScroll()  — anchor link smooth scrolling
  ├── initScrollReveal()  — IntersectionObserver reveal animations
  ├── initBoxPlayground() — box model visualization (boxPlayground.js)
  └── initDivPlayground() — real div + code panel (divPlayground.js)

Modules only initialize if their root element exists on the page, so both pages safely import main.js.

---

Browser Support

Works in all modern browsers (Chrome, Firefox, Safari, Edge). Requires:

• CSS custom properties
• CSS Grid & Flexbox
• ES6 modules (or the inline <script> fallback)
• IntersectionObserver API

---

License

Built for educational purposes. Free to use, adapt, and share.