線上Coding HTML/CSS/JQuery工具

相信大家在Coding JQuery/HTML/CSS時
一定都會有曾經因為需要一直存檔跟刷新頁面而覺得很麻煩
(尤其是用IE時有時候還會抓到暫存的歷史頁面)
所以今天就推薦大家一款我自己也在用的線上即時Coding工具
是的這套工具的名字就叫做CodePen
其實還有另外一套工具叫做JSFiddle不過因為他的library太多
對初學來說其實並不好辨認，而CodePen的就分得比較清楚而且大多是比較常見的找起來也方便
接下來就讓我們來看看如何操作CodePen吧~!
步驟一
首先要使用當然是一定要註冊啦~我們可以看到進入CodePen首頁後
畫面右上角有個「Sign Up」點下去就可以進入註冊畫面
如果本身已經有CodePen的帳號則可以點選「Log In」登入系統略過註冊這一段

步驟二
在下圖我們可以看到畫面上有出現不同的付費方案，因為我是用免費的
所以可以直接將頁面捲動到最下面會有個「Free Plan」的地方並且點選「Sign Up」就會進入填寫註冊資料的畫面

步驟三
接著只要按照藍位填寫資料然後按下「Sign Up」就可以完成註冊程序
下面是各個資料欄位中文參照(小弟我英文不好有怪怪的再說一下)
Name : 姓名
UserName : 用戶名字
Email : 信箱
Choose Password : 選擇密碼
Password Again : 再次輸入密碼

步驟四
然後就是進入開啟新的測試頁面的步驟了
在註冊完成後會回到首頁，因為首頁會有一些其他人寫出來的新的Code
所以大家也可以從首頁參考別人寫的Code唷

步驟五
如果是要新增一個自己的範例檔案的話
則是要按畫面左上方有一個「New Pen」的按鈕

步驟六
按下之後就會出現及時編輯的畫面了，我們由左到右，由上而下的來看
首先會映入眼簾的是HTML的編輯區塊然後是CSS的編輯區塊再來是JQuery/JavaScript的編輯區塊
下面空白的部分則是即時顯示效果的區塊唷

步驟七
在這邊我們可以看到編輯HTML/CSS/JQuery三個區塊
分別可以再去選擇各種不同版本的支援選項
但是因為目前User使用的瀏覽器仍然有一些較早期的版本
所以HTML/CSS這兩個編輯區塊的設定基本上不用變更

步驟八
從下圖我們可以看見JQuery的編輯區塊預設的library是「No Library」
也就是預設是支援JavaScript的但是若是寫JQuery的Code可是會沒有反應的唷
在這邊一般我都直接選「JQuery」這個選項，這樣就會自動帶入新版的JQuery Library了

步驟九
最後就用我之前寫的一個Sample來讓大家看看展示的效果吧~!
大家也快點去試試即時編輯器的威力吧
相信會讓沒事就喜歡Coding的朋友愛上的
Dome

See the Pen Tabs標籤元件 by jen (@jen_huang) on CodePen.