Webmakers/Projects

What are projects?

Webpagemaker Projects help you to learn something by hacking an existing webpage to make your own. In conjunction with the Mozilla Summer Code Party we will be launching this initiative by releasing a set of game-like projects that will help you to develop basic HTML and CSS skills and make several unique webpages. In addition to Mozilla projects, participants will have the opportunity to submit their own projects for others to tinker with.

The Mozilla Foundation will be creating several different kinds of projects- so that users will be able to make web-based projects using Webpagemaker, Popcornmaker, the Hackasaurus X-Ray Goggles or access instruction DIY recipes. All of these projects will eventually accessed through the Mozilla Webmakers site.

As the Mozilla Webmakers site is in development, we will be staging some of the Projects here so that we can user test them prior to the Summer release.

Projects

Internet Famous: How to Make a Meme

There are people who are on the web, and then, there are people who MAKE the web. Do you have what it takes to go viral and become internet famous? Prove It. In this mission you will 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.

Topic:

Tool:

Skills:

Difficulty:

Map of Web Arcade: How to open and close tags

A Map of the Arcade that contains many locations such as the Bread Cat Bakery, The Angry Birds Spa, Princess Peach Center for Women Empowerment etc. Not all the locations on the map though have a name and certain things look broken! Uh-Oh! Your goal in this game is to activate the map by getting familiar with the syntax behind HTML, closing any open tags <> </>. Upon activating the map you reveal certain links that show you new mini games.

Topic:

Tool:

Skills:

Difficulty:

Webstructables

Have you always wondered "why people don't get hand turkeys right? or why it is hard for some to sleep at night? " 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.

Topic:

Tool:

Skills:

Difficulty:

Stuck in the 90s

The Web was much younger back in the 90s. We all have some embarrassing thing in our past, and for the Web it was the design. In the 90s websites were boxy and ugly. In this Mission, you'll change the CSS and HTML of this page to make it pretty! Keep your eye on the comments, they'll give you tips. Once you get the hang of changing the CSS and HTML, make this page your own. Change the content, the colors, the layout! Change whatever you like, you have complete control!

Topic:

Tool:

Skills:

Difficulty:

How to Hack a Commercial

Add your own voice to an old commercial by adding popups and commentary using the Mozilla Popcornmaker. You can change meanings, extend messages, and otherwise recontextualize the video.

Topic:

Tool:

Skills:

Difficulty:

Inanimate Alice DIY

A user generated digital novel and Hackasaurus X-ray Goggles, what better tools to engage the future generation of webmakers! The mission is to teach the basics of coding through the lens of youth interest in storytelling. This challenge invites youth to creative a narrative based on characters and a storyline they create, while learning how to remix the web.

Topic:

Tool:

Skills:

Difficulty: