Want to Write for Us?Read This | LoginBecome a Member
Mozilla Thimble Thumb

Mozilla Thimble – Browser Based HTML & CSS Editor

Mozilla Thimble is a really cool and fun way to create your own web pages.

It can be used to build web pages in your browser, but I would recommend using it as a learning tool for writing and editing HTML and CSS. You can instantly preview your work, and there’s even the option of sharing and hosting your finished pages with just a click!

Check this out:

Mozilla Thimble

Mozilla Thimble

Like I said, Thimble is fun. If you’re looking for a serious browser based editor, I would recommend something else (although Mozilla could build on this for something more intense.).

If you decide to “Start from scratch,” that will launch you into the Thimble interface:

Mozilla Thimble

Code on the left, live preview on the right.

Easy enough.

When you’re done, copy the code from the editor side into your own document or hit publish for the page to go live and share a link with friends.

Projects

Mozilla Thimble

This is where Thimble really shines.

It’s a great learning tool!

From the main Thimble page, instead of selecting “Start from scratch,” select, “Pick a project.”

There are plenty to choose from, but “Web Arcade” looks like fun:

Mozilla Thimble

There are three different “games” to choose from (maybe more to come?). These are essentially mini-games to sharpen your skills.

Cool, right?

Let’s check-out the “web map:”

Mozilla Thimble

We see the code on the left and preview on the right.

Simply follow the commented code and make your way through – fun!

All of these Thimble Projects are great for brushing-up on your skills, learning new things, or are perfect for those trying to get into writing code for their own  website, blog or church website.

You have to start somewhere, so you might as well have fun doing it and have something cool to show for it!

Learn more about Mozilla Thimble and give it a try!

[HT: @gunnard]

14 Responses to “Mozilla Thimble – Browser Based HTML & CSS Editor”

  1. June 22, 2012 at #

    its pretty freaking cool!

Trackbacks/Pingbacks:

  1. Mozilla Plans To Improve Firefox DevTools With In-Browser Editing, Better Firebug Integration, Network Panel & More | TechCrunch - March 18, 2013

    [...] which later became Skywriter, but this project is now inactive. With the CSS and HTML editor Thimble, however, Mozilla recently picked up this idea again and while Rouget writes that the organization [...]

  2. Mozilla Plans To Improve Firefox Developer Tools With In-Browser Editing, Better Firebug Integration, Network Panel & More | YO Status ->YO Status -> - March 18, 2013

    [...] which later became Skywriter, but this project is now inactive. With the CSS and HTML editor Thimble, however, Mozilla recently picked up this idea again and while Rouget writes that the organization [...]

  3. Mozilla Plans To Improve Firefox Developer Tools With In-Browser Editing, Better Firebug Integration, Network Panel & More | Mr Gee - March 18, 2013

    [...] which later became Skywriter, but this project is now inactive. With the CSS and HTML editor Thimble, however, Mozilla recently picked up this idea again and while Rouget writes that the organization [...]

  4. Mozilla Plans To Improve Firefox DevTools With In-Browser Editing, Better Firebug Integration, Network Panel & More | Technology Blog - March 18, 2013

    [...] which later became Skywriter, but this project is now inactive. With the CSS and HTML editor Thimble, however, Mozilla recently picked up this idea again and while Rouget writes that the organization [...]

  5. Mozilla Plans To Improve Firefox DevTools With In-Browser Editing, Better Firebug Integration, Network Panel & More | shpot - March 18, 2013

    [...] which later became Skywriter, but this project is now inactive. With the CSS and HTML editor Thimble, however, Mozilla recently picked up this idea again and while Rouget writes that the organization [...]

  6. The Capitals™ – Capitalists' Magazine | 資本家札記 | Mozilla Plans To Improve Firefox Developer Tools With In-Browser Editing, Better Firebug Integration, Network Panel & More - March 18, 2013

    [...] which later became Skywriter, but this project is now inactive. With the CSS and HTML editor Thimble, however, Mozilla recently picked up this idea again and while Rouget writes that the organization [...]

  7. Mozilla Plans To Improve Firefox Developer Tools With In-Browser Editing, Better Firebug Integration, Network Panel & More | Crowdfunding News - March 18, 2013

    [...] which later became Skywriter, but this project is now inactive. With the CSS and HTML editor Thimble, however, Mozilla recently picked up this idea again and while Rouget writes that the organization [...]

  8. Mozilla Plans To Improve Firefox Developer Tools With In-Browser Editing, Better Firebug Integration, Network Panel & More | Elexonic.com | Breaking News - March 18, 2013

    [...] which later became Skywriter, but this project is now inactive. With the CSS and HTML editor Thimble, however, Mozilla recently picked up this idea again and while Rouget writes that the organization [...]

  9. My Internet Press » Mozilla Plans To Improve Firefox Developer Tools With In-Browser Editing, Better Firebug Integration, Network Panel & More - March 18, 2013

    [...] which later became Skywriter, but this project is now inactive. With the CSS and HTML editor Thimble, however, Mozilla recently picked up this idea again and while Rouget writes that the organization [...]

  10. Mozilla Plans To Improve Firefox Developer Tools With In-Browser Editing, Better Firebug Integration, Network Panel & More | The NewsMag - March 18, 2013

    [...] which later became Skywriter, but this project is now inactive. With the CSS and HTML editor Thimble, however, Mozilla recently picked up this idea again and while Rouget writes that the organization [...]

  11. MozillaがFirefoxのデベロッパツールの充実に注力: ブラウザ内エディタ, Firebugの統合, ネットワークパネルなどなど | TechCrunch Japan - March 19, 2013

    [...] Mozillaがブラウザ上のエディタを考えたのは、これが初めてではない。2009年にMozillaは、Bespinというものに取り組んだ。それがのちにSkywriterになったが、このプロジェクトは今休眠している。しかしCSSとHTMLによるエディタThimbleは、Mozillaが再び取り組んでおり、RougetはDevToolsの作品がエディタのメインのような書き方をしているものの、ブラウザ上のテキストエディタに関してはMozilla本体にも相当な経験と知識があることは確かだ。 [...]

  12. MozillaがFirefoxのデベロッパツールの充実に注力: ブラウザ内エディタ, Firebugの統合, ネットワークパネルなどなど | 面白ニュースまとめ - March 21, 2013

    [...] Mozillaがブラウザ上のエディタを考えたのは、これが初めてではない。2009年にMozillaは、Bespinというものに取り組んだ。それがのちにSkywriterになったが、このプロジェクトは今休眠している。しかしCSSとHTMLによるエディタThimbleは、Mozillaが再び取り組んでおり、RougetはDevToolsの作品がエディタのメインのような書き方をしているものの、ブラウザ上のテキストエディタに関してはMozilla本体にも相当な経験と知識があることは確かだ。 [...]

Leave a Reply

Gravatar Image