[By Nic Lindh on Wednesday, 14 January 2015]
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.
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.
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.
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:
If you want to use a tool like Dreamweaver you first have to teach the tool—this takes valuable time
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.
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.)
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.
How the Internet works
History of HTML
Why it is the way it is and the problem it solved
Use only lowercase, a-z, 0-9, no spaces, no special characters for filenames
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!
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.
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
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
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
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
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.