第 1 章：課程準備工作
04 - Vite5、Tailwind3 開發環境建置(重要)
Tailwind CSS 網頁切版實戰 - 從零基礎到邁向接案
第 1 章：課程準備工作 共 4 堂課
第 2 章：CSS 網頁切版術 共 20 堂課
01 - 了解職場分工與網頁基本原理
20:34
02 - HTML 基本元素
34:07
03 - HTML 超連結與屬性
14:58
04 - HTML檔案結構與圖片
22:43
05 - CSS 選擇器
27:07
06 - CSS 繼承與權重
19:37
07 - CSS 基本屬性
34:18
08 - CSS 盒子模型 (重要)
33:30
09 - CSS 切版前準備工作
17:51
10 - 撰寫與規劃 html 結構
29:01
11 - 使用語意化標籤、選擇器優化
13:18
12 - Inline-block 排版 (重要)
35:57
13 - Flex 排版 (重要) -1
17:32
14 - Flex 排版 (重要)- 2
14:42
15 - Flex 排版 (重要) -3
35:15
16 - CSS Rwd 響應式網頁
31:21
17 - Position 排版 (重要)
41:19
18 - CSS 綜合應用 - hover 與 Position 應用
23:27
19 - CSS 綜合應用 - flex 應用
29:32
20 - 了解 CSS 的前世今生
40:03
第 3 章：Tailwind CSS 一頁式銷售頁製作 共 15 堂課
01 - 了解 Tailwind 架構
20:49
02 - Tailwind 語法整理與速記
22:38
03 - 網頁排版 - scss 變數設定
22:37
04 - 網頁排版 - 網頁最大寬度與 tailwind 變數
08:54
05 - 網頁排版 - tailwind hover 與 border 語法
15:20
06 - 網頁排版 - tailwind flex 排版
25:22
07 - 網頁排版 - tailwind 偽元素(before、after)
28:33
08 - 網頁排版 - tailwind grid 排版
13:18
09 - Tailwind 響應式斷點 - 手機優先設計
34:18
10 - 網頁排版 - 表單排版 (input)
28:09
11 - 網頁排版 - 表單排版 (radio)
22:23
12 - 網頁排版 - 網頁漢堡選單
25:28
13 - 網頁字體的秘密 - 套用字型與 google font
28:37
14 - Favicon.ico 與進階用法
11:48
15 - tailwind ui 模版
10:56
第 4 章：網頁互動元件製作 - 套用 uikit 共 11 堂課
第 5 章：網頁架站與 Email 收單功能 共 8 堂課
第 6 章：網頁 SEO 優化與 GA4 自訂事件 共 13 堂課
01 - 了解網頁 SEO
14:04
02 - 優化圖片 - 打包網站圖片自動轉成 Webp
09:44
03 - social 標籤 - 加入社群分享 meta
14:46
04 - 優化網頁頁面結構
15:41
05 - 了解網頁301轉址、標準連結元素
17:11
06 - 了解 robots.txt
06:43
07 - 了解 Sitemap.xml
06:18
08 - 申請 google Ga4
06:57
09 - 網頁安裝 google Ga4
04:19
10 - Ga4 建立自訂事件 - 設定行銷管道
11:43
11 - Ga4 建立轉換事件
10:52
12 - Ga4 報表呈現 - 評估行銷成效
26:21
13 - 了解 Schema 語意標記
第 7 章：Tailwind CSS 動畫與多頁版型製作 (預計2026年2月陸續上架) 共 6 堂課