自動播放
自動完成
上一堂課程
完成並繼續課程
2099237
網頁切版直播班 2023 夏季班
課程公告
影音授權觀看時間
8 份版型贈送
開學典禮
開學典禮 - 學習進度規劃 (149:28)
Discord 通訊服務教學
介紹各頻道教學 (6:55)
2020 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)
2020 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 樣式小節作業
2020 使用 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)
課前最終作業一
課前最終作業一提交
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)
Markman 章節補充
Markman 軟體教學 (4:23)
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)
切版 2023 夏季班 - 第一週直播錄影
洧杰 - 第一週直播錄影 - 上半部 (69:08)
洧杰 - 第一週直播錄影 - 下半部 (89:05)
上屆 2022 年 穎旻 - Tailwind 第一週直播錄影 (155:03)
上屆 2022 年 穎旻 - 上屆第一週主線任務作業講解 (83:13)
切版 2023 夏季班 - 第二週直播錄影
第二週直播錄影 - 上半部 (52:42)
第二週直播錄影 - 下半部 (66:08)
穎旻 - Tailwind 第二週直播錄影 (134:14)
穎旻 - 上屆第二週主線任務作業講解 (58:03)
切版 2023 夏季班 - 第三週直播錄影
第三週 RWD 直播錄影 - 上半部 (63:42)
第三週 RWD 直播錄影 - 下半部 (103:17)
穎旻 - 上屆第三週主線任務作業講解 (72:59)
穎旻 - Tailwind 第三週直播錄影 (137:20)
切版 2023 夏季班 - 第四週直播錄影
第四週直播錄影 - 上半部 (Vite+Git+GitHub 部署網頁流程) (92:27)
第四週直播錄影 - 下半部 (EJS+Layout+SCSS) (127:06)
第四週 - 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)
切版 2022 夏季班 - 第四週直播錄影
穎旻 - Tailwind 第四週直播錄影 (155:17)
切版 2023 夏季班 - 第五週後台表單設計
第五週直播錄影 - 上半部 (56:43)
第五週直播錄影 - 下半部 (96:10)
穎旻 - 上屆第五週主線任務講解 (84:38)
穎旻 - 這屆第五週作業講解 (98:08)
第六週 - 格線系統
第六週直播錄影 - 上半部 (72:23)
第六週直播錄影 - 下半部 (116:41)
第七週 - 視差滾動技巧
第七週直播錄影 (107:51)
GSAP 動畫效果
GSAP 簡介 (1:31)
環境安裝教學 (7:06)
to、from、fromTo 三劍客動畫方法 (5:26)
新增第二個動畫作法、dealy、repeat 語法 (3:15)
動畫速率調整方式 (4:57)
timeline 時間軸設計 (3:49)
timeline 速率順序調整 (3:46)
ScrollTrigger 套件教學 (0:49)
ScrollTrigger 參數設定 (6:41)
ScrollTrigger 檢視觸發工具 (7:26)
第八週直播錄影
第八週直播錄影 (136:17)
2022 年專題討論 - 提供參考
第一週 - 發想題目、收斂功能範圍 (157:14)
第二週 - 環境建立、設置首頁 (95:41)
第三週 - 時間規劃設計 (146:15)
專題發表會前討論 (187:03)
專題週報
同步與非同步溝通並行的重要性 (13:01)
專題作品班 - 關卡一：發想主題
規劃一個作品的階段里程碑 (4:14)
發想作品方法一：向網站致敬 (6:04)
發想作品方法二：蹭時勢流量 (8:28)
發想作品方法三：思考自己想解決的問題 (6:45)
各專題題目參考 (7:22)
兩個專題簡報分享 - 感謝火箭隊專題組學員分享 (10:59)
wireframe 簡略介紹 (3:00)
雜談：平面設計可以不轉前端，往網頁設計師發展嗎？ (3:27)
專題作品班 - 關卡 2 - 使用者故事 (user story)、網站地圖(Sitemap)
為什麼要學習規劃網站？ (3:42)
user story 介紹 (2:07)
以 IT 邦幫忙為例 (11:53)
以六角學院為例 (4:03)
以 The F2E 黑客松網站為例 (3:26)
以學員題目：攀岩網站為例 (7:49)
以學員題目：車宿地點為例 (11:09)
設計 sitemap 網站地圖 (1:51)
專題作品班 - 線稿圖(wireframe)
什麼是 wireframe 線稿圖？ (13:24)
網站色系(主色、輔助色)如何判斷？ (7:27)
首頁設計六大功略指南 - 設計面試官也喜歡的網
如何規劃面試官也喜歡的首頁？ (0:24)
指南一：Banner 區 - 用一句話來介紹你的服務 (7:21)
指南二：提出痛點吸引消費者引發共鳴 (8:58)
指南三：介紹產品優勢，讓客戶深入瞭解 (5:30)
隨堂小考 (7:56)
指南四：第三方推薦提升產品信心 (8:50)
指南五、六：引導購買（call to action）：推最後一把刺激顧客買單 (13:59)
六大點總結 ＆ 隨堂測驗二 (10:16)
線稿圖優化技巧一：Banner 與 Call to action 完美結合 (5:46)
線稿圖優化技巧二：該放假字嗎？ (10:10)
whimsical 繪圖軟體教學 & 常見退件原因
使用 whimsical 繪製網站地圖、線稿圖教學 (11:51)
【狀態 3-2】 wireframe 線稿圖常見退稿原因講解 (7:27)
專題作品班 - Git 協作部分
Git 教學資源
Node.js 直播班的 Git 協作流程 - rebase 版本 (130:42)
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)
不負責AI字幕之直播錄影檔
備註說明
AI 字幕版本 - 第三週 RWD 直播錄影 - 上半部 (63:42)
AI 字幕版本 - 第三週 RWD 直播錄影 - 下半部 (103:17)
第四週直播錄影 - 上半部 (Vite+Git+GitHub 部署網頁流程) (92:27)
第四週直播錄影 - 下半部 (EJS+Layout+SCSS) (127:06)
第五週直播錄影 - 上半部 (56:43)
第五週直播錄影 - 下半部 (96:10)
第六週直播錄影 - 上半部 (72:23)
第六週直播錄影 - 下半部 (116:41)
第七週直播錄影 (107:51)
第八週直播錄影 (136:17)
成果發表會
成果發表會暨廠商交流 - 上半場 (203:16)
成果發表會暨廠商交流 - 下半場 (233:04)
切版直播班成果發表會
9/17 成果發表會 (405:51)
AI 字幕版本 - 第三週 RWD 直播錄影 - 上半部
課程內容未解鎖
如果您已經購買此課程，
請您重新登入後再查看
.
購買本課程