53
edits
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. | <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>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> | ||
<br><br> | <br><br> | ||
<h3>Make your own rant page</h3> | <h3>Make your own rant page</h3> | ||