所有課程

💡 為什麼在 AI 時代，我們仍然需要學習解題？

「既然 AI 已經能快速寫出程式碼，為什麼我們還需要花時間學習演算法與解題技巧？」

答案是：AI 改變了程式碼的生產方式，但理解問題、設計解法與判斷結果的能力，依然不可或缺。

寫出能夠執行的程式，不代表真正解決了問題。面對不同的限制條件、資料規模與使用情境，我們仍需要思考：解法是否正確？有沒有忽略邊界條件（Edge Cases）？是否存在更有效率的做法？

這門課不打算教你死記硬背的解題模板，也不認為每道題目都只有一種標準的思考方式。

我們將透過大量的實際解題案例，分享從理解問題、嘗試不同思路，到設計與優化解法的過程。希望你能在觀察與思考中，逐漸發現不同題目之間的關聯，從中萃取值得學習的觀念與技巧，最終建立屬於自己的解題思維。

🚀 這門課你將學到什麼？

• 問題拆解與解題思維： 從實際案例中觀察如何分析需求、理解限制條件，並尋找可能的解題方向。
• 演算法設計與效能優化： 探索不同解法背後的原理，理解時間與空間複雜度（Time/Space Complexity），例如 $O(N^2)$ vs $O(N \log N)$ 的差異，以及不同選擇之間的取捨（Trade-offs）。
• AI 協作與 Code Review： 透過 AI 生成的解法，練習檢查正確性、發現潛在問題，並思考如何進一步改善。
• 從題目到實際應用： 將演算法與資料結構的觀念延伸至實際軟體元件，理解這些知識如何應用於真實工程問題。

👥 適合對象

• 程式設計學習者： 已具備基本程式能力，希望透過實際案例累積經驗，培養更扎實的解題思維。
• 程式設計競賽選手： 正在準備或參與程式設計相關競賽，希望接觸不同的解題策略，拓展思考角度與實戰經驗。
• 軟體開發者： 希望提升問題分析、效能優化與程式碼審查能力，讓技術判斷更有依據。
• AI 輔助開發使用者： 經常透過 AI 產生程式碼，希望不只取得答案，更能理解、驗證與改善 AI 提供的解法。

解題能力不只來自知道多少種演算法，更來自看過多少問題、思考過多少可能，以及能否將過去的經驗運用在新的挑戰中。

在 AI 能夠快速將想法轉換為程式碼的時代，我們有更多機會嘗試不同的解法，並透過實作與驗證持續改善。當實現想法的門檻逐漸降低，如何提出好的想法、判斷其可行性，反而成為更值得培養的能力。

💡 技能競賽的網頁技術，該怎麼準備？

全國技能競賽青年組的網頁技術職類，不只是考驗選手的程式開發能力，更需要在有限的時間內理解題目需求、整合不同技術，並根據競賽規格完成指定任務。

而競賽的準備，也不只是提前研究賽前公告試題。正式競賽可能出現需求調整，如何辨識題目變更、調整既有解法，以及在時間限制下做出合理的技術選擇，同樣是備賽過程中值得練習的能力。

熟悉題目，不代表能夠應對題目的變化；完成程式，也不代表所有需求都已經正確實現。

這門課將聚焦於青年組網頁技術職類中的程式開發相關題目，從前端、後端與資料庫等技術準備出發，整理競賽中值得掌握的觀念、實作技巧與常見問題。

除了技術基礎，我們也會透過歷屆公開試題進行解題實戰，從需求分析、技術選擇到實際開發，探索不同題型的解決方式。

我們不追求記住最多的程式碼範本，也不認為每一道題目都只有一種標準解法。更希望透過實際解題與反覆檢討，累積面對不同題型、技術環境與競賽變化的能力。

🎯 這門課你將學到什麼？

• 競賽觀念與備賽方法： 認識青年組網頁技術職類的競賽形式、評分觀念與備賽方向。
• 前端開發技術與實作： 從 HTML、CSS、JavaScript 到不同的前端開發工具，探索版面實作、互動功能、響應式設計與常見的前端開發問題。
• 後端開發技術與實作： 探索伺服器端程式設計、HTTP、API、資料處理與應用整合，理解如何根據不同題目的要求實作後端功能。
• 資料庫設計與實作： 從資料表設計、資料關聯到 SQL 查詢與資料操作，探索如何將資料庫整合進完整的網頁應用。
• 歷屆試題開發實戰： 透過不同年度的公開試題，解析程式開發相關任務，探索各模組的實作方式、技術選擇與解題思路，並在資料允許時比較公告題與正式題的差異。

👥 適合對象

• 技能競賽青年組選手： 正在準備網頁技術職類，希望透過技術整理與歷屆試題實戰，建立更有系統的備賽方法。
• 網頁技術競賽指導老師： 希望參考不同題型的解題思路、技術實作與備賽方式，作為學生訓練與教學的補充資源。
• 對競賽解題有興趣的開發者： 希望透過實際競賽題目，練習需求分析、前後端整合與限時開發。

📌 開始之前

建議已具備 HTML、CSS、JavaScript 的基本知識，並對網頁開發流程有初步認識。

課程將依照技術主題與歷屆試題的實際需求，使用不同的程式語言、框架與開發工具，不限定單一技術組合。

本課程以青年組網頁技術職類中的程式開發相關內容為主要教學範圍，不涵蓋 Logo 繪製、圖像創作等視覺素材設計題目。

歷屆試題解析將以正式公開且可合法使用的資料為基礎，依實際製作進度逐步增加。課程不代表官方競賽單位的立場，也不包含未公開或具有保密義務的競賽資料。

希望學員能夠不只是熟悉某一年的題目，而是透過每一次實作、驗證與檢討，逐步建立面對下一道未知試題的能力。

💡 AI 工具每隔幾個月就換一輪，我們該學的是什麼？

隨著 AI Coding Agent 越來越成熟，即使不熟悉所有程式語言與框架，我們也能透過自然語言描述需求，讓 AI 協助產生程式碼、修改功能，甚至完成一個簡單的應用程式。

但 AI 工具的更新速度也非常快。今天熟悉的指令、介面與設定方式，可能在幾個月後就有所改變；新的工具與功能也不斷出現。如果學習只停留在「某個工具怎麼操作」，每一次更新，都可能需要重新學習一次。

工具的操作方式會不斷改變，但 Agent 如何運作、為什麼會誤解需求、為什麼可能做出危險的操作，背後的原理卻相對穩定。

Agent 每一次回應時，實際「看得到」哪些資訊？Prompt、Context 與 Memory 分別是什麼？Skills、MCP 與 Tool Calling 又是透過什麼方式擴充 Agent 的能力？當 Agent 能夠讀取檔案、執行指令，甚至連接外部服務時，權限究竟由誰決定，又該由誰把關？

這門課不以單一工具的操作教學為主，而是從 AI Coding Agent 的基本運作方式出發，理解這些常見概念背後的機制。課程中雖然會使用不同的 Coding Agent 進行示範，但重點不在於記住特定工具的操作步驟，而是透過比較不同工具，觀察它們共同遵循的原理，以及更換工具之後依然適用的判斷方法。

我們也會透過模擬惡意 Skill、Prompt Injection 等安全實驗，觀察不可信的內容如何影響 Agent 的行為。

除了基本觀念，課程也會透過小型開發案例，練習將需求整理成明確的規格與驗收條件，透過 Git 保留每一次修改的紀錄，並使用測試與差異比對檢查 Agent 的成果。最後，我們會將需求與開發脈絡整理成不依賴特定工具的交接文件（Prompt Pack），交由不同的 Coding Agent 接續實作。

我們不追求建立最複雜的 AI 開發工作流，也不認為使用越多 Agent 就一定越有效率。 相反地，我們希望從實際問題出發，理解 Agent 能做到什麼、有哪些限制，並建立一套即使更換工具也能延續的協作習慣。

當然，AI 可以幫助我們快速完成簡單的作品，但如果希望將它發展成長期運作、持續維護的應用，程式設計、軟體架構、測試、安全性與部署等基本功仍然相當重要。這些能力不會因為 AI 的出現而失去價值，反而能幫助我們更有效地理解、驗證與改善 AI 產生的成果。

這門課希望成為你與 AI 一起開發的起點，而不是軟體工程學習的終點。

🎯 這門課你將學到什麼？

• Agent 的運作方式： 理解語言模型、工具與執行迴圈如何組成一個 Coding Agent，以及它與一般 AI 對話工具的差異。
• Context 與資訊管理： 理解 Agent 每一次回應時實際取得哪些資訊，認識 Prompt、Context、Memory、專案指引文件等常見名詞的本質，以及 Context 長度限制所帶來的影響。
• 擴充能力的共同機制： 從 Tool Calling 出發，理解 Skills、MCP 等擴充方式如何將指令與工具提供給 Agent，以及不同擴充方式的適用情境。
• 權限、信任邊界與隔離： 理解工具權限由誰決定與執行，透過模擬惡意 Skill、Prompt Injection 等可重複觀察的安全實驗，認識為什麼不能只依賴 Prompt 保護開發環境，以及最小權限與環境隔離的基本觀念。
• 需求規格與任務拆解： 練習將模糊的想法整理成明確的需求、限制與驗收條件，並拆解成適合交給 Agent 執行的任務。
• 驗證與版本控制： 透過 Git、差異比對與自動化測試，檢查 Agent 修改了什麼、結果是否正確，並在出錯時安全地回復。
• 跨工具交接： 將需求、決策與開發進度整理成不依賴特定工具的交接文件，讓不同的 Coding Agent 能夠接續開發。

👥 適合對象

• Vibe Coding 初學者： 希望透過 AI 快速實現自己的想法，同時建立結果驗證與安全使用的基本觀念。
• 資訊相關科系學生： 希望理解 AI Coding Agent 的運作原理，而不只是學會某一個工具的操作方式。
• 剛開始使用 Coding Agent 的開發者： 希望釐清 Prompt、Context、Skills、MCP 等常見概念背後的機制，建立更有效的 AI 協作習慣。
• 已經使用 AI 輔助開發的工程師： 經常面對工具的快速更新，希望建立一套更換工具後依然適用的判斷方法與協作流程。
• 對 AI 開發工具有興趣的學習者： 希望透過實際操作與可重複觀察的實驗，理解 Coding Agent 能做到什麼、有哪些限制，以及如何判斷成果是否可信。

📌 開始之前

本課程偏向 AI Coding Agent 的基礎觀念與實作，不需要深入的軟體架構背景，但建議具備基本的程式設計與電腦操作能力。若已接觸過 Git、終端機與軟體專案開發，將更容易理解部分實作內容。

課程會使用不同的 AI 對話工具與 Coding Agent 進行示範，但示範工具只是說明觀念的載體，不限定單一程式語言、框架或 AI 工具。部分操作可能需要相關服務的帳號、訂閱方案或 API 額度。

安全相關實驗將以隔離環境與模擬資料進行，不涉及真實憑證或未經授權的系統操作。

AI 工具的介面、功能與價格會持續改變，課程中的操作畫面可能與你實際使用的版本有所不同。課程將聚焦於不受特定版本影響的觀念與方法，也不保證特定工作流程一定能節省 Token、降低成本或提升開發效率。

本課程也不以完整教授程式設計、測試、軟體架構或正式環境部署為目標。如果希望進一步開發能夠長期運作與維護的應用，建議持續補充相關的軟體工程基礎知識。

工具會不斷更新，但理解 Agent 看到了什麼、能做什麼、又該如何驗證它的成果，才是能夠一直帶著走的能力。

💡 專案完成了，然後呢？

隨著 AI Coding 工具越來越成熟，我們已經能夠更快速地將想法實作成真正的應用程式。但當專案完成後，下一個問題往往是：要把它部署在哪裡，才能讓其他人真正使用？

對於個人開發者、學生或 Side Project 創作者而言，雲端服務的費用可能是一項負擔。即使只是想讓自己的作品公開上線，也需要面對主機、網路、網域與部署流程等問題。

Oracle Cloud Infrastructure（OCI）提供了具有一定免費額度的 Always Free 服務，讓我們有機會利用有限的雲端資源，建立自己的應用部署環境。

這門課將從 OCI 免費層出發，逐步建立雲端主機、部署 Docker 容器化應用，並透過 Cloudflare DNS 與 Tunnel，讓服務能夠從網際網路存取。

除了手動建立雲端資源，我們也會初步接觸 Terraform 與 Infrastructure as Code（IaC），探索如何透過程式碼描述與管理基礎設施。

而當應用需要持續更新時，我們將進一步使用 GitHub Actions，認識 Self-hosted Runner，並建立基本的自動化部署流程，減少每次更新服務時重複操作的步驟。

過程中也會接觸 OCI Object Storage、資料庫服務與相關設定，認識應用在雲端環境中可能需要使用的資源。

我們不追求一次學會所有雲端架構與維運技術，而是希望透過實際操作，理解一個應用從本機開發到雲端上線，需要經過哪些步驟，以及各項服務如何彼此協作。

🎯 這門課你將學到什麼？

• OCI 免費層與雲端資源： 認識 OCI Always Free 的基本服務、免費額度與使用限制，以及 ARM64 環境需要注意的相容性問題。
• 雲端主機與網路設定： 從 Compute Instance、Linux、SSH 到基本網路與防火牆設定，建立能夠執行應用程式的雲端環境。
• Terraform 與基礎設施即程式碼： 初步認識 Infrastructure as Code（IaC），透過 Terraform 了解如何以程式碼描述與建立 OCI 雲端資源，以及相關的基本操作。
• Docker 容器化部署： 使用 Docker 與 Docker Compose 在雲端主機上執行應用，認識容器網路、資料儲存與基本設定方式。
• Cloudflare 與服務公開： 透過 Cloudflare DNS、Tunnel 與相關設定，讓部署在 OCI 上的服務能夠透過網域對外提供存取。
• GitHub Actions 自動化部署： 認識 GitHub-hosted 與 Self-hosted Runner 的差異，實作基本的 CI/CD 工作流程，並了解 Runner 執行環境與部署權限的安全注意事項。
• 雲端資料服務： 認識 OCI Object Storage 與資料庫服務，了解如何將這些雲端資源整合到自己的應用中。

👥 適合對象

• 資訊相關科系學生： 已經完成自己的程式專案，希望嘗試將作品部署到雲端，讓其他人可以實際使用。
• 個人開發者與 Side Project 創作者： 希望以有限預算，建立自己的應用部署環境。
• 後端與全端開發者： 已具備應用程式開發經驗，希望進一步接觸雲端主機、Docker、Terraform 與自動化部署。
• AI 輔助開發使用者： 已經能透過 AI 快速完成應用，希望學習如何將成果從本機部署到公開的雲端環境。

📌 開始之前

建議具備基本的 Linux 指令操作與 Docker 概念，並準備一個可以用來練習部署的應用程式。

課程將以 OCI Always Free 資源為主要實作環境，但免費額度、服務可用性與資源配置可能隨官方政策及區域供應情況改變。部分操作也可能涉及額外費用，因此仍需要留意實際使用的服務與計費設定。

從本機到雲端，讓自己的作品不再只停留在開發環境，而是能真正部署上線，成為可以分享與使用的服務。

💡 Clean Architecture，真的只是把程式碼分成幾層嗎？

網路上有許多 Clean Architecture 的教學，從架構圖到專案目錄結構，各有不同的實作方式。但當真正開始開發一套系統時，我們仍然可能遇到相同的疑問：為什麼需要這些分層？職責與依賴應該如何劃分？又該如何知道自己的設計是否合理？

Clean Architecture 的價值，不在於建立多少層資料夾，而在於透過清晰的職責邊界與依賴規則，管理系統的複雜度。

這門課將以 Go 為主要後端實作語言，從 Entities、Use Cases 到 Interface Adapters 與 Frameworks & Drivers，逐步探索各層的責任、依賴關係與實作方式，並結合規格先行（Spec-first）、依賴注入與自動化測試，建立能夠實際運作的系統。

但 Clean Architecture 並不只適用於後端。我們也將在前端建立獨立的四層架構，探索相同的設計原則如何因應不同的技術環境與需求。

此外，課程也會適度結合基本的領域建模觀念，理解如何表達業務規則，以及 Clean Architecture 與領域驅動設計（DDD）之間的關聯與差異。

在 AI 能夠快速生成大量程式碼的今天，清晰的架構邊界也能為持續開發提供更明確的方向，讓我們更容易理解、驗證與調整系統的演進。

我們不追求套用最多的抽象或建立最複雜的架構，而是希望透過完整的實作過程，理解每個設計決策背後的原因，以及它所帶來的價值與取捨。

🎯 這門課你將學到什麼？

• Clean Architecture 核心原則： 理解依賴規則（Dependency Rule）、職責邊界與分層設計，探索如何讓核心業務邏輯與框架及基礎設施解耦。
• 後端架構與實作： 透過 Go 實作 Entities、Use Cases、Interface Adapters 與 Frameworks & Drivers，理解各層如何協作，以及如何組裝依賴。
• 基本領域建模觀念： 探索業務規則、不變條件（Invariants）與物件職責，適度認識 DDD 的基本概念，理解如何建立符合需求的業務模型。
• 規格與自動化驗證： 結合 OpenAPI、單元測試、整合測試與行為驅動開發（BDD）等實踐方式，探索如何讓需求、實作與測試相互對應。
• 前端 Clean Architecture： 使用 TypeScript 建立獨立的四層架構，理解如何分離業務規則、應用流程、Presenter 與框架相關實作。
• 系統整合與持續演進： 從資料持久化、依賴注入到前後端整合，探索如何在功能持續增加時，維持清晰且容易測試的系統結構。

👥 適合對象

• 資訊相關科系學生： 已具備基本程式設計與專案開發經驗，希望進一步理解軟體架構的設計與實際應用。
• 後端與全端開發者： 曾經開發 API 或完整專案，希望改善職責劃分、依賴管理與系統可維護性。
• 對軟體架構有興趣的工程師： 接觸過 Clean Architecture、DDD 或 SOLID 等觀念，希望透過實際案例理解如何將設計原則落地。
• AI 輔助開發使用者： 希望建立更清晰的架構邊界，讓 AI 加速開發的同時，仍能有效理解、驗證與維護持續演進的系統。

📌 開始之前

建議具備基本的 Go 與 TypeScript 語法能力，並曾經開發過 API 或完整的 Web 專案。若主要使用其他語言，只要熟悉介面（Interface）與模組化的基本觀念，也能理解課程中的設計原則，但實作部分可能需要額外熟悉 Go 的語法。

建議具備基本的 HTTP、SQL 與 Git 操作經驗，並能在本機使用 Docker 執行開發環境。

前端部分將以 TypeScript 實作核心的四層架構，並以 SvelteKit 作為框架層進行示範；相同的設計原則也同樣適用於 React、Vue 等其他前端框架。

課程會介紹與 Clean Architecture 相關的基本領域建模觀念，但不以完整介紹領域驅動設計（DDD）為目標，也不涵蓋正式環境的部署與維運。

好的架構不在於遵循固定的目錄結構，而在於理解每一道邊界存在的理由，並根據實際需求做出合理的設計選擇。

💡 為什麼要重新認識物件導向？

「封裝、繼承、多型、抽象」—— 這些名詞你可能早已耳熟能詳，但當真正面對複雜的業務邏輯、持續變動的需求，以及牽一髮而動全身的程式碼時，光是記住定義，真的足夠嗎？

物件導向（Object-Oriented Programming, OOP）的價值，不只在於語法與特性，更在於如何透過合理的職責劃分、封裝與抽象，管理程式碼的複雜度。

尤其在 AI 能夠快速生成大量程式碼的今天，我們或許可以更輕鬆地建立一套系統，但隨著需求不斷增加，如果缺乏良好的設計基礎，程式碼也可能逐漸變得難以理解、修改與維護。AI 能夠加速開發，但如何讓系統在持續擴充的過程中不失去控制，仍然值得我們深入思考。

這門課將從 OOP 的基本觀念出發，逐步探索 SOLID 設計原則、控制反轉（IoC）、依賴注入（DI）等常見設計方式，理解它們背後的目的，以及如何運用在實際開發中。

除了觀念講解，我們也會透過實際案例，觀察不同設計選擇帶來的影響，並嘗試將混亂的程式碼逐步重構成更清晰、容易維護與擴充的結構。

我們不追求套用最多的設計模式，也不認為每個問題都有唯一完美的架構。比起記住什麼是「好的設計」，更希望你能理解為什麼這樣設計，以及什麼情況下值得這麼做。

🎯 這門課你將學到什麼？

• OOP 核心觀念與實作： 從封裝、繼承、多型與抽象出發，透過實際案例理解不同特性的用途與適用情境。
• 設計原則與職責劃分： 探索 SOLID 原則、物件之間的依賴關係，以及如何透過 IoC、DI 等方式改善耦合與擴充彈性。
• 程式碼重構實戰： 從常見的 Code Smell 與混亂的程式碼出發，練習分析設計問題、調整職責，並逐步改善可讀性與維護性。
• AI 時代的設計思維： 理解如何建立清晰的程式架構與設計邊界，讓 AI 輔助開發有更明確的依循方向，並學習評估設計是否適合後續演進。

👥 適合對象

• 資訊相關科系學生： 正在學習物件導向程式設計，希望不只理解課本中的定義，也能透過實際案例掌握觀念與應用方式。
• 程式設計學習者： 已具備基本程式能力，希望進一步建立物件導向與軟體設計的基礎。
• 軟體開發者： 經常面對複雜業務邏輯，希望改善程式碼結構，提升可讀性、維護性與擴充彈性。
• AI 輔助開發使用者： 希望建立更扎實的軟體設計觀念，讓 AI 不只協助快速實作，也能在明確的架構與設計原則下持續開發。

📌 開始之前

建議具備至少一種程式語言的基本能力，例如變數、條件判斷、迴圈與函式等基礎語法，並能夠獨立撰寫簡單的程式。若曾經接觸過類別（Class）與物件，將更容易理解課程內容。

課程中的觀念不限定特定語言，你也可以使用自己熟悉的物件導向語言跟著實作，也會適度地說明相同的設計觀念在不同語言中的表現方式。

與 AI 協作的相關單元，可以使用任何熟悉的 AI 對話工具或 Coding Agent，部分服務可能需要帳號或訂閱方案。

本課程不以完整介紹所有設計模式（Design Patterns）為目標，而是依照實際案例的需要，介紹相關的設計模式與其適用情境。

好的設計不一定需要更多抽象，而是能夠根據實際需求，做出有理由、容易理解且適合當下的設計選擇。

💡 AI 都能幫我們寫前端了，還需要學什麼？

隨著 AI Coding 工具越來越成熟，從頁面排版、互動元件到完整的 Web Application，我們已經能透過自然語言快速產生大量程式碼。

但能夠生成一個看起來正常的網站，不代表真正理解它如何運作。

當 AI 能協助我們完成越來越多實作工作，我們或許不再需要花費大量時間記憶每個框架的 API，卻仍然需要理解：前端如何與後端交換資料？狀態應該放在哪裡？資料如何保持同步？不同的渲染策略會帶來什麼影響？如何兼顧效能、安全性與使用者體驗？

而隨著現代 Web 開發逐漸整合更多伺服器端能力，前端與後端的協作也變得更加緊密。從資料載入、身分驗證到背景推播，許多看似簡單的功能，背後其實涉及瀏覽器、伺服器與 Web Platform 之間的協作。

不僅如此，把功能開發出來，也不代表工程工作就此結束。

從自動化測試、CI/CD、雲端部署，到正式上線後的使用者行為分析、錯誤追蹤與效能監測，我們還需要知道如何驗證、交付並持續改善一個真正運作中的 Web Application。

這門課將透過不同的實際案例，探索現代前端工程中值得理解的核心觀念與實踐方式。我們不侷限於特定框架，也不追求記住最多工具的操作方式，而是希望透過問題與實作，理解各種技術背後的原理、限制與設計取捨。

AI 可以幫助我們更快完成實作，而我們要學習的，是如何理解問題、判斷方案，並確保最終成果真正符合需求。

🎯 這門課你將學到什麼？

• API 串接與即時通訊： 從 HTTP 基礎、REST API 的設計慣例到 GraphQL 的查詢方式，理解不同 API 風格的特性與適用情境；並透過 WebSocket 與 Server-Sent Events（SSE）探索即時資料更新。
• 狀態管理與資料流： 理解不同狀態的責任與生命週期，探索資料載入、快取、同步、非同步操作與錯誤處理背後的設計考量。
• 路由、渲染與前後端協作： 從 URL State、CSR、SSR 到預渲染，理解不同渲染策略的適用情境，以及 Browser 與 Server 之間的執行邊界。
• 國際化與內容可發現性： 探索多語系設計、SEO、Metadata、Structured Data 與 Sitemap，理解如何讓內容更容易被不同使用者及搜尋系統發現與理解。
• 瀏覽器 API 與 PWA 實戰： 透過 Service Workers、Web Notifications、Push API、離線快取與 Web Components 等實例，探索瀏覽器提供的各種能力，以及如何將它們應用於實際的 Web 開發。
• 前端安全基礎： 理解瀏覽器安全模型，以及 XSS、CSRF、CORS、CSP、Cookies 與敏感資訊管理等常見的安全議題。
• 測試與使用者體驗： 結合元件測試、端對端測試（E2E Testing）、Accessibility、Core Web Vitals 與 Lighthouse，探索如何驗證應用行為、評估網站效能與使用體驗。
• CI/CD 與雲端部署： 透過 GitHub Actions 建立自動化驗證與部署流程，整合 Lighthouse CI 等品質檢查，並結合 Cloudflare 探索 DNS、CDN、環境設定、快取策略與網站安全等實務議題。
• Analytics 與前端可觀測性： 透過 Umami、Google Analytics 與 Sentry 等工具，探索網站分析、事件追蹤與錯誤監測，理解如何觀察正式環境中的應用行為與問題。

👥 適合對象

• 資訊相關科系學生： 已具備基本 Web 開發能力，希望進一步理解框架之外的核心觀念，以及完整 Web Application 的工程實踐。
• 前端開發者： 熟悉基本框架操作，希望拓展狀態管理、Web Platform、安全性、測試、部署與可觀測性等工程知識。
• 全端與軟體開發者： 希望更深入理解瀏覽器與伺服器的協作方式，以及現代 Web Application 從開發到上線的完整流程。
• AI 輔助開發使用者： 已經開始利用 AI 產生網頁或應用，希望不只快速完成功能，也能理解、驗證與改善程式碼及系統的實際行為。

📌 開始之前

建議具備 HTML、CSS、JavaScript 的基礎能力，並至少使用過一種前端框架（例如 React、Vue 或 Svelte）開發簡單的應用。若熟悉 TypeScript、Git 與終端機操作，將更容易跟上實作內容。

課程中的實作範例將以 SvelteKit 為主要示範框架，但重點在於框架之外的觀念與實踐方式，你也可以使用自己熟悉的框架對照練習。

部分實作需要使用 GitHub、Cloudflare、Sentry 等第三方服務的帳號。課程將以各服務的免費方案為主，但方案內容與用量限制可能隨服務政策改變，仍需留意實際的使用情況。

部分瀏覽器 API 的支援程度，會因瀏覽器、作業系統與裝置而有所不同，課程中也會說明相關的相容性考量。

本課程不從零教授 HTML、CSS 或特定框架的基礎語法。

框架與工具會持續演進，AI 也會越來越擅長生成程式碼。但理解 Web 的運作原理、掌握工程問題的本質，以及做出合理技術選擇的能力，仍然值得持續累積。