Flood Safety — Stay Safe, Stay Alive

A beginner-built flood safety guide for Pakistan — with before/during/after tips, emergency contacts, survival kit, and an interactive checklist. Built in pure HTML & CSS.

Comment

🌊 Inspiration

Pakistan's 2022 floods affected over 33 million people and submerged one-third of the entire country. Over 1,700 lives were lost — many because people simply didn't know what to do. There was no clear, simple, local guide they could open in seconds. I built Flood Safety to fix that.

💻 What It Does

Flood Safety is a website that walks users through three critical phases of a flood emergency:

  • Before the Flood — store water, make an emergency kit, plan evacuation routes
  • During the Flood — move to high ground, avoid moving water, listen to alerts
  • After the Flood — wait for clearance, avoid toxic water, document damage

Key features:

  • ✅ Interactive checklist with a live progress bar to track packed items
  • 📞 One-tap Pakistan emergency contacts (Rescue 1122, Police 15, NDMA 1700)
  • 🎒 Survival kit guide — 12 clickable items with tips on why each matters
  • 🖨️ Print mode — the checklist prints cleanly so families can use it offline
  • 📱 Fully responsive — works on mobile, tablet, and desktop

🛠️ How I Built It

I built this using only HTML and CSS with a small amount of vanilla JavaScript — no frameworks, no libraries.

  • CSS custom properties for a consistent design system
  • CSS Grid and Flexbox for responsive layout across all screen sizes
  • JavaScript for tab switching, progress bar updates, and the survival kit modal
  • A dedicated print stylesheet so the checklist works even without internet
  • Google Fonts (Sora + DM Sans) for clean, readable typography

🚧 Challenges I Ran Into

The biggest challenge was making the content genuinely useful for a Pakistani audience — not just a generic flood guide. I researched real NDMA helpline numbers, used actual 2022 flood statistics, and wrote every tip in plain simple English that anyone can understand quickly in an emergency.

Making the layout fully responsive using only pure CSS (no Bootstrap or Tailwind) was also a real challenge I'm proud I solved from scratch.

🏆 Accomplishments I'm Proud Of

  • The interactive checklist with a real-time progress bar
  • One-tap calling from the emergency contacts section
  • A print stylesheet that strips the UI and shows only the checklist
  • Smooth tab transitions and animations using pure CSS keyframes
  • Pakistan-specific content that makes the guide feel real and local

📚 What I Learned

I deepened my understanding of CSS variables, responsive grid systems, and how to write JavaScript that progressively enhances an HTML page. Most importantly, I learned how to design for real users in a crisis — where clarity and speed matter far more than aesthetics.

🔮 What's Next

  • 🌐 Add Urdu language support for rural communities
  • 📡 Integrate live NDMA flood alerts via public data
  • 📶 Add offline support via a Service Worker so it works without internet

Built With

Share this project:

Updates