HOW WE BUILD THE GOOGLE DIGITAL GARAGE CLONE?

Hi reader, you might have visited, read, or heard about the Google Digital Garage, a place where all the industry experts have created courses on designing and maintaining your digital businesses. It’s a place where you can learn a lot about digital marketing and online advertising for free. The best part is that you can also get certified for the courses you applied to. For more information go to https://learndigital.withgoogle.com/digitalgarage

Moving on ahead, we, team chlorine at masaischool.com developed the clone on Google Digital Garage in just 3 days as a part of our curriculum’s Module 1 project evaluation. This blog is all about what are all things we used? , how we did it? , what challenges did we face? , and how we overcame those challenges?

TECHNOLOGY STACK WE USED

• HTML
• CSS
• Javascript

Yes, I know what you might be thinking. How is it possible to make the clone with just 3 technologies. We’ll as we have just started our humble journey to learn full-stack web development at the Masai school, we just knew these technologies so far. But I hope you would really appreciate the amount of precision and the perfectness we have achieved. To know how we did it please keep reading.

HOW WE DID IT

Before answering the big question of “ how we did it? ”, let me show you some snippets of our website.

Landing page

learn online section of the landing page

Certification page

A section inside the certification page

Live training page

Sign up and Register Page

I hope I am not overwhelming you with so many snippets. The snippets attached above are just some parts of what we have made so that you could compare them with the actual website.

Now answering the big question of how we did it, I would like to say that it is because of the guidance of our captain Chandrashekhar & the dedication towards making the website pixel perfect, I and my wonderful teammates had, we able to achieve our goal. As part of Masai school, we have always believed that communication and skills are greater than knowledge so it is because of effective communication and sheer will to understand complicated things and make them simple to understand, we were able to create the page with comparatively fewer resources.

We used the following resources for our help:

1. https://developer.mozilla.org/en-US/
2. https://www.w3schools.com/
3. https://www.flaticon.com/
4. https://codepen.io/pen/

CHALLENGES WE FACED AND HOW WE SOLVED THEM

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

1. Git was fairly new to us and thus it became a challenge to merge the code and solve the conflicts. Sometimes we worked till 2 am just to merge the code and improve the final version afterward.
2. Another challenge was solving the problem of redundant CSS classes. 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 effective communication among us so that we could prevent it from happening.
3. We had to learn how to make animations and carousels as few sections of some pages required us to create video cards, image cards, moving navbar, opening & closing animations, etc. Here, reading the documentation and looking at the snippets come in handy to solve such problems.
4. As we are not using and UI libraries yet, we faced a lot of challenges while getting a similar layout on 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 (which we have not studied yet), so we decide to move on and fix other things.

ENDING NOTE AND TAKEAWAYS

As mentioned earlier, we were able to attain the required layout because of the communication that we maintained. The command chain that we follow and the level of understanding about the topic we had. I felt proud to work with such amazing people and represent the team in the evaluation. This project could not have been made possible without the contribution of MD Amanullah and Rohan Ranjan.

Checkout our repository on GitHub: https://github.com/iharshgaur/Titans-Chlorine