What if learning web design were approached like learning to play the piano?

In almost every other discipline, learning is done by repetition. You are taught a basic technique and then you practice, practice, practice until you're ready for the next lesson. What if we taught web design in the same way?

So, here's the thing. Typically when I see web design taught, it goes a little something like this: a mockup of the finished site it shown, then the student is walked through the HTML, the CSS is applied, and then you may finish up with some JavaScript. In fact, I've created a training program exactly like this.

The thing about this approach is that the retention of information is really, really low. Even having a single day in between lessons, the student will often times need to have a refresher of what they learned previously.

I've started thinking about how teaching web design could be changed to increase what students remember, but also finding a way to build skills that is engaging. How would the curriculum look? How would a student progress from basics to more advanced techniques?

One idea that I've been playing around with is to start the student off with a very simple task. Create 3 squares stacked on top of each other like the following example.

The example would start with 3 separate DOM elements and the student would be walked through the full HTML and CSS for this one example. Then, the student would be instructed to replicate this exact example a few times from scratch with the full example visible but not being allowed to copy-and-paste. They would need to retype it from scratch each time.

After the student has completed the example a few times with the full example visible, they would be asked to complete the same exact example, but this time, the final result would not be shown. This will force them to think through the example on their own, having to recall the HTML and CSS. They would need to recreate the example several times in this way before moving onto the next lesson.

Now, obviously, this is a very simple example and would need to be fleshed out for a full on course. The thing about this approach is that it more closely resembles how we teach other skills.

Take, for example, playing the piano. You don't start out by seeing a finished piece, walked through what the notes mean and how you play them on the keyboard and then when you're done, expected to know how to play it. Instead, you are often not even shown any sheet music in the beginning. You are shown how to rest your hands on the piano. Then, starting with one hand or the other, you are shown a small scale. You then have to repeat that scale over-and-over-and-over. Once you have developed the muscle memory to continue, you are shown a more advanced scale.

Later, you are introduced to playing with both hands. Then you learn to read sheet music. Then you are shown how to put all of that together.

Or take art. You don't start with being shown a finished painting or drawing and then walked through how to recreate it. Rather, you start by making lines, and swirls, and squiggles. Then you move onto basic shapes like circles and squares. Then shading is introduced and you are taught how to create 3 dimensional spheres and blocks. You continue to build on these techniques until you are finally creating something that resembles a portrait or landscape.

So, why do we approach web design so differently? What would it look like if we approached teaching web design from a completely different angle?

I really want to explore this idea more and would love to hear what you think.

blog comments powered by Disqus