CodePen是一個網頁前端開發的社群平台,讓使用者可以在線上編輯器中建立、測試和分享HTML、CSS和JavaScript程式碼。它是學習、實驗和分享網頁前端設計和開發的絕佳平台,不論是初學者或資深工程師,都可以在這個平台上創造出令人驚艷的作品。本篇文章將介紹如何使用CodePen平台,以及一些實用技巧和資源。
CodePen是什麼?
CodePen是一個基於瀏覽器的開發環境,它提供了一個實時的編輯器,可以讓使用者在線上建立和測試HTML、CSS和JavaScript程式碼。CodePen的介面簡潔易用,讓使用者可以輕鬆地建立、保存和分享自己的作品。除了編輯器外,CodePen還有一個活躍的社群,讓使用者可以分享自己的作品,並從其他人的作品中學習和尋找靈感。
Codepen教學
CodePen 基本操作流程
以下是使用 CodePen 的基本操作流程:
-
前往 CodePen 網站
首先,你需要前往 CodePen 的官方網站 https://codepen.io/
-
註冊帳號
如果你想要保存你的程式碼、發佈作品、留言等等功能,你需要註冊一個 CodePen 帳號。點擊右上角的「Sign Up」按鈕,並填寫你的基本資料。
-
新增 CodePen 程式碼
登入帳號後,你就可以開始新增程式碼。點擊網頁右上角的「New Pen」按鈕,並選擇你要建立的程式碼類型。
-
編輯 CodePen 程式碼
在 CodePen 的編輯器中,你可以編寫 HTML、CSS、JavaScript 程式碼。每當你修改程式碼時,CodePen 會自動更新預覽結果。
《Codepen範例:使用CodePen建立你的第一個網頁》
建立你的第一個網頁,可以讓你快速熟悉CodePen的編輯器。首先,打開CodePen的網站,點選「Create」按鈕開始創建新的CodePen。
然後,在編輯器的HTML區域中輸入以下程式碼:
點選Run按鈕,就可以在右側預覽區域看到你的第一個網頁。你可以在編輯器中修改HTML、CSS和JavaScript程式碼,並在預覽區域即時查看結果。 -
儲存 CodePen 程式碼
當你完成編輯程式碼後,點擊右上角的「Save」按鈕來儲存你的程式碼。
-
分享 CodePen 程式碼
你可以將你的程式碼分享給其他人。點擊右上角的「Share」按鈕,並選擇你要分享的方式,例如複製連結、嵌入程式碼等等。
-
匯出 CodePen 程式碼
如果你想要將程式碼匯出到其他地方,例如本地電腦或 GitHub 上,你可以點擊右上角的「Export」按鈕,並選擇你要匯出的方式。
-
瀏覽其他人的 CodePen 程式碼
在 CodePen 上,你可以瀏覽其他人分享的程式碼,並學習他們的編程技巧。點擊網頁上方的「Explore」按鈕,並選擇你想要瀏覽的程式碼類型。
CodePen快捷鍵
除了使用滑鼠點選,CodePen還提供了許多快捷鍵來增加效率,例如:
- Ctrl + Enter:執行目前的程式碼
- Tab:自動補全代碼
- Shift + Tab:取消自動補全
- Ctrl + /:註解/取消註解程式碼
- Ctrl + S:儲存目前的程式碼
- Ctrl + Shift + S:儲存目前的程式碼並建立新的版本
追蹤CodePen IG也可獲得更多官方教學
CodePen Emmet設定
Emmet是一個快速撰寫HTML、CSS、XML等代碼的工具,而CodePen也提供了Emmet的設定,讓使用者能更快速、便捷地撰寫代碼。
要啟用CodePen的Emmet,只需前往「設定」頁面,將Emmet設定打開即可。
CodePen連結
當你完成一個CodePen範例之後,你可以將它分享給其他人。在CodePen中,你可以複製範例的網址連結,或是嵌入式代碼(embed code)以嵌入到網站或部落格中。
此外,CodePen也提供了分享功能,你可以透過社群媒體或電子郵件分享你的範例。
CodePen下載
如果你想在自己的電腦上運行CodePen上的代碼,可以透過下載功能來達成。當你點選下載按鈕後,CodePen會自動下載一個.zip檔案,其中包含HTML、CSS、JavaScript等檔案。
GitHub
CodePen還可以透過GitHub進行整合。如果你想將自己的CodePen範例儲存到GitHub上,只需要前往「設定」頁面,點選「GitHub」選項,並連結你的GitHub帳號即可。
CodePen 範例
關於CodePen 範例,可以透過以下步驟在 CodePen 上找到範例:
進入 CodePen 的網站 (https://codepen.io/)。
點選網頁最上方的「Pens」按鈕。
在搜尋欄位中輸入你感興趣的主題或關鍵字,例如「CSS動畫」、「JavaScript效果」等。
選擇符合你需求的範例,點選進去後即可看到程式碼及效果。
如果想要修改範例,可以點選右上角的「Fork」按鈕複製一份自己的版本,再進行修改。
善用CodePen 分類標籤,可以更有效地搜尋有興趣的範例,可以在「Pens」頁面下方的「Explore」區域中,依照分類標籤找到範例。
其他範例
以下是一些 其他CodePen 範例:
-
《3D CSS Cube》
https://codepen.io/rachel_web/pen/zzmyvY
-
《Responsive Animated Image Grid》
https://codepen.io/dudleystorey/pen/Geprd
-
《Animated SVG Icons》
https://codepen.io/joshuaward/pen/RNBQvQ
-
《Interactive Animated Graph》
https://codepen.io/RaduMatei/pen/yKjzKP
-
《Pure CSS Responsive Navigation Menu》
https://codepen.io/erikterwan/pen/EVzeRP
CodePen是一個非常強大的前端開發工具,不但提供了許多方便的功能,還可以讓使用者直接分享自己的作品。學習使用CodePen可以幫助你更快速地開發前端網頁,建議每位前端工程師都要學習並使用它。