Teaching HTML from the ground up

It pains to me to see designers intimidated by code. At SVA I am surrounded by talented designers who have amazing intuition and great taste in interaction design. Few of them get to see their designs to fruition, however, because they never learned to code.

I want to change that.

I try to point my friends to tutorial sites, and implore them to experiment. With little guidance, however, these sites can be overwhelming. Very often these sites are focused on how to achieve a certain effect, and fail to communicate the fundamental principles behind the web as a medium.

So I decided to design an introductory class, one which has a healthy mix of the why’s and how’s of web design. I want a class that begins with the philosophy of the web, and then quickly ramp up towards building a simple webpage.

Here’s what I propose.

I start with looking at a piece of text, and thinking about the message it is communicating.  What is its structure? What might we emphasize? Those are design and communication questions that designers are familiar with.

The first wrinkle I introduce is that HTML is used to communicate not just with people, but also with machines. How do you structure and demarcate a piece of text so that its emphasis and structure is accessible to both humans and machines?  That’s the starting point of HTML. That’s why it is called a markup language. Through this lens I lead the designer to derive the nested structure of HTML.

Once the basic structure is in place, we move on to stylesheets.  We give that underlying hierarchy form through defining how different elements should look. While the tools for controlling typography is different, the principles of typography remain the same. Step by step I show designers the tools to achieve typographic control on the web.

The class is basic. I do not promise that a designer will be a HTML wiz or a front-end developer in a day. What I aim to do is to establish a basic fluency. A basic fluency allows the designer to start experimenting, prototyping, and push forward their ideas. A basic fluency also allows them to work more effectively with developers and engineers. Most importantly, that fluency allows the designer to push against the medium, and feel it push back. In my mind, that’s the most valuable part of learning to code as a designer.

I’ve began to teach this as a Skillshare class. What do you think? Anything you might add or take away?