Summary

The web application BlocJams is a demonstration of my Frontend web development knowledge. It showcases a working music player for a computer web browser or mobile device.

Explanation

Shortly after enrolling in Bloc, a coding bootcamp, I was assigned a project to solve typical Frontend developer challenges and to understand best practices in HTML, CSS and JavaScript.

Problem

The goal of BlocJams was to learn as much as I could about Frontend development by creating a working music player from scratch. In order to create this music player, I had to become comfortable with concepts I hadn’t worked with before:

  • Git & GitHub
  • JavaScript, DOM Scripting, jQuery

Solution

Git & GitHub

Learning about Git & GitHub was a dream. I had worked in content management systems in the passed and none of them do a great job of tracking detailed updates. I didn’t learn Git & GitHub overnight, it takes longer than that. Making BlocJams required me to create branches to build and test additional features of the music player. Committing changes, pushing them to the feature branch, having them reviewed by my mentor and merging branches with the master every single day, week after week really gave me a solid understanding of Git & GitHub.

JavaScript, DOM Scripting & jQuery

Prior to enrolling at Bloc, I had a few years experience working with HTML & CSS so I felt pretty comfortable with basic Frontend development concepts. JavaScript was new to me though. The curriculum Bloc provided pointed me to current blog posts and excellent resources like specific w3schools and Mozilla Developer Network articles relevant to the issues I needed to solve.

Results

The Bloc curriculum does provide guidance to focus on a specific feature before working on other features. However, it was still up to me to solve the problem at hand and test each feature before moving on to the next one. While creating each function or refactoring to use jQuery, I used Brackets to write the code and I constantly had a live preview open to check if my code worked. When it didn’t work, I’d review the Chrome console to understand what was working and what was not. There were times I took a wrong turn and got lost in the woods. Thankfully, my mentor would give me a hint and let me know where I should be focusing my energy.

Conclusion

While building BlocJams, I learned more about Frontend Development in a few short weeks than I had in the last 4 years of working in content management systems on my own. I became proficient in Git & GitHub, I became comfortable with Frontend Development tools like JavaScript, DOM Scripting and jQuery, and I got to make a working music player. Check it out on a computer and a mobile device! - BlocJams