Mozilla Thimble Tries to Inspire The Web Maker In You

Internet has travelled a long way from the time when web pages composed of dreary texts and images to the present moment where everything is about sharing and interactions. In the past, creating a web page is easy. You just need to write, insert images and publish. With today’s technology, you probably need a degree before you can start creating a website. To bridge that gap, Mozilla (the team that developed Firefox) created a simple tool that make “webmaking” easier for you.

Mozilla Thimble is a relatively simple online tool for making HTML / CSS code, developed to introduce users to website coding, all within the comfort of a web browser without the need of downloading or installing any software. It’s easy as hell even in laymen’s terms.

thimble-intro

Thimble has a dual-panel design. The left panel is for writing the code and the right panel displays a real-time preview of the page you are creating. This is where Thimble is a little different from other editors. Users can understand the process of coding instantly, check the preview and fix errors. The site offers two modes: “Start from Scratch” and “Pick a project”. In both modes, the two-pane is there, which serves great for debugging. If you wish to learn by seeing examples, existing projects are available with detailed comment for easy learning. Users can edit or add something to customize projects and learn from the errors made. Once everything is done, users can publish their work with a single click.

edit-code-thimble

The learning part works great with Thimble, though there are better places such as Codeacademy, W3 Schools, Udemy, Stackexchange with richer resources. If you have completely no knowledge of HTML, you will probably start with the “Pick a Project” mode since the “Start From Scratch” mode requires you to have a basic knowledge of HTML. As much as anything, the Mozilla initiative to get people accustomed to web standards and educate them with the basics is laudable.

thimble-periodic-table-html5-elements

Get this straight, this tool is not for building a business site (might be for people who just need an online page). It is for understanding and testing skills by trial and error method. Mozilla thinks it is necessary for people living in 21st century to understand the language of web just like one should have general reading, writing or calculating skills.

Alongside with Thimble, Mozilla has also unveiled two more complementary projects in the Webmaker series. Popcorn is one of them and is an online video authoring tool. X-Ray Goggles is another one that reveals the code behind elements in a page. All three projects together are quite helpful for users to unlock or rather uncover the mystery of web rendering. Time will tell how far they will succeed in their efforts of educating the general mass, but it is definitely a worthy try.

Mozilla Thimble