Mozilla introduces an online code editor “Thimble” to learn HTML, CSS and JavaScript

Mozilla is introducing the new Thimble, an upgraded tool for teaching and learning web literacy in a simple, hands-on and visual fashion.

Thimble is an online code editor that makes it easy to create and publish your own web pages while learning HTML, CSS & JavaScript.

Thimble lets users to write and edit HTML, CSS, and JavaScript on the left side of their screen, and watch their code come to life on the right.

Learners can start with simple remixes, changing words and images on a page to familiarize themselves with code and build confidence. Learners can also work their way toward creating entire web pages from scratch.

Thimble is used by educators in amazing ways: middle schoolers in Virginia building apps, activists in Barcelona designing net neutrality posters, and university students in Mombasa hacking together projects.

Mozilla ThimbleThimble can be used by educators to create a customized and interactive classroom experience, or used by independent learners eager to teach themselves via step-by-step tutorials.

All of Thimble’s creations are open source and fully remixable. And Thimble itself is free and open source, always.

In 2014, Thimble was recognized with the ON for Learning Award from Common Sense Media, an accolade for outstanding digital media products that educate and engage young people.

Mozilla built enhancements that transform Thimble into not just a better code editor, but also a rich platform for educators to build curriculum on.

The updates include:

  • Users can now build and link multiple web pages, rather than just one, within a single project
  • A more guided learning experience featuring easy-to-use tutorials, auto-closing tags and autocomplete
  • A sleeker look and feel with light and dark theme options, an easy-to-use color picker, and easy access to all of your files and projects
  • You can now drag and drop a zipped website into the editor, expand it, and start hacking immediately
  • A mobile browser preview mode, to see how your project will appear on the mobile Web
  • Auto save, extensions, a selfie-taker and other new features

The new Thimble is the result of collaboration between Mozilla and the Seneca College Centre for Development and Open Technology, and research was funded by the Natural Science and Engineering Research Council of Canada (NSERC). The new, more powerful Thimble is also made possible through our incorporation of the open source text editor Brackets.

The Thimble community has a rich history of creativity: teachers create template projects for their students to remix; students remix each others projects for collaborative learning; and educators share their curriculum and teaching activities with colleagues.

Thimble can be used to help others read, write and participate online — and make the Web a better place.