A manifesto for teaching web development

Over the last two decades I’ve taught several Web Dev 101 courses.

To be honest, I don’t think any of those courses were much good.

In my experience students start out excited and ready to learn, but soon glaze over because the content and teaching are boring or baffling or both.

By way of apology to those I have baffled and bored over the last 20 years, I’ve put together 10 principles for explaining HTML, CSS and JavaScript to absolute beginners.

I think we can do a better job of teaching basic web skills.

  1. For live classes, consider flipped classroom techniques. Get students to learn at home (with specific goals and requirements) then complete activities with supervision in the classroom. Be upfront about the level of commitment expected. Provide a clear path: how to get help, where to find out more, what to do next.

  2. Wherever possible, show don’t tell. Emphasise learning by doing. Online or live, avoid presenting or talking for more than a few minutes.

  3. Describe an objective, then show how to achieve it: avoid putting the technology before the requirement. For example, demonstrate the need to set the maximum size of an image, then show how to do that with CSS (not the other way around). Focus on ‘getting things done’ rather than language features.

  4. Avoid unnecessary information. For example, do not go into the gory details of CSS specificity algorithms or JavaScript function hoisting. (I’ve seen both of these in 101 courses.) Stick to the basics — that’s plenty.

  5. Make examples as simple as possible. Get rid of all redundant content and code.

  6. Avoid jargon, fussy nomenclature and unhelpful analogies. Concepts such as ‘the cascade’ and  ‘the box model’ are easy to grasp in practice. Formal naming just makes them sound difficult. Most students will intuitively understand that div.foo overrides div (just ask them which one ‘wins’). Likewise for padding, borders and margins: good examples and simple diagrams can work better than formal descriptions and naming. Once students are comfortable with a conceptual model, you can mention the official name for it.

  7. Many people new to coding don’t use or understand hierarchical file systems. When you start, make sure everyone is comfortable with files and folders. Many problems for beginning web developers are caused by something ‘in the wrong place’.

  8. Beginners make different kinds of mistakes than experienced developers. Be aware of this when you’re debugging. Show beginners what to watch out for: missing angle brackets (<div class=”foo”), missing equals signs (<div class”foo”>), missing closing tags, copy-pasted curly quotes instead of straight quotes.

  9. Present a single best-practice approach and if necessary, go back later to show alternatives. There’s more than one way to do it is a healthy attitude to impart, but options can be confusing. In particular, beginning students do not need to consider browser compatibility handling.

  10. Teaching and examples should follow best practice and industry norms: use semantic elements, ===, single quotes in JavaScript, double quotes in HTML — and so on. You don’t need to go into the whys and wherefores, just be consistent and get students to follow best practice by default from the start.

    …and two extras:

  11. Don’t bother with the backstory, the history of the web, the things you used to do, and why things are the way they are now. Don’t explain HTML5 versus HTML4 or why JavaScript was invented. Web history doesn’t help students get started with coding. Rather than recounting the story of AJAX, just show the need to interact with servers and explain how to do that with fetch().

  12. Tailor your content and teaching to your audience. Try to work out how to reach a wide variety of people and capture their interest via problems they want or need to solve.

About Sam Dutton

I am a Developer Advocate for Google Chrome. I grew up in rural South Australia, went to university in Sydney, and have lived since 1986 in London, England. Twitter: @SW12
This entry was posted in HTML, Uncategorized, Web development. Bookmark the permalink.

4 Responses to A manifesto for teaching web development

  1. Pingback: Technical Training and The Training Manifesto – The Publishing Project

  2. Yes – files and folders! I am now on my third basic HTML tutorial, and not one has mentioned that a folder is a directory. I’ve had to piece that together myself, and I am still not sure I have it right.

  3. lpshoots says:

    Beginner here taking a class at OSC in Sacramento. I am loving it so far this was a really good read thank you for sharing. I feel like this is something I will read over more than once. missing bracket was one of my first mistakes and the fact that you mentioned Beginners make different kinds of mistakes than experienced developers. that is so insightful. not everyone thinks like that, defiantly changed a part of my thought process.. Thank you

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.