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

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 建立個人版本,來隨意修改、調整程式碼。每個專案下方還會提到透過這個網站你將可以學習到那些技術(搭配裡頭的教學文件進行操作)。

Thimble by Mozilla

STEP 2

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

Thimble by Mozilla

STEP 3

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

Thimble by Mozilla

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

Thimble by Mozilla

STEP 4

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

Thimble by Mozilla

STEP 5

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

Thimble by Mozilla

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

Thimble by Mozilla

STEP 6

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

Thimble by Mozilla

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

Thimble by Mozilla

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

值得一試的三個理由:

  1. 由 Mozilla 基金會開發的全新網頁工具
  2. 可在線上編輯 HTML、CSS 和 JavaScript,即時預覽效果
  3. 快速重製(Remix)熱門的 Project,從中提升網頁技術
分享本文