自動播放
自動完成
上一堂課程
完成並繼續課程
2522456
網頁切版直播班 2024 夏季班
課程公告
影音授權觀看時間
8 份版型贈送
Discord 通訊服務教學
介紹各頻道教學 (6:55)
課程直播影片
切版直播班 - 開學典禮 上 (59:58)
切版直播班 - 開學典禮 中 (53:46)
切版直播班 - 開學典禮 下 (7:12)
第一週：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)
AAPD x 六角學院 作品發表會
第一段 (39:00)
第二段 (23:04)
第三段 (64:17)
第四段 (72:37)
第五段 (60:33)
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)
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 教學資源
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)
表格與表單設計技巧
表單章節說明
認識 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)
匯入 Bootstrap 並調整樣式 (7:15)
讓 Bootstrap 不要那麼肥，手動匯入元件 (3:55)
修改特定的元件的變數 (8:11)
Bootstrap 隱藏功能開關！ (3:02)
響應式文字縮放功能 (2:15)
自定義通用類別 (10:44)
使用 Bootstrap 方法，產生獨立元件 (5:28)
在 Sass 中，自訂高可用性的元件 (6:31)
2023 直播課程錄影回顧
第一週直播錄影 - 上半部 (69:08)
第一週直播錄影 - 下半部 (89:05)
第二週直播錄影 - 上半部 (52:42)
第二週直播錄影 - 下半部 (66:08)
第三週 RWD 直播錄影 - 上半部 (63:42)
第三週 RWD 直播錄影 - 下半部 (103:17)
第四週直播錄影 - 上半部 (Vite+Git+GitHub 部署網頁流程) (92:27)
第四週直播錄影 - 下半部 (EJS+Layout+SCSS) (127:06)
第五週直播錄影 - 上半部 (56:43)
第五週直播錄影 - 下半部 (96:10)
第六週直播錄影 - 上半部 (72:23)
第六週直播錄影 - 下半部 (116:41)
第七週直播錄影 (107:51)
2023 - 第八週直播錄影 (136:17)
2022 - 第八週直播錄影上半部 (63:58)
2022 - 第八週直播錄影下半部 (71:58)
2022 Tailwind 直播錄影回顧
Tailwind 第一週直播錄影 (155:03)
Tailwind 第二週直播錄影 (134:14)
Tailwind 第三週直播錄影 (137:20)
Tailwind 第四週直播錄影 (155:17)
第四週：Vite 與 多頁式網頁設計 - 上
課程內容未解鎖
如果您已經購買此課程，
請您重新登入後再查看
.
購買本課程