RSS


I am Chloe Varelidi. I work for Mozilla and also run Athens Plaython . This is my blog. The subjects range from game design, to learning & the open-web, to one-eyed monsters.

You can check more of my work at varelidi.com or follow me @varelidi on twitter.

Archive

Apr
24th
Tue
permalink

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) 

Welcoming Message:

“Enter the Web Arcade to explore the world of the Open Web ; a place made out of serious cats, planking videos and minecraft  empires! The Web Arcade offers a collection of mini games that help you level up your HTML & CSS skills and MAKE your very own web masterpieces.”

  1. Project: HTML Card Game
    A creative and strategic card game that blends friendly competition with learning the building blocks of the web! Download and print a stack of game cards to get started.  Gameplay occurs as you strategically mix and match cards your hand to create unique snippets of code and defeat other players’ hands. May the best webmaker win! Learning Objectives: HTML syntax
     
  2. 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
     
  3. Project: Passport-O-Matic: A unique blend of HTML agility,CSS and firepower. YOU are no ordinary character. Your goal in this project is to MAKE your undercover passport in order to explore the arcade defeating every challenge with your self-esteem and special powers. Learning Objectives: <title> <head> <body> <p> <img> <align>, src, privacy , CSS
     
  4. Project:  The Bread Cat Bakery: The Bread Cat Bakery is throwing a party. Unfortunately the only attendees are undercover Serious Cats. Bummer! Your goal in this game is to change the <img> and <a> tags to include whoever YOU think belongs at  this party. Did someone say Brony? Learn about attributes such as src to make sure there is no undercover surprises this time around. Learning objectives: linking, <a href=”..”> </a>, src attributes, elements
     
  5. Project: Open Webville: The Fantastic Open WebVille isn’t just your run-of-the-mill “Ville”. You see, it’s managed by Madame Lille a recent alumnus from the School of Farming, a former politician who is relaunching her career in a new direction so she can focus more on velvet bird painting and organic producing. In this project Madame Lille has started putting together a guide book for Open WebVille. Use your superstylin’ ways and HTML dexterity to hack her guidebook and help her fill it in. Learning objectives: what is the Open Web, <a href=”..”> </a>, src attributes, elements, <title> <head> <body> <p> <img> <align>, CSS.
     
  6. Advanced Project: Internet Famous: Use your HTML and CSS swagger to mix and match elements to make a webpage featuring a meme to conquer all internet memes. Let your inner serious cat or Ryan Gosling hey girl shine  and claim your Webmaking powers by posting a video of how you did it. Learning objectives: synthesizing all previous HTML &CSS, design thinking and open web skills.

    Internet Famous Project ready to be hacked and become famous


    Internet Famous Project in the webmaker tool
     
  7. 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 :)
  1. anya-gomes reblogged this from chloeatplay
  2. chloeatplay posted this
blog comments powered by Disqus
Comments