Web 開發初學者教程

透過 Microsoft Cloud Advocates 開發嘅 12 星期全方位課程，學習網頁開發基礎知識。24 堂課涵蓋 JavaScript、CSS 同 HTML，並透過實作項目如生態瓶、瀏覽器擴充功能同太空遊戲深入了解。參與測驗、討論同實踐作業。運用具成效嘅項目導向教學，提高技能同優化知識記憶。今日就開始你嘅編碼旅程！

加入 Azure AI Foundry Discord 社群

跟從以下步驟開始使用呢啲資源：

派生此儲存庫：點擊
克隆儲存庫： git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
加入 Azure AI Foundry Discord 遇見專家同其他開發者

🌐 多語言支援

透過 GitHub Action 支援（自動化及保持更新）

想本地克隆？

呢個儲存庫包括 50 多種語言翻譯，會大大增加下載大小。如想不包括翻譯而克隆，請使用稀疏檢出：

Bash / macOS / Linux:
git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners
git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'
CMD (Windows):
git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners
git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
呢啲方法會更快下載，亦包含你完成課程所需全部資源。

如果你希望新增其他翻譯語言，支援語言列表在這裡

🧑‍🎓 你係學生嗎？

請訪問 學生中心頁面，度有初學者資源、學生工具包，同埋免費證書券嘅方法。呢頁建議你加書籤，並不時返回查看，因為我哋每月都更新內容。

📣 公告 - 新嘅 GitHub Copilot Agent 模式挑戰登場！

新增挑戰，請於大部分章節中尋找「GitHub Copilot Agent Challenge 🚀」。呢個係你用 GitHub Copilot 同 Agent 模式完成嘅新挑戰。若你未用過 Agent 模式，佢唔止生成文字，仲可以創建同編輯文件、執行指令等等。

📣 公告 - 用生成式 AI 建造新項目

新 AI 助手項目剛新增，查看項目

📣 公告 - 新課程：面向 JavaScript 嘅生成式 AI

唔好錯過我哋嘅新生成式 AI 課程！

請訪問 https://aka.ms/genai-js-course 開始學習！

課程涵蓋由基礎到 RAG 等所有內容。
利用生成式 AI 同我哋嘅伴侶應用同歷史人物互動。
好玩同投入嘅故事，會令你穿越時空！

每堂課包括作業、知識檢測同挑戰，引導你學習：

提示與提示工程
文字同圖片應用開發
搜尋應用

請訪問 https://aka.ms/genai-js-course 開始學習！

🌱 開始使用

教師們，我哋有包括建議教你點用呢套課程。好歡迎喺我哋嘅討論區提供反饋！

學生們，每堂課開始前先做預習測驗，再閱讀課程內容、完成各種活動，並用課後測驗檢查理解。

為促進學習，鼓勵你與同儕一齊完成項目！歡迎你喺我哋嘅討論區互動，管理員團隊會隨時答你問題。

若要進一步學習，我哋強烈建議瀏覽 Microsoft Learn 獲取更多資料。

📋 建立你的開發環境

呢套課程早已有開發環境裝備。当你開始學習時，可選擇喺 Codespace（瀏覽器運行、無需安裝環境）或喺本地電腦使用文字編輯器如 Visual Studio Code 運行。

建立你自己的儲存庫

為方便儲存工作，建議你建立自己嘅儲存庫複本。點擊頁面頂部嘅 使用此範本（Use this template） 按鈕，即可在你的 GitHub 帳戶中創建套用課程嘅新儲存庫。

跟從以下步驟：

派生儲存庫：點擊右上方嘅「Fork」按鈕。
克隆儲存庫： git clone https://github.com/microsoft/Web-Dev-For-Beginners.git

喺 Codespace 執行課程

喺你創建嘅儲存庫複本中，點選 Code 按鈕，揀選 Open with Codespaces。會建立一個新嘅 Codespace 俾你使用。

喺本地電腦運行課程

想喺本地電腦運行，需有文字編輯器、一個瀏覽器及命令行工具。第一堂課編程語言入門與工具介紹會介紹你啲可選工具，讓你揀選最適合嘅。

我哋推薦用 Visual Studio Code 作為編輯器，佢仲自帶終端機。你可以喺呢度下載 Visual Studio Code。

把你的倉庫克隆到你的電腦。你可以點擊 Code 按鈕並複製 URL：

CodeSpace

然後，在 Visual Studio Code 內開啟 Terminal，並執行以下指令，將 <your-repository-url> 換成你剛才複製的 URL：
```
git clone <your-repository-url>
```
在 Visual Studio Code 開啟資料夾。你可以點擊 File > Open Folder，然後選擇你剛剛克隆的資料夾。

推薦的 Visual Studio Code 擴充套件：

Live Server - 於 Visual Studio Code 預覽 HTML 頁面

Copilot - 幫助你更快寫程式碼

📂 每課包含：

可選的草圖筆記
可選的補充影片
課前暖身小測驗
書面課程內容
對專案導向課程，包含分步驟專案建置指南
知識檢測
挑戰
補充閱讀
作業
課後小測驗

關於小測驗的說明：所有小測驗都包含在 Quiz-app 資料夾中，共 48 個小測驗，每個包含三個問題。它們可於此處取得，Quiz 應用程式可本地執行或部署到 Azure；請依照 quiz-app 資料夾中的指示操作。

🗃️ 課程清單

	專案名稱	教授概念	學習目標	連結課程	作者
01	Getting Started	程式設計與工具入門	了解多數程式語言的基本原理與協助專業開發者工作的軟體	Intro to Programming Languages and Tools of the Trade	Jasmine
02	Getting Started	GitHub 基礎與團隊合作	如何在專案中使用 GitHub，以及如何與他人協作管理程式碼	Intro to GitHub	Floor
03	Getting Started	無障礙設計	學習網頁無障礙設計基礎	Accessibility Fundamentals	Christopher
04	JS Basics	JavaScript 資料類型	JavaScript 資料類型基礎	Data Types	Jasmine
05	JS Basics	函數與方法	學習如何以函數與方法管理應用程式流程	Functions and Methods	Jasmine 和 Christopher
06	JS Basics	使用 JS 做決策	學習如何在程式碼中使用條件判斷	Making Decisions	Jasmine
07	JS Basics	陣列與迴圈	使用陣列與迴圈操作資料	Arrays and Loops	Jasmine
08	Terrarium	HTML 實作	建構打造線上生態缸的 HTML，重點在建置版面	Introduction to HTML	Jen
09	Terrarium	CSS 實作	製作 CSS 為線上生態缸套用樣式，重點是 CSS 基礎與響應式設計	Introduction to CSS	Jen
10	Terrarium	JavaScript 閉包與 DOM 操作	使用 JavaScript 實現拖放介面，著重閉包與 DOM 操作	JavaScript Closures, DOM manipulation	Jen
11	Typing Game	打字遊戲製作	學習如何使用鍵盤事件驅動 JavaScript 應用邏輯	Event-Driven Programming	Christopher
12	Green Browser Extension	瀏覽器運作原理	了解瀏覽器運作及歷史，並構建基本的瀏覽器擴充功能元件	About Browsers	Jen
13	Green Browser Extension	建立表單、呼叫 API 及本地儲存變數	製作瀏覽器擴充的 JavaScript 元件，使用本地儲存的變數呼叫 API	APIs, Forms, and Local Storage	Jen
14	Green Browser Extension	瀏覽器的背景程序與網頁效能	使用瀏覽器背景程序管理擴充圖示；學習網頁效能與優化方法	Background Tasks and Performance	Jen
15	Space Game	進階遊戲開發：JavaScript 繼承與設計模式	學習使用 Classes 和 Composition 以及 Pub/Sub 模式，為製作遊戲做準備	Introduction to Advanced Game Development	Chris
16	Space Game	畫布繪圖	了解 Canvas API，如何繪圖顯示元素	Drawing to Canvas	Chris
17	Space Game	元素移動與動畫	探索如何用笛卡兒座標與 Canvas API 讓元件動起來	Moving Elements Around	Chris
18	Space Game	碰撞偵測	使元素碰撞並以按鍵事件反應彼此，並提供冷卻功能以維持遊戲效能	Collision Detection	Chris
19	Space Game	計分	根據遊戲狀態進行數學計算與分數統計	Keeping Score	Chris
20	Space Game	結束與重新開始遊戲	了解遊戲結束與重啟，包括資源清理與變數重置	The Ending Condition	Chris
21	Banking App	網頁應用 HTML 模板與路由	學習如何運用路由與 HTML 模板建構多頁網站架構	HTML Templates and Routes	Yohan
22	Banking App	製作登入與註冊表單	學習製作表單與處理驗證流程	Forms	Yohan
23	Banking App	資料抓取與使用方法	資料在應用程式的流入與流出，如何抓取、儲存與釋放	Data	Yohan
24	Banking App	狀態管理概念	了解應用程式如何保留狀態並程式化管理	State Management	Yohan
25	Browser/VScode Code	使用 VScode 編輯器	學習如何使用程式碼編輯器	Use VScode Code Editor	Chris
26	AI Assistants	使用人工智慧	學習如何打造自己的 AI 助理	AI Assistant project	Chris