logo
food-website-prototype

Food Explorer

Responsive Site Development HTML | SCSS | GITHUB

  • Working in a team of 2, we were given a mock-up of a single page of a website and asked to recreate it exactly.
  • Project Length: 2 Weeks
View The Site Live

Summary

The objective of this group-project was to create a one-page responsive site that is compatible across all devices – desktop, tablet and mobile. This project ties together two things I am passionate about: food and resturant reviews & responsive design. We were provided with the mockups of different screen-sizes.We used GitHubfor version control and working remotely and Terminalcommand editor for watching the SASSchanges and compling the stylesheet.

Process

This project started with introducing the SASS and GitHub to the group members. We setup Sass Watch commands in the Terminal so SASS can compile the stylsheet from the partial files. The second thing we create a repository in the github for working remotely.

Roles and Responsibilites

In the group of two members, we create the HTMl markup and desktop design together. Using Sass, we started by creating a file of common variables we would both need (such as colours, design breakpoints etc.) and adding more as they came up. After that, we divide the duties;I was responsible for creating the phone-landscape, phone-portrait and the tablet screen sizes. we used sprite sheet for the social icons and olderpost.

Things To Improve

For the most part this went really smoothly being one of our first collaborations. We went from desktop to mobile though which was a mistake and made the CSS messier than it needed to be. Due to this, in future projects I went from small to large with my media queries instead with better results. We faced some file conflict during the process which was mostly because we were try to figure out some issues at the same times. In future, I will strictly try to do one thing at a time instead of going crazy to solve all issues at once.

Final Result

At the end of this group-project , we were successful to meet the desire requirements. The responsive design almost exactly same on all specific screen sizes which were provided by the instructor.

Experience

This project was my first group-project, so I learn so many things from it. First, working with other member was really a good experience because I learn new things such as opacity , using sprite sheet in the project. Also, how to agree and get along with other member when you are part of a group and have your like and dislike about different ideas.