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:
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.
At this point students have created a two-page website with pages that link to each other and have images. This is big!
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.
js1.html) and verify it works
js2.htmlon the projector (don’t distribute) and have students type in the changes
js3.html(don’t distribute) on the projector and have students type in the changes
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.
Is there reason to upgrade from a 3 to a 5?
The Internet tells Nic to install Ubiquiti gear in his house, so he does, and now he has thoughts.
Nic reports his experiences so far with voice computing from Amazon and Google and is a bit mystified at the reaction to Apple’s HomePod.
After a few weeks of using iPhone X I’m ready to join the congratulatory choir.
Nic is interested in smart homes. His contractor let him know how the wealthy are already using them.
Apple’s neglect of the pro market is causing a lot of gnashing of teeth in Apple-nerd circles, but it’s true to Apple’s vision.
There is unrest in the Mac community about Apple’s commitment to the platform. Some are turning their eyes to building a Hackintosh to get the kind of computer Apple doesn’t provide. Here’s what it’s like to run a Hackintosh.
Car nerds are dealing with some cognitive dissonance as car technology changes.
The Oasis is Amazon’s best e-ink reader to date, but it’s not good enough for the price.
Nic buys an Amazon Echo and is indubitably happy with the fantasy star ship in his head.
The problem isn’t ads. The problem is being stalked like an animal across the internet.
The DS416j is a nice NAS for light home use. Just don’t expect raw power.
The Core Dump is moving to GitHub Pages. This is a good thing, most likely.
Thoughts on Apple Watch after half a year of daily usage.
Predictably, the Paris attacks brought the anti-encryption crowd back out of the woodwork. They're at best being willfully disingenuous.
Things to consider when planning to build a site on a compressed time table.
Nic provides some basic not-too-paranoid tips for securing your digital life.
Installing Jekyll on an EC2 Amazon Linux AMI is easy. Here are the steps.
After wearing the watch for over a month, Nic has thoughts on its future. Spoiler: Depends on how you define success.
Turns out “it's just a big iPhone” is a stroke of genius.
Some technical terms still confuse people who should know better, like journalists.
How to host a static site on Amazon S3 with an apex domain without using Amazon’s Route 53.
People fear change, so new technology is used as as a faster version of the old. This makes technologists sad.
Nic loves his Pebble and looks forward to the Apple Watch, but realizes he’s in the minority.
Nic loves books, but he loves their content more.
Nic is worried about the fragile state of our technology and thinks you should be as well.
Nic tries to understand the WATCH. It doesn't go well.
Nic thinks home integration could be Apple’s next major category. Read on to find out why.
Nic is frustrated with his Kindle and would love to see Apple make an e-ink reader.
The iPhone was announced Jan. 9, 2007. It now occupies a huge chunk of Nic’s life.
Nic is very impressed with the speed of the iPhone 5S and iPad Air.
Nic buys a Nexus 7 to test the Android waters.
Nic outlines some of the risks of ceding comments on news stories to Facebook.
Nic is bemused by the sturm und drang surrounding the iOS-ification of Mac OS X.
Web publishing used to require heavy-duty nerditry, but no longer.
Nic is creating an e-book. He shares what he’s learned so far.