如何使用 CodePen:如果有一個平台可以讓您編輯代碼、測試庫、框架或組件，並看到變化就在您眼前發生，那會怎樣?如果您可以與其他開發人員分享您的實驗或複制他們的工作以提高您的編碼技能、尋找靈感并快速修復工作中的錯誤，會怎樣?
CodePen 是一個開發平台，任何人都可以在其中編輯前端-從他們的瀏覽器中使用 HTML、CSS 和 JavaScript 等終端語言，而無需下載任何軟件。最好的部分是您可以實時查看結果，這使得修復錯誤變得更加容易。開發人員和設計人員還可以製作代碼片段，稱為“筆”，並與世界其他地方分享。
如何使用 CodePen
打開 CodePen.io 鍵入任何內容在搜索框中:您可以在添加到網頁時鍵入任何內容。它可以是響應式滑塊、團隊卡片、關於部分、動畫等。在本文中，我將添加一個漂亮的滑塊。所以繼續在搜索框中搜索漂亮的滑塊。 代碼提取:現在，如您所見，Codepen 編輯器向我們展示了製作此滑塊的驚人代碼。但是您認為僅從該編輯器複製代碼並將其粘貼到您的編輯器中行得通嗎?答案是不。您看到的大多數“筆”都使用編輯器未顯示的 CodePen 之外的庫。該 zip 包含兩個文件夾 dist 和 src 以及自述文件和許可證文本文件。您可以根據自己的興趣探索/閱讀它們。現在選擇“dist”文件夾，您會在其中看到index.html、style.css、和script.js文件。在文本編輯器（Sublime、Atom、Brackets 等）中打開所有這些。打開index.html文件
CodePen有什麼用
分享或收集想法
因為CodePen建立了這麼棒的社區，數以千計的用戶正在為前端製作和分享想法-結束組件、動畫，甚至幾乎完成的網頁佈局。這是分享您自己的想法的理想場所，這些想法可能對其他前端專業人員有幫助。您所要做的就是確保您的代碼沒有任何版權問題。
風格-指導您的項目
如果您不想使用其他人的代碼，您始終可以使用 CodePen 的在線代碼編輯器為項目的各個部分賦予自己的風格。這樣，您可以確保用於設置其他組件樣式的代碼不會更改您的代碼。它有點像一張空白畫布。
了解新框架或庫
CodePen 上基於瀏覽器的編輯器是測試和運行新庫或框架的好方法.您不必每次都設置新環境來查看您的更改是否有效。編輯器視圖同時顯示三個編輯區域和預覽。每次發生變化時，最終結果都會更新。