課程資源：

5/11(二) 第一堂：BS5 環境建立

5/11(二) 第一堂：BS5 環境建立-課程筆記

Bootstrap 5 CSS 載入方式 (使用 CDN 方式引入)
快速開始 (Getting started)
環境設置確認
CSS 觀察：按鈕顏色是否有出來
使用初學者範本 (Starter template) 方式，一次引入 CDN 與基本 HTML 結構
Bootstrap 的 JS 效果觀察
CDN、本地下載的差異
使用 CDN 方式取得 Bootstrap 資源檔
CDN 不使用實體檔方式，以線上連線方式取得資源
CDN 的好處
CDN 與實體檔案的優缺點
六角學院官網使用 CDN 與本地下載的差異
以實體檔案方式，下載 Bootstrap 相關資源檔
下載 Bootstrap 官方文件中已編譯的檔案
加入 bootstrap.css 與 bootstrap.js 檔到專案粢料夾中，做為實體檔案來使用
瀏覽器的開發者工具引入資源檔成功或失敗的訊息
瞭解 CSS Reset 與重置
什麼是 CSS Reset
瀏覽器的預設樣式
CSS Reset 的版本使用與差別
版本一：meyerweb CSS Reset
版本二：CSS Reset Normalize.css
學習 Bootstrap 好處介紹
手寫、框架派 (Bootsrap) 的差別
Bootstrap 的重置 (Reboot) 接續於 CSS Reset
Bootstrap 的標題和段落
code (行內程式碼) 與 pre (程式碼區塊) 標籤
CSS Class 功能組合 (按鈕、卡片)
Boostrap 按鈕元件的容器與樣式分離
按鈕樣式透過疊加組合
Bootstrap 的按鈕，使用容器與樣式分離與權重
開發者工具查看按鈕的滑入效果 (:hover)
Bootstrap 卡片元件的父層與子層的樣式與關係

🏅第一堂主線任務

作業等級
LV1：請將作業一提供的範例程式碼(no8.website)做三遍 (成品連結)
LV2：請將第一堂直播課與 RWD 課程寫成 BLOG，幫助自己加深記憶，也嘉惠同學
LV3：請嘗試不要用 Bootstrap，用純 CSS 寫出這一頁，漢堡選單可不做。可觀看此連結獲得 leolee 提供的空白樣版 (GitHubPages)

5/12(三) ~ 5/14(五) 每日任務

🗞 5/12(三) 每日任務-請練習載入 Bootstrap 5 CDN
🗞 5/13(四) 每日任務-CSS 權重
第一題：請問以下的 HTML 裡面的 h1 是什麼顏色？
第二題：請問以下的 HTML 裡面的 h1 是什麼顏色？
第三題：跟第二題差異在，HTML 的 class 對調了順序，請問以下的 HTML 裡面的 h1 是什麼顏色？
第四題：請問以下的 HTML 裡面的 h1 是什麼顏色？
第五題：請問以下的 HTML 裡面的 h1 是什麼顏色？
第六題 – 陷阱題目：請問以下的 HTML 裡面的 a 是什麼顏色？
🗞 5/14(五) 每日任務-做此心理測驗分享測驗結果
🗞 5/17(一) 每日任務-CSS 樣式疊加與組合

5/19(三) 第二堂：BS5 格線系統教學

5/19(三) 第二堂：BS5 格線系統教學-筆記

格線系統
減輕 magic number (魔術數值) 出現
什麼是格線系統
960 grid
960 grid 使用 flot: left 為排版基楚
使用格線的好處，共用寬度與樣式名稱，對照 960 grid 的使用
960 grid 的寬度總合與超出時的下移下行
960 grid 的 column (欄)、gutter (間距)
Bootstrap 格線系統原理
bootstrap 的格線系統 .container、.row、.col- 的基本結構與觀念
名言 1：.col- 的外層只能是 .row 與名言 2：.row 裡面只能是 .col-
名言 3：網頁內容與元件請放在 .col- 裡面
常見錯誤
在 .col 增加寬度
在格線系統調整左右 margin 與 padding
正常觀念
可以加上下 的 margin 與 padding
最外層至少補一個 container
container 不受子層 .row 的限制，可以直接使用其他的寬度容器
bootstrap 格線系統開發時排版的細節
BS5 格線斷點設計
Bootstrap 的斷點，針對裝置的概念是行動優先
若想先做 PC 版，可用 md、lg 當起手式 (製作網站一開始的斷點規劃)
格線系統與元件整合
容器與元件說明與使用
元件與通用類別
通用類別的概念
Bootstrap 的通用類別
斷點樣式與通用類別樣式的撰寫順序

第三堂： BS5 元件與 JS 教學

🏅第三堂最終關卡任務(21天帶您做出Bootstrap5募資網站)

前言
Bootstrap 5
CSS 底層
CSS 變數定義與運用全域或區域 (色彩與字體廷伸運用於模組)
單位以 rem 為主
RFS 依裝置大小變化的字級段落變化
格線系統
父層容器下樣式，設定內層容器間距
Gutters 欄間距：.g-*、.gx-*、.gy-*
增加 .container 與斷點 xxl
齊頭、齊尾排版與佈局 (flex & text-align & spacing)：left => start、right => end
Utilities API：自訂通用類別 (工具型樣式)
JavaScript
移除 jQuery 相依
HTML 標籤的 JavaScript 動態屬性 data-attribute，data-xx 改成 data-bs-xx
前端套件
fortawesome
material-design-icons
webpack 4
webpack-dev-server 設定
CSS 預處理
HTML 樣版
webpack 輸出設定
相關資源