Webmakers/Projects

From MozillaWiki
Jump to navigation Jump to search

6907867555_eeda62c030.jpg

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 contributors will be able to share their own projects as well.

Tell us what you think

We're looking for testers like you for the beta 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

Internetfamous.jpg

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:Webpage Maker Skills: HTML & CSS, design thinking Difficulty:Intermediate

GO!


Hack the web arcade

Arcademap.jpg

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 ugly '90s pages pretty

Stuck90s.png

Everyone has an embarrassing moment. For the web it was 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, colors and layout to drag these webpage out of the grungey '90s.

Tool:Webpage Maker Skills: HTML and CSS, web design Difficulty:Intermediate

GO!


Remix your own TV commercial

Popdiy.png

Add your own voice to a cheesy old commercial. Add pop-ups and commentary, change meanings, and hack pop culture using Mozilla Popcorn.

Tool:Popcornm Skills: remix, web design Difficulty:Intermediate


GO!


Create your own "Inanimate Alice" story

Iathumb.png

This project uses the popular "Inanimate Alice" interactive novel and Mozilla Hackasaurus to create narrative mayhem. Youth can create their own narrative using characters and a storyline they create, learning how to remix the web along the way.

Tool:Hackasaurus Skills: HTML & CSS, writing, storytelling Difficulty:Easy

GO!


Make your own "webstructable" how-to

Webstructables.jpg

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!