阿嬤都看得懂的 CodePen 怎麼用

VSCode 已經很棒了，不過最近比較流行的是雲端協作。以目前我們製作單頁網頁的需求而言，我很推薦 這個雲端平台，不但可以直接看見程式碼的結果，還可以看見與引用其他大神的成果喔！

在註冊之後，我們可以點選左側的 Pen 來開啟新的檔案。左上角的 Untitled 右邊的鉛筆點下去可以改檔名，右側的 HTML、CSS、JS 區塊則是我們編寫程式碼的地方。

在正式開始編寫程式以前，我們先來調整個人設定。點選右上角的頭像，再點選 Setting，就可以到個人設定選單。

點進去之後，點選 Editor Preference：

這邊可以更改喜歡的主題樣式。不過我們真正的重點是拉到最底下，看到 Emmet 這個選項。請務必勾選成 Active!! 這樣就會如同 VSCode 那樣，自動幫我們把拼字補完。Emmet 密技的詳解，請參考 PJCHENder 大大的這篇詳解。

設定完以後，讓我們來把之前 gavagai 的檔案內容放進去吧！就按照不同語言的部分複製貼上就可以。在左側的板塊，就會即時出現我們程式碼的結果囉！

等等，可是這樣也太難看 HTML 標籤了吧！區塊這麼小，阿嬤眼睛不好耶！而且那個紅色驚嘆號是怎麼回事？我們程式碼有錯嗎？

別擔心，CodePen 是允許我們調整這些板塊的大小的喔。讓我們用滑鼠點擊板塊的邊界，就可以拖曳來放大縮小了。

小秘訣：點兩下板塊標籤，可以把該板塊完全展開喔～

驚嘆號確實是 CodePen 告訴我們，有些東西不太對勁了。我們點開驚嘆號，會發現它是在提醒我們，CodePen 的 HTML 標籤只要寫 body 標籤中的內容就好，head 的部份它會自動幫我們設定好。所以我們可以大膽把 head 的部分都刪掉：

看起來是不是清爽多了呢？

這邊也要特別提醒各位阿嬤，CodePen 是需要存檔的喔！我們可以點擊上方的 Save 存檔，或者 Ctrl + s 也行。在存檔以後，我們會看見右下角出現一些重要的標籤，其中最重要的應該是

• Fork：這個按鈕允許我們引用他人的作品，回到自己的 CodePen 進行改作。
• Export：這個按鈕允許我們把自己的作品下載下來，下載下來會是 .html, .css 和 .js 分開的檔案，而且中間的連結都已經幫我們寫好囉！是不是很開心呢？

如果不喜歡現在的區塊配置，或是希望在全螢幕的狀況下看見網頁的狀況，可以點右上角的版面配置，裡面就有各種區塊配置可以選擇囉！

更棒的是，我們可以在其他網頁中，嵌入 Code 的結果，這樣我以後要展示程式碼與成果給各位阿嬤看，或者各位阿嬤想改寫我的程式碼，就不用每次都複製貼上，我也不用每次都截圖截得半死......

CodePen 還有個很棒的地方，是可以瀏覽許多大神的作品。回到首頁以後，點選左邊的 Trending，就可以看到現在最多人觀賞的作品。你也可以在上面的 Seach你也可以在上面的 Seach CodePen... 的地方，搜尋相關的主題，甚至所使用的工具。

例如，D3 是一個用來繪製圖表的強大工具。我們只要搜尋 D3，就能夠找到這種作品：

怎麼樣？CodePen 是不是方便又強大呢？明天開始，我們所有實作都會在 CodePen 上進行示範，各位阿嬤也可以開始用 CodePen 開始練習看看喔！