自動播放
自動完成
上一堂課程
完成並繼續課程
2522458
2024 切版專題班
課程公告
影音授權觀看資訊
切版專題班開學典禮
專題班開學典禮 - 上 (105:45)
專題班開學典禮 - 下 (71:16)
Notion 基本介紹
為什麼要學任務指派工具？ (7:50)
註冊 Notion 服務教學 (5:16)
Notion 三劍客介紹 - 工作區、頁面、區塊 (8:25)
建立 page 文件，寫第一份 Hello World 吧！ (12:38)
任務作業一：新增 Notion 頁面來做自我介紹吧！
如何整理自己的學習筆記？了解 text、page block 用法 (12:13)
Notion 資料庫設計
資料庫 - 表格 - 欄位介紹 (9:09)
如何將 page 拉進 database (3:57)
透過 table 建立協同 2~5 人小專案 (8:36)
資料庫篩選、排序、隱藏欄位功能 (6:24)
Notion 方案介紹 (5:16)
發想主題
規劃一個作品的階段里程碑 (4:14)
發想作品方法一：向網站致敬 (6:04)
發想作品方法二：蹭時勢流量 (8:28)
發想作品方法三：思考自己想解決的問題 (6:45)
wireframe 簡略介紹 (3:00)
雜談：平面設計可以不轉前端，往網頁設計師發展嗎？ (3:27)
使用者故事 (user story)、網站地圖(Sitemap)
為什麼要學習規劃網站？ (3:42)
user story 介紹 (2:07)
以 IT 邦幫忙為例 (11:53)
以六角學院為例 (4:03)
以 The F2E 黑客松網站為例 (3:26)
以學員題目：攀岩網站為例 (7:50)
以學員題目：車宿地點為例 (11:09)
設計 sitemap 網站地圖 (1:51)
線稿圖(wireframe)
什麼是 wireframe 線稿圖？ (13:24)
網站色系(主色、輔助色)如何判斷？ (7:27)
Miro 教學 - 註冊帳號與基礎版面 (5:41)
Miro 教學 - 邀請團隊成員 (4:40)
Miro 教學 - 工具列運用 (16:30)
Miro 教學 - 繪製基本流程圖 (8:58)
Miro 教學 - 多流程圖說明 (10:21)
首頁設計六大功略指南 - 設計面試官也喜歡的網頁
如何規劃面試官也喜歡的首頁？ (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)
Git 協作部分
Git 教學資源
Notion 團隊協作心法流程
任務指派工具 - board 看板介紹 (15:27)
心法篇 - 多任務時，如何設定優先順序？ (11:40)
載入範本(template)教學 (3:08)
notion 工程師範本 - 簡單樣板介紹 (4:15)
notion 工程師範本 - epic 與 sprint 常見術語介紹 (12:20)
notion 工程師團隊範本介紹 (11:37)
epic 與子任務設定教學 (12:09)
從真實專案 The F2E 了解專案開發流程 (11:37)
環境建置
Bootstrap 文件介紹 (6:19)
Bootstrap 中英文文件連結
VSCode 基礎環境建置 (5:11)
VSCode 與相關資源連結
語系設置與 Bootstrap CDN (10:28)
CSS 的 Class 運用 (2:36)
快速體驗 Bootstrap 建立一個網站 (9:09)
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 文件介紹
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 與網格系統介紹
通用類別 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
表單運用
知識點：網頁親和性 (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 最實用的工具 - 元件
元件簡介 (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)
JavaScript 操作
Bootstrap JS 操作簡介 (4:38)
JavaScript 初始化行為 (6:35)
選項、方法以及事件 (11:41)
萬年不敗 jQuery (7:48)
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)
2024/07/13 專題聯誼會回顧錄影
A 組 (87:39)
B 組 (77:23)
C 組 (64:36)
D 組 (99:40)
E 組 (105:55)
F 組 (59:01)
上機考流程說明
上機考流程 (11:32)
常見操作問題 (3:38)
成果發表會
10/20 布丁場 (237:02)
11/3 樂樂場 (270:15)
11/3 依依場 (256:44)
從真實專案 The F2E 了解專案開發流程
課程內容未解鎖
如果您已經購買此課程，
請您重新登入後再查看
.
購買本課程