Use this block to describe what the course is about, what your students will learn and why someone should buy your course.
Course Curriculum
2020 VS Code 網頁編輯器、HTML 基礎教學
Available in
days
days
after you enroll
- 安裝 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 常用語法
Available in
days
days
after you enroll
2020 使用 CSS 變更 HTML 標籤特性
Available in
days
days
after you enroll
- 網頁容器介紹 (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)
第一關 - 新手切版任務
Available in
days
days
after you enroll
Flex 網頁排版技巧
Available in
days
days
after you enroll
- 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 精神時光屋
Available in
days
days
after you enroll
網頁排版技巧 Part II
Available in
days
days
after you enroll
第二關 - Flexbox 切版任務
Available in
days
days
after you enroll
RWD 手機版網頁設計
Available in
days
days
after you enroll
第三關 - RWD 切版任務
Available in
days
days
after you enroll
Sass 環境教學 - 一起掌握最世界最多人用的 CSS 管理語言！
Available in
days
days
after you enroll
Sass 變數 - 常用語法一鍵設定
Available in
days
days
after you enroll
Sass import - 切分檔案好工具，維護管理更方便
Available in
days
days
after you enroll
Sass Mixin - 讓你不會回想原理，而中斷思緒
Available in
days
days
after you enroll
熟悉 Mixin 後，搭配 RWD 宛如天衣無縫
Available in
days
days
after you enroll
Sass/CSS 設計模式 - 教您最實用的網頁收納術！
Available in
days
days
after you enroll
Bootstrap5
Available in
days
days
after you enroll
css background 背景圖案設計
Available in
days
days
after you enroll
第四關 - SCSS 版型管理任務
Available in
days
days
after you enroll
JavaScript 課前知識與環境介紹
Available in
days
days
after you enroll
變數與資料型別
Available in
days
days
after you enroll
let、const、var 介紹
Available in
days
days
after you enroll
網頁與 Code 環境建立流程教學
Available in
days
days
after you enroll
數字型別與賦值運算子
Available in
days
days
after you enroll
字串型別
Available in
days
days
after you enroll
變數：布林、undefined、null
Available in
days
days
after you enroll
比較與邏輯運算子
Available in
days
days
after you enroll
流程判斷 - if、else if、else
Available in
days
days
after you enroll
if 流程圖規劃流程
Available in
days
days
after you enroll
if 中階運用
Available in
days
days
after you enroll
陣列教學
Available in
days
days
after you enroll
物件教學
Available in
days
days
after you enroll
陣列與物件整合運用
Available in
days
days
after you enroll
- 陣列與物件混合應用 (5:57)
- 一次搞懂陣列與物件混合讀取教學 (6:45)
- JSON 格式介紹 (2:29)
- 安裝 JSON 檢視 Chrome 套件 (2:03)
- 下載 JSON 格式資料 (7:12)
- JSON 讀取方式教學 - 以充電站為例 (5:25)
- 物件裡面還能包物件 (4:02)
- 物件包物件讀取流程 - 以活動公告 open data 為例 (10:03)
- 如何篩選出自己想要的資料格式，並賦予到特定變數上 (3:53)
- 小魔王題目：複雜 JSON 格式，你/妳撈得到嗎？ (6:29)
- 物件搭配 if 練習 (4:29)
- 陣列物件搭配 if 流程判斷練習 (5:02)
- 小節作業 (1:55)
函式 function
Available in
days
days
after you enroll
- 為什麼需要學函式？ (1:48)
- 函式寫法教學 (4:32)
- 註冊多組函式流程 (4:23)
- 函式裡面仍可以執行函式 (4:47)
- 函式參數介紹 (5:24)
- 參數寫法-參數只存活在大括號 (2:31)
- 參數寫法-兩個數字相加工具 (3:25)
- 輸入跟輸出的重要性 (3:09)
- return 寫法教學 (6:47)
- return 宣告 let (2:40)
- return 可以有多個 (2:26)
- return 可以有多個-範例Code (5:11)
- 判斷是否為偶數 - 畫流程圖 (6:45)
- 判斷是否為偶數-寫Code流程(上) (9:04)
- 判斷是否為偶數-寫Code流程(中) (12:19)
- let 全域與區域變數邏輯 (4:13)
- 判斷是否為偶數-寫Code流程(下) (3:59)
DOM - 選取網頁元素
Available in
days
days
after you enroll
- 為什麼要瞭解 DOM？ (2:48)
- 瞭解 document 的重要性 (3:54)
- DOM 環境配置 (2:22)
- querySelector 選擇器 (6:22)
- textContent 寫入文字資料 (5:29)
- innerHTML 插入 HTML 標籤 (6:41)
- innerHTML 加入變數 (7:09)
- textContent 與 innerHTML 運用差異 (4:21)
- setAttribute 增加 HTML 標籤屬性 (4:40)
- querySelectorAll 可重複選取多個元素 (5:57)
- .innerHTML、.textContent、.getAttribute 取值方法 (6:07)
- 表單元素取值方式 (5:41)
Event 事件 - 讓您的網頁具有互動效果
Available in
days
days
after you enroll
陣列 forEach 資料處理方法
Available in
days
days
after you enroll
forEach 題型練習
Available in
days
days
after you enroll
第七週需理解的知識點影片
Available in
days
days
after you enroll
AJAX - 網路請求
Available in
days
days
after you enroll
AJAX - axios 套件教學
Available in
days
days
after you enroll
第六堂 AJAX 直播錄影檔
Available in
days
days
after you enroll
AJAX POST API 講解
Available in
days
days
after you enroll
第七堂錄影檔
Available in
days
days
after you enroll
todolist 待辦事項
Available in
days
days
after you enroll
第八週直播錄影檔
Available in
days
days
after you enroll
第九堂最終關卡錄影檔
Available in
days
days
after you enroll
最終關卡 - 洧杰 Live Demo 馬拉松直播
Available in
days
days
after you enroll
直播課
Available in
days
days
after you enroll
認識 React
Available in
days
days
after you enroll
- 課程相關資源
- 建立 React 環境 (9:23)
- JSX 章節回顧作業（下） (6:25)
- JSX 開發中常見的錯誤 (6:33)
- React 行內樣式 (7:39)
- JSX 與 HTML 的標籤屬性 (14:07)
- 表達式與 React 的關係 (7:57)
- JSX 是如何運作的 (8:30)
- 資料驅動 React - 資料抽離練習 (7:45)
- JSX 章節回顧作業（上） (15:14)
- 資料驅動 React - 建立版型 (6:39)
- JS 型別與 JSX (8:29)
- 什麼是 JavaScript 表達式（運算式、expression） (12:27)
- 課程使用的文字編輯器 VSCode (6:23)
- 課程介紹 (3:02)
JavaScript 必學觀念
Available in
days
days
after you enroll
React 元件基礎
Available in
days
days
after you enroll
React hooks
Available in
days
days
after you enroll
- 元件化 input 與狀態管理 (7:38)
- 使用 useState 更新資料狀態 (21:18)
- Bootstrap 中的方法介紹 (38:04)
- 非同步與元件渲染 (9:32)
- useEffect 的生命週期 (23:00)
- 取得 Unsplash 遠端資料 (7:06)
- 關於 useState 的原理與運作 1 (66:12)
- input 與 useState (10:24)
- 關於 useState 的原理與運作 2 (6:50)
- 使用 useEffect 取得遠端資料 (43:04)
- useEffect 與非同步 (4:49)
- useState 的狀態更新問題 (9:30)
- React Hook 章節挑戰：讀取視覺效果 (12:32)
- 在 React 中運行 Bootstrap (5:15)
- React Hook 章節挑戰：搜尋功能調整 (7:54)
- useRef 取得 DOM (6:32)
- React Hook 章節挑戰：Bootstrap Modal 取得單張圖片 (13:16)
- React Hook 章節挑戰：滾動取得新的圖片 (18:47)
- React Hook 章節挑戰：更新滾動監聽 (6:09)
- React Hook 章節挑戰：useState 與監聽事件的問題 (4:55)
- Unsplash API 使用限制 (2:05)
- useRef 進階觀念 (5:34)
- React Hook 章節挑戰：剩餘請求次數呈現 (7:11)
- 關於 React hook (2:06)
- React Hook 章節挑戰 - 額外補充項目
React 表單開發
Available in
days
days
after you enroll
- React Hook Form：元件化 (9:37)
- React Hook Form：官方表單產生器 (2:55)
- HTML 表單基本介紹 (16:48)
- React 與表單送出 (13:24)
- React Hook Form：挑戰使用 React Hook Form 完成表單 (2:31)
- React Hook Form：錯誤樣式 (12:21)
- React 與常見表單元素 (15:24)
- 常見表單監聽方法 (5:38)
- React Hook Form 簡介 (6:44)
- React 與 Checkbox (8:40)
- React Hook Form：驗證方法 (8:51)
- React Hook Form：狀態監聽 (13:46)
- React Hook Form 官方文件
React hooks 進階
Available in
days
days
after you enroll
- 使用 useReducer 進行狀態管理 (13:29)
- 另一種生命週期：useLayoutEffect (10:01)
- 追蹤滑鼠位置的自訂 hook 運用方法 (3:51)
- 使用現成的 hook 範例：debounce (5:54)
- 自訂屬於自己的 hook (5:43)
- 解決函式傳參考問題：useCallback (10:25)
- 使用 useContext 做到跨元件狀態 (11:46)
- useReducer 實戰範例 (14:55)
- useMemo 實戰常見運用 (47:00)
- 使用 useMemo 進行運算 (16:30)
- memo 元件 (7:26)
- 自訂 hook 除錯方法 (5:08)
- React 生命週期補充說明 (7:36)
- 跨元件狀態說明 (4:35)
- useContext 進階 (6:08)
- React 自定義 Hook 範例網站
Create React App
Available in
days
days
after you enroll
Create React App 整合製作簡易購物車
Available in
days
days
after you enroll
Router
Available in
days
days
after you enroll
- React Router 基本介紹 (3:38)
- React Router：程式碼微調 (4:32)
- React Router：巢狀路由與 Outlet (9:16)
- React Router：React 專案中的 import 手法 (5:04)
- React Router：動態路由 (11:57)
- React Router：加入前端路由 (7:10)
- React Router：環境準備 (5:31)
- React Router：搜尋功能製作 (10:25)
- React Router：串接 Unsplash API (10:00)
- React Router：導覽連結優化 (4:54)
- React Router：NotFound 頁面與 useNavigate (5:46)
- React Router：搜尋及網址參數 (8:31)
- React Router：Browser Router 與 Hash Router (5:28)
- React Router：課程資源
最終挑戰
Available in
days
days
after you enroll
- 最終挑戰：建立新商品 (14:11)
- 最終挑戰：顯示產品列表 (5:59)
- 最終挑戰：申請個人 API Path (4:32)
- 最終挑戰：加入環境變數 (5:29)
- 最終挑戰：加入 ProductModal 彈出視窗 (10:55)
- 最終挑戰：後台功能完成 (0:52)
- 最終挑戰：編輯產品資訊 (11:08)
- 最終挑戰：開發登入畫面 (11:54)
- 最終挑戰：介紹 (9:47)
- 最終挑戰：登入畫面微調 (4:28)
- 最終挑戰：優惠券到期日 (9:04)
- 最終挑戰：重新取得遠端資料 (2:42)
- 最終挑戰：路由保護 (11:27)
- 最終挑戰：後台版型導入 (9:35)
- 最終挑戰：為專案加入 Bootstrap (8:36)
- 最終挑戰：套用前台版型 (12:05)
- 最終挑戰：刪除單一商品 (11:20)
- 最終挑戰：介紹 Toast 元件 (6:46)
- 最終挑戰：準備 useContext 與 useReducer (9:13)
- 最終挑戰：分頁功能製作 (12:47)
- 最終挑戰：Cookie 的運作概念 (7:02)
- 最終挑戰：優惠券頁面製作 (15:18)
- 最終挑戰：跨元件訊息 (11:26)
- 最終挑戰：下半場解說 (2:02)
- 最終挑戰：編輯商品微調 (3:54)
- 最終挑戰：移除餐點品項 (4:32)
- 最終挑戰：加入購物車 (9:41)
- 最終挑戰：表單驗證製作 (9:44)
- 最終挑戰：最終作業結語 (1:12)
- 最終挑戰：更新餐點數量 (9:12)
- 最終挑戰：跨元件購物車資訊更新 (8:41)
- 最終挑戰：前台單一餐點頁面 (9:53)
- 最終挑戰：付款成功頁面 (8:37)
- 最終挑戰：Navbar 導覽列元件 (7:15)
- 最終挑戰：購物車頁面製作 (9:46)
- 最終挑戰：讀取效果製作 (6:44)
- 最終挑戰：前台餐點列表 (10:33)
- 課程 API 文件及相關資源
- 課程範例與 Commit 對照
- 常見 API 問題解決方式
- Cookie 存取語法
- 最終作業提交規則
- 最終作業任務說明
- 補充：檔案上傳 (8:45)
Redux Toolkit
Available in
days
days
after you enroll
- Todo 整合 Redux 範例：加入 Actions (8:24)
- 最終作業整合 Redux：整合錯誤訊息 (9:27)
- Todo 整合 Redux 範例：移除 Todo (3:35)
- Todo 整合 Redux 範例：建立 Redux Toolkit 環境 (10:23)
- 最終作業整合 Redux：非同步移除訊息 (11:30)
- 最終作業整合 Redux：調整說明 (1:24)
- Redux Toolkit 小結 (0:32)
- Todo 整合 Redux 範例：移除 Todo 範例 2 (4:47)
- 最終作業整合 Redux：將 Message Toast 元件加入到畫面上 (3:41)
- 最終作業整合 Redux：加入 Redux Toolkit (9:18)
- Todo 整合 Redux 範例：更新 Todo 資料 (4:03)
- 最終作業整合 Redux：建立訊息 (6:51)
- Redux Toolkit 簡介 (3:19)
- Redux Toolkit 章節資源
2022 JS 全修練新增課鋼 - todolist API - 環境安裝
Available in
days
days
after you enroll
2022 JS 全修練新增課鋼 - todolist API 規則講解
Available in
days
days
after you enroll
- 透過註冊 API 瞭解 Swagger 文件操作 (6:14)
- 透過 axios 搭配 API 設計註冊功能 (22:20)
- 抽出網址變數 (2:26)
- 透過 postman 設計網址請求 (16:12)
- 何謂網址請求，並觀察 request、response 的 headers、body 資料 (12:58)
- 觀察 API 是否支援瀏覽器 CORS 跨網域 (8:44)
- 介接 login 登入 API (8:12)
- 從 headers 取出 token 資訊 (5:20)
- 透過 postman、swagger 去戳 get todo api (4:54)
- 透過 axios 夾帶 token 觸發 get todo api (16:00)
- client 瀏覽器端關掉，token 保持效用的方式 (6:04)
- 透過 postman、swagger 新增待辦作法 (6:14)
- 透過 axios 新增待辦作法 (4:47)
- 編輯 todo API 設計 (8:25)
- 刪除 todo API 設計 (5:31)
- 更新 todo 待辦狀態 API 設計 (33:16)
- 優化 axios headers 設計 (15:21)
2022 JS 全修練新增課鋼 - todolist API 開發方向
Available in
days
days
after you enroll
環境建置
Available in
days
days
after you enroll
Hi, I’m [Your Name Here]
Use this block for your bio. Explain to your audience who you are, and why you’re teaching this course.
Use this for a heading.
Use this area for description text.
Use this for a heading.
Use this area for description text.
Use this for a heading.
Use this area for description text.