Spreading knowledge. Yes, it’s scary for all involved.
Spreading knowledge. Yes, it’s scary for all involved.

The Core Dump

The Core Dump is the personal blog of Nic Lindh, a Swedish-American pixel-pusher living in Phoenix, Arizona.

[By Nic Lindh on Wednesday, 14 January 2015]

An HTML, CSS and JavaScript lesson plan

Nic provides a lesson plan for teaching total beginners HTML, CSS and JavaScript.


Teaching HTML to beginners is difficult. Learning HTML is difficult and frightening for beginners.

This post contains a lesson plan for getting beginners started I’ve used with good success. It includes supporting files.

Why should you listen to me? I’ve taught HTML for over 15 years and I’ve never made anybody cry. Ask anybody who’s taught beginners to create websites and you’ll find I’m a unicorn. Oh, sure, there have been trembling lips and moist eyes, but no crying.

Web nerds should probably be close to your fainting couch for this: Most people, including “digital natives,” have never seen HTML. I’ll give you moment to recover.

HTML is alien and hostile for most people—one typo will make half the page disappear; you have to be in control of your files; and there’s a strict non-obvious and non-discoverable syntax you have to learn.

JavaScript in the context of the browser is even harder since you can’t do anything without understanding the basics of HTML (and preferrably CSS). So there’s a steep learning curve before a student can do anything to get excited about.

And of course being able to see the results of your work and getting excited is a huge part of learning something new and intimidating; it’s what insulates students from fear and frustration about the long road ahead.

Why teach HTML basics

It’s true most people will never need to create a website from scratch but will only need to understand enough to be able to use a Content Management System (CMS), but I argue everybody should nevertheless understand the basics of how websites are created.

HTML is one of the most fundamental pieces of technology that affects a first-world person’s life on a daily basis and you should understand what it is. Even if you do all your webwork inside a CMS, you will sometimes need to tweak things and knowing how to sprinkle in some CSS or a custom HTML tag will make all the difference.

Ignorance is not a good thing.

The two paths to teach the basics

One of the constant points of dissension between people who teach beginning Web skills is whether you should teach using a tool like Dreamweaver or make students type in a text editor. I’ve tried it both ways and with that experience have come down hard on the text editor side of this argument.

There are two reasons:

  1. If you want to use a tool like Dreamweaver you first have to teach the tool—this takes valuable time

  2. The tool will let students dig a deep, deep hole they can’t get out of without understanding the things the tool has hidden from them, so you—and your students—end up in a frustrating Catch-22.

Teaching with a text editor (Text Wrangler by Bare Bones is a great, free option on the Mac) on the other hand lets you get to the topic at hand almost immediately. (If you use Text Wrangler in class, don’t forget to tell your students about Soft Wrap.) Of course, typing HTML by hand is also more stark and forbidding, so positive reinforcement is important.

(And don’t be That Guy and try to have your beginners write HTML in Vim or Emacs. Don’t. Just don’t.)

Note that typing is crucial: Have students type as much of their HTML as possible from your example up on the projector. Just reading is not enough. Typety-type-type. Though it’s a good idea to distribute the HTML skeleton—after explaining it thoroughly—to save some time.

As an instructor you will also discover the results of K12 schools cutting their typing classes: Most “digital natives” are horrendously slow typists. Build in enough time in the lesson plan to allow for this.

(It would be an interesting experiment to have students do typing tests on both their phones and on keyboards—I’d expect some of them to be faster on a slab of glass.)

Lesson plan

So here’s how I broke the Web portion down for an online media class at the Cronkite School. Depending on the students and how long you make the lectures this will take two to six hours.

Download a zip file of the example pages.

The Underpinnings

Naming files for the Internet

The importance of the root folder

Writing HTML

At this point students have created a two-page website with pages that link to each other and have images. This is big!

Adding CSS

Students now know how to customize the look of their pages.

Adding JavaScript

The objective of this part is to have students create a page they can interact with.

The lesson has three parts. First, create a page with a text box students can type into and see a different box update with the same text. Second, add in a test to see if the text box is empty and display different text. Third, build in an easter egg that displays special text when a certain word is input.

Yes, this is very basic. It will still bake the brains of students who’ve never programmed before—there are a lot of concepts to absorb.

Getting more advanced

Obviously the pages so far have been basic. To take it to the next level, introduce students to frameworks like Bootstrap that let them stand on the shoulders of giants.

There’s no better place to learn how to make the Web than the Web itself. Highlight resources like Code Academy.

Supporting documents

Download a zip file of the example pages.

Let me know how it goes

If you end up using this, please do let me know how it went and if you have any feedback via email or Twitter.

You have thoughts? Send me an email!