bloc jams

Screen Shot 2017-09-27 at 4.43.27 PM.png
 

Bloc jams phase 1

Bloc Jams was the first large-scale front end project I have ever been tasked with. Since first learning small amounts of code over the last 3 years, enrolling in Bloc was an exciting step for me. Building Bloc Jams took about 70 hours of intense coding, line by line, while learning HTML, CSS, Javascript and jQuery. The goal of creating Bloc Jams was to build a music player that is fully functional and consists of: a landing page, an album view page, and the music player itself. Bloc Jams was originally written in vanilla Javascript and was later refactored using jQuery.

One of the highlights of building Bloc Jams, was my ability to use Javascript and jQuery in a way that would be used in today’s tech world. I loved seeing my long hours of studying and practicing functions be put to good use when I was able to increase the volume of a song or change the track with the click of a button.

I also enjoyed creating numerous customized CSS stylesheets that were integrated within the HTML and Javascript. I’m finding that CSS is my favorite language to code.

Screen Shot 2017-09-27 at 4.24.06 PM.png
 
 

This was the first time I have ever been exposed to stylesheets, fonts and images pulled from the web to be used in an HTML document.Learning Javascript was a challenge for me, but building Bloc Jams helped me understand concepts that were difficult for me to grasp in the first few weeks of learning the language.

 
Screen Shot 2017-09-27 at 6.18.11 PM.png
 

Throughout the Bloc Jams build, I learned how to write code so that my end program would function and transitions on the pages could be made easier.  I did this by adding CSS transitions and DOM scripting, which is the most basic form of writing JavaScript to interact with the browser.

Below, an example of a CSS transition used to animate the selling points on the landing page of Bloc Jams.

 
Screen Shot 2017-09-27 at 6.22.37 PM.png
 

Conclusion

Moving into the next module of Bloc, Bloc Jams will be completely refactored using Angular JS. The completion of the first version of Bloc Jams created a web-based music player that can play, pause or change music tracks. With signature iconography and a sleek design, Bloc Jams is a responsive site that brings music to life!