Webmakers/Projects

Help test these new Webmaker Projects

Help kick the tires on the beta projects below. Are they easy to use? Helpful for learning? Fun?
Let us know by filling out this super fast and easy survey:

Tell us what you think

What are these "Webmaker Projects," anyway?

Learning by making. Webmaker projects are designed to help you make something amazing on the web fast.

Using Mozilla Webmaker tools like Popcorn, Hackasaurus, and Webpage Maker, you can:

• remix web sites to make them your own,
• make your own pages, interactive videos and other great stuff in a matter of minutes,
• learn the basics of webmaking skills like HTML and CSS.

We're preparing a set of these projects for the Mozilla Summer Code Party. The goal: teach the world the basics of coding and webmaking. Through bite-sized experiences that are easy, social and fun. Partners and contributes will be able to share their own projects as well.

Tell us what you think

We're looking for beta testers like you for the prototype projects below. Are they:

• Easy to use? Where do things feel confusing or broken? Is it easy to dive in and get started?
• Helpful for learning? Do they serve the goal of teaching HTML, CSS and other webmaking basics?
• Fun? That's crucial! Where are they most fun? Where do they lag?

Webmaker Beta Projects: test 'em out now

Make your own meme

Do you have what it takes to go viral and become internet famous? Prove it. This project let's 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.

Tools used:WebPagemaker Skills: HTML & CSS, design thinking Difficulty:Intermediate

GO!

Play hackable games in the web arcade

HTML is a funny-looking language. It's written in brackets like <this> and </this> and sometimes uses quotes "like this." In this project, you journey through the world of HTML by exploring the syntax behind it. Use the comments written */ between these */ signs to navigate your way. Your goal: fix a broken map of the web arcade to unlock new missions and explore brave new webby worlds.

Tool:Webpage Maker Skills: HTML Difficulty:Easy

GO!

Make your own "webstructable" how-to

This project lets you create your own web page tutorial. Use your new-found HTML, CSS and Popcorn wisdom to create the world's greatest how-to. What do you want to make today?

Tool:Webpage Maker Skills: HTML & CSS, Popcorn, teaching others Difficulty: Advanced

GO!

Stuck in the 90s

Everyone has an embarrassing moment. For the Web that moment was in the 90s. Back then websites were boxy and ugly - kind of like this page! Wrangle your HTML and CSS style powers to change the content, the colors and the layout so that this webpage doesn't feel like its stuck in the 90's anymore...

Tool:WebPagemaker Skills: HTML & CSS, designing for the web Difficulty:Intermediate

Click here to Make It

Hack a Commercial

Add your own voice to an old commercial by adding popups and commentary using the Mozilla Popcornmaker. In this DIY activity, you can change meanings, extend messages, and otherwise recontextualize the video using the ever popular "Pop Up Video" template.

Tool:Popcornmaker Skills: hacking, designing for the web Difficulty:Intermediate

Click here to Make It

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.

Tool:Hackasaurus Skills: HTML & CSS, writing, writing for the web Difficulty:Beginner