{"id":13759,"date":"2015-08-31T16:04:11","date_gmt":"2015-08-31T20:04:11","guid":{"rendered":"http:\/\/webmakerblog.wpengine.com\/?p=13759"},"modified":"2019-02-26T12:40:20","modified_gmt":"2019-02-26T20:40:20","slug":"introducing-the-new-thimble-an-educational-code-editor-for-teaching-and-learning-the-web","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/foundation-archive\/mozilla-learning\/introducing-the-new-thimble-an-educational-code-editor-for-teaching-and-learning-the-web\/","title":{"rendered":"Introducing the New Thimble, an Educational Code Editor for Teaching and Learning the Web"},"content":{"rendered":"<p>Today, Mozilla is introducing <a href=\"https:\/\/thimble.mozilla.org\/\">the new Thimble<\/a>, an upgraded tool for teaching and learning web literacy in a simple, hands-on and visual fashion.<br \/>\nWe believe the Web is a better place when everyone can read, write and participate online, a belief that served as our inspiration for first creating Thimble in 2012. With Thimble, users write and edit HTML, CSS, and JavaScript on the left side of their screen, and watch their code come to life on the right. Learners can start with simple remixes,\u00a0changing words and images on a page to familiarize themselves with code and build confidence. Learners can also work their way toward creating entire web pages from scratch. We\u2019ve seen Thimble used by educators in amazing ways: middle schoolers in Virginia <a href=\"http:\/\/techkimatstab.tumblr.com\/post\/115029365669\/french-app-from-8th-graders-is-in-the-app-store\">building apps<\/a>, activists in Barcelona <a href=\"https:\/\/events.webmaker.org\/events\/5450\">designing net neutrality posters<\/a>, and university students in Mombasa <a href=\"https:\/\/instagram.com\/p\/ziVNhVLZDn\/\">hacking together projects<\/a>.<br \/>\n<a href=\"http:\/\/webmakerblog.wpengine.com\/wp-content\/uploads\/2015\/08\/Screen-Shot-2015-08-31-at-3.50.34-PM.png\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-13760 size-full\" src=\"http:\/\/webmakerblog.wpengine.com\/wp-content\/uploads\/2015\/08\/Screen-Shot-2015-08-31-at-3.50.34-PM.png\" alt=\"Thimble editor and preview pane\" width=\"620\" height=\"305\" \/><\/a>Thimble exemplifies the hands-on, collaborative learning philosophy at the core of Mozilla\u2019s work. Thimble can be used by educators to create a customized and interactive classroom experience, or used by independent learners eager to teach themselves via step-by-step tutorials. All of Thimble\u2019s creations are open source and fully remixable. And Thimble itself is free and open source, always. In 2014, Thimble was recognized with the <a href=\"http:\/\/educatorinnovator.org\/mozilla-webmakers-thimble-receives-on-for-learning-award\/\">ON for Learning Award from Common Sense Media<\/a>, an accolade for outstanding digital media products that educate and engage young people.<br \/>\nSo, what\u2019s new with this version of Thimble? We\u2019ve built enhancements that transform Thimble into not just a better code editor, but also a rich platform for educators to build curriculum on. Updates include:<\/p>\n<ul>\n<li><b>Expanded capabilities<\/b>. Users can now build and link multiple web pages, rather than just one, within a single project<\/li>\n<li><b>A helping hand<\/b>. A more guided learning experience featuring easy-to-use tutorials, auto-closing tags and autocomplete<\/li>\n<li><b>A streamlined interface<\/b>. A sleeker look and feel with light and dark theme options, an easy-to-use color picker, and easy access to all of your files and projects<\/li>\n<li><b>Drag, drop and unzip<\/b>. You can now drag and drop a zipped website into the editor, expand it, and start hacking immediately<\/li>\n<li><b>Better previews<\/b>. A mobile browser preview mode, to see how your project will appear on the mobile Web<\/li>\n<li><b>So much more<\/b>. Auto save, extensions, a selfie-taker and other new features<\/li>\n<\/ul>\n<p>The new Thimble is the result of collaboration between Mozilla and the <a href=\"http:\/\/cdot.senecacollege.ca\/\">Seneca College Centre for Development and Open Technology<\/a>, and research was funded by the Natural Science and Engineering Research Council of Canada (NSERC). The new, more powerful Thimble is also made possible through our incorporation of the open source text editor <a href=\"http:\/\/brackets.io\/\">Brackets<\/a>. Read more about Seneca and Brackets <a href=\"http:\/\/blog.humphd.org\/thimble-and-bramble\/\">here<\/a>.<br \/>\nThe Thimble community has a rich history of creativity: teachers create template projects for their students to remix; students remix each others projects for collaborative learning; and educators share their curriculum and teaching activities with colleagues. We\u2019re excited to see what educators and learners create next. Use Thimble to help others read, write and participate online \u2014 and make the Web a better place.<br \/>\n<a href=\"https:\/\/thimble.mozilla.org\/\">https:\/\/thimble.mozilla.org\/<\/a><br \/>\nQuestions? Reach us anytime at @MozTeach or teachtheweb@mozilla.com, and watch our introduction video below:<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Today, Mozilla is introducing the new Thimble, an upgraded tool for teaching and learning web literacy in a simple, hands-on and visual fashion. We believe the Web is a better place when everyone can read, write and participate online, a &hellip; <a class=\"go\" href=\"https:\/\/blog.mozilla.org\/foundation-archive\/mozilla-learning\/introducing-the-new-thimble-an-educational-code-editor-for-teaching-and-learning-the-web\/\">Continue reading<\/a><\/p>\n","protected":false},"author":144,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[378228],"tags":[330394,27955,23089],"_links":{"self":[{"href":"https:\/\/blog.mozilla.org\/foundation-archive\/wp-json\/wp\/v2\/posts\/13759"}],"collection":[{"href":"https:\/\/blog.mozilla.org\/foundation-archive\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.mozilla.org\/foundation-archive\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/foundation-archive\/wp-json\/wp\/v2\/users\/144"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/foundation-archive\/wp-json\/wp\/v2\/comments?post=13759"}],"version-history":[{"count":0,"href":"https:\/\/blog.mozilla.org\/foundation-archive\/wp-json\/wp\/v2\/posts\/13759\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.mozilla.org\/foundation-archive\/wp-json\/wp\/v2\/media?parent=13759"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.mozilla.org\/foundation-archive\/wp-json\/wp\/v2\/categories?post=13759"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.mozilla.org\/foundation-archive\/wp-json\/wp\/v2\/tags?post=13759"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}