The Core Dump

Cyber is hard

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

[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.

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.

« Fanaticism is a monster that pretends to be the child of religion

 »


You like to read about technology? What a coincidence—I like to write about technology!

What to expect when you’re expecting a Hackintosh

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.

The car is going digital and that’s a good thing

Car nerds are dealing with some cognitive dissonance as car technology changes.

Review: Kindle Oasis

The Oasis is Amazon’s best e-ink reader to date, but it’s not good enough for the price.

“Tea, Earl Grey, hot”

Nic buys an Amazon Echo and is indubitably happy with the fantasy star ship in his head.

It’s a content blocker, not an ad blocker

The problem isn’t ads. The problem is being stalked like an animal across the internet.

Review: Synology DS416j

The DS416j is a nice NAS for light home use. Just don’t expect raw power.

(Nerd Note) Moving to GitHub Pages

The Core Dump is moving to GitHub Pages. This is a good thing, most likely.

Apple Watch, six months in

Thoughts on Apple Watch after half a year of daily usage.

Magical thinking about encryption and privacy

Predictably, the Paris attacks brought the anti-encryption crowd back out of the woodwork. They're at best being willfully disingenuous.

Building a static site for an investigative journalism project

Things to consider when planning to build a site on a compressed time table.

Digital hygiene for online security and safety

Nic provides some basic not-too-paranoid tips for securing your digital life.

How to install Jekyll on Amazon Linux

Installing Jekyll on an EC2 Amazon Linux AMI is easy. Here are the steps.

Will Apple Watch be a success?

After wearing the watch for over a month, Nic has thoughts on its future. Spoiler: Depends on how you define success.

Let’s all chill out about the iPad sales numbers

Turns out “it's just a big iPhone” is a stroke of genius.

Tech terms you might be misusing

Some technical terms still confuse people who should know better, like journalists.

Naked root domain with Amazon S3 without using Route 53

How to host a static site on Amazon S3 with an apex domain without using Amazon’s Route 53.

New technology requires new thinking

People fear change, so new technology is used as as a faster version of the old. This makes technologists sad.

An HTML, CSS and JavaScript lesson plan

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

The glanceable wrist in your future

Nic loves his Pebble and looks forward to the Apple Watch, but realizes he’s in the minority.

It's the words, stupid

Nic loves books, but he loves their content more.

Our technology is bad and we should feel bad

Nic is worried about the fragile state of our technology and thinks you should be as well.

The WATCH is nigh, and I don't get it

Nic tries to understand the WATCH. It doesn't go well.

Apple might enter the home integration field

Nic thinks home integration could be Apple’s next major category. Read on to find out why.

An Apple ebook reader would be nice

Nic is frustrated with his Kindle and would love to see Apple make an e-ink reader.

The iPhone, devourer of technologies

The iPhone was announced Jan. 9, 2007. It now occupies a huge chunk of Nic’s life.

The A7 processor is your friend

Nic is very impressed with the speed of the iPhone 5S and iPad Air.

The 2013 Nexus 7

Nic buys a Nexus 7 to test the Android waters.

On azcentral.com outsourcing comments to Facebook

Nic outlines some of the risks of ceding comments on news stories to Facebook.

Lion and the angst of the greybeards

Nic is bemused by the sturm und drang surrounding the iOS-ification of Mac OS X.

Web publishing made easy

Web publishing used to require heavy-duty nerditry, but no longer.

How to create an e-book

Nic is creating an e-book. He shares what he’s learned so far.