Working on a team project as a beginner using HTML, CSS, and JavaScript.
Through this blog, I am going to share my journey of working on a team project as a web developer student at Masai School.
On Tuesday, 29th, 2020 all the students at Masai school were divided into a team of three from their respective batches and assigned a project that they had to build within four days, and on the fifth day, from every batch best teams would be selected to present their project to the respective Judges. We had to build the project with whatever skills we were taught at Masai, so in my case, it was HTML, CSS, and JavaScript. I was assigned to team Lithium and my teammates were Gayathry and Saravana.
The blog is divided into three parts -
Firstly we will understand what the project statement is about.
Then I'll share the whole journey with you on how each day went.
At last, some input that I have learned while working on the project as a beginner will be shared.
Project Statement - Creating a dynamic clone of the Toggl Track web app.
Toggl Track is a time tracking app operated by Toggl OÜ that offers online time tracking and reporting services through their website along with mobile and desktop applications. Toggl Track tracks time blocks optionally labeled with a task, a project, and tags. Time can be tracked through a start/stop button.
Planing, Implementaion and Challenges.
Day 1 - Once we understood what the project statement was we started our project by going through the web app and understanding the functionalities of the web app. Before laying a basic structure and timeline that needs to be followed while working on the project what was required at the moment was to know your team members. Communication played a vital role in the entire project. It is important not only to shape ideas but also to make sure that everyone is on the same page. And through communication, we were able to know the strengths and weaknesses of our teammates and were ready to learn and teach one another. We ended the day by deciding on what all static pages needed to be done and proactively took the tasks for ourselves.
Day 2 - Certain rules were already in place that everyone was following such as usage of BEM methodology ( click here to read more about BEM). The entire day was spent working on all the static pages and a proper channel and strategy to communicate were in place to make sure that the team members were not facing any challenge.
Day 3 - All the static pages were completed with proper styling and a major focus was put in to make sure the pages looked pixel perfect. Some measures taken to achieve the desired output was by using a similar color combination, using the same font and font size, etc. It was New Year's eve and we had begun to merge all the pages and started working on the dynamic functionalities of the page.
Day 4 - On New Year's day, we were all busy working as a team to get the project done so that we had some time to study for the DS evaluation which we had the very next day. Things were not going as planned but we were very careful and took some time to analyze and re-assign some tasks, making sure none of the team members were stressed. And by late evening we finished our project and had some time to study for the evaluation as well.
Day 5 - After our DS evaluation we had some time to go through our project to make sure everything was in place and presentable. We had our presentation strategy already in place and were able to present with ease. From our batch, our team was selected in the finals and we had to present our project to Judges. We were judged on different criteria and came second out of all the batches. Our hard work had paid off.
During the entire project week, I learned a lot from my teammates and was able to pass on some knowledge to them as well. What worked for us was to understand each other's capabilities and help each other to overcome any trouble they faced during the project week.
Below I am sharing some screenshots of the cloned web app we built.
Inputs for beginners
This was the second project I worked on at Masai, and the things I'm going to share are stuff I realized, will benefit someone new to web development or who is going to work for the very first time on a project. So here it is.
- Communication skills are as important as your coding skill.
Understand and let know your teammates what your capabilities are.
Never hesitate to ask for help. Remember the team succeeds if you succeed. So never be shy to ask for help or inputs.
Time Management. Another important skill a coder must have is time management. Keep track of how much time you spend on your work.
Hard work and time management is key to success.
Be prepared to taste failure. Do not get frustrated if something doesn't work, and remember -
Failure is not the opposite of success - it is part of success.
So I conclude my first blog here. I hope that you enjoyed reading my blog and got what you were looking for. I am open to feedback and look forward to them. If you wish to look at the project we built I am attaching the GitHub repo link here - Toggle track clone . I will end the blog by quoting Leonardo da Vinci
Learning never exhausts the mind.
Keep Learning -- Keep Coding-- Keep Loving.
Thank You.