Building the clone of EngageBay Website.

Hello there, you might have seen the EngageBay Website, where you can do your business with their comprehensive set of Marketing tools, including Email Marketing, Marketing Automation, Email Template Builder, Landing Page Builder, Lead Generation tools, Social Suite & more, your marketing team can take things to the next level.

Moving ahead, we team Manjira at Masai School developed a clone of the website of EngageBay 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.

4ugZ12Gml.png

- SIGNUP Page:-

Q0syEU-Ur.jpg

- Products Page:-

1_MwB_Cw2.png

- Resources Page:-

GaU5PV3xw.png

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 the footer part which are similar on all the pages. And my other team members were responsible for the Resources page, pricing page, login page and sign up 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 GitHub link: github.com/Darshan-Naik/Project_1_engage.git Thanks For Reading.

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 and also to make the dynamic aspect of the website.

Note: All the image and icon links have been taken from the main website ( engagebay.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.