Codepen

使用線上編輯器可快速編輯 HTML / CSS / JavaScript，即時瀏覽網頁畫面，方便快速學習，例如查看教程時可以一邊進行實作練習，個人最常用的是 Codepen 。( 相信你點開就會用了吧！我就不教學啦！ )

其他類似的線上編輯器服務：

Visual Studio Code

工欲善其事必先利其器，好的 Editor / IDE 讓你開發速度加倍速，爛的編輯器讓你倒退嚕。
再把快速鍵的手感練起來，整個寫 Code 速度就是快的不要不要的，沒有滑鼠也能飛起來！（ 是要飛去哪啦！？ ）

Visual Studio Code ( 簡稱 VS Code ) 跟 Sublime 都是目前滿熱門的編輯器。本系列教學以 VS Code 為主。

選擇 VS Code 主要原因:

嘿啦～反正就這樣。直接送上 VS Code 下載傳送門

相信你載了之後摸個幾下就會使用了吧～我假設你秒會開啟檔案/開啟資料夾新增／編輯檔案囉！（超不負責任的教學文XD）。那就接著分享我個人常用的快速鍵：

開啟/關閉 檔案&專案資料夾

上述為我平時寫 Code 會滿頻繁使用到的動作，相信看完上面的表格有些還是看不太出來怎麼用，自已在 VS Code 上 Try Try 吧！

（本來想錄個GIF動圖……之後有空再來補好了～現在先偷懶抓別人的教學文來分享： vscode-windows-版本基本常用快捷鍵｜ucamc ）

手感是時間累積讓肌肉去記憶，一剛開始操作特定動作時刻意地去查看快速鍵，但隨著使用的次數變多就能夠一想到要做什麼動作手就自動反應對應按鍵，寫 code 速度就會變快囉。

同場加映：英打練起來

除了快速鍵的手感之外，英打的準確度是更重要的！自己寫 code 還滿常踩到打錯字的雷。
若你英打還不夠快、不夠準的話，每天睡前腦袋放空讓手練一波 ( 5-10 分鐘就好了 ) 。
推薦六角學院開發的線上英打練習 Keybr ，針對練習過程中的錯字機率去加強特定的字母練習：

傳送門： Keybr ｜ 詳細介紹與教學

邊寫code邊搭配著快速鍵慢慢把手感練起來吧！
下一篇 將介紹個人常用的 VS Code 插件，使開發過程更加便利！

個人 Blog: https://eudora.cc/