--- title: Using Mozilla's Thimble for Teaching Web Design author: George Mandis date: 2017-01-30 description: A brief review: Thimble is a great web-based tool for teaching web design and front-end development. tags: post, post, teaching, education --- I've been teaching Intro to Web Design classes through [Saturday Academy](http://saturdayacademy.org) 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](http://amzn.to/2jNz1sG) and that any software we used would have to be online. Originally I'd planned on using [CodePen](http://codepen.io) 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 [jsbin.com](http:/jsbin.com) 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](https://thimble.mozilla.org/en-US/) 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 [Brackets](http://brackets.io/)by 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](https://thimble.mozilla.org) has a very strong lead at the top of my list for web-based teaching tools for web design.