Learn by Cloning : fassos Project Clone

As a team Cloning a project from Scartch.

Let me give idea about, What we are going to discuss in this blog, We made project during the construct week at Masai School. There were a total 33 teams, and each team was assigned a website to clone, and we got Fassos. Being in unit-2, My team has only liberty to use HTML, CSS, and Javascript. This blog give power of cloning the Fassos Webpage with help of above mentioned techstack.

Some snapshots of how out website looks :

REAL ONE

landing page

signup Page

;

Login Page

;

landing page(When user Login into the website)

;

Order Page

;

Address page

; ;

Payment Page

;

Working in Team

Working in a team helps you in numerous ways, But at the same time, It has many caveeats also, So first look at what all help will you get while working in a team.

• More input will be there, Everone in the team has different approaches, So you will get creative ideas
• Teaches conflict resolution skills
• Promotes a wider sense of Ownership
• Increase the interpersonal skills
• Some team member are extremily good at some area
• Project work should be distrubted based on their interest an sensibility One caveat of working in a team that i felt was of major concern:

• Unequal involvment and Participation of different members

"This might delay and drastically affect other component of the website"

Starting with the project

First we have gone through the given website, We tried to understand processes or functionality and structure of the website,then we have the website creation into modules and then based on our teammates interest, work is divided amoung them.

planning out the website

"closely examine the each page structure and process of the entire webpage and identifing the main component in the website"

The above step help us to understand the structure of webpage. So, After we created blueprint of the website with the help of excalidraw. We divided each part among themseleves.

For a website, The main components are :

1. UI/UX Design of the webpage.
2. Functionalities in the webpage.

Front-end Part

For the first 2 days, 2 member of my team start working only on UI/UX. They did all the HTML and CSS parts for the webpage. Some point to note :

• Maintain consistency of working on HTML.
• Keep Color codes same as of original website(use extensions also if required)
• Add Comment on Each and Every part, So that It will give better understanding of each part.
• Try to merge the code in alternate day or that day itself, Because while merging a lot of issuse arrises at the first time doing project in collabration.

Just an example of how to keep your CSS consistent:

Some points to keep in mind :

• Try to use selectors rather than inline style tag.
• Use percentages to make website dynamic, Try to avoid usage of pixel.
• Avoid floats and clear, For Better website alignment use flex and grid.

Functionality

• Main Functionalities in our projects were :
  • Login/Signup
  • Products
  • Cart
  • Payment
  • Adding Address

There are more funtionalities, But let's just focus on the main ones right now.

Firstly we need forms to get details of users: image

So, We have used set eventlisthener to form and can store the data of users in out localStorage When user submit the form.

Below is some idea about how data stored in out localStorage : image

Some of the Key point to note in javascript(localStorage)

• Avoid usage of var, Use let and const.
• Use JSON.Parse and JSON.Stringify to retrieve and to store from the LocalStorage.
• Make seperate function for different task, It will be helpful is debugging of the code.

Thankyou so much for reading the blog.