前言
因為很多同學都會使用 CodePen 來提交網頁作業，所以想說來寫一篇文章來介紹一下 CodePen 的一些小功能，讓大家可以更有效率的使用 CodePen。
CodePen 是一個線上的模擬開發環境，功能很簡單，就是一個網頁可以在上面寫 HTML、CSS、JavaScript，並且可以直接在網頁上看到結果，而且還直接分享連結給別人看，對初學者來說介面友好基本沒有上手難度，我是非常推薦的。
在 CodePen 中每一個網頁專案都被稱為 Pen ，如果你想要更進階的功能，像是私人專案、儲存本地圖片與資產……等功能，就需要付費成為 Pro 會員才能開啟 Project，不過絕大多數場合免費版本就夠用了～
了解什麼是 CodePen ，那麼接下來就來看看如何藉由熟悉 CodePen 來強化自己開發效率吧！
第一招：自訂 Pen 的設定
剛登入首頁可以從左上角點擊 CREATE PEN 創建一個全新的專案，並且可以在右上角的 SETTING 中選擇針對該專案的設定。
這裡同學可以留意 CodePen 會幫你把 <body> 以外的部分自動撰寫好，如果想更動
<html> 還是 <head> 都可以在這裡設定，不要直接寫在編輯器中的 HTML 區塊。同樣的道理，如果想添加外部的樣式或腳本可以在這裡設定，不要直接寫在編輯器中的 CSS 或 JavaScript 區塊。
第二招：整理程式碼
在一般本地的開發環境通常會使用 Prettier 或是 ESLint 來整理與糾正程式碼，在 CodePen 中可以直接點選面板右側的向下按鈕來選擇對應的功能，善用自動整理功能可以讓程式碼更容易閱讀。
第三招：客製化開發環境
CodePen 雖然便捷好用，但寫久了還是會懷念自己習慣的開發環境，這時候就可以在編輯器偏好中調整自己喜歡的編輯器功能與外觀。我自己是喜歡 Oceanic Dark 與 JetBrains Mono 字體的搭配。
其他問題：要怎麼在 CodePen 中使用外部資源？
在本地端開發的時候只要把資源的相對路徑給寫上去就好了，但在 CodePen 沒有付費的話，要怎麼把想要的資源放上 Pen 中呢？ 很簡單，只要找線上託管資源的網站就可以了，像是最常見的圖片可以使用 imgur。只要拖曳圖片到 imgur 的網頁上，就會自動上傳並且產生一個連結，這個連結就是圖片的網址，可以直接複製貼上到 CodePen 或是任何網頁中。
總結
現在你已經完全明白如何使用 CodePen，快去創造一些好玩有趣的網頁吧！