Confirmed users
518
edits
Webmakers/Projects: Difference between revisions
Jump to navigation
Jump to search
no edit summary
No edit summary |
Iamjessklein (talk | contribs) No edit summary |
||
| Line 12: | Line 12: | ||
<b>Learning by making</b>. Webmaker projects are designed to help you make something amazing on the web fast. | <b>Learning by making</b>. Webmaker projects are designed to help you make something amazing on the web fast. | ||
Using Mozilla Webmaker tools like Popcorn, Hackasaurus and | Using Mozilla Webmaker tools like Popcorn, Hackasaurus and Thimble, you can: | ||
* take apart and remix web sites, | * take apart and remix web sites, | ||
* make your own webpages, interactive videos and other cool stuff in minutes, | * make your own webpages, interactive videos and other cool stuff in minutes, | ||
| Line 22: | Line 22: | ||
<h3>Wrangle the HTML</h3> | <h3>Wrangle the HTML</h3> | ||
[[Image:HTML_BASIC_coverimage-01.png |270px|left]] | [[Image:HTML_BASIC_coverimage-01.png |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> HTML is not complicated or difficult to wrangle. In this project you will get a hold of the basics and you might even realize that you know a bit of HTML already. | ||
</p> | </p> | ||
'''Tools used:''' | '''Tools used:'''Thimble '''Skills:''' HTML Basics ''' Difficulty:'''Beginner | ||
<h3>[http://toolness.github.com/friendlycode/?p=/mission-slurp%3Furl%3Dhttp%253A//jessicaklein.com/betatest/webarcademap.html GO!]</h3> | <h3>[http://toolness.github.com/friendlycode/?p=/mission-slurp%3Furl%3Dhttp%253A//jessicaklein.com/betatest/webarcademap.html GO!]</h3> | ||
<br><br> | <br><br> | ||
| Line 31: | Line 31: | ||
<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>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> | </p> | ||
'''Tool:''' | '''Tool:'''Thimble '''Skills:''' HTML syntax''' Difficulty:'''Easy''' | ||
<h3>[http://toolness.github.com/friendlycode/?p=/mission-slurp%3Furl%3Dhttp%253A//jessicaklein.com/betatest/webarcademap.html GO!]</h3> | <h3>[http://toolness.github.com/friendlycode/?p=/mission-slurp%3Furl%3Dhttp%253A//jessicaklein.com/betatest/webarcademap.html GO!]</h3> | ||
<br><br> | <br><br> | ||
| Line 38: | Line 38: | ||
<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> 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> | </p> | ||
'''Tools used:''' | '''Tools used:'''Thimble '''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> | <h3>[http://toolness.github.com/friendlycode/?p=/mission-slurp%3Furl%3Dhttp%253A//jessicaklein.com/betatest/webarcademap.html GO!]</h3> | ||
<br><br> | <br><br> | ||
| Line 45: | Line 45: | ||
<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> 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> | </p> | ||
'''Tools used:''' | '''Tools used:'''Thimble'''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> | <h3>[http://toolness.github.com/friendlycode/?p=/mission-slurp%3Furl%3Dhttp%253A//jessicaklein.com/betatest/webarcademap.html GO!]</h3> | ||
<br><br> | <br><br> | ||
| Line 52: | Line 52: | ||
<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><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:''' | '''Tools used:'''Thimble'''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> | ||
| Line 59: | Line 59: | ||
<p>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. | <p>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. | ||
</p> | </p> | ||
'''Tool:''' | '''Tool:'''Thimble'''Skills:''' HTML and CSS, web design ''' Difficulty:'''Advanced | ||
<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> | <br><br> | ||
| Line 66: | Line 66: | ||
<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>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> | </p> | ||
'''Tool:''' | '''Tool:'''Thimble'''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> | <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> | ||
| Line 81: | Line 81: | ||
</p> | </p> | ||
<p>'''Tool:'''Hackasaurus '''Skills:''' HTML & CSS, writing, storytelling ''' Difficulty:'''Easy</p> | <p>'''Tool:'''Hackasaurus XRay Goggles '''Skills:''' HTML & CSS, writing, storytelling ''' Difficulty:'''Easy</p> | ||
<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> | ||
| Line 89: | Line 89: | ||
<p><b>Got something to shout about?</b> A rant, cause, passion project, block party or victory you want the world to know about? Shout it from the rooftops by making your own web page in minutes with this handy remixable template. Then share it via email, Twitter, Facebook or URL. Easy! </rant> | <p><b>Got something to shout about?</b> A rant, cause, passion project, block party or victory you want the world to know about? Shout it from the rooftops by making your own web page in minutes with this handy remixable template. Then share it via email, Twitter, Facebook or URL. Easy! </rant> | ||
</p> | </p> | ||
'''Tool:''' | '''Tool:'''Thimble'''Skills:''' video, creative commons, HTML and CSS, web design ''' Difficulty:'''Intermediate | ||
<h3>[http://toolness.github.com/friendlycode/?p=/p/151 GO!]</h3> | <h3>[http://toolness.github.com/friendlycode/?p=/p/151 GO!]</h3> | ||
<br> | <br> | ||