This working database of Jellyfish types was built with a mobile-first approach as an educational resource in support of our ocean. It features biological and geographical information about each type as well as photos, links to videos and how to identify jellies. There are also call-outs to donate to causes related to protecting our ocean, as well as links to tips on how to help out on an individual level.
Link to project: https://just-jellyfish.cyclic.app/
Tech used: HTML, CSS, JavaScript, Node.js
Just jellies started with jellyfish research, content sourcing (more jelly types will be added - I have developed a very long list at this point haha) and building out a database using Node.js with all of the information I wanted to store and have present within the application. The basic framework for the site was then created using HTML, CSS and vanilla JavaScript using a mobile-first approach, as that is the main way this content will be consumed. I then further customized the styling, tested responsiveness and added media queries for larger resolution screens.
The next step in this project is going to be building out a page that features every Jelly Type together so the user can sort through a visual list as cards, as well as a more interactive and informative homepage for users to explore.
Building with a mobile-first approach greatly changes your content needs as you start to develop larger resolutions. Pairing down the content went more quickly on previous projects when building mobile media queries after initially designing for larger screens. Moving forward with mobile-first builds, I will sketch out mocks for three main resolutions so content can be planned out effectively from the beginning.