Food Explorer

This one-page fully responsive website was a group project for the BCIT Technical Web Design Program. I worked with another team member. The goal was to match the website as closely as possible with the mockups supplied.

HTML, CSS, Javascript, Sass, Github

The Process

Working on this project with another teammate, we each took up sections of the development.

Our instructor helped set up the project on GitHub and Sass. We then worked on setting up the HTML and other shared files together, after which we individually worked on our parts. I worked on the body content, footer and part of the sidebar. Commit to Git was done once at the end of each day,

Mockups (supplied) as below:


Navigation font: Roboto Condensed Bold

Headings font: Roboto Condensed Regular

Body font: Roboto Light

Color Palette


Challenges and Learning

The body content images were a slight challenge. I initially planned on doing it using CSS grid but I was having issues with aligning the images and also the sidebar. So, I decided to use CSS Flexbox instead, which worked well.

This was my first time using GitHub version control and I did have some issues with setup and merge conflicts.