Enter “The Web Arcade”; teaching basic webmaking skills to teens
A few weeks ago I wrote a blog post about why learning on the web should look like the web. In the meantime I joined Mozilla’s Learning Team and together we have been working on something called “The Web Arcade” part of Mozilla’s Summer Code Party Campaign. The Web Arcade includes a set of projects aimed to youth, that can help anyone get started with HTML & CSS by remixing playful pages full of well… web goodness.
The tool we are using for “The Web Arcade” is called Webmaker (read Jess Klein’s blog posts to find out more) and it has been build upon @iamjessklein and @toolness Lovebomb, and is basically a brilliant editor and renderer all in one screen, that allows you to remix and share your web masterpieces with the world.
When we originally perceived “The Web Arcade” with Jess Klein a few weeks back we imagined it as a series of mini games, what we later came about to calling “projects” specifically designed to scaffold the experience of learning how to code a webpage for the first time.
Concept Art, in progress
The projects in “The Web Arcade” are designed to provide scaffolded yet open ended learning experiences; learners begin by hacking broken webpages to master basic HTML/CSS coding skills. As they progress in the Web Arcade they start learning about bits of code such as tags, elements and attributes. As they piece those bits of code together they have the choice of moving into more advanced projects, all while hacking webpages to create new ones, constructing theories of how the Open Web works and taking on the role of webmakers.
Below is a rough sketch of how the system works:
Following this sketch, we started building different projects in the Web Arcade. Here is a sneak preview of what is currently work in progress: (for more projects you can also check out Laura & Jess fantastic blog posts)
“MAKE your very own web masterpieces.”
- Project: HTML Card Game
- Project: Map of the Web Arcade!
This is the first project in the Web Arcade, a Map to guide you through your adventures. Not all the locations on the map though have a name and certain things look broken! Uh-Oh! Your goal in this project is to activate the map and even add your own flair to it. Get familiar with the syntax behind HTML by closing any open tags <> </> or fixing broken links that are missing a ” or two “”. Upon activating the map you reveal certain links that show you new projects.
Learning Objectives: <>, </>, what is a tag, how to open and close tags, what is an element.
The Map Missing closing tags and links
Map of the Arcade ready to be edited in the Webmaker tool
Map of the Arcade with fixed links
Map of the Arcade hacked and personalized
- Project: Passport-O-Matic: A
Learning Objectives: <title> <head> <body> <p> <img> <align>, src, privacy , CSS
Learning objectives: what is the Open Web, <a href=”..”> </a>, src attributes, elements, <title> <head> <body> <p> <img> <align>, CSS.
- Advanced Project: Internet Famous: U
Internet Famous Project ready to be hacked and become famous
Internet Famous Project in the webmaker tool
Learning objectives: synthesizing all previous HTML &CSS, design thinking and open web skills.
- Advanced Project: Web-structable. Have you always wondered “why people don’t get hand turkeys right? or why it is hard for some to sleep at night? (rhyme)” Well the time has come for you to make your contribution to the world of the open web and create a fine webpage tutorial using your HTML & CSS wisdom. Learning objectives: synthesizing all previous HTML &CSS, design thinking and open web skills.
Web-structable Project ready to be hacked
Web-structable Project in the Webmaker Tool
Well that is where we are for now, I am imagining there will be plenty of iteration going on as these mockups become working prototypes, as we come up with badges and as we keep testing our work in the following weeks. Till then please check our Flickr pool and Wiki for updates, and leave your feedback in the comments :)