Webmaking with Mozilla #mozparty

Mozilla have a big aim: to “help millions of people move from using the web to making the web“. They want to create a ‘generation of webmakers’, and last week I joined a group of enthusiastic volunteers to help work on one of the first steps towards achieving this.

At their ‘London Learning JamMozilla got together a group of interested parties, with the remit to create ‘missions’ to teach young people skills for webmaking. To help us do this they revealed a new tool they have been building; Thimble. This is a web based realtime code editor, which allows you to write HTML and CSS just by visiting a website, and see the results of your code as you are coding. It also gives you hints and tips to help you along the way, guessing what you might be trying to code, and spotting mistakes and helping you correct them.

It’s a really powerful tool; letting you get into coding really quickly with nothing more than a browser, and publish what you create on the web without having to mess with hosting, FTP or local Apache installs. It just works.

I have had a small amount of experience messing around with HTML in the past, and what I have usually found myself doing is copying and pasting chunks of code from Google searches until I have got the desired effect. This leads to a certain amount of learning, but I found the realtime aspect of Thimble really got me into writing my own code from scratch, even when I had to look things up I still wrote it because the result is so immediate that you can really see what each part of the code is doing.

Despite knowing very little code ourselves, myself and Steve Bunce were able to create the learning mission ‘Wickedpedia‘ from concept to completion in less than a day. We tried to design this around the Mozilla ethics of hacking and making. The concept was to teach people how to create hyperlinks in the real context of supporting content on Wikipedia. Learners use the Thimble tool to ‘hack’ an existing Wikipedia profile to add information of their choice, and at the end can publish their own version of the page. The idea was to teach both the technical skill of hyperlinking, and the more content based skill of supporting information, and leave the user with something at the end which they had made.

These concepts of hacking and making are really central to Mozilla’s ethic, and having spent a day earlier that week working with young people on creating games using Stencylworks, I got thinking about how this approach is different. Tools like Stencylworks and Scratch encourage young people to make things, but they largely do so by allowing them to create using building blocks, which whilst they use similar processes and concepts to languages for coding, they hide the code from them. This allows learners to create some quite sophisticated concepts from nothing, but some developers I have talked to express the concern that there is then a big jump and a whole set of ‘re-learning’ that has to happen before someone can start working with ‘real’ code.

Where Mozilla’s approach differs is their tools get people stuck into the ‘real’ code from the start. This makes it hard to make things from scratch, so instead their ethic is to ‘hack’; to encourage learners to take existing content and repurpose it, learning as they go. There are certainly pros and cons of both approaches, but what I really like when working with code as a learner in Thimble was that the experience was really authentic. I knew that the code I was writing could be taken out and edited using other tools, and could be repurposed and published without some special ‘export’ process- I was learning about the code from the basics, yet still creating something of my own in the form of a remix of existing content.

During the ‘School Showcase’ at the PELeCON conference myself and Miles Berry got into a debate about ICT. To simplify somewhat, I was singing the praises of the design process involved in making apps, and he was arguing that designing software is not the same as coding software and that we needed learners to also gain experience of the deeper technical skills. I have to say that having spent two days working with Mozilla’s tools I really came away with a renewed enthusiasm for the deeper technical skills that ‘getting your hands dirty’ with real code can bring.

Thimble holds your hand a bit, but it lets you work with authentic code of which the web is made up. It also lets you break things, as you would in ‘real life’, and then suggests how you might fix them. The aesthetic for learning Mozilla have developed is a seductive model because it allows you to get stuck in to real coding projects, whilst learning from what is already out there, all framed by the act of making something. I came away with a renewed enthusiasm for making things, and this has made me reflect on the importance of making for learning, not just in computing and coding but also more widely.


More on a similar theme:

Mitch Resnick – Make School More Like Kindergarten

Mozilla- ‘Revealing the Lego lines’

Doug Belshaw- Mozilla London Learning Jam

Michelle Thorne- London Learning Jam

William Duyk- Mozilla London Learning Jam






2 responses to “Webmaking with Mozilla #mozparty”

  1. […] practice; this is not an amount of time that can currently be spent on one subject in school. At Mozilla’s ‘Learning Jam’ last week, Doug Belshaw and I were discussing the lack of specialist programming skills amongst teachers. He […]

  2. […] was a prolific month, with a webmaking session with Mozilla, some interesting challenges from the Frog conference, and the discovery of some amazing examples […]

Leave a Reply

Your email address will not be published. Required fields are marked *