Practical Gardening Guide
Launch Interactive Demo
What it is
A structured, self-contained HTML reference guide for practical gardeners. Works fully offline — no server, no API calls, no framework runtime. Open it once in any browser and it’s ready to use.
The guide covers 25 crop species, integrated pest management (IPM), soil principles, watering strategies, and a searchable glossary of 200+ gardening terms with hover-activated definitions.
Sections
Foundations: Seven garden laws that govern success across climate, time, and technique.
Soil, Water, Care: Principles of soil structure, amendment, watering frequency, and seasonal adjustment.
Pest Management: An 8-step Integrated Pest Management ladder, from prevention through selective chemical intervention.
Systems & Skills: The craft of garden rhythm, crop rotation, and succession planting.
Crop Guides: 25 detailed cards covering vegetables, herbs, perennials, and flowers with planting windows, spacing, and harvest schedules.
Glossary: 200+ terms with instant definitions — hover on any dashed term in the text.
Design and interaction
Responsive earth-toned color scheme: olives, terracotta, cream. Typography: Playfair Display for headers, Lora for body, DM Sans for labels.
Minimal vanilla JavaScript handles: sticky navigation with active section tracking (IntersectionObserver), scroll-to-top button, and a live glossary search filter. No external dependencies or frameworks.
Print-friendly — styled to render cleanly on paper or PDF.
What This Demonstrates
- Structured knowledge design for practical, hands-on domains
- Offline-capable reference material without framework overhead
- Responsive HTML/CSS/vanilla-JS without npm, bundlers, or build pipelines
- Interactive glossary and navigation patterns for field-reference use