Hi everyone,

I'm Thanigaivel, a Student of Masai School Web_16 batch. In our second unit of full-stack web development course, we were given a task to clone a website called credo beauty in our construct week project.

Our project is a typical e-commerce website clone. The flow of our website starts from a landing page then to a product page that leads to a description page which takes to cart and payment page.

Our Team Members,

Our team consists of six people :

Bipin Mishra

Karina Kairhnar

Nagesh Kumawat

Saurabh Singh

Thanigaivel

Vishal Bharti

Build-up structure,

We were able to structure this website using tech stacks like -

HTML layout

CSS styles

Media Queries

JavaScript DOM

LocalStorage

My responsibilities,

A crystal clear user-friendly product listing page. Which list all the products similar to the official website. I added the functionality for filtering out the product using “Brand” “Category” “Ingredients” & “Price”. Users can search and filter the products as per their needs. I also added another functionality for sorting out all the products on the page by price “High to low” & “Low to high”. Few mouseover functions and styling were also added for user attraction.

Project Walkthrough,

Login &Sign-up page was done by Bipin Mishra.

If the user is new & doesn’t have an account. He/She needs to create an account using the Sign-up page and that data is stored using local storage and this data is verified when the user is logged in using the login page. This page is done by “Bipin Mishra”

After login, the user lands on our homepage.

Here we have provided the categories Trending products, New Arrivals, Bestsellers, etc. We gave links to that respective product listing pages. This page is done by “Nagesh Kumawat”

The user lands on our product page. This page list all the products on our website. The user can click on the desired product to know more about that product. It will take you to the product description page. This is done with the help of local storage. This page is done by “Thanigaivel(me)”

Here, the user can find all the details of the product. If the user likes the product and wants to buy it, just need to click on the “ADD TO CART” button. This will take us to Add to the cart page where we can view products and every detail. This page is built by “Vishal Bharti”

This product is moved to the cart with the help of local storage and if we want to continue shopping we simply click on that continue shopping button this will take us back to the product page. If we need to buy this product click on “CONTINUE TO CHECKOUT”. This page is built by “Saurabh Singh”

On this checkout page, the user needs to enter his delivery details and payment option. After entering all the details the user needs to click “Continue to shopping” which leads to the payment page. Here the user needs to enter the card details and click “Pay Now” to place the order. After placing the order, the user will be notified with an “Order Placed” alert message. This page is done by “Karina Khairnar”

This is the overall walkthrough of our project…

From this construct week's projects, we learned how effectively we can use the DOM to make our static page more responsive. Another thing is about Local Storage. Without the knowledge of local storage, we cant be able to do this much in this project.

Here is the Github repo link of our project: https://github.com/Thannzz/credo-beauty-clone

Until Next Time !!!

Happy reading & happy leanings !!!

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

How to Export Word documents into PowerPoint presentations?

How to Export Word documents into PowerPoint presentations?

End User Training is Pivotal to the Modern Employee Journey

The dos + don’ts of how to use your logo in your website design

Technology has changed us

Bose Headphones — What’s Missing?

Top 5 Onboarding Practices to Skyrocket Your Retention Rates

Decisions, Decisions, Decisions…

We just ordered some new band stickers and I thought I should give you all a chance to get some…

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Thani

Thani

More from Medium

How to get items side-by-side

Word Cloud with HTML and CSS Tutorial

Difference Between HTML and CSS

Why I Dropped a PowerApps Project!