CODEPEN

5 月 26, 2021 | 基礎網頁設計

Codepen 線上html製作平台

同學們大家好,今天我們要來使用一個線上的html、css、javascript編輯器平台,叫作 Codepen

網址: http://codepen.io/

首先我們要先創建一個帳號,或是直接用FB帳號登入

登入後的畫面
可以看到畫面中切了四格,上半部分別是html、css、js以及下半部的預覽窗格

現在我們試著在html內打一些東西

<h1> test </h1>

然後等待一下,或是按ctrl+s存檔,可以發現下半部的預覽窗格也立刻即時的呈現html的內容

那接下來我們將CSS的內容設定為帶有bootstrap樣式的設定。
點擊這個齒輪標記

在下方的 Add Extenal Stylesheets/Pens 的搜尋欄位內輸入bootstrap

點擊跳出來的選單內的 twitter-bootstrap 4.5.0

下方會增加 bootstrap 的設定選項

好了之後按下下方的Save&Close即可

現在我們可以將CSS及JS的欄位都拉到右邊,專心處理html即可

html的編輯欄位幾乎跟我們上課常用的vscode是一樣的,我們可以先打!來測試一下有沒有一個標準的html程式樣版給我們使用,當按下!後,會立即跳出一個樣版預覽,按下鍵盤的TAB,即會自動幫我們完成。

現在我們可以來測試一下Bootstrap有沒有被掛載進來
body的標籤內輸入:

  <button class="btn btn-success">test</button>

若出現如下圖,則代表成功的將Bootstrap樣式導入了

當然也可以去 Bootstrap官網查詢相關的元件

我們一樣copy一個jumbotron元件來測試

<div class="jumbotron">
  <h1 class="display-4">Hello, world!</h1>
  <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  <hr class="my-4">
  <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
  <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>

貼到codepen上面:

是不是很簡單

所以這周我們就來試試利用codepen這個平台,下周我們新的進度及之後的練習都將利用codepen來作分享並打成績。