Cloning adidas.com: adidas page which was not Developed by the adidas team.

We are a team of 4 from Masai School Web-12 batch worked on cloning of adidas page as a part of our second unit construct week, and yes, this is a replicate of adidas page which was not worked by the adidas SDE’s.

GitHub Link : github.com/taherahmed14/adidas_project

The topics which I have implemented in our project from our Unit-2 Curriculum

• I have used the basic functionalities involved in HTML and CSS which was taught during our sessions and also used few extra CSS properties where ever necessary.

• Using media query I have made all pages responsive for mobile applications.

• All basics on DOM manipulation have been implemented on all pages.

• The knowledge on local storage has been used efficiently to show the product details on product description page, check out page and in Payment page.

Our Project

As a team we were given a project to clone adidas webpage and we were able to achieve almost all the content we planned on day one to implement on this project like user interactions, functionalities and responsiveness. We have also covered a few extra functionalities and CSS stylings which we decided to implement after we complete the mandatory concepts.

Our project demonstrates a basic flow of an e-commerce page, where a customer can view products, filter them as per their requirements, read about a specific product, add their product to cart, checkout and place his or her happy order.

My Contribution

I started my project by creating a adidas home page using HTML and CSS which was a static page just connecting to the Product listing page.

My primary role was Product description page. On this page, customers can view all the details related to the product and place their order. Here using local storage, I retrieved the data from product page and passed on the data to cart page. Using the proper CSS properties and JavaScript functionalities, I have tried and achieved to make the page responsive with neat UI and better functionality similar to the original.

Some of the key functionalities I have used on this page are,

• Size buttons, were customers can select a size before adding their product to cart.

• Image toggle button, were the customers can view previous and next images of a product.

Apart from this I have also contributed on creating a payment page were the customers can select their payment details, recheck their order details and order summary before they place their order.

And all the pages are worked in such a way they are adaptable for mobile applications as well.

My Team

Mohit Sehrawat

Mohit took the responsibility of working on product listing page, its styling and all filter functionalities. Mohit also contributed on displaying the shipping details on payment page.

Pabitra Saikia

Pabitra has worked on all the HTML, CSS and Java script functionality on Cart page and also, he has contributed on displaying the order details on Checkout page.

Renu Kumari

Renu has contributed on all the HTML, CSS and JavaScript functionalities on signup page, forgotten password page, and check out page.

Apart from this each of the team members have worked on the media query on their corresponding pages.

What did I Learn?

• By end of this project, I was able to learn how effective a work can be done as a team when ideas are trajected in multiple spectrums.

• The coordination while presenting the project was a new experience for all the members in team which was fun driven as well as a professional learning.

• The effective learning involves how we were able to suggest constructive feedback on each other’s work and debug before we present our project.