Things you need to know before using CodePen

你沒想過 CodePen 具備的超讚小功能

前言

因為很多同學都會使用 CodePen🔗 來提交網頁作業,所以想說來寫一篇文章來介紹一下 CodePen 的一些小功能,讓大家可以更有效率的使用 CodePen。

CodePen 是一個線上的模擬開發環境,功能很簡單,就是一個網頁可以在上面寫 HTML、CSS、JavaScript,並且可以直接在網頁上看到結果,而且還直接分享連結給別人看,對初學者來說介面友好基本沒有上手難度,我是非常推薦的。

在 CodePen 中每一個網頁專案都被稱為 Pen ,如果你想要更進階的功能,像是私人專案、儲存本地圖片與資產……等功能,就需要付費成為 Pro🔗 會員才能開啟 Project,不過絕大多數場合免費版本就夠用了~

了解什麼是 CodePen ,那麼接下來就來看看如何藉由熟悉 CodePen 來強化自己開發效率吧!

第一招:自訂 Pen 的設定

剛登入首頁可以從左上角點擊 CREATE PEN 創建一個全新的專案,並且可以在右上角的 SETTING 中選擇針對該專案的設定。

添加新專案與設定
添加新專案與設定

這裡同學可以留意 CodePen 會幫你把 <body> 以外的部分自動撰寫好,如果想更動 <html> 還是 <head> 都可以在這裡設定,不要直接寫在編輯器中的 HTML 區塊。同樣的道理,如果想添加外部的樣式或腳本可以在這裡設定,不要直接寫在編輯器中的 CSS 或 JavaScript 區塊。

HTML、CSS、JavaScript 設定頁籤內容
HTML、CSS、JavaScript 設定頁籤內容

第二招:整理程式碼

在一般本地的開發環境通常會使用 Prettier🔗 或是 ESLint🔗 來整理與糾正程式碼,在 CodePen 中可以直接點選面板右側的向下按鈕來選擇對應的功能,善用自動整理功能可以讓程式碼更容易閱讀。

個別面板設定
個別面板設定

第三招:客製化開發環境

個人所有專案設定
個人所有專案設定

CodePen 雖然便捷好用,但寫久了還是會懷念自己習慣的開發環境,這時候就可以在編輯器偏好中調整自己喜歡的編輯器功能與外觀。我自己是喜歡 Oceanic Dark 與 JetBrains Mono 字體的搭配。

其他問題:要怎麼在 CodePen 中使用外部資源?

imgur 首頁
imgur 是免費的線上圖片託管服務,有許多種類的圖片
imgur 圖片細節頁面
獲得圖片的連結

在本地端開發的時候只要把資源的相對路徑給寫上去就好了,但在 CodePen 沒有付費的話,要怎麼把想要的資源放上 Pen 中呢? 很簡單,只要找線上託管資源的網站就可以了,像是最常見的圖片可以使用 imgur🔗。只要拖曳圖片到 imgur 的網頁上,就會自動上傳並且產生一個連結,這個連結就是圖片的網址,可以直接複製貼上到 CodePen 或是任何網頁中。

WEB DONG LOGO

總結

現在你已經完全明白如何使用 CodePen,快去創造一些好玩有趣的網頁吧!