一、CodePen簡介
CodePen 是一個線上程式碼編輯器和社交平台，允許開發人員、設計師和創作者建立、分享和測試前端程式碼片段。它的主要特色包括：
1. 線上編輯器：不用下載和另外安裝套件，就能簡單使用程式碼編輯器! 平台支持 HTML、CSS 和 JavaScript 編輯，因此可以即時預覽程式碼在瀏覽器中的運行效果。
2.程式碼分享：用戶可以將他們的程式碼分享給其他人，讓彼此可以相互查看、評論和學習。
3.前端開發工具：CodePen 提供了許多有用的前端開發工具，如程式碼版本控制、調試工具、自動前綴等，讓我們更輕鬆地開發網站和Web應用。
4. 支持多種框架和庫：除了原生的HTML、CSS和JavaScript，CodePen 還支持許多流行的前端框架和庫，如React、Vue.js、Angular等，使用戶可以嘗試和學習這些技術。
5.教育和學習：CodePen 也被廣泛用於教育和學習，許多課程和教育資源使用它來演示代碼示例和編程概念。
6. 以上功能基本上都可以免費使用! 對我來說免費版功能充足，若是團隊專案就可以考慮付費使用pro版本了。
二、註冊
Codepen就算不註冊也能看到公開分享的程式碼! 不過如果你是想要持續學習的小夥伴，建議你可以申請一個帳號來收藏你喜歡的作品!和使用更多功能歐!
第一次使用的小夥伴進入官網後，點擊右上角的sign up。
可以使用信箱註冊或者選擇用既有的Google、Github、Facebook帳號快速註冊!
別忘了收驗證信就可以完成註冊囉!
三、使用Codepen的兩大目的
一般來說使用Codepen不外乎是為了:
1.建立自己的小專案，用於實驗程式碼和分享成果
2.查看他人的作品，作為參考學習使用
所以接下來讓我們圍繞這兩個目的來看看使用方法吧!
四、如何建立自己的小專案(Pen)
1.開啟一個Pen
點擊左上角的Pen就可以開啟一個新的面板
2.Codepen介面概覽:
進入後面板相當簡潔明瞭，不過為了不熟悉的小夥伴，這邊先整理了面板相對應的功能
(部分功能需要在撰寫區域添加內容以後才會出現喔)
3.如何調整預設環境?
Codepen本身已經將基本的環境設定處理好了，甚至HTML編輯器支援還有支援 Emmet呢!
(你知道嗎?使用Emmet語法可以加速html程式開發速度! 加速前端開發! 你必須知道的Emmet )
至於如果本身有習慣使用預處理器或者想要使用套件也很容易，只要點擊Setting(圖示D)，基本上環境佈置的選項都在這邊!
(1) Pug/Scss/Sass?預處理器怎麼設定? (深入了解: 功能強大的預處理器讓coding事半功倍!)
Setting > CSS/JS > CSS/JS Preprocessor
常見的預處理器基本上這邊都找的到!只要下拉選單選擇需要的預處理器，最後儲存就OK囉!
(2) Codepen CSS Reset
Setting>CSS>CSS Base 裡面直接預設了選項，讓你可以直接選擇CSS的預設狀態( Normalize / Reset )不用自己另外重置真的是太貼心啦!
(3)如何引入CDN?
想要使用boostrap或者其他套件，根據想要引入的檔案類型點擊CSS或JS，引入欄位就在視窗最下方!
而且很方便的是，想要引入文件不需要另外去找CDN，在搜尋欄位輸入關鍵字，點擊需要的選項就能完成引入了!
4.如何調整介面布局?
點擊最上方的工具列(位置E)，就可以選擇讓自己使用起來最順手的介面布局，另外如果想要將”撰寫區域” 和 “預覽區域”拆分成兩個視窗來看的話，可以點擊最下方的(位置J)
值得一提的是，如果要將視窗合併回原來的樣子，可以先將”預覽區域”的視窗關掉，再到”撰寫區域”從右側把視窗拉出來
5. 如何開啟自動儲存功能?
點擊Save即儲存，但是每次都要點擊太麻煩了，建議可以點開右側小鍵頭
6.如何分享、匯出、在外站嵌入codepen作品?
(1) 分享作品: 點擊右下角的 Share (位置J)，就可以選擇分享方式，目前有DEV、FB、Twitter和產生連結分享的選項。
(2) 匯出作品: 點擊右下角的 Export (位置M)，在沒有付費的狀態下可以匯出ZIP檔 或 Github Gist檔。
(3) 嵌入作品: 點擊右下角 Embed (位置L)
上方的預覽視窗如果覺得高度太少，可以像縮放視窗一樣拉動下方的Bar，視窗高度會連動嵌入的結果，也是需要調整和注意的一部份喔!
下方的設定面版，左側可以設定想要呈現的主題樣式(Theme)、是否手動點擊後再讀取(Use Click-to-Load，預設是自動讀取)、設定是否可編輯(Make Code Editable)。
Make Code Editable選項可以允許嵌入的程式碼被修改這一點非常適合用在教學中，但需要注意的是，這個功能會占掉網站更多的資源，所以如果網站本身loading就比較慢的話可能就要斟酌一下了。
五、如何學習其他人的作品?
1. 尋找有興趣的作品
回到Codepen首頁>Trending，可以用關鍵字搜尋自己有興趣的類型，或者直接點擊推薦的作品查看別人做出的效果和程式碼
進入其他人的作品頁面，其實和自己的Pen頁面是幾乎一樣的
你可以選擇左上角的+Follow，如此一來以後你就可以在首頁>Following看到這個創作者，或者你也可以點擊右上角的Pin或下方的Collection來直接蒐藏這個作品。
2.如何收藏作品
在別人的作品頁面裡，你可以選擇用Pin
或者Collection來收藏有興趣的作品。
Codepen 的Pin和Collection的差異是什麼?
Pin常用參考作品收藏:
他會固定在頁面的上方，所以更容易的點開查看。點擊圖示旁邊的鍵頭就可以看到收藏的作品了。
Collection適合大量的作品收藏:
不同於Pin，Collection有作品分類功能，將他們分類群組後更能有條理的找到過往收藏的作品，想要找到已經收藏的Collection作品，需要回到首頁>Your Work>Collection
3.「學習從模仿開始」將別人的作品複製一份到自己的Pen
別人的作品看起來很厲害，要模仿卻不知道從哪裡著手?不如直接複製一份一模一樣的檔案，從結果回推原理吧!
點擊作品頁面下方的Fork
，就可以回到Your Work盡情的進行實驗囉!
