Grab A Bite is a static food blog that is dedicated to eggs Benedict lovers. My friend Inah and I partnered up at the beginning of 2020 to make this static website. We used HTML, CSS, and JavaScript to develop the whole website.
These personas are the representation of our key audiences.
The goal was to create a unique experience for the users. We made mood boards to bring all our ideas together and researched about other food blogs . An interface that was simple, elegant and informative.
For the colour palette we kept it really simple. As this is a website for eggs Benedict, including the yellow and off-white shade was a must. Yellow in general brings a happy, youthful and positive vibe which is also very eye catching. However, that's the feel we wanted our users to experience.
When we decided on the typography, we wanted it to portray a fun website that goes well with our color palette. We picked Leckerli One - regular weight for all the headings. This typeface has a thick irregular brush stroke that's commonly used for short texts and is known for it's display-fun characters. When it came to paragraphs we used Abel - regular weight, which is a modern flat-sided sans serif font, mostly used for posters and we thought it would perfectly balance out the thickness of Lecherli One font.
Grab A Bite was purely built using HTML, styled using CSS and the functionality was created using JavaScript. We used Visual Studio Code code editor to code everything. Find more on GitHub.
I coded the scroll-spy functionality and decided to combine the scroll-spy feature that updates the navigation based on current position and carousel feature that represents the images like a slideshow. This gives users more control to navigate to any image smoothly.
