2022 鐵人賽

• Day 1 - 前言與內容大綱
• Day 2 - Slider 基本佈局 (Layout)
  • 例 2-1: 小試身手
  • 例 2-2: 加入 CSS 語法
  • 例 2-3: 使用 Inline CSS 語法
  • 例 2-4: 移除斷行造成的空白 (改變 HTML 關閉語法的位置)
  • 例 2-5: 移除斷行造成的空白 (使用 font-size: 0)
• Day 3 - CSS 屬性繼承 (Inheritance)
  • 例 3-1: 查看繼承的屬性值
• Day 4 - CSS 彈性盒子 (Flexible Box) 的優點
  • 例 4-1: 套用 display: flex 非等寬
  • 例 4-2: 使用 width 設定寬度
  • 例 4-3: 使用 flex-basis 設定寬度
• Day 5 - CSS Flex 屬性指南 (1) 主軸 (Main Axis)
  • 例 5-1: 使用 flex-direction: row
  • 例 5-2: 使用 flex-direction: row-reverse
  • 例 5-3: 使用 flex-direction: row & flex-wrap: wrap
  • 例 5-4: 使用 direction: row-reserve & flex-wrap: wrap
  • 例 5-5: 使用 flex-direction: column
  • 例 5-6: 使用 flex-direction: column-reverse
  • 例 5-7: 使用 flex-direction: flex-start
  • 例 5-8: 使用 flex-direction: center
  • 例 5-9: 使用 flex-direction: flex-end
  • 例 5-10: 使用 flex-direction: space-between
  • 例 5-11: 使用 flex-direction: space-between & flex-wrap: wrap
  • 例 5-12: 使用 flex-direction: space-around
• Day 6 - CSS Flex 屬性指南 (2) 交錯軸 (Cross Axis)
  • 例 6-1: 使用 align-items: stretch
  • 例 6-2: 使用 align-items: flex-start
  • 例 6-3: 使用 align-items: center
  • 例 6-4: 使用 align-items: flex-end
  • 例 6-5: 使用 align-items: baseline
  • 例 6-6: 使用 align-content: stretch
  • 例 6-7: 使用 align-content: flex-start
  • 例 6-8: 使用 align-content: center
  • 例 6-9: 使用 align-content: flex-end
  • 例 6-10: 使用 align-content: space-between
  • 例 6-11: 使用 align-content: space-around
  • 例 6-12: 使用 align-content: space-around 搭配 align-items: center
• Day 7 - CSS Flex 屬性指南 (3) 項目微調
  • 例 7-1: 準備基本範例
  • 例 7-2: 使用 flex-basis 將第三個項目元素設為 300px
  • 例 7-3: 使用 flex-shrink 將第三個項目元素設為 0
  • 例 7-4: 使用 flex-shrink 將第三個項目元素設為 0.6
  • 例 7-5: 使用 flex-grow 的預設值
  • 例 7-6: 使用 flex-grow 將第三個項目元素設為 1
• Day 8 - CSS 元素定位與裝飾
  • 例 8-1: 未經過 CSS 裝飾的「上一個」、「下一個」按紐
  • 例 8-2: 把按紐變成圓形
  • 例 8-3: 按紐經過 position 垂直置中
  • 例 8-4: 按紐位置貼在邊緣
  • 例 8-5: 按紐位置和垂直線對齊
  • 例 8-6: 按紐三角形圖示
• Day 9 - CSS 偽元素 (Pseudo Element)
  • 例 9-1: 偽元素 ::before
  • 例 9-2: 偽元素 ::after
  • 例 9-3: 查看範例的偽元素位置
• Day 10 - CSS 偽類 (Pseudo Class)
  • 例 10-0: 準備範例網頁
  • 例 10-1: nth-child 範例 1
  • 例 10-2: nth-child 範例 2
  • 例 10-3: nth-of-type 範例
• Day 11 - HTML 事件屬性 (Event Attribute)
  • 例 11-0: 準備範例網頁
  • 例 11-1: HTML 事件屬性
• Day 12 - JavaScript 事件方法 (Event Method)
  • 例 12-1: 準備範例網頁
  • 例 12-2: addEventListener - anonymous function
  • 例 12-3: addEventListener - named function
  • 例 12-4: 查看 PointEvent
  • 例 12-5: removeEventListener
  • 例 12-6: dispatchEvent
• Day 13 - CSS Flex 屬性指南 (4) 排序 (Order)
  • 例 13-1: 準備範例網頁
  • 例 13-2: flex 屬性 order
• Day 14 - CSS Transform 屬性指南 (1) 說明
• Day 15 - CSS Transform 屬性指南 (2) 二維函式 (2D)
  • 例 15-1: transform: translateX 範例
  • 例 15-2: transform: translateY 範例
  • 例 15-3: transform: translate 範例
  • 例 15-4: transform: scaleX 範例
  • 例 15-5: transform: scaleY 範例
  • 例 15-6: transform: scaleX 範例
  • 例 15-7: transform: skewX 範例
  • 例 15-8: transform: skewY
  • 例 15-9: transform: skew
  • 例 15-10: transform: rotate 範例
  • 例 15-11: transform: matrix 範例
• Day 16 - CSS Transform 屬性指南 (3) 三維函式 (3D)
  • 例 16-1: transform: translateZ 範例
  • 例 16-2: transform: translate3d 範例
  • 例 16-3: transform: translate3d + perspective 立體範例
  • 例 16-4: transform: scaleZ 範例
  • 例 16-5: transform: scaleZ 立體範例
  • 例 16-6: transform: scale3d 範例
  • 例 16-7: transform: scale3d 立體範例
  • 例 16-8: transform: rotateX、Y、Z 綜合範例
  • 例 16-9: transform: rotateX、Y、Z 立體綜合範例
  • 例 16-10: transform: rotate3d 範例
  • 例 16-11: transform: rotate3d 立體範例
• Day 17 - Slider 改用 Transform 排序
  • 例 17-1: 修正作法為 Transform 排序
  • 例 17-2: 加上漸變效果
• Day 18 - CSS 漸變動畫屬性 (Transition)
  • 例 18-1: 緩動函式比較 (鐵人賽動畫杯賽跑)
  • 例 18-2: 緩動函式 steps 參數比較
• Day 19 - CSS Coding Style: BEM 命名模式
• Day 20 - JavaScript 模組化標準 ESM
  • 例 20-1: 讓載入的 JS 檔案使用模組
  • 例 20-2: 模組載入失敗
  • 例 20-3: 載入兩個模組
  • 例 20-4: 交叉載入模組
• Day 21 - 發佈 NPM 套件的流程
• Day 22 - 套件命名與建立 Git 儲存庫 (Repository)
• Day 23 - 程式碼品質工具：ESLint、StyleLint、Prettier
• Day 24 - 程式碼打包工具：Webpack
  • 例 24-1: Webpack 設定
  • 例 24-2: package.json
• Day 25 - Slider 套件功能實作規劃
• Day 26 - 主程式 & 基本選項參數
• Day 27 - CSS 轉為 SCSS 模組、套用 BEM 命名模式
• Day 28 - JavaScript 模組化設計原則
• Day 29 - Slider 輪播無限循環
• Day 30 - 設定 GitHub Page，建立文件網站