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.
I think we can do a better job of teaching basic web skills.
- 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.
- Wherever possible, show don’t tell. Emphasise learning by doing. Online or live, avoid presenting or talking for more than a few minutes.
- 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.
- Make examples as simple as possible. Get rid of all redundant content and code.
- 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.
- 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’.
- 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.
- 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.
…and two extras:
- 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.