CodePen 操作教學:線上程式碼編輯器入門指南

更新於 發佈於 閱讀時間約 2 分鐘



raw-image


CodePen 是什麼?

CodePen 是一個線上前端程式碼編輯器,可以即時撰寫與預覽 HTML、CSS、JavaScript 程式碼,適合練習、展示作品、或測試功能。無需安裝環境,只要打開瀏覽器就能開始寫程式!

👉 官方網站:https://codepen.io


為什麼要用 CodePen?

  • 免安裝,開啟即用
  • 即時預覽畫面,方便 Debug
  • 分享方便,只需一個連結
  • 適合展示前端作品集
  • 有大量範例可參考


CodePen 操作教學

1️⃣ 建立一個 Pen

  • 登入 CodePen(可用 GitHub 或 Google 帳號)
raw-image
  • 可以開始寫程式囉 ! -> 新增「Pen」 的方式有以下兩種 :
raw-image
raw-image

編輯區會分為三塊

  • HTML 區:撰寫 HTML 結構
  • CSS 區:撰寫樣式
  • JS 區:撰寫互動邏輯(JavaScript)

raw-image

2️⃣ 即時預覽功能

  • 每輸入一行程式碼,「Preview」區域會即時更新結果
  • 若不想即時預覽,也可在右上角點選「Settings」關閉 Auto-Update

3️⃣ 設定外部資源(像是 Bootstrap、jQuery)

  • 點右上角的「Settings」
  • 分別在 HTML/CSS/JS 頁籤中加入 CDN 連結(例如 jQuery 或 Font Awesome)
raw-image

4️⃣ 儲存與分享

  • 點右上方「Save」儲存
  • 可取得唯一連結,例如:https://codepen.io/你的帳號/pen/xxxxxx
  • 可直接嵌入部落格、Notion、或簡報中!












留言
avatar-img
留言分享你的想法!
avatar-img
工程師的詩意午後
6會員
26內容數
在這裡,我讓程式碼與詩意共存, 生活不只有規則與邏輯,也有感受與想像, 有時是寫程式時的靈感,有時是半夜裡的一首詩, 願這些文字,帶給你一點溫度。
2024/11/08
隨著訊息量的增加,我們面臨的挑戰是如何有效地整理和處理大量的思維與資訊。心智圖工具作為一種直觀的可視化思維方式,越來越受到廣泛關注。XMind 是市面上最受歡迎的心智圖工具之一,它簡單易用,功能強大,非常適合用於學習、創意發想、專案規劃等多個場景。本文將帶你快速上手 XMind,助你在工作和生活中更
Thumbnail
2024/11/08
隨著訊息量的增加,我們面臨的挑戰是如何有效地整理和處理大量的思維與資訊。心智圖工具作為一種直觀的可視化思維方式,越來越受到廣泛關注。XMind 是市面上最受歡迎的心智圖工具之一,它簡單易用,功能強大,非常適合用於學習、創意發想、專案規劃等多個場景。本文將帶你快速上手 XMind,助你在工作和生活中更
Thumbnail
2024/11/08
Trello 是一款簡單而強大的專案管理工具,無論您是個人使用還是團隊協作,它都能幫助您更好地管理任務和專案。這篇文章將帶您快速了解如何開始使用 Trello。 1. 註冊與建立帳號 首先,您需要到 Trello 網站 註冊一個帳號。註冊後,您可以開始創建您的第一個看板,並開始管理您的任務。
Thumbnail
2024/11/08
Trello 是一款簡單而強大的專案管理工具,無論您是個人使用還是團隊協作,它都能幫助您更好地管理任務和專案。這篇文章將帶您快速了解如何開始使用 Trello。 1. 註冊與建立帳號 首先,您需要到 Trello 網站 註冊一個帳號。註冊後,您可以開始創建您的第一個看板,並開始管理您的任務。
Thumbnail
2024/11/08
Notion 這款多功能筆記軟體近年來越來越受歡迎,無論是個人還是團隊,都能用它來完成多樣化的工作。從簡單的任務清單到複雜的項目管理,Notion 都可以輕鬆應對。不過,對於初次接觸 Notion 的人來說,它的多功能性和無數的設置選項也可能讓人感到手足無措。本篇將帶你快速了解 Notion 的基本
Thumbnail
2024/11/08
Notion 這款多功能筆記軟體近年來越來越受歡迎,無論是個人還是團隊,都能用它來完成多樣化的工作。從簡單的任務清單到複雜的項目管理,Notion 都可以輕鬆應對。不過,對於初次接觸 Notion 的人來說,它的多功能性和無數的設置選項也可能讓人感到手足無措。本篇將帶你快速了解 Notion 的基本
Thumbnail
看更多
你可能也想看
Thumbnail
家中修繕或裝潢想要找各種小零件時,直接上網採買可以省去不少煩惱~看看Sylvia這回為了工地買了些什麼吧~
Thumbnail
家中修繕或裝潢想要找各種小零件時,直接上網採買可以省去不少煩惱~看看Sylvia這回為了工地買了些什麼吧~
Thumbnail
👜簡單生活,從整理包包開始!我的三款愛用包+隨身小物清單開箱,一起來看看我每天都帶些什麼吧🌿✨
Thumbnail
👜簡單生活,從整理包包開始!我的三款愛用包+隨身小物清單開箱,一起來看看我每天都帶些什麼吧🌿✨
Thumbnail
創作者營運專員/經理(Operations Specialist/Manager)將負責對平台成長及收入至關重要的 Partnership 夥伴創作者開發及營運。你將發揮對知識與內容變現、影響力變現的精準判斷力,找到你心中的潛力新星或有聲量的中大型創作者加入 vocus。
Thumbnail
創作者營運專員/經理(Operations Specialist/Manager)將負責對平台成長及收入至關重要的 Partnership 夥伴創作者開發及營運。你將發揮對知識與內容變現、影響力變現的精準判斷力,找到你心中的潛力新星或有聲量的中大型創作者加入 vocus。
Thumbnail
打開 jupyter notebook 寫一段 python 程式,可以完成五花八門的工作,這是玩程式最簡便的方式,其中可以獲得很多快樂,在現今這種資訊發達的時代,幾乎沒有門檻,只要願意,人人可享用。 下一步,希望程式可以隨時待命聽我吩咐,不想每次都要開電腦,啟動開發環境,只為完成一個重複性高
Thumbnail
打開 jupyter notebook 寫一段 python 程式,可以完成五花八門的工作,這是玩程式最簡便的方式,其中可以獲得很多快樂,在現今這種資訊發達的時代,幾乎沒有門檻,只要願意,人人可享用。 下一步,希望程式可以隨時待命聽我吩咐,不想每次都要開電腦,啟動開發環境,只為完成一個重複性高
Thumbnail
CSS 是控制網頁外觀的語言,應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
Thumbnail
CSS 是控制網頁外觀的語言,應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
Thumbnail
如果你也是從事軟體相關工作的人,一定會遭遇突然需要你去學習一套你不熟悉的程式語言狀況吧,此時你會怎麼做呢? 是趕快去買書來看嗎? 還是趕快找一門程式課來上? 又或者乾脆去找會的同事來教學?
Thumbnail
如果你也是從事軟體相關工作的人,一定會遭遇突然需要你去學習一套你不熟悉的程式語言狀況吧,此時你會怎麼做呢? 是趕快去買書來看嗎? 還是趕快找一門程式課來上? 又或者乾脆去找會的同事來教學?
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
因為最近想嘗試編碼風格,於是就選了一套比較"不嚴格"的輔助工具來摸索。 編輯器 VS CODE 框架 VUE3 打包工具 VITE 編碼風格 Standard 環境 version { "nodejs":"v18.18.0", "npm":"9.8.1" }
Thumbnail
因為最近想嘗試編碼風格,於是就選了一套比較"不嚴格"的輔助工具來摸索。 編輯器 VS CODE 框架 VUE3 打包工具 VITE 編碼風格 Standard 環境 version { "nodejs":"v18.18.0", "npm":"9.8.1" }
Thumbnail
本章目的是為讀者提供有關如何設置JavaScript開發環境的知識,包括在瀏覽器、Node.js和各種編輯器和IDE中編寫和運行JavaScript的信息。此外,本章還介紹了如何架設本地開發伺服器以模擬實際的網頁環境。這些知識對於希望開發前端應用或後端服務的JavaScript開發者來說都是必要的。
Thumbnail
本章目的是為讀者提供有關如何設置JavaScript開發環境的知識,包括在瀏覽器、Node.js和各種編輯器和IDE中編寫和運行JavaScript的信息。此外,本章還介紹了如何架設本地開發伺服器以模擬實際的網頁環境。這些知識對於希望開發前端應用或後端服務的JavaScript開發者來說都是必要的。
Thumbnail
如果你不擅長直接編寫原始碼的話,要製作網頁、電子報,一定會非常辛苦,本文介紹的開源網頁神器 GrapesJS 絕對是你在找的工具,強大又免費的特性,可以用 Chrome App 的方式安裝,其它編輯器比起來又簡單很多;還有自訂原始碼……
Thumbnail
如果你不擅長直接編寫原始碼的話,要製作網頁、電子報,一定會非常辛苦,本文介紹的開源網頁神器 GrapesJS 絕對是你在找的工具,強大又免費的特性,可以用 Chrome App 的方式安裝,其它編輯器比起來又簡單很多;還有自訂原始碼……
Thumbnail
Creative Coding 作品變化概念,有或沒有的差別,隨機性,色彩模式的調整...等
Thumbnail
Creative Coding 作品變化概念,有或沒有的差別,隨機性,色彩模式的調整...等
Thumbnail
程式設計中不可或缺的一部分 介面是使用者與程式互動的媒介,因此介面的設計會影響使用者的體驗和感受。一個清晰明白、易懂的介面,可以讓使用者輕鬆地使用程式,並獲得良好的使用體驗。 需要與程式設計師密切溝通 設計師需要了解程式的功能和需求,並根據使用者的習慣和需求進行設計。設計師和程式設計師之間的溝
Thumbnail
程式設計中不可或缺的一部分 介面是使用者與程式互動的媒介,因此介面的設計會影響使用者的體驗和感受。一個清晰明白、易懂的介面,可以讓使用者輕鬆地使用程式,並獲得良好的使用體驗。 需要與程式設計師密切溝通 設計師需要了解程式的功能和需求,並根據使用者的習慣和需求進行設計。設計師和程式設計師之間的溝
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News