Inspiration
Flooding is one of the most common natural disasters, and many people don’t know what to do before, during, or after it happens. I wanted to build something simple that could help people stay safe by giving clear instructions in one place.
What it does
FloodSafetyGuide is a simple website that provides step-by-step guidance on what to do before, during, and after a flood. It also includes an emergency checklist to help users prepare essential items ahead of time.
How we built it
I started with a basic template and then built the website using HTML and CSS in VS Code. I structured the content into sections and used Flexbox and Grid to organize everything neatly. I also focused on spacing, typography, and layout so the site is easy to read and works well on both desktop and mobile screens.
Challenges we ran into
There weren’t any major problems, but I spent time making sure the layout looked right on different screen sizes. Getting spacing, alignment, and responsiveness to feel consistent took some trial and error.
Accomplishments that we're proud of
I’m proud of creating a clean, user-friendly website that clearly communicates important safety information. The layout is simple, responsive, and easy to understand, which is important for emergency situations.
What we learned
I improved my skills in structuring web pages with HTML and styling layouts using CSS (Flexbox and Grid). I also learned how to present information clearly and effectively for users.
What's next for FloodSafetyGuide
If I continue developing this project, I would focus on making it more interactive and useful in real-world situations:
- Simple animations to highlight important info
- More disaster guides (not just floods)
- Improve accessibility (larger text options, better contrast, simpler navigation)
- Maybe a way to personalize advice based on location
- Add a downloadable emergency plan or checklist users can save or print
Log in or sign up for Devpost to join the conversation.