自動播放
自動完成
上一堂課程
完成並繼續課程
2762668
網頁切版直播班｜2025 夏季
課程公告
🌟 新手必看 - 6 分鐘課程引導教學 (6:43)
影音授權觀看時間
10 份版型贈送
上課直播間 - zoom 連結
課程任務提交平台 - 程式勇者村 - 說明
開學典禮
切版直播班開學典禮 (115:43)
切版直播班開學典禮 - 補充回覆 (9:14)
直播課程
直播影片 - Youtube 暫存版（提供至 2025/8/24）
第一堂：1px 也不差的版型控制術 - 上 (92:57)
第一堂：1px 也不差的版型控制術 - 下 (37:33)
第一堂：1px 也不差的版型控制術 - QA (20:08)
第二堂：Flexbox 網頁排版術 - 上 (79:34)
第二堂：Flexbox 網頁排版術 - 下 (84:49)
助教直播｜第一堂、第二堂 - 上 (60:02)
助教直播 ｜第一堂、第二堂- 下 (80:15)
第三堂：RWD 響應式網頁 - 上 (82:31)
第三堂：RWD 響應式網頁 - 下 (77:25)
第三堂：RWD 響應式網頁 - 延伸 QA (4:54)
助教直播｜第三堂：RWD 響應式網頁 (53:50)
第四堂：多頁式網頁 - 上 (76:42)
第四堂：多頁式網頁 - 中 (20:03)
第四堂：多頁式網頁 - 下 (75:19)
助教直播｜第四堂：多頁式網頁 - 上 (45:39)
助教直播｜第四堂：多頁式網頁 - 下 (53:48)
第五堂：表單製作 - 上 (82:36)
第五堂：表單製作 - 下 (64:19)
第五堂：表單製作 - QA 回覆 (10:46)
助教直播｜第五堂：表單製作 - 上 (47:12)
助教直播｜第五堂：表單製作 - 下 (55:55)
第六堂：導入網頁規範設計流程 - 上 (104:26)
第六堂：導入網頁規範設計流程 - 下 (59:58)
助教直播｜第六堂：導入網頁規範設計流程 - 上 (44:22)
助教直播｜第六堂：導入網頁規範設計流程 - 下 (31:33)
第七堂：網頁動態 - 上 (103:44)
第七堂：網頁動態 - 下 (40:22)
第八堂：總複習 - 上 (81:30)
第八堂：總複習 - 下 (74:13)
助教直播｜第七堂、第八堂 - 上 (55:36)
助教直播｜第七堂、第八堂 - 下 (72:02)
AAPD X 六角 研發營｜開營典禮 8/11 (80:19)
AAPD X 六角 研發營｜線上講座：從設計到開發 8/16 (62:50)
AAPD X 六角 研發營｜成果發表 - 上半場 9/21 (110:47)
AAPD X 六角 研發營｜成果發表 - 下半場 9/21 (163:09)
HTML - VS Code 網頁編輯器、HTML 基礎教學
安裝 Chrome 瀏覽器 (2:15)
安裝 VS Code 編輯器 (3:36)
安裝 VS Code 套件 - 讓介面變成中文化 (4:17)
開始撰寫 HTML (6:28)
撰寫 h1 標籤、 p 段落 (8:11)
CodePen 教學 - 將你的程式碼分享給別人 (4:20)
建立 HTML 環境 (7:40)
HTML 環境語法
Emmet 載入環境語法 (6:29)
插入圖片，了解圖片路徑規則 (8:48)
載入外部圖片方式 (4:30)
在網頁上加上 a 連結標籤 (6:18)
段落 p 與連結 a 的混合應用 (3:08)
認識 ul li 列表標籤 (8:26)
HTML 標籤教學 - 小節作業 (3:55)
HTML - CSS 常用語法
HTML 與 CSS 的差異 (3:37)
插入 CSS 檔案，先寫一個 h1 讓文字變色 (5:48)
CSS 寫法詳解介紹 (4:38)
新手常見 CSS 錯誤解析 (9:30)
HTML 標籤選擇器 (5:44)
擬態選擇器 :hover (6:07)
類別選擇器 (13:06)
使用 CSS 優化文字排版 (10:16)
在 HTML 標籤上加入線條 (8:10)
2020 CSS 樣式小節作業
HTML - 使用 CSS 變更 HTML 標籤特性
網頁容器介紹 (6:50)
CSS Reset - 清空瀏覽器預設樣式 (11:42)
display: block 區塊元素介紹 (12:39)
display: inline 行內元素介紹 (12:15)
display 容器特性 - 區塊跟行內 (5:49)
div 與後代選擇器運用 (14:44)
margin 產生外邊界距離 (11:52)
padding 產生留白距離 (6:17)
margin、padding 投影片介紹 (2:04)
Box Model（盒模型）詳細介紹 (10:54)
margin 0 auto 區塊水平置中 (10:15)
text-align 文字水平調整 (5:16)
2020 優化 CSS 作業小節作業
2020補充教材：不想算盒模型的推擠？試試 CSS3 box-sizing 吧！ (5:18)
課前最終作業一
課前最終作業一提交
網頁排版技巧 Part II
使用絕對定位 / 相對定位 設計版型 (9:06)
相對定位、絕對定位元素技巧：z-index - relative、absolute (5:27)
簡報呈現相對定位跟絕對定位的技巧 (3:49)
使用 ul li 設計產品列表 (14:08)
絕對定位設計優惠價 (5:05)
position: fixed 技巧 (5:14)
Flex 網頁排版技巧
Flex 排版技巧介紹 (4:32)
CodePen 講解 Flex 技巧 (1:47)
Flex 外層屬性 (container) 介紹上集 (11:53)
Flex 外層屬性 (container) 介紹下集 (9:20)
主軸介紹 - 要熟練 Flex ，必修軸線技巧 (2:13)
flex-direction - 決定 flex 軸線 (6:16)
justify-content - 決定主軸對齊方式 (11:45)
設計一個 Flex 並排選單吧！ (8:10)
flex-wrap - 決定換行屬性 (4:29)
align-items - 交錯軸對齊方式 (7:07)
透過 VS Code 插件，開啟一個即時預覽的 Web Server (5:02)
Flex 練習前置作業 (9:26)
Flex 小節作業 (16:50)
Flex 精神時光屋
Flex 裡頭還可以包 Flex - 圖解教學 (9:46)
Flex 裡頭還可以包 Flex - 程式碼開發 (13:35)
Flex column 運用 (7:42)
Flex 修煉時光屋 (39:33)
Flex 修煉時光屋圖片
Flex 修煉時光屋自我檢核
課前最終作業二
課前最終作業二提交
字體設定全攻略
CSS 字體設置簡介 (1:16)
Win、Mac 內建字體介紹 (8:38)
CSS font-family 載入內建字體 (8:42)
font-wieght 字體的字重種類設定 (11:27)
如何載入外部字型-以第一週設計稿為例 (7:01)
載入 Google 雲端字體 - 思源黑體、Roboto (10:54)
以第一週個人履歷設計稿，來規劃字體配置 (5:46)
懶人包系統預設字體配置 (3:25)
字體補充教學連結
背景圖延伸應用技巧
background 在 html 元素上載入背景圖片，設定寬高 (6:59)
background-repeat：將圖片重複顯示，repeat-x (13:42)
background-color：與背景圖片的混用 (9:24)
background-position：移動 background 的位置 (4:28)
background 縮寫教學 (2:37)
圖片取代文字技巧 - 以logo為例 (7:05)
圖片種類介紹 ( gif、jpg、png ) (10:34)
基本環境介紹
什麼是響應式網頁設計？(上) (4:35)
什麼是響應式網頁設計？(下) (4:07)
基本環境建立 (上) (3:50)
基本環境建立 (下) (5:51)
基本環境建立 (下) -課程補充
CSS 3 Media Query 觀念 (上) (7:02)
CSS 3 Media Query 觀念 (下) (4:49)
min-width 語法教學 (2:51)
你知道瀏覽器內建就有模擬 Mobile 介面工具了嗎？ (6:20)
你知道瀏覽器內建就有模擬 Mobile 介面工具了嗎？-課程補充
第一章測驗
常見版型佈局設定
禁止顯示 x 軸法則 (2:45)
max-width：一個小設定輕易將網頁設定成手機版佈局 (5:19)
版型單位 % 數觀念 (5:40)
三欄流體式設計 (7:02)
網站版型框架設定 (5:01)
左側固定、右側流體式設計 (3:00)
容器與內容分離的格線系統設計
傳統排版上可以優化的部分 (10:36)
認識格線系統、容器與內容 (11:34)
起手-格線系統 (10:58)
將格線系統套用至整個網頁 (5:39)
格線系統套用響應式 (5:09)
更加複雜的需求？可以試試看導入框架 (8:18)
GitHub Pages 免費架站空間教學
架設網站神器簡介 - GitHub Desktop (2:52)
註冊 GitHub 服務 (4:21)
部署網站(Mac 版)：GitHub Desktop 部署網站流程 (17:59)
部署網站(Windows 版)：GitHub Desktop 部署網站流程 (14:36)
Mac、Win：如何更新網站、再新增一個網站空間 (10:28)
第四週 - GGV 任務 - 前端任務管理工具教學
Git 課前環境安裝 - 文字版
Git 課前環境安裝 - 影片版 (4:27)
GitHub 課前環境註冊 (4:21)
Vite 前端開發工具介紹 (2:57)
Vite 環境安裝 (上) (7:44)
Vite 環境安裝 (下) - 資料夾結構講解 (11:03)
GitHub Pages 部署網站流程 (上) - 更新 main 開發分支 (11:04)
GitHub Pages 部署網站流程 (下) - 部署 gh-pages 網站空間 (10:25)
關機後之後要更新要怎麼做？第二個網站要怎麼做，可以複製資料夾嗎？要怎麼給助教看程式碼？ (13:26)
Vite、GitHub 常見 QA (5:48)
Git 協作部分
Git 教學資源
表格與表單設計技巧
表單章節說明
認識 HTML 表格 (Table) 標籤 (7:36)
設定表格 (Table) 上的 CSS 樣式 (7:41)
表單 (Form) 簡介 (2:11)
表單三劍客：Form、輸入欄位、Submit (8:07)
Form、Text、Submit 範例程式碼
使用 label、placeholder 提升表單使用者體驗 (4:49)
label、placeholder 範例程式碼
表單元素：radio、checkbox (6:16)
表單元素：select、textarea (6:13)
使用 CSS 修改表單 (Form) 樣式 (10:40)
Bootstrap 5 - 環境建置
Bootstrap 文件介紹 (6:19)
Bootstrap 中英文文件連結
VSCode 基礎環境建置 (5:11)
VSCode 與相關資源連結
語系設置與 Bootstrap CDN (10:28)
CSS 的 Class 運用 (2:36)
快速體驗 Bootstrap 建立一個網站 (9:09)
Bootstrap 5 - Bootstrap 文件介紹
知識點：box-sizing (5:48)
知識點：CSS Variables (4:32)
知識點：rem 單位 (8:20)
知識點：系統預設字體 (4:20)
CSS Reset 做了什麼 (5:41)
六角學院專屬「Bootstrap 練習手冊」 (3:59)
Bootstrap 5 練習手冊連結
文字運用 (13:43)
基本圖片運用 (8:06)
圖片區 (2:08)
表格運用 (16:05)
測驗：Bootstrap 文件介紹
Bootstrap 5 - Flex 與網格系統介紹
基礎格線觀念 (8:15)
繪圖軟體與格線之間的關聯性 (9:04)
響應式中斷點 (8:24)
格線容器 (6:30)
欄：上篇 (9:37)
欄：下篇 (5:11)
欄與欄的間距：Gutter 觀念說明 (4:54)
欄與欄的間距：Gutter (8:36)
CSS Flex 與格線系統 (6:01)
Utilities 通用類別：間隔 Spacing (8:58)
Utilities 通用類別：Flex (12:12)
格線系統與 Utilities 的混合運用 (4:58)
格線系統：實作練習 (10:21)
格線系統：常見錯誤 (6:10)
測驗：Flex 與網格系統介紹
Bootstrap 5 - 通用類別 Utilities 與 工具 Helpers
Utilities 與 helpers 基本介紹 (3:07)
Background - 背景色彩（重要） (4:03)
Border - 邊框（重要） (6:22)
Text color - 文字色彩 (3:14)
Display - 盒模型（非常重要） (5:40)
Float - 浮動 (3:54)
Interactions - 互動（好用） (2:58)
Overflow - 溢出 (3:46)
Position - 位置（重要） (11:26)
Shadow - 陰影（好用） (3:21)
Sizing - 尺寸（重要） (5:58)
Text - 文字（好用） (7:06)
Vertical alignment - 垂直對齊（好用） (1:57)
Visibility - 可視性 (1:13)
Helper: Clearfix - 清除浮動 (1:42)
Helper: Colored links - 連結顏色（重要） (1:39)
Helper: Ratio - 比例（好用） (2:28)
Helper: Visually hidden - 視覺隱藏 (0:52)
Helper: Stretched link - 連結延伸（重要） (5:02)
Helper: Text truncation - 文字截斷（好用） (3:43)
測驗：通用類別 Utilities 與 工具 Helpers
Bootstrap 5 - 表單運用
知識點：網頁親和性 (4:54)
表單運用概觀 (7:13)
表單元素常用的 form-control (4:18)
表單 Select .form-select (2:23)
表單的 Radio 與 Checkbox 運用 (6:52)
表單的 Range 樣式 (2:45)
群組式 input (7:01)
表單驗證技巧 (7:39)
新的表單樣式！form-floating (4:58)
表單排版技巧 (11:18)
Bootstrap 5 - Bootstrap 最實用的工具 - 元件
元件簡介 (6:45)
元件與 JavaScript 之間的關係 (3:47)
手風琴 (Accordion) (7:16)
警報 (Alerts)（好用） (7:16)
標籤 (Badges)（好用） (4:03)
麵包屑 (Breadcrumb)（好用） (1:54)
按鈕 (Buttons)（非常重要） (9:43)
按鈕群組 (Button group)（重要） (7:54)
卡片 (Cards)（非常重要） (15:47)
輪播 (Carousel) (9:12)
關閉按鈕 (Close button)（好用） (1:34)
折疊 (Collapse)（重要） (3:58)
下拉選單 (Dropdowns)（好用） (13:17)
列表群組 (List group)（好用） (8:27)
互動視窗 (Modal)（重要） (9:19)
導覽與頁籤 (Navs and tabs) (8:37)
導覽列（Navbar）（重要） (13:38)
Offcanvas - 側欄滑動導覽（好用） (4:26)
分頁 (Pagination)（好用） (2:40)
彈出提示框 (Popovers) (4:17)
進度條 (Progress)（好用） (3:57)
滾動監控 (Scrollspy) (4:12)
讀取圖示 (Spinners)（重要） (5:36)
吐司 (Toasts)（重要） (5:07)
工具提示框 (Tooltips)（好用） (3:56)
Bootstrap 5 - Bootstrap 與神奇的 Sass
Bootstrap 與 Sass 的關係 (5:11)
在 VSCode 中加入 Sass 環境 (4:05)
5.3 版變數調整方式 (10:30)
客製化變數的方法差異 (10:25)
讓 Bootstrap 不要那麼肥，手動匯入元件 (3:55)
修改特定的元件的變數 (8:11)
Bootstrap 隱藏功能開關！ (3:02)
響應式文字縮放功能 (2:15)
自定義通用類別 (10:44)
使用 Bootstrap 方法，產生獨立元件 (5:28)
在 Sass 中，自訂高可用性的元件 (6:31)
示範：1. 客製化前的準備 (6:05)
示範：2. 準備進行客製化 (13:51)
示範：3. 全域設定 (12:11)
示範：4. 元件設定 (18:34)
GSAP 動畫效果
GSAP 簡介 (1:31)
環境安裝教學 (7:06)
to、from、fromTo 三劍客動畫方法 (5:26)
新增第二個動畫作法、delay、repeat 語法 (3:15)
動畫速率調整方式 (4:57)
timeline 時間軸設計 (3:49)
timeline 速率順序調整 (3:46)
ScrollTrigger 套件教學 (0:49)
ScrollTrigger 參數設定 (6:41)
ScrollTrigger 檢視觸發工具 (7:26)
CSS 額外補充 - CSS4 技巧
CSS 也有變數功能了！ (9:09)
has()選擇器 能夠選父階層 (8:46)
aspect-ratio 調整圖片比例 (7:05)
dark mode 深色模式 (4:35)
用 CSS 做畫面滾動效果 (9:15)
2024 直播課程錄影回顧
2024 課程講義與設計稿
第一週：1px 也不差的切版術 上 (94:35)
第一週：1px 也不差的切版術 下 (82:38)
第一週：1px 也不差的切版術｜助教直播（上） (42:36)
第一週：1px 也不差的切版術｜助教直播（下） (32:56)
第二週：Flex 運用 上 (42:14)
第二週：Flex 運用 中 (60:21)
第二週：Flex 運用 下 (74:21)
第二週：Flex 運用｜助教直播（上） (57:36)
第二週：Flex 運用｜助教直播（下） (29:42)
第三週：RWD 響應式網頁 - 上 (75:50)
第三週：RWD 響應式網頁 - 下 (106:15)
第三週：RWD 響應式網頁｜助教直播（上） (53:08)
第三週：RWD 響應式網頁｜助教直播（下） (46:23)
第四週：Vite 與 多頁式網頁設計 - 上 (92:35)
第四週：Vite 與 多頁式網頁設計 - 下 (74:28)
第四週：Vite 與 多頁式網頁設計｜助教直播（上） (55:33)
第四週：Vite 與 多頁式網頁設計｜助教直播（下） (35:33)
第五週：後台表單設計 - 上 (93:39)
第五週：後台表單設計 - 中 (83:46)
第五週：後台表單設計 - 下 (8:57)
第五週：後台表單設計｜助教直播（上） (49:42)
第五週：後台表單設計｜助教直播（下） (54:23)
第六週：導入網頁規範的...成神之路（上） (94:23)
第六週：導入網頁規範的...成神之路（下） (83:39)
第六週：導入網頁規範的...成神之路｜助教直播（上） (58:39)
第六週：導入網頁規範的...成神之路｜助教直播（下） (43:02)
第七週：視差滾動（上） (98:32)
第七週：視差滾動（下） (59:47)
第七週：視差滾動｜助教直播 (54:46)
第八週：CSS 模組化管理（上） (84:03)
第八週：CSS 模組化管理（下） (81:32)
第八週：CSS 模組化管理｜助教直播（上） (46:47)
第八週：CSS 模組化管理｜助教直播（下） (39:31)
2022 Tailwind 直播錄影回顧
Tailwind 第一週直播錄影 (155:03)
Tailwind 第二週直播錄影 (134:14)
Tailwind 第三週直播錄影 (137:20)
Tailwind 第四週直播錄影 (155:17)
AAPD X 六角 研發營｜線上講座：從設計到開發 8/16
課程內容未解鎖
如果您已經購買此課程，
請您重新登入後再查看
.
購買本課程