具象化LinePalace
  • Home
  • 網頁技術
    • 學習筆記
    • 工具分享
  • 生活地圖
  • 科技新聞
  • 英語學習與留學
No Result
View All Result
  • Home
  • 網頁技術
    • 學習筆記
    • 工具分享
  • 生活地圖
  • 科技新聞
  • 英語學習與留學
No Result
View All Result
Linepalace凌品設計
No Result
View All Result
Home 網頁技術 學習筆記

coding菜鳥必備 線上程式編輯器codepen

rubykuo by rubykuo
September 26, 2023
in 學習筆記, 工具分享, 網頁技術
Reading Time: 5 mins read
網站維修日誌
63
VIEWS
Share on FacebookShare on Twitter

目錄

Toggle
  • 一、CodePen簡介
  • 二、註冊
  • 三、使用Codepen的兩大目的
    • 1.建立自己的小專案,用於實驗程式碼和分享成果
    • 2.查看他人的作品,作為參考學習使用
  • 四、如何建立自己的小專案(Pen)
    • 1.開啟一個Pen
    • 2.Codepen介面概覽
    • 3.如何調整預設環境?
      • (1) Pug/Scss/Sass?預處理器怎麼設定?   (深入了解 功能強大的預處理器讓coding事半功倍!)
      • (2) Codepen CSS Reset
    • 4.如何調整介面布局?
    • 5. 如何開啟自動儲存功能? 
    • 6.如何分享、匯出、在外站嵌入codepen作品?
  • 五、如何學習其他人的作品?
    • 1. 尋找有興趣的作品
    • 2.如何收藏作品
    • 3.「學習從模仿開始」將別人的作品複製一份到自己的Pen

一、CodePen簡介

CodePen 是一個線上程式碼編輯器和社交平台,允許開發人員、設計師和創作者建立、分享和測試前端程式碼片段。它的主要特色包括:

1. 線上編輯器:不用下載和另外安裝套件,就能簡單使用程式碼編輯器! 平台支持 HTML、CSS 和 JavaScript 編輯,因此可以即時預覽程式碼在瀏覽器中的運行效果。

2.程式碼分享:用戶可以將他們的程式碼分享給其他人,讓彼此可以相互查看、評論和學習。

3.前端開發工具:CodePen 提供了許多有用的前端開發工具,如程式碼版本控制、調試工具、自動前綴等,讓我們更輕鬆地開發網站和Web應用。

4. 支持多種框架和庫:除了原生的HTML、CSS和JavaScript,CodePen 還支持許多流行的前端框架和庫,如React、Vue.js、Angular等,使用戶可以嘗試和學習這些技術。

5.教育和學習:CodePen 也被廣泛用於教育和學習,許多課程和教育資源使用它來演示代碼示例和編程概念。

6. 以上功能基本上都可以免費使用! 對我來說免費版功能充足,若是團隊專案就可以考慮付費使用pro版本了。

二、註冊

Codepen就算不註冊也能看到公開分享的程式碼! 不過如果你是想要持續學習的小夥伴,建議你可以申請一個帳號來收藏你喜歡的作品!和使用更多功能歐!

第一次使用的小夥伴進入官網後,點擊右上角的sign up。

可以使用信箱註冊或者選擇用既有的Google、Github、Facebook帳號快速註冊!

別忘了收驗證信就可以完成註冊囉!

三、使用Codepen的兩大目的

一般來說使用Codepen不外乎是為了:

1.建立自己的小專案,用於實驗程式碼和分享成果

2.查看他人的作品,作為參考學習使用

所以接下來讓我們圍繞這兩個目的來看看使用方法吧!

四、如何建立自己的小專案(Pen)

1.開啟一個Pen

點擊左上角的Pen就可以開啟一個新的面板

2.Codepen介面概覽:

進入後面板相當簡潔明瞭,不過為了不熟悉的小夥伴,這邊先整理了面板相對應的功能

(部分功能需要在撰寫區域添加內容以後才會出現喔)

3.如何調整預設環境?

Codepen本身已經將基本的環境設定處理好了,甚至HTML編輯器支援還有支援 Emmet呢!

(你知道嗎?使用Emmet語法可以加速html程式開發速度! 加速前端開發! 你必須知道的Emmet )

至於如果本身有習慣使用預處理器或者想要使用套件也很容易,只要點擊Setting(圖示D),基本上環境佈置的選項都在這邊! 

(1) Pug/Scss/Sass?預處理器怎麼設定?   (深入了解: 功能強大的預處理器讓coding事半功倍!)

Setting > CSS/JS > CSS/JS Preprocessor

常見的預處理器基本上這邊都找的到!只要下拉選單選擇需要的預處理器,最後儲存就OK囉!

(2) Codepen CSS Reset

Setting>CSS>CSS Base  裡面直接預設了選項,讓你可以直接選擇CSS的預設狀態( Normalize / Reset )不用自己另外重置真的是太貼心啦!

(3)如何引入CDN?

想要使用boostrap或者其他套件,根據想要引入的檔案類型點擊CSS或JS,引入欄位就在視窗最下方!

而且很方便的是,想要引入文件不需要另外去找CDN,在搜尋欄位輸入關鍵字,點擊需要的選項就能完成引入了!

4.如何調整介面布局?

點擊最上方的工具列(位置E),就可以選擇讓自己使用起來最順手的介面布局,另外如果想要將”撰寫區域” 和 “預覽區域”拆分成兩個視窗來看的話,可以點擊最下方的(位置J)

值得一提的是,如果要將視窗合併回原來的樣子,可以先將”預覽區域”的視窗關掉,再到”撰寫區域”從右側把視窗拉出來

5. 如何開啟自動儲存功能? 

點擊Save即儲存,但是每次都要點擊太麻煩了,建議可以點開右側小鍵頭,開啟Auto Save如此就可以避免忘記存檔的悲劇,另外也能用快捷鍵輔助 Ctrl+S,也能存檔喔!

6.如何分享、匯出、在外站嵌入codepen作品?

(1) 分享作品: 點擊右下角的 Share (位置J),就可以選擇分享方式,目前有DEV、FB、Twitter和產生連結分享的選項。
(2) 匯出作品: 點擊右下角的 Export (位置M),在沒有付費的狀態下可以匯出ZIP檔 或 Github Gist檔。
(3) 嵌入作品: 點擊右下角 Embed (位置L)

上方的預覽視窗如果覺得高度太少,可以像縮放視窗一樣拉動下方的Bar,視窗高度會連動嵌入的結果,也是需要調整和注意的一部份喔!

下方的設定面版,左側可以設定想要呈現的主題樣式(Theme)、是否手動點擊後再讀取(Use Click-to-Load,預設是自動讀取)、設定是否可編輯(Make Code Editable)。

Make Code Editable選項可以允許嵌入的程式碼被修改這一點非常適合用在教學中,但需要注意的是,這個功能會占掉網站更多的資源,所以如果網站本身loading就比較慢的話可能就要斟酌一下了。

五、如何學習其他人的作品?

1. 尋找有興趣的作品

回到Codepen首頁>Trending,可以用關鍵字搜尋自己有興趣的類型,或者直接點擊推薦的作品查看別人做出的效果和程式碼

進入其他人的作品頁面,其實和自己的Pen頁面是幾乎一樣的

你可以選擇左上角的+Follow,如此一來以後你就可以在首頁>Following看到這個創作者,或者你也可以點擊右上角的Pin或下方的Collection來直接蒐藏這個作品。

2.如何收藏作品

在別人的作品頁面裡,你可以選擇用Pin或者Collection來收藏有興趣的作品。

Codepen 的Pin和Collection的差異是什麼?

Pin常用參考作品收藏:

他會固定在頁面的上方,所以更容易的點開查看。點擊圖示旁邊的鍵頭就可以看到收藏的作品了。

Collection適合大量的作品收藏:

不同於Pin,Collection有作品分類功能,將他們分類群組後更能有條理的找到過往收藏的作品,想要找到已經收藏的Collection作品,需要回到首頁>Your Work>Collection

3.「學習從模仿開始」將別人的作品複製一份到自己的Pen

別人的作品看起來很厲害,要模仿卻不知道從哪裡著手?不如直接複製一份一模一樣的檔案,從結果回推原理吧!

點擊作品頁面下方的Fork,就可以回到Your Work盡情的進行實驗囉!

Previous Post

網站維修日誌

Next Post

如何連結CSS樣式?一篇了解3大寫法與實際應用

rubykuo

rubykuo

中文系畢業,曾任電商網站PM,現職網頁設計師。 認為走過的每一步都有它的意義,並且會在未來成為重要的養份

Related Posts

Gratisography免費免註冊趣味創意圖庫 高解析圖片讓你與眾不同
工具分享

Gratisography免費免註冊趣味創意圖庫 高解析圖片讓你與眾不同

September 29, 2023
2種常用GIF螢幕錄製動畫工具-簡報、網頁必備,簡單易用免下載,線上螢幕錄影GIF
工具分享

2種常用GIF螢幕錄製動畫工具-簡報、網頁必備,簡單易用免下載,線上螢幕錄影GIF

October 17, 2023
功能強大的CSS預處理器讓coding事半功倍!
學習筆記

功能強大的CSS預處理器讓coding事半功倍!

September 26, 2023
加速前端開發! 你必須知道的Emmet!
學習筆記

加速前端開發! 你必須知道的Emmet!

September 26, 2023
網頁&社群圖片設計的好幫手Microsoft Designer APP新上架(圖多)
工具分享

網頁&社群圖片設計的好幫手Microsoft Designer APP新上架(圖多)

September 25, 2023
如何連結CSS樣式?一篇了解3大寫法與實際應用
學習筆記

如何連結CSS樣式?一篇了解3大寫法與實際應用

September 25, 2023
Next Post
如何連結CSS樣式?一篇了解3大寫法與實際應用

如何連結CSS樣式?一篇了解3大寫法與實際應用

POPUPAR

  • 線上表格生成器Tables Generator 詳細教學

    線上表格生成器Tables Generator 詳細教學

    0 shares
    Share 0 Tweet 0
  • coding菜鳥必備 線上程式編輯器codepen

    0 shares
    Share 0 Tweet 0
  • 零基礎也能懂的 HTML表格(內含快速生成表格資源)

    0 shares
    Share 0 Tweet 0
  • 如何連結CSS樣式?一篇了解3大寫法與實際應用

    0 shares
    Share 0 Tweet 0
  • 【文山早午餐推薦】悠閒愜意的虎斑咖啡(含菜單)

    0 shares
    Share 0 Tweet 0

RECENT NEWS

加拿大留學必須知道的:Pathway和語言學校名詞

加拿大留學必須知道的:Pathway和語言學校名詞

October 21, 2023
Gratisography免費免註冊趣味創意圖庫 高解析圖片讓你與眾不同

Gratisography免費免註冊趣味創意圖庫 高解析圖片讓你與眾不同

September 29, 2023
2種常用GIF螢幕錄製動畫工具-簡報、網頁必備,簡單易用免下載,線上螢幕錄影GIF

2種常用GIF螢幕錄製動畫工具-簡報、網頁必備,簡單易用免下載,線上螢幕錄影GIF

October 17, 2023
功能強大的CSS預處理器讓coding事半功倍!

功能強大的CSS預處理器讓coding事半功倍!

September 26, 2023
加速前端開發! 你必須知道的Emmet!

加速前端開發! 你必須知道的Emmet!

September 26, 2023

Categories

  • 學習筆記 (7)
  • 工具分享 (5)
  • 生活地圖 (1)
  • 網頁技術 (10)
  • 英語學習與留學 (1)

MORE ON TWITTER

  • Home
  • 網頁技術
  • 生活地圖
  • 科技新聞
  • 英語學習與留學
歡迎來信合作:ruby@linepalace.com

© 2023 Copyright ©2023 具象化 linepalace by rubykuo. All rights reserved.

Welcome Back!

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In
No Result
View All Result
  • Home
  • 網頁技術
    • 學習筆記
    • 工具分享
  • 生活地圖
  • 科技新聞
  • 英語學習與留學

© 2023 Copyright ©2023 具象化 linepalace by rubykuo. All rights reserved.