Category Archives: Mozilla Webmaker projects

Starter projects and how-tos for the new Mozilla Webmaker site

Get excited and make things: beta test these new Mozilla Webmaker projects

The best way to learn something is by making something. So as part of Mozilla’s campaign to help the world learn coding and webmaking this summer, we created these new Mozilla Webmaker projects. Their mission: help anyone (especially youth) make something amazing on the web fast.

Help test them out?

Can you take a few minutes to beta test the projects below? Are they easy to use? Helpful for learning? Fun? Flammable?

What’s the idea?

It’s all part of the Mozilla Summer Code Party. Blast off is June 23, with local events and teach-ins running around the world all summer long.

Mozilla will provide curriculum and fun starter projects like these. Tools anyone can use to make and learn together, just about anywhere. At local partner events, Mozilla spaces, libraries, or gathered around their own kitchen table.

Try ’em out now. Kick the tires on these beta webmaker projects below and let us know what you think:

Make your own meme

Got what it takes to go viral and become internet famous? Prove it. This project lets you use your HTML and CSS swagger to create your own web page — featuring a meme to conquer all internet memes. Let your inner serious cat or Ryan Gosling “hey girl” shine.

–> G O <–

Remix cheesy TV commercials. Add your own voice, insert pop-ups, links and commentary to web video. Hack pop culture with the tasty new Mozilla Popcorn tool.

–> G O <–

Go back in time to make these ugly ’90s web pages not suck. Everyone has an embarrassing moment. For the web it was the 1990s, when websites were boxy, ugly and wore flannel. Wrangle your HTML and CSS style powers to change the content, colors and layout to drag these pages out of the grungy past.

–> G O <–

Hack your way through the web arcade

Say o hai to the “web arcade,” a collection of hackable mini-games that test your webmaking prowess. In this first mission, use HTML to fix a broken map of the arcade, unlocking new missions and exploring brave new webby worlds.

–> G O <–

Speak your mind

Got something to shout about? A rant, cause, passion project or block party you want the world to know about? Shout it from the rooftops by making your own web page in minutes, using this handy remixable template. Then share it via email, Twitter, Facebook or URL. Easy! </rant>

–> G O <–

Create your own “Inanimate Alice” episode

Create transmedia mayhem. Use the popular “Inanimate Alice” interactive novel and Hackasaurus to make your own storylines, characters and mashups, remixing the web as you go.

–> G O <–

Create your own awesome-looking “how-to” page. Use your newfound HTML, CSS and Popcorn wisdom to create the world’s greatest web page tutorial. What do you want to make today?

–> G O <–

Even more webmaker projects are on the way:

  • How to make your own animated GIF
  • How to tweak your Tumblr theme with CSS
  • Make your own avatar
  • + lots more interest-based projects from Hive, more advanced HTML and CSS projects, more from the NESTA event and more…

Sneak peek: new Mozilla Webpage Maker

It’s webmaking made ridiculously simple. The new Mozilla Webpage Maker tool will help you make your own fully real web page in about 8 seconds flat. All through a simple two-pane editor that makes the basics of HTML dead easy to learn. Test out the prototype here.

Get involved with Webmaker Projects

Get involved with Mozilla’s Summer Code Party