Building the clone of the Dermstore Website.

Building the clone of the Dermstore Website.

Hello there, you might have seen the Dermstore Website, where you can buy products such as beauty, cosmetics, and skincare.

Moving ahead, we team Gomti at Masai School developed a clone of the website of Dermstore in just 3 days as a part of our curriculum. This blog is all about our journey and the challenges we faced while building the project.

What was my problem statement and how did I approach it:-

So I had a problem statement that I have to create a clone of a website called engagebay.com. Also, I can only use my HTML, CSS, and core JavaScript knowledge. We were four members in our group.

Some Snapshots of our project that we made:-

- Landing Page:- This is the Landing page when the user enters the website for the first time this page will show up.

0001.jpg

0002.jpg

- SIGNUP Page:-

Screenshot 2021-03-16 100123.jpg

- Products Page:-

Screenshot 2021-03-16 100213.jpg

How We divided the work in our Team members:-

As we were four members in our team so it was very important to decide how we will approach the work so that in the future we should not face any problem in merging the code, as well as the tasks, get divided into equal parts. So, on the first day, As a team leader, I made a git repository and everyone was told to make their separate git branch by cloning the repo and push their work there and when they feel that they have completed it. They can show it to one of the members(team leader) and after the approval, they can merge their code to the main branch. I was mainly responsible for making the Landing (Home) page and navigation bar and script part which are similar on all the pages. And my other team members were responsible for the login page, Product page, about page, and brand page and make the page look better.

The outcome and important learning from the project:-

This entire journey of making the project was awesome. We learned lots of things by applying to the real website and it gave us a lot of confidence. Although we could have done more such as we could have added a timer and there were some more functionalities that could have been done, yeah the time didn't permit us to go further. But we will surely improve it. If you want to look at the project then you can go to this link:(darshan-naik.github.io/Dermstore_clone/inde..)

Technology used:

•HTML:Used to build the basic structure of the cloned site. All the headings, paragraphs, links, forms, etc were structured by HTML.

•CSS:Used to add styling to our structure. Background images were used to make the website identical. Also, Grid and Flex boxes were used along with the media queries to make the pages fully responsive.

•JavaScript:Used to add logical functionalities to the page like Onscroll functions login and signup carts and price calculation, animations and also to make the dynamic aspect of the website.

Note: All the image and icon links have been taken from the main website ( dermstore.com ) and some other internet sources and may be subject to copyright. So, try not to use the images or icons for business purposes or reproduce them without prior approval from the owner. The images and icons used here are just for making this project and for learning purposes.