It's the first Monday of a new month, and you know what that means: a new theme for CodePen Challenges! This month's theme is Teaching.

Building a Pen can be an interesting way to teach a concept. You don't have the benefit of your voice, but you do have a student who is likely to be actively seeking understanding. You could use explanatory text, or you code might explain itself. You could make things interactive, animated, or step-by-step. You could even teach-in-reverse by posing a question that forces the someone to learn to answer!

We came about this theme when thinking about this month's excellent sponsor: An Event Apart. AEA is a conference series that travels around different cities in the U.S. putting on 2 and 3 day single-track shows with incredible speaker line-ups. You'll learn from industry-defining speakers there.

But you can be a teacher too. You know things that other people don't, and you can teach them in your own unique way. Let's tap into that, not only to help others, but because teaching always helps you understand things in a deeper way as well.

Week One: Teach an HTML Concept.

You got your <div>s and your <span>s. Headers, links, lists... hmmmm, what else? The sidebar of the HTML elements reference on MDN lists 140 tags. Certainly a lot to know! Say you need to teach someone one of these tags, or some other important HTML concept.

Your challenge: do it with a Pen.


To participate: Create a Pen → and tag it codepenchallenge and the weekly tag cpc-teach-html. We'll be watching and sharing the best stuff on our blog, Twitter, and Instagram (Use the #CodePenChallenge tag on Twitter and Instagram as well).

Ideas

  • Interview a beginner (or even someone more advanced, but who remembers being a beginner) about what they find confusing in HTML. Is there something that just never clicks for them, or that the need to look up regularly?
  • People ask questions in our Spectrum chat pretty regularly, maybe one of their questions will spark an idea for teaching an HTML concept.
  • Teaching HTML doesn't necessarily mean teaching it element by element or understanding the semantics of every possible combination. Could you teach HTML philosophically somehow? Have you seen some HTML educational material that's done well you could emulate, or done poorly you could fix?

Resources

  • freeCodeCamp has an incredible, and of course free, curriculum on HTML. It's worth a look through for interesting teaching opportunities.
  • Besides the HTML elements reference linked above, MDN has a Learning HTML guide which has a subsection on problem solving. What if you approach an HTML lesson that way: solving a problem someone might have.
  • Khan Academy also has HTML courses, which have interactive lessons and even quizzes. An HTML quiz might be interesting, huh?