An HTML, CSS and JavaScript lesson plan

Introduction

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

• How the Internet works

  • TCP/IP, DNS, client-server relationships

• History of HTML

  • Why it is the way it is and the problem it solved

    • Why Sir Tim-Berners Lee is a hero

Naming files for the Internet

• Use only lowercase, a-z, 0-9, no spaces, no special characters for filenames

  • Especially important on a Mac since it’s case-insensitive and things seem to work if you mix upper- and lowercase, but then things break when put on a Linux server and the world can see your work

The importance of the root folder

• Why you must get into the habit of creating one first thing in a project

Writing HTML

• Distribute HTML skeleton and show the workflow: Edit in text editor, open in browser, save and refresh. Wax on, wax off

• Students create a root folder

• Students make a page with h1 and p tags

• Students copy the page and create a second page, change the headline and text on the second page and link them together

• Students download an image from the Web, put it in the root folder and include it in the page

• Students add a different image to the second page

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

• Lecture on CSS, what problem it solves and why it’s different from HTML

• Distribute HTML skeleton and have students build a new two-page site using skills from previous lesson

• Add CSS includes and create a simple CSS file to change colors and fonts

• Explain why we have hex codes for colors and show Adobe Color CC (née Kuler)

• Students experiment with fonts and colors

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.

• Lecture on the basics of programming: variables, loops, functions, and conditionals

• Lecture on the history of JavaScript (Created in 10 days in 1995 by one man—which explains a lot)

• Distribute the first file (js1.html) and verify it works

• Explain we’re going to change the page so the box doesn’t disappear when there’s no text in the text box

• Put up js2.html on the projector (don’t distribute) and have students type in the changes

• Explain we’re going to put in an easter egg. Because all programs must have easter eggs

• Put up js3.html (don’t distribute) on the projector and have students type in the changes

• Have students change the easter egg to a word of their own choosing

  • (Only change the if statement)

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.