How we made the clone of “Pottery Barn” website

This blog is a short explanatory blog of our experience on making our own website. we would love to share our experience of working on a project assigned to us by Masai School in unit 3. The goal was to clone the website “Pottery Barn” and successfully apply our skills that we learned so far. I have to say it was far more difficult than I thought it would be. We learned what cannot be taught , but it must be experienced.

Pottery Barn website info:

Upscale home furnishing store which sells indoor and outdoor furniture, bedding, dinnerware, linens, and home décor.

our team consist of total 3 members, their names are as follows:

* Kamal Kishor Rajput
* Hrutugandha Nishigandha
* Sumit Ranjan

Tech Stack used:

*HTML-5
* CSS-3
* JS-DOM

Pages Build :

* Landing Page

* Make-Up Page

* Brushes Page

* signup & login Page

Expectations:

We are expecting to create a pixel-perfect cloned site of Pottery Barn website within a week, with all its pages, giving proper HTML, CSS properties, using DOM and media query concepts with respect to the official Sugar Cosmetics website. The task of the successful cloning of a website named Sugarcosmetics.com in 7 days.

Functionalities Added:

*Carousels
* Add to Cart products
* Sorting by price
* Quantity change Functionality
* Payments System
* Address Adding Functionality

HOW WE DID IT:

There are 15 pages in total on the website, but due to a shortage of time, we decided to go for only 8 pages, the main page and its subpages (features, pricing, login, docs, sign-up followed the main page itself. we planned to assign each one of us with separate pages. We planned to go for more feature sub-pages but were able to make it out with one page only as it was quite a lengthy process

THE CHALLANGES WE FACED :

1. When we were working on the main page, we had to skip some content in the midsection of the page, because of some of the properties of the font in the content, some part of it started misaligning with each other.
2. We faced some issues in Github when we were trying to push and merge the files we created.
3. Even after getting a couple of suggestions from our mentors, we were still facing issues while pushing, merging files, looking after the conflicts, and creating branches.
4. Even this time, while making the pricing page we went through some alignment issues which cost us little time but in the end, we worked it out.
5. As we mentioned above, we were able to complete only 6pages, at last, we tried our best to work it out with other pages too, but due to time shortage, it didn’t happen.
6. We were facing issues in the DOM part of the project and the media queries as these concepts are quite complicated to understand compared to HTML and CSS.

HOW WE OVERCAME THEM:

1. We skipped some parts of the content on the main page to get its properties and styles perfectly aligned with each other.
2. After getting a couple of suggestions from our mentors and trying, again and again, we were finally able to solve the Git issue on Day3.
3. Even while working on the pricing page, we faced alignment issues, but instead of skipping the content, we dived into the concepts and were finally able to overcome the issue.
4. We were facing issues in the media query section of the website so thought of skipping it as time was too short to perform the query part of the site which would have taken longer.

It was wonderful experience. Thankyou for reading :))