Tag Archives: html

Get excited and make things: beta test these new Mozilla Webmaker projects

The best way to learn something is by making something. So as part of Mozilla’s campaign to help the world learn coding and webmaking this summer, we created these new Mozilla Webmaker projects. Their mission: help anyone (especially youth) make something amazing on the web fast.

Help test them out?

Can you take a few minutes to beta test the projects below? Are they easy to use? Helpful for learning? Fun? Flammable?

What’s the idea?

It’s all part of the Mozilla Summer Code Party. Blast off is June 23, with local events and teach-ins running around the world all summer long.

Mozilla will provide curriculum and fun starter projects like these. Tools anyone can use to make and learn together, just about anywhere. At local partner events, Mozilla spaces, libraries, or gathered around their own kitchen table.

Try ‘em out now. Kick the tires on these beta webmaker projects below and let us know what you think:

Make your own meme

Got what it takes to go viral and become internet famous? Prove it. This project lets 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.

–> G O <–

Remix cheesy TV commercials. Add your own voice, insert pop-ups, links and commentary to web video. Hack pop culture with the tasty new Mozilla Popcorn tool.

–> G O <–

Go back in time to make these ugly ’90s web pages not suck. Everyone has an embarrassing moment. For the web it was the 1990s, when websites were boxy, ugly and wore flannel. Wrangle your HTML and CSS style powers to change the content, colors and layout to drag these pages out of the grungy past.

–> G O <–

Hack your way through the web arcade

Say o hai to the “web arcade,” a collection of hackable mini-games that test your webmaking prowess. In this first mission, use HTML to fix a broken map of the arcade, unlocking new missions and exploring brave new webby worlds.

–> G O <–

Speak your mind

Got something to shout about? A rant, cause, passion project or block party you want the world to know about? Shout it from the rooftops by making your own web page in minutes, using this handy remixable template. Then share it via email, Twitter, Facebook or URL. Easy! </rant>

–> G O <–

Create your own “Inanimate Alice” episode

Create transmedia mayhem. Use the popular “Inanimate Alice” interactive novel and Hackasaurus to make your own storylines, characters and mashups, remixing the web as you go.

–> G O <–

Create your own awesome-looking “how-to” page. Use your newfound HTML, CSS and Popcorn wisdom to create the world’s greatest web page tutorial. What do you want to make today?

–> G O <–

Even more webmaker projects are on the way:

  • How to make your own animated GIF
  • How to tweak your Tumblr theme with CSS
  • Make your own avatar
  • + lots more interest-based projects from Hive, more advanced HTML and CSS projects, more from the NESTA event and more…

Sneak peek: new Mozilla Webpage Maker

It’s webmaking made ridiculously simple. The new Mozilla Webpage Maker tool will help you make your own fully real web page in about 8 seconds flat. All through a simple two-pane editor that makes the basics of HTML dead easy to learn. Test out the prototype here.

Get involved with Webmaker Projects

Get involved with Mozilla’s Summer Code Party

This Valentine’s Day, drop a love bomb on someone you love

Here at Mozilla, we like to drop “love bombs” on our favorite friends and colleagues. To reward great work and show we care.

The good folks at the Mozilla Hackasaurus team have taken it a giant step further. As part of their ongoing mission to make webmaking fun and easy for the planet, they’ve created this lovely “Love Bomb Builder” protototype. Making and sending hand-crafted love bombs has never been simpler! (See Jess Klein’s “On Inspiration and Lovebombs.”)

How does it work?

Simple! Choose a template, say a little about who and why the love bomb is for, then fire away! Your mom, dogwalker or special someone can click on the link you send them for a lovely digital token of your affection — lovingly handcrafted in HTML and CSS. I got one from my wife the other day, and it made me blush.

WARNING: Love Bomb Builder is an early prototype and still a little rough around the edges. May prematurely detonate. May cause blushing and/or spontaneous emotional combustion. No webmakers were harmed in the creation of said love bombs.

Some samples of what your customizable love bomb can look like:

  • Atul’s love bomb to Tim Berners Lee for creating the world wide web.
  • A fist bump for Vint Cerf for thinkin’ up the whole “open Internet” thing.
  • A wrestler mask for Madonna. Cuz she’d look great in one!

So what are you waiting for? Go make one now and send it your geekiest Valentine!