• Video link-:https://drive.google.com/file/d/1cDc4yivt7agv2fdo3fX_DeH0EAD6iNbV/view
• Netlify-:https://roaring-meringue-e04538.netlify.app/

This blog is created to share our experience of working on a project assigned to us by Masai School,which was to create a clone of the monday.com website in 4 days

• Team Lead:- Adnan Hussain
• Member 1 :- Ashish Gupta
• Member 2 :- Umesh Bajaj
• Member 3 :- Rejaul Khan
• Member 4 :- Anish Singh
• IA Manager:- Huzaifa Banegar

This clone was built using the following technologies -

• HTML
• CSS
• Javascript (DOM Events and Attributes)

Created a monday.com clone

• Intoduction
• login
• Different Pages
• Technologies
• Thanks

Our obejective was to create a pixel-perfect clone of the website - monday.com, which is a digital work management tool that lets users track and coordinate projects. Our clone consists of 5 pages - Home Page, Product page, Enterprise page, Pricing page and Dashboard page. The website has basic functionalities like - hovering effects,dropdown menu, scroll effect, and shows invalid user input error messages.

The Home Page is the first page of the clone, which connects to all other pages. It consists of a fixed navigation bar with a dropdown menu for each of the options. The navigation bar is common for all the pages. The home page has information about the company, its clients, its objectives, and a footer which is common in every page. img1?

The Login page has featured templates in the form of cards built using div. It has a form where the user can enter details. If the user fails to enter right details it's show message otherwise it's direct to home page. img2?

The signup page has featured templates in the form of cards built using grids. It has a form where the user can enter details. If the user fails to enter details for a particular field, our code generates an error message, warning the user to enter the correct fields. img3?

This page consists of a form for the user to enter his/her email if he/she is intested. Trying to submit the form without any inputs will generate an error message. The All Teams page also consists of cards with some cool hovering effects, which changes the colors of the fonts as well as the background image. img4?

The Pricing page has different options which allows the user to choose his/her plan. This page shows all the available plans that the user can choose from. img5?

This page is basically for the user to enter his/her details if he/she is interested to have a demo shown to them. img6?

We are expecting to create a pixel-perfect cloned site of monday.com website within four days. with all its pages,given proper HTML,CSS properties,using DOM and MEDIA QUERY concepts with respect to the official monday.com website.

As it was the first time for us collaborating remotely on a project .We faced a quite a few challenges while developing the clone.The challenges we can remember are as follow:-

• Git was completely new to us and thus it became a challenge the merge the code on GitHub.
• Another challenge was solving the problem of the Javascript part of local Storage . It happened sometimes that there were few redundant classes and the output used to get disoriented.Solving it required a thorough checkup of class names and id names.effective communication among us so that we could prevent it from happeing.
• As we are not using UI libraries yet, we faced a lot of challenges while getting similar layout with different screen sizes.Although we were able to manage most of it,this issue is something that we got to know could only be resolved with the UI libraries, so we decided to move on and fix other things.