Use this block to describe what the course is about, what your students will learn and why someone should buy your course.
Course Curriculum
新手任務
Available in
days
days
after you enroll
第零關 - 報到任務
Available in
days
days
after you enroll
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 POST API 講解
Available in
days
days
after you enroll
todolist 待辦事項
Available in
days
days
after you enroll
第五關 - JS todolist 任務
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.