由 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，與專家和其他開發者交流
阿拉伯語 | 孟加拉語 | 保加利亞語 | 緬甸語 | 中文（簡體） | 中文（繁體，香港） | 中文（繁體，澳門） | 中文（繁體，台灣） | 克羅地亞語 | 捷克語 | 丹麥語 | 荷蘭語 | 愛沙尼亞語 | 芬蘭語 | 法語 | 德語 | 希臘語 | 希伯來語 | 印地語 | 匈牙利語 | 印尼語 | 義大利語 | 日語 | 坎納達語 | 韓語 | 立陶宛語 | 馬來語 | 馬拉雅拉姆語 | 馬拉地語 | 尼泊爾語 | 奈及利亞皮欽語 | 挪威語 | 波斯語（法爾西語） | 波蘭語 | 葡萄牙語（巴西） | 葡萄牙語（葡萄牙） | 旁遮普語（古魯穆奇） | 羅馬尼亞語 | 俄語 | 塞爾維亞語（西里爾文） | 斯洛伐克語 | 斯洛文尼亞語 | 西班牙語 | 斯瓦希里語 | 瑞典語 | 他加祿語（菲律賓語） | 泰米爾語 | 泰盧固語 | 泰語 | 土耳其語 | 烏克蘭語 | 烏爾都語 | 越南語
想本地端 Clone？
本專案包含 50 多種語言翻譯，會大幅增加下載大小。若想不包含翻譯檔，請使用稀疏取出（sparse checkout）：
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 Challenge 🚀」。這是一項使用 GitHub Copilot 及 Agent 模式的新挑戰。如果你以前沒用過 Agent 模式，它不只會產生文字，還能建立與編輯檔案、執行命令等。
新增 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
在你建立的這個複本中，點 Code 按鈕並選擇 Open with Codespaces。系統會為你建立新的 Codespace 供你使用。
要在本地電腦執行本課程，你需要文字編輯器、瀏覽器及終端機工具。我們的第一堂課，程式語言及工具介紹，會帶你了解各種工具選項，幫助你選擇最合適的環境。
我們推薦使用 Visual Studio Code 作為編輯器，它內建有 終端機。你可以從這裡下載 Visual Studio Code。
-
將你的版本庫複製到你的電腦。你可以點擊 Code 按鈕並複製 URL：
然後，在 Visual Studio Code 中打開 終端機，並運行以下命令，將
<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 個測驗，每個測驗包含三題問題。它們可在 這裡 使用，該測驗應用程式可以本地執行或部署到 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 | 銀行應用程式 | Web 應用程式的 HTML 模板與路由 | 了解如何使用路由與 HTML 模板建立多頁網站架構 | HTML 模板與路由 | Yohan |
| 22 | 銀行應用程式 | 建立登入與註冊表單 | 了解表單建立與驗證流程 | 表單 | Yohan |
| 23 | 銀行應用程式 | 取得與使用資料的方法 | 了解資料在應用程式中的流向、取得、儲存與釋放 | 資料 | Yohan |
| 24 | 銀行應用程式 | 狀態管理概念 | 了解應用程式如何維持狀態，以及如何以程式方式管理 | 狀態管理 | Yohan |
| 25 | 瀏覽器/VScode 程式碼 | 使用 VScode | 了解如何使用程式碼編輯器 | 使用 VScode 程式碼編輯器 | Chris |
| 26 | AI 助手 | 使用 AI | 了解如何建立你自己的 AI 助手 | AI 助手專案 | Chris |
我們的課程設計基於兩個主要的教學原則：
- 專案導向學習
- 頻繁的小測驗
課程教授 JavaScript、HTML 和 CSS 的基礎，以及當今網頁開發人員所用的最新工具與技術。學生將有機會透過構建打字遊戲、虛擬微型生態箱、環保瀏覽器擴充、太空侵略者風格遊戲及企業銀行應用程式等專案，獲得實作經驗。系列結束時，學生將建立紮實的網頁開發基礎。
🎓 你可以將此課程的前幾堂課作為 Microsoft Learn 上的 學習路徑！
透過讓內容與專案結合，過程對學生更具吸引力，並增強概念的記憶。我們還撰寫了數堂 JavaScript 入門課程來介紹概念，並搭配了 "JavaScript 初學者系列" 教學影片，其中部分作者也參與了本課程撰寫。
此外，上課前的低壓力小測驗設定學生的學習目標，而課後的第二次小測驗則鞏固所學。本課程設計靈活且有趣，可整套選修或分段學習。專案從簡單開始，至 12 週結束時最新穎且越來越複雜。
雖然我們刻意避免引入 JavaScript 框架，以專注於成為網頁開發者所需的基本技能，但完成本課程後的良好下一步是透過另一系列影片學習 Node.js：「Node.js 初學者系列」。
你可以使用 Docsify 離線瀏覽此文件。請將本倉庫分叉、在本機安裝 Docsify，然後在本倉庫根目錄執行 docsify serve。網站將會在本地主機的 3000 埠口上啟動：localhost:3000。
所有課程的 PDF 可於此處下載 here。
我們團隊還製作了其他課程！歡迎瀏覽：
-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA){kind=icon}
-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC){kind=icon}
-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9){kind=icon}
如果你在構建 AI 應用時遇到困難或有任何問題，歡迎加入其他學習者及經驗豐富的開發者討論 MCP。這是一個支持性的社群，歡迎提問並自由分享知識。
如果你在開發過程中有產品反饋或錯誤，請訪問：
此存儲庫採用 MIT 授權。詳情請參閱 LICENSE 文件。
免責聲明：
本文件是使用 AI 翻譯服務 Co-op Translator 翻譯而成。儘管我們努力確保準確性，但請注意自動翻譯可能包含錯誤或不準確之處。原文文件的母語版本應被視為權威來源。對於重要資訊，建議採用專業人工翻譯。我們不對因使用本翻譯而引致的任何誤解或誤釋承擔責任。