Cloning of Inspectlet Website

We are creating this blog to share our experience of working on a project assigned to us by our School. We were assigned by our School to a group called Krypton consisting of three members.

Our group consists of the following members: Manish Raghavan, Pavan Goud, and Akshay Nair.

Our group was assigned to work on cloning of website called inspectlet.com

#Problem statement:

We are given the task of the successful cloning of a website named Inspectlet in four days.

#Expectations:

We are expecting to create a pixel-perfect cloned site of Inspectlet website within four days, with all its pages, giving proper HTML, CSS properties, using DOM and media query concepts with respect to the official Inspectlet website.

#Concepts we covered in the entire unit:

  1. HTML
  2. CSS
  3. DOM
  4. Media query
  5. Git

#Roles and Responsibilities:

Day-1:

  1. We started by going through the website, studying its design, layouts, content, etc…..
  2. There are 15 pages in total on the website, but due to a shortage of time, we decided to go for only 6 pages, the main page and its subpages (features, pricing, login, docs, sign-up followed the main page itself)
  3. We started to go with the main page first. We split the main page into three parts the top section, the midsection, and the footer.
  4. Manish worked on the top section, Akshay worked on the midsection, and Pavan worked on the footer section.
  5. So as we all were in touch with each other and working as per our plan, we were able to complete the main page on day-1 itself.

Day-2 :

  1. This day, we planned to assign each one of us with separate pages, Manish took care of the top section of the pricing page, Akshay took care of the midsection and Pavan took care of the footer of the pricing page.
  2. Along with this Akshay and Pavan were able to complete the Login page and the docs page within the day as planned, and at the same time Manish tried working through Git to rectify the issues while pushing all the pages and changes we did in the pages along the whole day.

Day-3:

  1. 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, Manish did the work on this page.
  2. Akshay tried the optimize all the pages we had completed till now, looking for small mistakes regarding styles, font, etc….., meanwhile Pavan and Akshay also concentrated on working on blogs and read me file.

#Issues 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.

#Steps we took to overcome issues:

  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.