Piotr Szaran

Getting Back Into Coding

Piotr Szaran
2-3 Minutes
Teams Calendar
Source Code: https://github.com/iPior/teams-calendar

Overview

 A simple recreation of Microsoft's Teams Calendar using HTML, CSS, and JavaScript.

Goals of the Project

  • Hone skills in basic JavaScript, HTML, and CSS.
  • Understand the fundamentals of web development and how to create interactive web applications.

Technologies Used

  • HTML: Structured the weekly calendar layout.
  • CSS: Styled the calendar for a clean and responsive design.
  • JavaScript: Enabled dynamic interactions and functionality for the calendar.

Backstory

Wanting to get back into coding, I spent a few months relearning the web development basics. This mainly included brushing up on my HTML and CSS. Having worked extensively with these two technologies before, it was more of a refresher. JavaScript, on the other hand, was a language I had never deeply explored.

To get started, I enrolled in a JavaScript Algorithms and Data Structures course on freecodecamp.ca. I enjoyed this hands-on learning approach as it allowed me to dive into the fundamentals without getting bored by reading documentation. While I recognize that reading documentation is a great way to understand a technology, it can be overwhelming for beginners. Additionally, I had experience coding in other languages such as C# (in high school), Python, C, Java, and a bit of JavaScript (in university), so I was not entirely new to coding. I also studied data structures and algorithms in university, so this hands-on learning served as a refresher.

After completing the course, I wanted to practice my new skills by developing something unique. I didn't want to follow a tutorial on YouTube. The idea to create a weekly calendar came to me while looking at my work calendar and thinking, "I could code that.".

What I Learned

  • From this project, I learned the importance of modularizing code. Initially, I started with one CSS file and one JS file. Since I wasn't using any frameworks to guide how the code should be organized, I thought this was acceptable. However, as the project grew, it became difficult to manage everything. Eventually, I modularized the code and noticed how much easier it was to parse.
  • Similarly, I learned the productivity benefits of defining reusable variables. Whether it's colors in the CSS file or HTML objects in your JS code, referencing these variables instead of redefining them each time makes the code much cleaner.
  • I also learned that getting stuck is part of the learning process. As a beginner, you won't know everything.

What I Would Do Differently

  • I would definitely use Tailwind CSS instead of standard CSS. Although, as a beginner, using standard CSS was a great learning experience.
  • I would modularize the code as I wrote it, rather than doing it at the end. It was much harder to do afterwards.