Teaching HTML & CSS

Image depicting basic components of an HTML tag

This week I twice taught a two-hour workshop introducing Emory people (students, faculty, and staff) to the very basics of HTML & CSS. The workshop was called How a Website is Born: The Very Basics of HTML & CSS, and here’s how I described it:

Ever wondered how a website goes from an idea to the Internet? In this workshop, designed for absolute beginners, we’ll explain what HTML and CSS are and show you how you can get started making your own website.

I’d initially thought I might be a little crazy to try to teach introductory HTML and CSS in two hours, but in the event, things went relatively smoothly, and both times we ended up with about a half-hour to spare. I wanted very much to teach the workshop because HTML and CSS were my own first experience looking under the hood of any kind of interface, and it was quite powerful for me. I was excited to show others that coding isn’t as hard as they might think.

A lot of people suggested that it would be more useful for students to learn how to modify other people’s code (a WordPress theme, for example), but like Jarah Moesch, I was adamant about making my students start from scratch. I wanted them to feel they had a grasp on every aspect of building a website, and to see that none of it is too mysterious to comprehend. Plus, I’ve noticed that many people who learned HTML & CSS by modifying WordPress themes have some residual confusion about basic principles of CSS, like the fact that one style overrides another if it occurs farther down on the page. So I wanted to make sure my students got this stuff. And anyway, we’re hacking WordPress themes next week.

Here’s my lesson plan, in case it’s useful to you. You can also download my handouts: Basic HTML, Basic CSS, and Useful CSS.

[A note on semantic markup: A couple of people have expressed surprised that I used <b> and <i> instead of <em> and <cite>. I know that the latter are more correct, but I wanted to stick with tags that made immediate sense to students.]

Introduction

I started by telling students that this class was for very beginners, and if they weren’t very beginners, they were in the wrong place. I copied this from Eric Grimson at MIT, who opens his course Introduction to Computer Science and Programming by explaining that non-beginners should excuse themselves not just because they’ll be bored but because they’ll make beginners uncomfortable.

I explained that different people have trouble with different things, and asked them to be patient, especially in the first part of the class, if other students needed help that they didn’t need. I told them that if they were stumped, it wasn’t because they were doing something wrong — it was because I needed to explain something better.

Finally, I showed students this HTML document, which I had open in a text editor. I then showed them how I put the document on a server, using FileZilla.

Viewing Source Code and Downloading a Document

Once the document was on the server, students navigated to http://www.miriamposner.com/html and I showed them how to view the source code. Then I asked them to save a copy of the page to their desktops.

Opening an HTML Document

I asked them to open one copy of the HTML document in a text editor (explaining the need to right-click and “Open With”) and one copy in a browser window.

Very Basic HTML (Handout 1)

I explained the header information — taking care to say that no one has this memorized — and then told them how HTML tags work: they “hug” the content they’re modifying. We edited the HTML to make things bold, italicize them, added headers, added links, and added an image, each time saving the HTML document and refreshing the browser display.

Creating and Linking a CSS Stylesheet

I told my students that they now knew enough to create a basic webpage. But what if you had 300 individual webpages and wanted to modify one thing about every page? Wouldn’t be easier if you could make all those changes in one place? I used the analogy of taking advantage of styles in a word processor rather than individually modifying every heading.

We opened a new text document and saved it as practicestyle.css. Then I showed them how to link their HTML documents to their CSS documents by adding a line of code to their HTML headers.

Writing Basic CSS (Handout 2)

We started by modifying the paragraph tag, changing the font color and size. Then we modified links, headers, and images. Putting a border around the image provided me with an opportunity to explain the CSS box model, including the difference between margins and padding.

Div Tags and Classes (Handout 3)

I explained that while it’s nice to be able to modify tags that are already on the page, there are often times when you want to add divisions that don’t yet exist. I showed them how to use div tags and classes to create these new divisions.

Conclusion

I reminded the students that their pages weren’t actually on the Internet yet — to do that, you need a server — and showed them how they could find a hosting provider. I encouraged them to keep looking at source code. Then I answered a lot of questions.

What Worked, What Didn’t Work

All my students were up and running with HTML and CSS by the end of the class, so I counted that a major success. The evaluations were pretty positive, which was nice. It was extremely helpful to have helpers in the room — other people who knew HTML and CSS and could circulate around to help students who were struggling. They were also helpful in alerting me to when my explanations were unclear. I learned from Jeremy Boggs the habit of zooming in on my code so that it’s easier to see, and students seemed to like that. They also commented that they appreciated being able to ask questions at any point during the class.

Surprisingly enough, by far the most troublesome part for students was downloading the HTML file and opening it in a text editor. Some accidentally downloaded the “View Source Code” page, some downloaded the page to the wrong place and couldn’t find it later. For Mac users, Text Edit’s occasional habit of displaying rich text rather than raw HTML caused some major confusion. Other people had trouble getting the file to open in a text editor rather than a browser. This part of the workshop was actually the only place we had attrition — we lost one man who had trouble following along.

During the first workshop, I didn’t pay attention to where students were sitting, and some chose to sit next to the wall, which made it difficult for my helpers and me to peek over their shoulders. I corrected this during the second workshop by asking everyone to take a seat at a table. Still, some people are uncomfortable getting help, which I try to be sensitive to.

It was hard to make some people wait while we fixed someone else’s problem, but I was reassured by the fact that we had an extra half-hour of leeway at the end.

Both workshops had about a dozen students, which was about right. If I’d had more than, say, 20, with no more helpers, I would expect some people to be lost.

A couple of students requested a series of workshops on HTML and CSS, which I agree would be more helpful than stand-alone classes.

9 thoughts to “Teaching HTML & CSS”

  1. Nice, Miriam. I’ve taught HTML and CSS many times, too, and 2 hours is plenty. I do always have them download a text editor beforehand, though, for exactly the reason you describe — lately I’ve taken to recommending EditRocket, which has a 30-day free trial, because it runs on both Windows and Mac and therefore we can all use the same thing. But there are others you can recommend, and yes, it’s important to avoid TextEdit on Mac and Notepad on Windows at all costs. It’s also key to remember that some students might not even grok the concepts of downloading and installing software, of course. I usually start with a basic “how the web works” and “what a server is” intro, as well.

  2. Good idea about EditRocket! In other workshops, I’ve found that some students will do the prep work (like downloading) and some won’t, but I’ll give it a shot next time. And yes, I definitely did a “how the web works” and “what is a server” spiel, too.

  3. Very nice and clean and simple. I use to teach HTML and CSS too and found that it is useful to explain how CSS operates sort of like a remote control for the syle and layout of a webpage. Then I’d show some examples of this at Zen Garden, which gives very good demos of how much you can change the look of a website just by altering the CSS.

    I also used W3C as a constant guide as it is very important to learn correct standards from the start. I’ve seen how the practice of hacking other people’s CSS is not necessarily a good idea as the original coder of the CSS the student is learning from may be using incorrect techniques. Even incorrect techniques work sometimes but create more problems down the track.

    Splitting the function of CSS into two areas: style & layout also helps a new student understand the different features of CSS.

  4. Very interesting read. I’m actually teaching XHTML and CSS as part of my subject to Communication students and I’m finding it quite difficult to test their advance without recurring to the easy-but-inefficient multiple-choice test option. Do you have any experience or reference in this regard? Thanks in advance!

Leave a Reply

Your email address will not be published.