網頁程式設計課程

第 1 課 • 使用 Git 進行版本控制基礎

教導 init、add、commit 與 push 等追蹤程式碼變更的工作流程。確保學員從一開始就能儲存並復原工作進度。

第 2 課 • 設定你的程式碼編輯器

安裝並設定現代化程式碼編輯器與必要的擴充功能。直接為整個課程的順暢編碼做好準備。

第 3 課 • 檔案系統與專案結構

說明資料夾階層、檔案命名慣例以及相對路徑與絕對路徑。防止連結中斷與專案結構混亂的問題。

第 4 課 • 使用瀏覽器開發者工具

介紹用於檢視即時頁面的「元素」、「主控台」與「網路」面板。培養後續每個章節都會用到的除錯習慣。

第 1 課 • HTML 表單與輸入類型

使用標籤、輸入欄位、選取清單、文字區域與提交按鈕建構表單。為後續章節介紹的用戶資料收集奠定基礎。

第 2 課 • 連結、圖片與多媒體

說明錨點標籤、圖片屬性與嵌入多媒體元素。將頁面與資源連結成一份完整的可瀏覽文件。

第 3 課 • 清單、表格與資料結構

教導有序清單、無序清單、定義清單以及無障礙表格標記。讓學員準備好正確呈現結構化資料。

第 4 課 • HTML 文件解剖

剖析 DOCTYPE、head 與 body 區段及其必要的中繼資料。建立本課程中每個 HTML 檔案將遵循的基本骨架。

第 5 課 • 語意化 HTML5 元素

介紹 header、nav、main、article、section、aside 與 footer 元素。提升頁面內容的無障礙性與搜尋引擎解讀能力。

第 1 課 • CSS 盒模型

說明內容、內距、邊框與外邊距層級，以及 box-sizing 的行為。解決初學者最常遇到的版面配置混淆問題。

第 2 課 • CSS 語法與選擇器

涵蓋規則集、宣告、類別、ID 與元素選擇器。建立後續所有樣式工作的定位機制。

第 3 課 • 背景、邊框與陰影

套用背景圖片、漸層、邊框樣式與區塊陰影。為頁面元件增加視覺深度與質感。

第 4 課 • 色彩、字體排版與單位

教導十六進位、RGB 與 HSL 色彩值，以及字體屬性與 CSS 單位。讓學員能在專案中做出一致的視覺設計決策。

第 1 課 • 定位與 Z-Index

涵蓋絕對定位、固定定位與 sticky 定位，以及堆疊上下文。實現重疊元件、固定標頭與模態對話框等功能。

第 2 課 • 響應式設計與媒體查詢

套用中斷點與流體單位，讓版面配置能適應各種螢幕尺寸。產出行動裝置優先的設計，使其能在任何裝置上運作。

第 3 課 • CSS Grid 基礎

定義用於二維版面配置的網格模板、行、列與間距屬性。實現 Flexbox 無法獨立完成的複雜頁面結構。

第 4 課 • 顯示模式與正常流向

複習區塊、行內與行內區塊顯示值以及文件流向。提供判斷何時需要使用 Flexbox 或 Grid 的基準。

第 1 課 • 迴圈與迭代

教導使用 for、while 與 for...of 迴圈對資料進行重複操作。讓學員準備好有效率地處理陣列與集合。

第 2 課 • 變數、資料型別與運算子

介紹 let、const、原始型別以及算術與比較運算子。為所有 JavaScript 程式碼建立資料處理的基礎。

第 3 課 • 陣列與物件

涵蓋用於儲存與操作結構化資料的陣列方法與物件字面值。直接支援後續章節的 DOM 操作與 API 資料處理。

第 4 課 • 函式與作用域

定義函式宣告、函式運算式、箭頭函式與變數作用域。能在整個專案中實現可重複使用、模組化的程式碼區塊。

第 1 課 • 事件委派與傳播

說明氣泡、捕捉與委派模式，以實現有效率的事件處理。防止記憶體洩漏，並簡化動態清單的互動邏輯。

第 2 課 • 選取與遍歷 DOM

使用 querySelector、getElementById 以及父節點/子節點遍歷方法。能精準定位即時頁面上的任何元素。

第 3 課 • 建立與移除 DOM 節點

使用 createElement 建立新元素，並動態插入或移除它們。實現清單渲染、模態視窗建立與動態 UI 模式。

第 4 課 • 修改元素與內容

在選取的元素上變更文字、HTML、屬性與 CSS 類別。無需重新載入瀏覽器即可產生可見的頁面更新。

第 1 課 • Promise 與鏈式調用

使用 .then() 與 .catch() 建立並串聯 Promise，來處理序列性的非同步任務。以可讀性高、線性的程式碼取代巢狀回呼。

第 2 課 • 將 API 資料渲染至 DOM

將取得的 JSON 陣列對應至動態生成的 HTML 元素。在實際專案中完成完整的資料取得到顯示的流程。

第 3 課 • 使用 Fetch API 取得資料

傳送 GET 與 POST 請求至 REST API，並解析 JSON 回應。能從外部服務顯示即時資料。

第 4 課 • Async/Await 語法

使用 async 函式與 await 表達式改寫 Promise 鏈。為複雜的非同步工作流程產出更簡潔、看起來像同步執行的程式碼。

第 1 課 • 實作 JavaScript 功能

為專案新增 DOM 操作、事件處理與 API 整合。將靜態殼層轉變為功能完整的互動式應用程式。

第 2 課 • 部署至線上主機

使用基於 Git 的部署方式，將完成的專案發布至靜態託管平台。產出一個可分享的網址，可用於作品集與求職申請。

第 3 課 • 測試與除錯應用程式

使用 DevTools、主控台日誌記錄與手動測試案例來尋找並修正錯誤。確保應用程式在部署前能正常運作。

第 4 課 • 建立 HTML 與 CSS 基礎

為應用程式殼層建構語意化標記與響應式版面配置。將先前所有 HTML 與 CSS 技能應用於統一的程式碼庫中。