Learning HTML with Mozilla Thimble


A little over two years ago, I wrote a post about why one might want to write HTML. In that post, I pointed readers to a few HTML editors they might consider using, if they decided HTML was something they wanted to learn.

Last week, Mozilla released a new, online editor designed to make it easy for novices to create web pages using HTML and CSS. The editor, called Thimble, is part of Mozilla’s Webmaker project.

The project’s Get Started page offers two options: Start from scratch, which brings you to a mostly empty editor (and presumes you have some idea of what you’re doing), and Pick a project which—as one would expect—presents you with a list of projects to choose from. For purposes of my own exploration, I chose the “Learn HTML fast by making your own web page” project.

Thimble splits your browser window into two panes. On the left is an editor; on the right is a live preview pane, so you can immediately see how your work will display. While the “Start from scratch option” had presented me with a nearly empty editor window, in this case I was presented with a window that was far more helpful. Most of the editor was filled with comments providing explanation and instructions. None of this, of course, showed up in the preview window, so a user paying close attention will immediately see how to comment text in the editor so that it doesn’t appear when the page is loaded in a browser. Clicking on any of the HTML tags in the editor pops up a brief description of what the tag does.

Other projects are more complex, introducing the user to more of the things you can do with HTML and CSS. The Thimble editor also points out where there’s a problem. In the “Make a map of your world on the web” project, for instance, there’s an error deliberately built in, with a hint in the comments about how to fix it.

When you’re ready to publish the project, all that’s necessary is to click the “Publish” button at the top right of the editor. You’ll be provided with a link to the published page, as well as a link that enables you to edit the page further. Pages are published to a subdirectory of, but it’s certainly possible to copy the content of the web editor to a text file for publishing elsewhere.

For those interested in getting started with web page creation, Thimble’s worth a try. If you’ve already given it a try yourself, let us know what you think of it in the comments.


[Creative Commons licensed Flickr photo by dougbelshaw]

Return to Top