Using Mozilla's Thimble for Teaching Web Design

• ~400 words • 2 minute read

I've been teaching Intro to Web Design classes through Saturday Academy lately. One of the things I struggled with in preparing to teach the class was finding an online tool we could use. I was told the students would have Chromebooks and that any software we used would have to be online.

Originally I'd planned on using CodePen but one of the issues I had with it was the HTML editor didn't show the full document! The content you enter there is automatically inserted between the body tags in the output document.

For quickly sketching out ideas that makes all kinds of sense, but in the interest in educating kids about how and why a webpage is structured the way it is, I wanted to have all of that invisible structure.

After some searching I'd settled on because it met this requirement. We used it for the first class, and it got the job done, but I wasn't precisely thrilled with it. I still found it difficult to explain what was going on for kids that were completely new to webpages and coding in general.

For the second class however I discovered an infinitely better tool! Mozilla's Thimble is a fantastic tool for introducing kids to web design and development. These are some of the things I like about it:

  • You see the entire HTML document. I touched on this requirement before, but I think it's important to be able to see the actual document for beginners so we can talk about what different things do, like the DOCTYPE declaration, the title tag and various meta tags.

  • The editor is well done and has helpful autocomplete features. It's a web-version of Bracketsby Adobe and contains some autocompletion hints that I think are particularly useful for beginners: showing all the available HTML tags as you open a tag, previews of image URLs and CSS color codes and.

  • Clicking on elements in the DOM highlights the relevant code and vice-versa. This was huge! I think this did a tremendous amount towards helping the kids built the relations between the cryptic thing I was asking them to type the first week and what was showing up on the screen. Even as a professional I think that tool could come in handy from time-to-time.

  • It's free. Most of the web-based editors and tools seem to be free, but it's worth mentinoning.

So that's my brief review. Right now Mozilla's Thimble has a very strong lead at the top of my list for web-based teaching tools for web design.