Cloning Of ZARA Website

Hitendra Mali
4 min readJan 23, 2022

--

Hello Everyone, First of all I would like to introduce our team, We are a team of six members, Myself Hitendra and in our team, we have Divyansh, Babli, Rohit, Anjum and Himanshu.

We are a students of Masai School from batch FT-Web-14. Currently we are in Unit-3. The last week of Unit-3 is a Construct Week where group of 5–6 members are allotted by operational team for making projects based on the whatever knowledge we grabbed from Masai till now. So in Unit-3 we learn more about CSS and Advance JavaScript. On the basis of this knowledge we have created a clone website of ZARA.com

We are very much Thankful to our Training and Support Team of Masai for giving us this opportunity to work on real life applications which gives us more basic knowledge regarding web applications how they were created and there functionalities.

Project Description :

Zara is one of the largest international fashion companies. It belongs to Inditex, one of the world’s largest distribution groups.

The customer is at the heart of our unique business model, which includes design, production, distribution and sales through our extensive retail network.

As a team of 6 members we have decided to distribute major parts accordingly to the different sections of our website. I worked on the homepage (HTML, CSS and JavaScript) of the website. Anjum worked on Product Cart to Summary Section (HTML, CSS and JavaScript), Divyansh and Rohit worked on all the Products Section (HTML, CSS and JavaScript), Babli worked on Sign-up and Login Functionality(HTML, CSS and JavaScript) and Himanshu Worked on the Search and design of product page. So within 6 days we have completed this project.

Overview of our Project :

  1. Homepage :-

In below image you can see the homepage our website, we tried our best to clone same as original website.

Homepage

2. Login and Create Account :-

In below image you can see Login and Create Account page. We used some JavaScript for Sign-up and Login Functionalities.

Login and Create account page

3. Menu Section :-

We have added Menu section on the top left corner, if you click on the menu it will show the categories and subcategories of that section.

Menu Section

4. Product Page :-

We have added products from original website and categorized them into different section.

Product(Men)
Product(Women)

5. Cart Section :-

When we add some products using Add to Bag button, the products you have chosen, will showcase into the Cart Section.

Cart Section

6. Shipping Method Page :-

In this section user can choose shipping method as In store Pickup and Home Delivery.

Shipping Method

7. Payment Method :-

We have added different payment methods, users can choose according to there preference, and after selecting any method it will redirect users to final payment page.

Payment Methods
Final Payment Page

8. Summary Page :-

On Summary page you can see the details of user like Name, Delivery address etc. and also the items they wanted to buy, after this your purchase will be completed and Pop Will shown.

Summary Page

If you want to go through our project you can checkout Git repository Link here

Thank you, for reading till the end. Also we are very much grateful to have this opportunity from Masai School.

--

--

Hitendra Mali
Hitendra Mali

No responses yet