Webmakers/Projects: Difference between revisions
Iamjessklein (talk | contribs) No edit summary |
No edit summary |
||
| Line 5: | Line 5: | ||
</p> | </p> | ||
<h2> Projects </h2> | <h2> Projects </h2> | ||
<p><b>Internet Famous: | <p><b>Internet Famous: Make a Meme</b> | ||
</p><p>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 | </p><p>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 to claim your Webmaking powers in the Web Arcade. | ||
</p> | </p> | ||
<p>Topic: </p> | <p>Topic: </p> | ||
<p>Tool: </p> | <p>Tool: Webmaker </p> | ||
<p>Skills: </p> | <p>Skills: HTML &CSS, Design-Thinking </p> | ||
<p>Difficulty: </p> | <p>Difficulty: Intermediate </p> | ||
<p><b>Map of Web Arcade | <p><b>Make your own Map of the Web Arcade</b></p> | ||
<p> | <p>HTML is a funny looking language; it is written inside brackets like <this> and </this> and sometimes uses "quotes like this." In this project you will begin your journey in the world of HTML by exploring the syntax behind it to activate and customize a broken Map of the Web Arcade. Use the comments written */ between these */ signs to navigate yourself along your travels! | ||
</p> | </p> | ||
<p>Topic: </p> | <p>Topic: </p> | ||
<p>Tool: </p> | <p>Tool: Webmaker</p> | ||
<p>Skills: </p> | <p>Skills: HTML syntax</p> | ||
<p>Difficulty: </p> | <p>Difficulty: Beginner</p> | ||
<p><b>Webstructables</b></p> | <p><b>Webstructables: make a tutorial</b></p> | ||
<p>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. | <p>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 and Popcorn wisdom. | ||
</p> | </p> | ||
<p>Topic: </p> | <p>Topic: </p> | ||
<p>Tool: </p> | <p>Tool: Webmaker</p> | ||
<p>Skills: </p> | <p>Skills: HTML & CSS, Popcorn, teaching others</p> | ||
<p>Difficulty: </p> | <p>Difficulty: Advanced </p> | ||
<p><b>Stuck in the 90s</b></p> | <p><b>Stuck in the 90s</b></p> | ||
<p> | <p>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... | ||
</p> | </p> | ||
<p>Topic: </p> | <p>Topic: </p> | ||
| Line 40: | Line 40: | ||
<p>Difficulty: </p> | <p>Difficulty: </p> | ||
<p><b> | <p><b>Hack a Commercial</b></p> | ||
<p>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. | <p>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. | ||
</p> | </p> | ||
Revision as of 04:38, 4 May 2012
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: 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 to claim your Webmaking powers in the Web Arcade.
Topic:
Tool: Webmaker
Skills: HTML &CSS, Design-Thinking
Difficulty: Intermediate
Make your own Map of the Web Arcade
HTML is a funny looking language; it is written inside brackets like <this> and </this> and sometimes uses "quotes like this." In this project you will begin your journey in the world of HTML by exploring the syntax behind it to activate and customize a broken Map of the Web Arcade. Use the comments written */ between these */ signs to navigate yourself along your travels!
Topic:
Tool: Webmaker
Skills: HTML syntax
Difficulty: Beginner
Webstructables: make a tutorial
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 and Popcorn wisdom.
Topic:
Tool: Webmaker
Skills: HTML & CSS, Popcorn, teaching others
Difficulty: Advanced
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...
Topic:
Tool:
Skills:
Difficulty:
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: