CodePen教學:8分鐘帶你摸熟阿嬤都學得會的程式編輯神器!

CodePen教學:8分鐘帶你摸熟阿嬤都學得會的程式編輯神器!

CodePen是一個網頁前端開發的社群平台,讓使用者可以在線上編輯器中建立、測試和分享HTML、CSS和JavaScript程式碼。它是學習、實驗和分享網頁前端設計和開發的絕佳平台,不論是初學者或資深工程師,都可以在這個平台上創造出令人驚艷的作品。本篇文章將介紹如何使用CodePen平台,以及一些實用技巧和資源。Codepen教學

CodePen是什麼?

CodePen是一個基於瀏覽器的開發環境,它提供了一個實時的編輯器,可以讓使用者在線上建立和測試HTML、CSS和JavaScript程式碼。CodePen的介面簡潔易用,讓使用者可以輕鬆地建立、保存和分享自己的作品。除了編輯器外,CodePen還有一個活躍的社群,讓使用者可以分享自己的作品,並從其他人的作品中學習和尋找靈感。

Codepen教學

CodePen 基本操作流程

以下是使用 CodePen 的基本操作流程:

  1. 前往 CodePen 網站

    首先,你需要前往 CodePen 的官方網站 https://codepen.io/

  2. 註冊帳號

    如果你想要保存你的程式碼、發佈作品、留言等等功能,你需要註冊一個 CodePen 帳號。點擊右上角的「Sign Up」按鈕,並填寫你的基本資料。

  3. 新增 CodePen 程式碼

    登入帳號後,你就可以開始新增程式碼。點擊網頁右上角的「New Pen」按鈕,並選擇你要建立的程式碼類型。

  4. 編輯 CodePen 程式碼

    在 CodePen 的編輯器中,你可以編寫 HTML、CSS、JavaScript 程式碼。每當你修改程式碼時,CodePen 會自動更新預覽結果。

    《Codepen範例:使用CodePen建立你的第一個網頁》
    建立你的第一個網頁,可以讓你快速熟悉CodePen的編輯器。首先,打開CodePen的網站,點選「Create」按鈕開始創建新的CodePen。
    然後,在編輯器的HTML區域中輸入以下程式碼:codepen範例
    點選Run按鈕,就可以在右側預覽區域看到你的第一個網頁。你可以在編輯器中修改HTML、CSS和JavaScript程式碼,並在預覽區域即時查看結果。

  5. 儲存 CodePen 程式碼

    當你完成編輯程式碼後,點擊右上角的「Save」按鈕來儲存你的程式碼。

  6. 分享 CodePen 程式碼

    你可以將你的程式碼分享給其他人。點擊右上角的「Share」按鈕,並選擇你要分享的方式,例如複製連結、嵌入程式碼等等。

  7. 匯出 CodePen 程式碼

    如果你想要將程式碼匯出到其他地方,例如本地電腦或 GitHub 上,你可以點擊右上角的「Export」按鈕,並選擇你要匯出的方式。

  8. 瀏覽其他人的 CodePen 程式碼

    在 CodePen 上,你可以瀏覽其他人分享的程式碼,並學習他們的編程技巧。點擊網頁上方的「Explore」按鈕,並選擇你想要瀏覽的程式碼類型。

CodePen快捷鍵

除了使用滑鼠點選,CodePen還提供了許多快捷鍵來增加效率,例如:

  • Ctrl + Enter:執行目前的程式碼
  • Tab:自動補全代碼
  • Shift + Tab:取消自動補全
  • Ctrl + /:註解/取消註解程式碼
  • Ctrl + S:儲存目前的程式碼
  • Ctrl + Shift + S:儲存目前的程式碼並建立新的版本

追蹤CodePen IG也可獲得更多官方教學CodePen快捷鍵

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 範例:

  1. 《3D CSS Cube》

    https://codepen.io/rachel_web/pen/zzmyvY

  2. 《Responsive Animated Image Grid》

    https://codepen.io/dudleystorey/pen/Geprd

  3. 《Animated SVG Icons》

    https://codepen.io/joshuaward/pen/RNBQvQ

  4. 《Interactive Animated Graph》

    https://codepen.io/RaduMatei/pen/yKjzKP

  5. 《Pure CSS Responsive Navigation Menu》

    https://codepen.io/erikterwan/pen/EVzeRPcodepen下載

CodePen是一個非常強大的前端開發工具,不但提供了許多方便的功能,還可以讓使用者直接分享自己的作品。學習使用CodePen可以幫助你更快速地開發前端網頁,建議每位前端工程師都要學習並使用它。

Leave a Reply