Mar 4
<!DOCTYPE html> …..credobeauty…..</script>
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,
Sign-up & Login Page ,
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”
Homepage or Landing page,
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”
Product listing page,
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)”
Product Description page,
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”
Add to cart page
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”
Checkout page and Payment page
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…
Key Learnings,
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.
Excited and wanna see our project…
Here is the Github repo link of our project: https://github.com/Thannzz/credo-beauty-clone
Until Next Time !!!
Happy reading & happy leanings !!!
