For this project, I was inspired by the recent tragedy in Australia, where the wildfires have killed about a third of the koala population. I wanted to make an informational website about koalas, their endangered status, and how we can help prevent and help them from going extinct. The website will also be a celebration of life of koalas - highlighting fun facts, cute pictures, behaviors - in the beginning to set the user to empathize with koalas, and then at the end of the website will be more serious facts about their endangered status as well as resources to help koalas live.
Tools: HTML/CSS, JavaScript, wow.min.js (Library), material.min.js (Library)
Website Link: Visit the Website Here
Koala logo animation
The user is anyone who likes animals; not necessarily someone who is looking for deep scientific knowledge. So, for the website, I made sure to balance the scientific information about koalas with big pictures and icons to keep the information fun and interesting.
To make it fun, the website uses many animations such as the fade-in on the text, the animated koala logo, and the parallax. There are many trees throughout the website to tie into my environmentalism message. The website also uses a glass effect on the nav bar to create visual interest.
This was a great experience for me to code in HTML/CSS and learn to importance of making design patterns and reusing designs to make the website easier to code. Making the website responsive was a bit challenging because I had to recalculate the absolute positioning of the images and I had to adjust the images for mobile view. Eventually, I also had to adjust the website mock alot along the way so to make it better for me to code. For the next round, I want to make the text more readable and make the overall structure tighter.