Later this month, we’ll be releasing Mozilla Thimble. Thimble is a simple web page editor combined with a series of ‘projects’ that help you learn the basics of HTML and CSS. The idea is to get people to learn basic web coding by just diving in and making something. Thimble projects make that easier by giving people guidance and a head start.
Thimble will go live just in time for our Summer Code Party campaign that kicks off on June 23. We want people using Thimble at their ‘kitchen table’ events, so I thought I should give people a preview of what’s coming.
The first thing you’ll see is a gallery of Thimble projects. The initial projects are designed to grab the interest of 8 – 14 year olds and to invite them to start making. We’ll be rolling out projects for older teens and adults later in the year.
As a part of this ‘interest grabbing’ approach, a number of the projects have been developed by organizations that already work with young people. This one is from the London Zoo. It teaches basic HTML and a bit about endangered species at the same time.
The Thimble interface itself is a simple side-by-side web page editor based on Code Mirror. The left pane is the code, and the right pane is the page preview rendered in real time.
The project pages are a mix of instructional comments and actual page elements. In the London Zoo Awesome Animal Builder project, the aim is to create your own species by combining image files from real endangered species that the Zoo wants you to learn about.
Here I was able to change the background of my species picture by changing the CSS class. As the code comments explain, I can choose between ‘ocean, rainforest or desert.’
If you’re new to HTML and CSS (that’s who this is aimed at), we’ve put in a bunch of features designed to help you if you get stuck with tasks like this. For example, you can click on any tag to get info on what it does.
Also, we’ve included pop-up hints that help you figure out what the right syntax is for a particular element.
After changing my CSS class (above), I then started moving different PNG files from different species into the frame with the question marks at the top of the page. These files are all given to me lower in the page along side info about the real endangered species. All I have to do is cut and paste the image URLs in order to build my animal.
And, voila! After moving a few more image URLS I now have a completed animal. I’ve also learned a) how headline tags work in HTML, b) the idea that CSS can be used to change the look of a major element of a page and c) that images in a web page are just references to a file somewhere on a server.
These may sound like small things to learn — but it’s exactly these small things we want people to start with. There are other projects in the gallery that deal with more advanced HTML and CSS topics. And, in a later release, anyone will be able to submit a project page to teach whatever aspect of web development tickles their fancy. Our hope is that Thimble can become a ‘Wikipedia of webmaking lessons’, which would be an awesome resource for the world to have.
Early next week, we’ll release a preview version of Mozilla Thimble to people who are organizing Summer Code Party events. Most of these events are small and short — just you at your kitchen table or in your living room teaching two or three people a bit about how to code for the web. If you want to organize an event like this (and see the Thimble preview), sign up here on the Mozilla Webmaker events site.