Learning HTML basics with Thimble from Mozilla

At some point you may have been asked to share your coding knowledge with friends, kids in your family, or just had a desire to teach others in the community. If you’re going to start with the basics of HTML, especially with younger students, it’s going to be so much easier with Thimble from Mozilla.

Thimble is a free online code editor that allows students to make changes to HTML code on the left side and see the result in real time on the right. The key to helping spark the curiosity is seeing that connection between their action and outcome. It seems like magic to them, they want to learn how it all works, and the desire to learn is ignited.

What makes Thimble useful

One of the neat aspects of this tool is that mistakes or code that is broken are highlighted. With this setting students can quickly self correct their own page and catch errors early on.

A deep dive into webmaker reveals it’s a larger collection of resources to encourage learning web literacy. As students start to learn core HTML skills they will earn badges from demonstrating that skill in their actual projects.

Why not just use an editor and browser?

Using a tool like Thimble eliminates the ramp up time and gets straight to learning. Students may be borrowing grandma’s laptop, some are using a mac, some are using various versions of Windows, etc. Rather than spend our entire time together working through computer setup differences we get straight to the code.

Why not use JSFiddle or CodePen?

Both JSFiddle and CodePen are fantastic tools but in the very beginning less is more. Eliminating distractions helps to focus on the skill challenge at hand rather than having beginners feel overwhelmed by seeing all the components they don’t know yet, like javascript or css.

The best way to get started

If you don’t know what to teach take a look at some of the Thimble remixes with step by step instructions on building new skills. I’ve tried several tools for enabling young beginners to learn HTML and Thimble is hands down my favorite starting point. Whether teaching family and friends, or hosting your own webmaker event, Thimble is a go to resource for creating excitement about building for the web.