3 Mozilla Webmaker Tools You Should Know

By . Filed in Web Design

Mozilla is off to a good start converting regular web users into web makers. Webmaker tools are a great resource for aspiring developer and designers who want to take the next big step in learning and building.

This post will take a brief look at three Mozilla Web Maker Tools, respectively Thimble, X-Ray Goggles, and Popcorn Maker. These three tools will allow you to learn how to code, inspect the codes of other already-built sites and produced mashup of videos.

Thimble

Thimble is best for web creator for beginners. Some of the projects users can choose from are creating an online portfolio, an avatar or a web resume, or even make their own Internet Defense League webpage.

mozilla thimble

Thimble’s editor is far from a traditional full-fledged editor. It has simple tools like the syntax hints helper, spell checker, preview and text sizes, probably a good tool for beginner-level designers and developers.

thumble code editor

Thimble’s hints popup, another wonderful feature for beginners lets the user view some useful hints and information when editing or viewing a line of code or certain CSS/HTML element.

Thimble also makes it easy to publish your creations and share them with friends.

thimble popup hint

The publish feature gives you two links: one, for sharing with all your friends and followers and two, for editing published projects in the future. In the publish project popup there is also a tab to share your project on Google, Twitter, Facebook, etc.

thumble publish button

X-Ray Goggles

To learn coding, sometimes you have to look at how other sites are coded. Mozilla Webmaker’s X-Ray Goggles, when activated, lets you inspect the code behind any web page anywhere from Hongkiat.com to your own blog.

It work’s basically like the browser’s inspect tool but with fewer features. Installing it is as easy as drag-an-dropping it into the browser’s bookmark bar. After you install it, you can use Goggles on whichever website you browse in the future.

To use Goggles, type in the URL of the website in which you would like to inspect. The default Goggles URL displays to you a basic webpage with an image embedded on it.

xray google

Goggles also has a handy built in editor so you can remix and adapt the webpage live in Goggles, and see the changes right before your eyes. Goggles also allows you to publish your remixed and created work in Goggles basically the same way that Thimble does. Just make sure the content you are remixing is not copyrighted.

Popcorn Maker

Popcorn Maker makes it easy to enhance, remix and share web media and video. Start it up, type in a video URL of HTML5, Youtube, Vimeo, or Soundcloud.

This is where the fun starts to happen; you can then remix the videos by adding elements and media features on your sidebar by dragging and dropping to the appropriate timeframe of the video.

mozilla popcorn maker

Author:

Dylan is a web developer and designer. He loves to work on WordPress and share his knowledge with other developers. He is the Editor-in-Chief of ThemeCrush.

Advertisement