How can a beginner clone a whole website with HTML,CSS and JavaScript

How can a beginner clone a whole website with HTML,CSS and JavaScript

The Dilemma that a beginner faces while starting a new Project :-

As a beginner whenever you have to start a project you face lots of challenges. You have very less amount of idea about structuring a project and all these. So today I will guide how a beginner can overcome all these issues and make a good looking project with their specific knowledge.

The things that I had learned in past I month :-

  1. I learned the basic JavaScript as well as the Advance concepts of JavaScript.
  2. Advance concepts such as Set Timeout, the Asynchronous JavaScript, promises,storing data into local storage, XHR to make requests to the server as well as little amount of React.

What was my problem statement and how did I approached it :-

So I had a problem statement that I have to create a clone of a website called hellobonsai.com. Also I can only use my HTML, CSS and core JavaScript knowledge. We were three members in our group.

  • Some Snapshots of our project that we made :-

login.png This is the login page that we made

dashboard.png The Dashboard Page

add_new_tasks.png Add new task page

How We divided the work in our Team members :-

As we were three members in our team so it was very important to decide how we will approach the work so that in future we should not face any problem in merging the code as well as the tasks get divided into equal part. So, on the first day we made a git repository and everyone was told to make their separate git branch and push there work there and when they feel that they have completed. They can show it to one of the member and after the approval they can merge their code to main branch. I was mainly responsible for making Dashboard and adding JavaScript functionality to our page. And my other team members were responsible for adding CSS and making 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 timer and there were some more functionalities that could have been done, but yeah the time didn't permitted 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/rajachoudhary/Nitrogen Thanks For Reading.