初學者網頁開發課程

由 Microsoft Cloud Advocates 提供的 12 週全面課程，教授網頁開發基礎。24 節課中每節均透過實作專案如生態缸、瀏覽器擴充功能及太空遊戲深入學習 JavaScript、CSS 及 HTML。參與小測驗、討論及實際作業。藉由我們有效的專案導向教學法，提升您的技能並優化知識吸收。立即開始您的程式編碼旅程！

加入 Azure AI Foundry Discord 社群

開始使用這些資源，請遵循以下步驟：

Fork 倉庫：點擊
Clone 倉庫：git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
加入 Azure AI Foundry Discord 並認識專家及其他開發者

🌐 多語言支援

透過 GitHub Action 支援（自動且持續更新）

想本機 Clone？

此資源庫包含超過 50 種語言翻譯，會顯著增加下載大小。若想不下載翻譯內容，可使用 sparse checkout：
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 挑戰 🚀」。這是個可用 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 倉庫：點擊本頁右上角的「Fork」按鈕。
Clone 倉庫：git clone https://github.com/microsoft/Web-Dev-For-Beginners.git

在 Codespace 執行課程

於您建立的倉庫副本中，點擊 Code 按鈕並選擇 Open with Codespaces。系統將為您建立一個新的 Codespace 以便開發。

在本機執行課程

欲於本機運行此課程，您需具備文字編輯器、瀏覽器及命令行工具。我們的第一堂課程式語言與工具基礎介紹中會介紹各種可用工具選項，讓您挑選最合適的。

建議使用 Visual Studio Code 作為編輯器，它內建有功能強大的終端機。您可於此下載 Visual Studio Code：連結。

將您的倉庫 clone 至電腦。點擊 Code 按鈕並複製網址：

CodeSpace 然後，打開 Visual Studio Code 內的終端機並執行以下命令，將 <your-repository-url> 替換為剛剛複製的網址：
```
git clone <your-repository-url>
```
在 Visual Studio Code 中打開資料夾。您可以點擊檔案 > 開啟資料夾，然後選擇剛剛克隆的資料夾。

推薦的 Visual Studio Code 擴充功能：

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

Copilot - 幫助您更快編寫程式碼

📂 每個課程包含：

可選的手繪筆記
可選的補充影片
課前熱身測驗
書面課程
對於專案導向課程，逐步指導如何建立該專案
知識檢核
一個挑戰
補充閱讀
任務
課後測驗

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

🗃️ 課程列表

	專案名稱	教授概念	學習目標	相關課程	作者
01	入門起步	程式設計概論與專業工具	學習大多數程式語言背後的基本原理，以及協助專業開發者工作的軟體工具	程式語言與專業工具介紹	Jasmine
02	入門起步	GitHub 基礎與團隊協作	如何在專案中使用 GitHub，以及如何和他人協同操作程式碼庫	GitHub 入門	Floor
03	入門起步	網頁無障礙	學習網頁無障礙的基礎知識	無障礙基礎	Christopher
04	JS 基礎	JavaScript 資料型態	JavaScript 資料型態的基礎	資料型態	Jasmine
05	JS 基礎	函式與方法	了解函式和方法，管理應用程式的邏輯流	函式與方法	Jasmine 和 Christopher
06	JS 基礎	使用 JS 作決策	了解如何使用決策結構建立程式條件	作決策	Jasmine
07	JS 基礎	陣列與迴圈	使用陣列與迴圈操作 JavaScript 內的資料	陣列與迴圈	Jasmine
08	溫室生態箱	HTML 實務	建立 HTML 來製作線上溫室生態箱，重點是建構版面	HTML 入門	Jen
09	溫室生態箱	CSS 實務	建立 CSS 以設定線上溫室生態箱樣式，著重於 CSS 基礎和網站響應式設計	CSS 入門	Jen
10	溫室生態箱	JavaScript 閉包、DOM 操作	撰寫 JavaScript 讓溫室生態箱成為拖放介面，重點在閉包與 DOM 操作	JavaScript 閉包與 DOM 操作	Jen
11	打字遊戲	製作打字遊戲	學習如何使用鍵盤事件驅動 JavaScript 應用程式邏輯	事件驅動程式設計	Christopher
12	綠色瀏覽器擴充功能	瀏覽器運作原理	了解瀏覽器如何運作、歷史，以及如何搭建瀏覽器擴充功能的初步元件	瀏覽器介紹	Jen
13	綠色瀏覽器擴充功能	建立表單、呼叫 API 及本地儲存變數	建立瀏覽器擴充功能的 JavaScript，利用本地儲存變數呼叫 API	API、表單與本地儲存	Jen
14	綠色瀏覽器擴充功能	瀏覽器背景程序與網頁效能	使用瀏覽器背景程序管理擴充功能圖示；學習網頁效能及優化技巧	背景任務與效能	Jen
15	太空遊戲	使用 JavaScript 進階遊戲開發	了解使用類別與組合的繼承以及發布/訂閱模式，為開發遊戲做準備	進階遊戲開發介紹	Chris
16	太空遊戲	Canvas 繪圖	了解 Canvas API 用於在畫面上繪製元素	Canvas 繪圖	Chris
17	太空遊戲	元素在畫面移動	探索如何使用笛卡爾座標與 Canvas API 讓元素動起來	元素移動	Chris
18	太空遊戲	碰撞偵測	讓元素碰撞並互動，使用按鍵觸發反應並提供冷卻功能以維持遊戲效能	碰撞偵測	Chris
19	太空遊戲	計分系統	根據遊戲狀態與表現執行數學運算	計分系統	Chris
20	太空遊戲	遊戲結束與重新開始	了解遊戲結束與重新開始流程，包括資源清理與變數重置	結束條件	Chris
21	銀行應用程式	網頁應用的 HTML 範本與路由	學習用路由與 HTML 範本建立多頁網站架構	HTML 範本與路由	Yohan
22	銀行應用程式	建立登入與註冊表單	了解表單製作與驗證流程	表單	Yohan
23	銀行應用程式	獲取與使用資料的方法	理解資料如何流入與流出應用程式，如何取得、儲存與處理	資料	Yohan
24	銀行應用程式	狀態管理的概念	學習應用程式如何保存狀態與如何程式化管理	狀態管理	Yohan
25	瀏覽器/VScode 程式碼	使用 VScode	學習如何使用程式碼編輯器	使用 VScode 程式碼編輯器	Chris
26	AI 助理	與 AI 合作	學習如何建立自己的 AI 助理	AI 助理專案	Chris