Thimble by Mozilla 線上程式碼編輯器，讓你輕鬆學習編寫 HTML、CSS 和 JavaScript

Pseric 國中開始接觸網頁設計，還記得當時使用的是 FrontPage 編輯器，是一款修改後可立即看到網頁效果的軟體，搭配工具書，讓我逐漸學會簡單的 HTML。後來雖然較少用到網頁編輯器，仍會懷念當時的學習方式，既有趣又能從實際操作獲得成就感。最近看到這款 Thimble 線上服務，讓我再度回憶起以前學習 HTML 的情景，若你想要學習如何編輯簡單的 HTML、CSS 和 JavaScript 程式碼，可以試試看本文介紹的這個服務。

Thimble 是由 Mozilla 開發，大家對它應該都不陌生，旗下有知名的 Firefox 瀏覽器。這項服務主要提供的是線上撰寫網頁、編輯原始碼功能，無須額外下載、安裝軟體，只要透過瀏覽器就能使用，它就像一個功能完整的網頁開發工具，能讓你直接於瀏覽器編寫程式碼，即時預覽網頁所呈現出來的效果。

但 Thimble 的原意並不是一款網頁編輯器，更正確地描述，它是一個讓你學習、練習編寫 HTML、CSS 和 JavaScript 的線上程式碼編輯器，也就是說使用者可以運用它來進行基本的程式碼撰寫，或許搭配一些線上說明文件或書籍，就能發揮很好的學習效果。

不僅如此，Thimble 可以讓你快速重製（Remix）一些現有的熱門專案，從它的程式碼裡來學習如何修改、編寫屬於自己的內容，更棒的是使用者除了能在線上保存撰寫過的內容，還可以選擇將它匯出、或者快速產生一個網站鏈結，直接把 Thimble 變成架站工具。

網站名稱：Thimble by Mozilla
網站鏈結：https://thimble.mozilla.org/

使用教學

STEP 1

Thimble 收錄了一些熱門、知名網頁設計，使用者可以點選「Remix this Project」快速將它複製到 Thimble 建立個人版本，來隨意修改、調整程式碼。每個專案下方還會提到透過這個網站你將可以學習到那些技術（搭配裡頭的教學文件進行操作）。

STEP 2

如果你選擇直接開啟一個新的 Project，點選首頁的「Start a project from scratch」就會出現一個空白範例，其中會有一個 html 和 css 檔案。下圖是 Thimble 主畫面，如同一般我們熟悉的編輯器，左側可選擇、切換不同檔案，中間是程式碼編輯區，右側則是預覽畫面。

STEP 3

特別的是當你選擇了原始碼內的任何一個段落，右側預覽畫面也會同步標記出來，如此一來你就可以很清楚瞭解網頁內的這段內容要如何透過 HTML 來撰寫。當然，你可以隨意變更修改網頁的原始碼，同時看看網頁會發生那些變化。

Thimble 編輯器除了內建高亮語法，能在閱讀、檢視程式碼時更加輕鬆外，在編寫原始碼時也會同步出現提示，例如當你輸入 <b ，就會把可能你要輸入的元件顯示在下方，讓使用者可以快速選取，或是做為參考用。

STEP 4

Thimble 右上角能切換網頁在桌面、行動裝置上顯示的效果，看看你製作出來的成品能不能夠在小螢幕裝置上正確顯示。

STEP 5

前面有提到，Thimble 可以讓你快速複製一些熱門專案，從看似複雜、其實相當標準的程式碼裡學習到如何正確編寫一個網頁（雖然這樣可能還是有點難），不過配合這個編輯器，讓你能一邊修改、一邊知道網頁的某個部分是如何寫、以及會怎麼呈現，倒是個蠻實用的學習工具，如果老師要拿來做為教學，這些程式碼也是不錯的參考範例。

透過 Thimble 給你的教學手冊（Tutorial），我們可以得知從這份專案裡，有那一些部分是可以學習的。照著這個指示來調整網頁內容或設計，進而增進在網頁製作上的功力。

STEP 6

完成後，可透過「Publish」按鈕把網頁發佈上去，產生一段公開鏈結。雖然這可以做為你的網頁代管空間，但網頁上方會有一個 Thimble by Mozilla 的廣告，拿來測試或許還算可行，但若要穩定、自由度更高的話，建議還是選擇一個虛擬主機空間比較妥當。

利用右上角的「Export」功能，可將網頁內所有檔案打包、匯出，成為一個壓縮檔。這對於使用 Thimble 來開發網頁的使用者來說相當有用，讓你能快速將網頁搬移到其他空間。

可惜的是 Thimble 目前尚未有中文介面，以致於教學手冊的內容可能需要具備一些英文閱讀能力才能夠使用，除此之外，Thimble 跟一般大家熟悉的網頁編輯器其實差異不大，兼具教學及練習、測試等特色，方便使用者用來學習 HTML、CSS 和 JavaScript 基本撰寫。