Flood Safety Guidelines

Stay Prepared. Stay Safe. Your Guide Before, During, and After a Flood.

Comment

Inspiration

Floods are one of the most common natural disasters worldwide, and many people don’t know what to do before, during, or after a flood. As students, we wanted to create a simple, easy-to-understand website that provides practical guidance, especially for families and communities in flood-prone areas. Our goal was to make flood preparedness accessible and actionable.

What it does

  • Provides step-by-step instructions for Before, During, and After a flood.
  • Highlights critical safety warnings to prevent injuries and accidents.
  • Suggests practical preparedness measures like emergency kits, evacuation planning, and home safety.
  • Offers community and recovery guidance, including health precautions, damage assessment, and supporting neighbors.
  • Gives extra tips for families to stay prepared, such as keeping cash, laminated emergency contacts, and checklists.

How we built it

  1. Planned Content: Researched flood safety guidelines from official sources and structured them into three phases.
  2. HTML Layout: Used a container-based layout with headings, cards, and bullet points for each guideline.
  3. Styling with CSS: Applied card shadows, colors, and responsive grids for readability and visual appeal.
  4. Optional Enhancements: Added icons, warning callouts, and a tips footer to highlight important advice.

Challenges we ran into

  • Balancing Detail and Simplicity: Including enough safety information without overwhelming the user.
  • Responsive Design: Ensuring the layout looks clean on both mobile and desktop.
  • Time Management: Completing research, content writing, and website building within hackathon hours.
  • Visual Clarity: Making warnings, tips, and instructions visually distinct for better usability.

Accomplishments that we're proud of

  • Built a fully functional, visually organized website from scratch in a short timeframe.
  • Successfully implemented responsive design, making the site accessible on desktop and mobile.
  • Created clear, actionable guidelines that can actually help people prepare for floods.
  • Incorporated design elements like cards, warnings, and tips footer to improve user comprehension.
  • Practiced real-world problem-solving skills by combining research, coding, and design under hackathon constraints.

What we learned

  • HTML & CSS Basics: We learned how to structure a website using semantic HTML, create grids and cards, and apply styling for readability.
  • Responsive Design: How to make content look good on both desktop and mobile screens.
  • Content Structuring: How to organize safety instructions into Before, During, and After sections so they are easy to follow.
  • User Experience (UX) Principles: We practiced highlighting critical information (like warnings) and using visual hierarchy for clarity.

What's next for Flood Safety Guidelines

  • Interactive Features: Add clickable tabs for Before, During, After phases to improve navigation.
  • Multimedia Enhancements: Include images, icons, or short animations to make safety tips more engaging.
  • Localization: Translate guidelines into local languages for wider accessibility.
  • Mobile App / Offline Version: Make an offline version or lightweight app for areas with poor internet connectivity.
  • Community Contributions: Allow users to submit tips or local emergency contacts to keep the content updated.

Built With

Share this project:

Updates