How the experience of creating bits can help you understand HTML and CSS

One Saturday, I sat up until two in the morning for a new project. Since I'm a beatmaker, you probably think that there was something like this on the screen:



But actually, there was this:
')

Source: My screen that Saturday, at two in the morning

Instead of tackling the barrels (1) and snares (2), I fought over the docked navigation bar on my website. Of course, not machine learning or artificial intelligence, but for me this is already a lot.

The fact is that I never considered myself a web developer. There are several programmers among my friends, but every time they opened their code editors to show me what they were working on, it all seemed to me like a hypnogif.

Something like this, only a smaller mustache.

Therefore, naturally, I walked with the thought: “ Thank God, I don’t have to do anything like that. Just sitting in my day, doing bits in batches! ".

What can I say. It did not last long.

Thanks to Soundcloud, Spotify and Bandcamp, it became much easier for musicians to share their creations with the public. On the other hand, the compositions are now scattered across such a huge number of platforms that it is difficult for listeners to find exactly what they need.

It was clear: I need a website that would serve as a centralized platform for storing all my work. I wanted everything to be like my favorite musicians: a neat navigation bar, a large background image with me, clearly looking past the lens.


Tribute to my heroes.

At first I tried to use Squarespace, but I did not like the fact that I had to take a ready-made template and work within the framework of the pre-assigned blocks.

In addition, all their design options have already become boring. You type the name of your favorite musician.com - and for the thousand first time you see the same template that has slandered.

I wanted to create a page from scratch - despite the fact that I had no background knowledge of HTML or CSS. I wanted to challenge myself.

Therefore, I paid for the course from Udemy , downloaded Brackets and started classes. And - wow! - Immediately hooked.

After a couple of months the site was launched - and I made it on my own, from and to.

Why did I like this experience?

Here are a few things that seemed to me especially cool:

1) The philosophy of "make candy crap" : the ability to create raw content in HTML (even if terrible to tears), and then paint it in CSS.

2) Use existing resources in a new context : pump icons, fonts, etc. from everywhere and adjust them to the overall concept of the site.

3) Using third-party tools : the availability of jQuery plugins that I could use to improve the page.

When I was a little abstracted and thought, it became clear why I liked all this. After all, the same aspects are firmly embedded in the process of bitmaking!

It may sound doubtful, but it became obvious to me that there is a strong connection between web development and music creation. Let's not regret the time and consider this connection in more detail.

Bitmaking process in general

For those who do not know how to create tracks in hip-hop, I simply present the whole process as a combination of three steps:

1. Drum part
2. Sampling
3. Instrumentation

I will analyze these stages using the example of my “Clear Skies Ahead” bit (source: Soundcloud ). I chose it because its structure is fairly simple and all the source code is available ... well, in general, this is a cool bit.

Identify the connection

Similarity # 1: Drum-batch can be compared with HTML content, which is then finalized in CSS



I would like to highlight two main characteristics of HTML:

1) HTML defines the structure, building the overall layout of the page. In a standard HTML document, there are tags such as html, head, body, footer, which clearly outline each of the sections and refer to all the necessary CSS files and jQuery plugins.

2) HTML carries content that is subsequently formalized. Although HTML is primarily responsible for the content, we initially write the code so that it would be easier to give it a particular style afterwards. The first versions, as a rule, look disgusting, but we are preparing the content to decorate it in CSS.

We find similar characteristics in the drum parts:

1) The drum part sets the structure. This is the frame of the melody. It forms the rhythm that the listener will follow.

2) The drum part carries sounds that are subsequently shaped in a certain way. Initially, they lack individuality. Usually only after applying the effects the track comes to life.

Let's listen to the drum part for the “Clear Skies Ahead” bat we are considering. The basic pattern consists of barrels, snares and a looped drum part.

It sounds ... somehow nothing. The structure is there, the rhythm is traced, but individuality is not felt. The barrel cuts off hearing, the snare sounds lifeless, and the drums are lost in the background.

So, you need to make everything stylish and beautiful!



To enhance the low frequency of the barrel, I applied an equalizer to it. This effect allows you to adjust various frequencies of sound. To make the snare more lively, I added reverb (3), which creates an echo effect. Make Sampled (4)
The effect called stereo imager (5) helped me a lot more noticeably.

All of this can be likened to assigning an element the “equalizer”, “reverb” and “stereo-imager” classes in different parts of the code.

<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> 

Next we can define a style for each of the classes in CSS.

 .equalizer { font-weight: bolder; } .reverb { text-shadow: 1px 1px blue; } .stereo-imager { letter-spacing: 1px; } 

Here is the sound equivalent of drum style styling .

As you yourself hear, the use of relevant effects has breathed life into the track. The same is true of the content on your webpage - it can be presented to the audience only if it has been properly designed in CSS.

Similarity # 2: Sampling is almost the same as adapting icons and fonts to a new concept.



No matter how you feel about sampling, in hip-hop culture this is standard practice. I personally love him very much and consider it a great way to breathe new life into the work.

In hip-hop, there is a technique called “chopping” - an existing song is broken up into small fragments, which are then mixed in a different sequence to create a new track.

In the clip above, I use the example of the “Clear Skies Ahead” track to look at three steps in detail:

1. Find a sample song (from 00:00)
2. Make a new composition of the fragments (from 00:13)
3. Add effects and embed them in a bit (from 00:24)

The creation of a website takes place in the same way.

Let's say you make a simple page with four pictures in the center, in which the transparency changes, when they hover over them. The same three steps are relevant in this case:

1. Select the pictures you will use.

You can look at Unsplash or any other stock site to choose the images to your liking.

2. Using HTML, arrange the pictures in the order that matches your concept.

 <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 give the page a finished look.

 .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; } 

The process of actively searching for sources, building them in the necessary sequence and styling in accordance with their own preferences occurs both in hip-hop and in web development.

Similarity # 3: Adding a virtual tool is like adding a jQuery plugin to enhance the page.



As a final chord, I wanted to add a low sub-bass sound that ties everything together. It will act as a “glue” for the composition, align the low frequencies and fill the voids.

“What if I don't have a guitar?” Yes, and I would, I still can not play on it! "

This is where virtual tools come into play. They exist in the form of stock sounds and third-party plug-ins and give access to sounds that would otherwise be difficult to obtain. With their help, you can generate the sound of a synthesizer without having a corresponding module, the sound of a violin, even if there is no real violin at hand, and so on.

For “Clear Skies Ahead,” I added a virtual instrument that contained a sub-bass, recorded it, and applied it to an existing bit.

In fact, the use of virtual tools demonstrates the same approach as the use of jQuery plug-ins to create a website. In both cases, you get access to components that would be problematic to make yourself.

To illustrate this process on the material of my web site, let's add a gallery to display the four pictures with the seasons that were discussed earlier. Instead of doing it yourself, let's use some nice jQuery plugin. I opted for Swipebox :


Here is a link to my JSFiddle

As in the case of sampling, I resorted to third-party resources, carefully integrating them on the appropriate platform. Applied resources were publicly available and enriched the experience for the visitor or listener.

In conclusion

I have been programming for only a few months, but in the last six years I have created hundreds of bits. When I discovered a significant similarity between these two areas, I managed to apply my experience as a musician to grow as a web developer.

And that brings me to the last conclusion.

To learn was more fun, find the connection between your current hobbies and the area you want to learn.



It is easier to grasp new concepts, and besides, some of the interest that you have to your hobbies is transferred to them.

In my case, understanding the connection between HTML / CSS and making music has greatly accelerated the learning process and made it more interesting. While working on the site, I entered the same streaming state that I often experience in the process of creating bits.

What do your interests have in common with the new skills you are trying to learn? At first glance, they may seem radically different, but take your time, look more closely. Since such dissimilar skills as development and creation of bits can be combined, then you should have no problems finding the same strong connection between your hobbies!