How making hundreds of hip hop beats helped me understand HTML and CSS
By: Lawrence Yeo
Tags: Music, Web Design, Programming, Design, Web Development

To beef up the low-end on the kick, I applied an equalizer on it. This effect allows me to adjust the different frequencies on a sound. To give the snare more life, I added a reverb effect so it would echo out. To give the sampled break presence, I used an effect called a stereo imager to widen it across the beat.

This can be the equivalent of assigning a div element with classes “equalizer”, “reverb”, and “stereo-imager” to the various sections in HTML:

<div class=”equalizer”>

<h2>Kicks</h2>

<p>The “boom”</p>

</div> <div class=”reverb”>

<h2>Snare</h2>

<p>The “bap”</p>

</div> <div class=”stereo-imager”>

<h2>Drum Break</h2>

<p>”Boom-bap”</p>

</div>

Then we can adjust the styles of the classes accordingly in CSS:

.equalizer {

font-weight: bolder;

} .reverb {

text-shadow: 1px 1px blue;

} .stereo-imager {

letter-spacing: 1px;

}

Here’s the sonic equivalent of styling the drums (with the processed effects):

As you can hear, the drums truly come to life once the appropriate effects have been applied. Similarly, the content in your webpage can only be presented after it has been properly styled in CSS.

Similarity #2: Sampling a song is just like re-contextualizing images and icon fonts to fit a new narrative.

Regardless of what your views on sampling may be, it’s a staple in hip hop culture. I absolutely love it, and find it to be an amazing way to breathe new life into pre-existing works of art.

There’s a technique in hip hop called “chopping,” in which you take an older song, slice it up into small pieces, and replay them in a new sequence to create a whole new song.

Using “Clear Skies Ahead” as an example, the below clip details the 3-step process:

Identify the song to be sampled (“dig” for the sample) — starts at 0:00 Arrange a new sequence with the chopped slices — starts at 0:13 Add any necessary effects and incorporate into the beat — starts at 0:24

Building a webpage follows the same philosophy.

Let’s say you’re building a very simple page of four centered images that changes opacity when you hover over them. The same 3-step process applies here as well:

Identify the images to be used

You can use Unsplash or any of these beautiful stock photo sites to find images you’d like.

2. Arrange the images in HTML in a sequence that fits a narrative

<div class=”box”>

<img src=”spring.jpg” alt=”spring”>

<img src=”summer.jpg” alt=”summer”>

<img src=”fall.jpg” alt=”fall”>

<img src=”winter.jpg” alt=”winter”>

</div>

3. Add the necessary effects in CSS to finish up the page

.box img { /* Resize images */

width: 50%;

height: auto; /* Center images */

display: block;

margin-left: auto;

margin-right: auto; /* Space out images */

margin-bottom: 30px; } img:hover { opacity: 0.5;

transition: 0.3s; }

This process of actively digging for resources, rearranging them, and styling them according to your preferences is universal in both hip hop and web development.

Similarity #3: Adding a virtual instrument is just like adding a jQuery plug-in to enhance the page.

To finalize this beat, I want to add a low, sub bass sound that will bring everything together. It will act as the glue that rounds out the low frequencies in the beat and fills it out.

“But what do I do if I don’t have a bass guitar? And even if I did have one, I wouldn’t know how to play it!”

And that’s where virtual instruments come in. They come in the form of stock sounds or third-party plug-ins, and they allow you to access sounds that would otherwise be difficult to obtain. They allow you to create a synth sound without an actual synthesizer module, a violin sound without actual stringed instruments, and so on.

For “Clear Skies Ahead”, I added the virtual instrument that contained the sub bass, recorded it, and applied it to the existing beat:

This philosophy of using an external instrument is just like using a great jQuery plug-in for your site. They both allow you to easily access a feature that would otherwise be difficult to craft on your own.

To illustrate this on my webpage, let’s insert an image gallery that can display the four seasonal images in my earlier example. Instead of building one from scratch, let’s leverage jQuery and use a great-looking plug-in. I will use Swipebox:

For mobile readers, view my JSFiddle here.

In both scenarios, I used external resources that were seamlessly integrated into each platform. Both were easily accessible and allowed for richer experiences for the visitor and listener.

Concluding thoughts

Although I’ve only been coding for a few months, I’ve made hundreds and hundreds of beats over the last six years. When I became aware of the strong similarities between the two, I was able to leverage my experience as a musician to become a better web developer.

And that leads me to my final thought:

To create a fun learning experience, find how an existing passion connects to the new topic you’re studying.

It makes the concepts easier to understand, and it also reaches into the pot of excitement that you already have for your existing passions or hobbies.

In my case, understanding the link between HTML/CSS and music production greatly accelerated my learning curve and made for a really fun experience. When I was building my site, I entered flow states that were reminiscent of what I would feel during my beatmaking sessions.

How do your existing passions line up with a new skill set you’re learning? They might seem wildly different at first, but take the time to look a little deeper.

If seemingly unrelated skills like making beats and writing code can pair well together, you should be able to find a similarly strong connection between your various interests as well!