OceanGuard: Simple Steps to Protect Marine Life from Home

• 

  OceanGuard WebPage (Quick note: My demo website can't publish on replit unless I get a subscription so I attached only the code not page)

OceanGuard was inspired by the urgent need to protect our oceans and marine life. We wanted to create a tool that empowers individuals, especially in coastal cities like San Diego, to make meaningful environmental changes from home. OceanGuard offers simple, actionable tips to reduce ocean pollution and protect marine ecosystems. Users can explore a variety of suggestions, from reducing plastic use to supporting sustainable seafood choices. We built OceanGuard using HTML and CSS, focusing on a clean, user-friendly design that makes it easy to navigate. Our approach keeps the project lightweight and accessible, while the dropdown format allows users to interact with each tip. We faced challenges in ensuring the layout was responsive and visually appealing on different devices. We also worked to keep the design engaging while still showing important environmental actions. I am proud of creating a tool that can help raise awareness and inspire small changes that collectively make a big impact. The project’s design and simplicity make it accessible for a wide audience, including beginners in environmental activism. We learned about the significance of small actions in environmental conservation and how to build user-centered web interfaces. This project also strengthened our understanding of front-end development with HTML and CSS. Next, we hope to add interactive features and more detailed resources, such as links to local cleanup events and sustainable shopping options. We also plan to collaborate with community organizations to expand OceanGuard’s reach.

Built With

• css
• html