入門網頁開發課程

透過 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 多種語言翻譯，會大幅增加下載大小。若想不含翻譯克隆，請使用稀疏簽出：
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'
這會讓您用更快的速度下載並取得完成課程所需的所有資源。

若想支援額外的翻譯語言，請參考此處清單 here

🧑‍🎓 您是學生嗎？

請造訪 學生中心頁面，在這裡您可以找到初學者資源、學生套件，甚至獲得免費證書兌換券的方法。這是您會想要書籤收藏並不時查看的頁面，我們會每月更新內容。

📣 公告 - 新增 GitHub Copilot Agent 模式挑戰等你完成！

新增挑戰，請在大多數章節搜尋「GitHub Copilot Agent Challenge 🚀」。這是使用 GitHub Copilot 及 Agent 模式完成的新挑戰。如果您之前沒用過 Agent 模式，它不僅能產生文字，還能建立及編輯檔案、執行指令等多種功能。

📣 公告 - 新增使用生成式 AI 建置的專案

新增 AI 助手專案，請查看 project

📣 公告 - 全新課程專注於 JavaScript 的生成式 AI 正式發布

別錯過我們全新的生成式 AI 課程！

請造訪 https://aka.ms/genai-js-course 立即開始！

課程涵蓋從基礎到 RAG。
使用 GenAI 與我們的伴侶應用程序互動，與歷史人物對話。
趣味且引人入勝的故事敘述，讓您穿越時空！

每節課包含一個作業、知識檢測及挑戰，指引您學習：

提示與提示工程
文字及圖片應用程式生成
搜尋應用程式

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

🌱 起步

教師們，我們已在 included some suggestions 中提供如何使用此課程的建議。我們熱切期待您在討論區的回饋！

學生們，每節課開始前請完成預習測驗，然後閱讀課程材料，完成各種活動，最後透過課後測驗檢查您的理解。

為提升學習體驗，請與同儕一起合作專案！鼓勵您在我們的討論區互相交流，這裡有版主團隊隨時為您解答疑問。

為了進一步學習，我們強烈建議探索 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 環境供開發使用。

在本機電腦上執行課程

若要在本機執行此課程，您需要安裝一個文字編輯器、瀏覽器及終端機工具。我們的第一堂課 Introduction to Programming Languages and Tools of the Trade 將指引您挑選適合您的多種工具選項。

我們建議您使用 Visual Studio Code 做為編輯器，內建終端機，您可以在此處下載 Visual Studio Code。

將您的儲存庫克隆到本機。於儲存庫首頁點選 Code 按鈕並複製 URL：

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

推薦的 Visual Studio Code 擴充套件：

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

Copilot - 幫助你更快地撰寫程式碼

📂 每堂課包含：

選擇性的手繪筆記
選擇性補充影片
課前暖身小測驗
文字授課內容
專案導向課程會有逐步引導如何建立專案
知識檢核
挑戰題
補充閱讀資料
作業
課後測驗

關於小測驗的說明：所有小測驗都包含在 Quiz-app 資料夾中，有 48 個小測驗，每個小測驗三題。它們可在這裡找到 Quiz App，該測驗應用程式可在本地運行或部署到 Azure；請參照 quiz-app 資料夾中的說明。

🗃️ 課程

	專案名稱	教授概念	學習目標	相關課程	作者
01	入門入手	程式設計與工具介紹	了解大多數程式語言的基本原理及協助專業開發者工作的軟體工具	程式設計語言與工具介紹	Jasmine
02	入門入手	GitHub 基礎與團隊協作	如何在你的專案中使用 GitHub 以及如何與他人協作管理程式碼庫	GitHub 入門	Floor
03	入門入手	無障礙設計	學習網頁無障礙設計的基本概念	無障礙設計基礎	Christopher
04	JS 基礎	JavaScript 資料型別	JavaScript 資料型別基本概念	資料型別	Jasmine
05	JS 基礎	函式與方法	了解函式與方法用來管理應用程式邏輯的作用	函式與方法	Jasmine and Christopher
06	JS 基礎	用 JS 進行判斷	學習如何使用條件判斷來管理程式邏輯	判斷式	Jasmine
07	JS 基礎	陣列與迴圈	使用 JavaScript 的陣列與迴圈操作資料	陣列與迴圈	Jasmine
08	Terrarium	HTML 實作	建立 HTML 以組成線上生態箱，著重於佈局建立	HTML 入門	Jen
09	Terrarium	CSS 實作	建立 CSS 以美化線上生態箱，專注於 CSS 基礎及響應式設計	CSS 入門	Jen
10	Terrarium	JavaScript 閉包與 DOM 操作	建置實作拖放功能的 JavaScript，著重閉包及 DOM 操作	JavaScript 閉包與 DOM 操作	Jen
11	打字遊戲	建立打字遊戲	學習如何使用鍵盤事件驅動 JavaScript 應用程式邏輯	事件驅動程式設計	Christopher
12	綠色瀏覽器擴充功能	瀏覽器運作	了解瀏覽器的運作原理與歷史，並建立瀏覽器擴充功能初步元件	瀏覽器介紹	Jen
13	綠色瀏覽器擴充功能	建立表單、呼叫 API 及使用本地端儲存變數	建立使用本地端儲存變數呼叫 API 的瀏覽器擴充功能 JavaScript 元件	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