Webmakers/Projects: Difference between revisions

no edit summary
No edit summary
No edit summary
Line 20: Line 20:


<h1> Webmaker Beta Projects: test 'em out now</h1>
<h1> Webmaker Beta Projects: test 'em out now</h1>
<h3>Wrangle the HTML</h3>
[[Image:internetfamous.jpg |270px|left]]
<p> HTML is not complicated or difficult to wrangle. In this project you will get a hold of the basics and even realize that you know a bit of HTML already!
</p>
'''Tools used:'''Webpage Maker  '''Skills:''' HTML Basics ''' Difficulty:'''Beginner
<h3>[http://toolness.github.com/friendlycode/?p=/mission-slurp%3Furl%3Dhttp%253A//jessicaklein.com/betatest/webarcademap.html GO!]</h3>
<br><br>
<h3>Hack a Map</h3>
[[Image:arcademap.jpg |270px|left]]
<p>HTML is a funny looking language; it is  written inside brackets like <this> and </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 and explore brave new webby worlds.
</p>
'''Tool:'''Webpage Maker '''Skills:''' HTML syntax''' Difficulty:'''Easy'''
<h3>[http://toolness.github.com/friendlycode/?p=/mission-slurp%3Furl%3Dhttp%253A//jessicaklein.com/betatest/webarcademap.html GO!]</h3>
<br><br>
<h3>Bakery Bash</h3>
[[Image:internetfamous.jpg |270px|left]]
<p> If you are a fan of the web you have already met the loaf cat. A proud owner of a Bakery, the loaf cat is throwing a party -a Bakery Bash if you will. Unfortunately the guests are all undercover Serious Cats. Bummer! Your goal in this game is to fix the links and clickable images so that they no longer point to the serious cat. Once you are done bring a few more guests and add some music to get this party started!
</p>
'''Tools used:'''Webpage Maker  '''Skills:''' HTML, links, images ''' Difficulty:'''Easy
<h3>[http://toolness.github.com/friendlycode/?p=/mission-slurp%3Furl%3Dhttp%253A//jessicaklein.com/betatest/webarcademap.html GO!]</h3>
<br><br>
<h3>Avatar-O-Matic</h3>
[[Image:internetfamous.jpg |270px|left]]
<p> There are people who are on the web, and then there are people who MAKE the web.- Who do YOU want to be? Your goal in this project is to MAKE your very own webmaker avatar. In this unique blend of HTML agility, CSS and firepower  you are going to mix and match the images on this page to create your very own webmaker page and share what you are passionate about making.
</p>
'''Tools used:'''Webpage Maker  '''Skills:''' HTML & CSS, positioning, privacy ''' Difficulty:'''Intermediate
<h3>[http://toolness.github.com/friendlycode/?p=/mission-slurp%3Furl%3Dhttp%253A//jessicaklein.com/betatest/webarcademap.html GO!]</h3>
<br><br>
<h3>Make your own meme</h3>
<h3>Make your own meme</h3>
[[Image:internetfamous.jpg |270px|left]]
[[Image:internetfamous.jpg |270px|left]]
<p><b>Do you have what it takes to go viral and become internet famous?</b> 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.
<p><b>Do you have what it takes to go viral and become internet famous?</b>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. You might wonder  what is a meme? Well a meme refers to an internet phenomena: think  viral videos, web celebs, fuzzy animals… So let your inner squirrel,  serious cat, Brony or Ryan Gosling “Hey girl,” shine.  
</p>
</p>
'''Tools used:'''Webpage Maker  '''Skills:''' HTML & CSS, design thinking ''' Difficulty:'''Intermediate  
'''Tools used:'''Webpage Maker  '''Skills:''' HTML & CSS, design thinking ''' Difficulty:'''Intermediate  
<h3>[http://toolness.github.com/friendlycode/?p=/mission-slurp%3Furl%3Dhttp%253A//jessicaklein.com/betatest/internetfamous.html GO!]</h3>
<h3>[http://toolness.github.com/friendlycode/?p=/mission-slurp%3Furl%3Dhttp%253A//jessicaklein.com/betatest/internetfamous.html GO!]</h3>
<br><br>
<br><br>
<h3>Hack the web arcade</h3>
[[Image:arcademap.jpg |270px|left]]
<p>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.
</p>
'''Tool:'''Webpage Maker '''Skills:''' HTML''' Difficulty:'''Easy'''
<h3>[http://toolness.github.com/friendlycode/?p=/mission-slurp%3Furl%3Dhttp%253A//jessicaklein.com/betatest/webarcademap.html GO!]</h3>
<br>
<h3>Make ugly '90s pages pretty</h3>
<h3>Make ugly '90s pages pretty</h3>
[[Image:stuck90s.png|270px|left]]
[[Image:stuck90s.png|270px|left]]
Line 40: Line 61:
'''Tool:'''Webpage Maker  '''Skills:''' HTML and CSS, web design ''' Difficulty:'''Intermediate
'''Tool:'''Webpage Maker  '''Skills:''' HTML and CSS, web design ''' Difficulty:'''Intermediate
<h3>[http://toolness.github.com/friendlycode/?p=/mission-slurp%3Furl%3Dhttp%253A//jessicaklein.com/betatest/elements.html%2523 GO!]</h3>
<h3>[http://toolness.github.com/friendlycode/?p=/mission-slurp%3Furl%3Dhttp%253A//jessicaklein.com/betatest/elements.html%2523 GO!]</h3>
<br><br>
<h3>Make your own "webstructable" how-to</h3>
[[Image:webstructables.jpg|270px|left]]
<p>Are you an expert at drawing anime character? or how about surviving your first night in Minecraft? 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?
</p>
'''Tool:'''Webpage Maker  '''Skills:''' HTML & CSS, Popcorn, teaching others''' Difficulty:''' Advanced
<h3>[http://toolness.github.com/friendlycode/?p=/mission-slurp%3Furl%3Dhttp%253A//dl.dropbox.com/u/5445372/site/web-structable.html GO!]</h3>
<br><br>
<br><br>
<h3>Remix your own TV commercial</h3>
<h3>Remix your own TV commercial</h3>
Line 56: Line 84:
<h3>[https://wiki.mozilla.org/Webmakers/Projects/InanimateAlice-DIY GO!]</h3>
<h3>[https://wiki.mozilla.org/Webmakers/Projects/InanimateAlice-DIY GO!]</h3>
<br><br>
<br><br>
<h3>Make your own "webstructable" how-to</h3>
[[Image:webstructables.jpg|270px|left]]
<p>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?
</p>
'''Tool:'''Webpage Maker  '''Skills:''' HTML & CSS, Popcorn, teaching others''' Difficulty:''' Advanced
<h3>[http://toolness.github.com/friendlycode/?p=/mission-slurp%3Furl%3Dhttp%253A//dl.dropbox.com/u/5445372/site/web-structable.html GO!]</h3>
<br><br>
<br><br>
<h3>Make your own rant page</h3>
<h3>Make your own rant page</h3>
53

edits