Mozilla Thimble preview

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.
Of course, our Mozilla Webmaker ambitions are much bigger than just teaching HTML and CSS. PopcornMaker will be a major resource for helping people make and learn about interactive video on the web. And, later this year, we’ll start experimenting with ways to teach people Javascript, most likely through game modding and making.
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.

12 responses

  1. Eat Yr Ghost ( wrote on :

    This is a great project, but if we’re going to be teaching people how to code, can we teach them how to respect a user’s potential bandwidth and data allowance constraints?
    I notice your examples above are full of those code comments – I see these a lot, as well as self-hosted jQuery of which the site uses a fraction of the functionality and other wastes of data.
    Broadband access is still not as ubiquitous as we might like, and increasing volumes of Internet traffic come from mobile devices on metered plans. We have to teach up and coming developers to care about these things, too.

    1. Jasper wrote on :

      This project is simply awesome, for persons who want to start html coding and web designing, this is going to be very helpful.
      It will give a bunchstart who are interested in creating

  2. deimidisDeimidis wrote on :

    What is the license of this projects? I’m asking thinking in localizing to other languages, is there a good way to make it? (like fork the zoo exercise and localize this)

  3. Janet Swisher wrote on :

    Happy to see MDN content in the help pop-up. If there are ways we can make it more useful to Thimble, please get in touch.

  4. David wrote on :

    @deimidisDeimidis: the license is MPL2. We’re definitely planning to do localization, likely later in the summer.

  5. Jae wrote on :

    This is definitely gonna make a whole lot of things so easy. You guys should launch it sooner.

  6. Neville Moray wrote on :

    Looks marvellous! As an oldie who learned autocode in 1959 I will plunge into this one also.

  7. pvjlieuthier wrote on :

    Lovely. Will rock!

  8. Pingback from Mozilla Thimble preview | Technology and Educational Innovation on :

    […] on Share this:ShareLinkedInTwitterStumbleUponEmailTumblrLike this:LikeBe the first to like this […]

  9. Soki Briggs wrote on :

    Now i have no excuse to procrastinate learning Basic code –
    hosted a series of Kitchen table events with friends and we now feel like Web Devs already lol

  10. Pingback from Mozilla Thimble preview « Ahkeno’s Blog on :

    […] Like this:LikeBe the first to like this. Posted in: Mozilla Myanmar, Tech News | Tagged: css, HTML, learning, Mozilla Thimble, sharing, webmaker […]

  11. Pingback from Tres habilidades que los periodistas deberían aprender en 2013 : Lado B on :

    […] Ya sea sólo para mejorar un blog o para conceptualizar proyectos notables como la última obra maestra interactiva del New York Times, la programación es una habilidad valiosa para los periodistas. Hay una serie de recursos gratuitos para enseñarte los lenguajes de programación y diseño web. Puedes aprender HTML o CSS de forma práctica con el editor de páginas web Mozilla Thimble. […]