Inspiration

Initially fueled by the MarkiHacks prompts, our team of 3 set out to to create some elaborate game/ interactive app to help others. We were massively outmatched, not surprising for beginner "hackers". After participating in one of the first workshops about HTML and CSS, making a pretty website sounded really nice. Sticking to the theme of making it at least somewhat helpful for others, we settled on the idea of making a large condensed list of the different sea life that have been labeled as endangered. The sea has been kind of easy to forget during times where we don't get out much, but as a tribute to our mother earth and the crazy divers ecosystems in the water, not only did we want to gain knowledge on the different types of creatures that lay into the ocean but we wanted to do so in a way that was easy to understand for busy people. A minute or two is all it takes to start a change.

What it does

This website provides information on a variety of endangered marine species. It also outlines some simple measures individuals can take at home to help prevent their decline and for the benefit of not broke college students includes some links to organizations who specialize in the conservation of marine life. To round it all off there is a fun little quiz at the bottom of the webpage which labels you as one of the endangered species.

How we built it

This webpage was build with a combination of HTML, CSS and Java. HTML was used to build the main body of the webpage. CSS was used to make it look nice. Java was used to facilitate the quiz at the end. The website was also constructed with caffeine, sugar, sleep deprivation and fun.

Challenges we ran into

As, once again, beginners, we were faced with a couple of silly challenges. For starters, how does one really format a website? Thankfully the Intro to Web Dev Workshop (hosted by MariHacks and their sponsors) we watched as a team gave us a bit of an incite on how to start. We roughed out an idea as a group and got to work, splitting the tasks between writing in code, doing some research and customization. Our second struggle came from learning the site we were using and its special features. Since we were not very fast with writing down the code, the site we shared our website on, Glitch, liked to fill in the closing code on anything we wrote at an inconsistent rate. This lead to many lines being invalidated and many minutes spent trying to fix it. Our third struggle cant really be qualified as a struggle; A learning curve is definitely expected when undertaking new tasks. We had to look up a few tutorials on both CSS and HTML tags to pretty up our site with borders, clickable buttons, links that linked within the page and more. We are proud to say that we gained a lot of base knowledge with this project.

Accomplishments that we're proud of

The highlights of our website are: The animal panels, which drop down when you hover over then to reveal the information bellow. This required a lot of research and work with CSS to learn to format it properly. The game, which was a challenge to implement but proved to be a success and rather fun as well. This required a foray into Java script which none of us had ever attempted before and required some advancement in our HTML skills as well. The search bar which was also challenging to format at first. This required us to learn how to ID different segments of code as well as how to format internal links. It also required the use of several new functions in CSS.

What we learned

Throughout this project we all gained a much deeper understanding of the workings of HTML, CSS and Java. We were able to expand on the basics we learned in the HTML and CSS workshop

What's next for Save The Oceans

Ideally we will be able to procure a proper domain name for the site, and will be able to publish it on the web. As a beginner coding project a successful, functional website in 24 hours is an accomplishment. Further expansions could include more detailed conservation information. Links to current funding missions and perhaps it's own initiative to help fund marine conservation.

Built With

Share this project:

Updates