Website Design & Code
Grocery Vancouver - Website Design
Visit WebsiteFor this project, the goal is build a fully funcational front-end ecommerce website using HTML5 and CSS.
I took on the responsibility of maintainging the our Git Repository organization and overall cleaning any code at the end of the project. Both my partner and I split the code work equally between the two of us.
Project
SFU SIAT 339 - Web Design and Development
Project Members
Lucio Chen & Emily Li
Timeline
3 weeks // Summer 2020
Tools
GitKraken, HTML5, CSS, Javascript, Figma
Mock-up & Wireframe
Before building the our site, we made wireflows to help us create a general idea of our website flow. However, some of our flows had to be adjusted along the way, wireflowing still allowed my partner and I to mutually understand each others code. An example of a change from our inital design was a pop-up detail pages when the users clicks on each product but as we coded our site we found it was not practical and is difficult to make resposive.
Because of the nature of an ongoing pandemic, my partner and I were not able to meet up in person and work together. Mock ups were very important in our design communication.
Coding Together
To work collaboratively together, GitKraken was the prime source we used to sync and merge our codes together. This method allowed us to work on the same files together remotely. Throughout this process we learn to become more organize and help each other by writing detail notes for one another.
Design & Coding
The biggest road block in this process was to code the interactive buttons by ourselves. We wanted users to be visually understand what elements are interactive while having a clean layout with enough white space. All while making sure our site is responsive and works with as many screen sizes and browser windows as possible. Our main focus was using HTML5 and CSS as the core structure of our site. Javascript was stylistic choice to make the site run like it would be if it was a real ecommerce site.
Reflection
The entire process of coding a website from scratch was an experience that got myself reflecting on how mock-ups and wireflows really help in delivery an idea to other people. If my partner and I didn't have a clear understanding of how the site worked it was difficult to code or visually see the interactive elements. If I could redo this project again, I would create a detail organize layout structure and class names that can help keep my HTML and CSS codes clean. Visit Website