透過 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 和專家及其他開發者交流
阿拉伯語 | 孟加拉語 | 保加利亞語 | 緬甸語 | 中文（簡體） | 中文（繁體，香港） | 中文（繁體，澳門） | 中文（繁體，台灣） | 克羅地亞語 | 捷克語 | 丹麥語 | 荷蘭語 | 愛沙尼亞語 | 芬蘭語 | 法語 | 德語 | 希臘語 | 希伯來語 | 印地語 | 匈牙利語 | 印尼語 | 義大利語 | 日語 | 卡納達語 | 韓語 | 立陶宛語 | 馬來語 | 馬拉雅拉姆語 | 馬拉地語 | 尼泊爾語 | 奈及利亞皮欽語 | 挪威語 | 波斯語 (法爾西語) | 波蘭語 | 葡萄牙語（巴西） | 葡萄牙語（葡萄牙） | 旁遮普語 (古魯穆奇) | 羅馬尼亞語 | 俄語 | 塞爾維亞語 (西里爾字母) | 斯洛伐克語 | 斯洛維尼亞語 | 西班牙語 | 斯瓦希里語 | 瑞典語 | 他加祿語（菲律賓語） | 泰米爾語 | 泰盧固語 | 泰語 | 土耳其語 | 烏克蘭語 | 烏爾都語 | 越南語
想要本地複製？
此倉庫包含超過 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 Challenge 🚀"。這是一個使用 GitHub Copilot 及 Agent 模式完成的新挑戰。若你未使用過 Agent 模式，它不僅能生成文字還能創建及編輯檔案、執行命令等。
剛新增的 AI 助理專案，歡迎查看專案
千萬不要錯過我們的生成式 AI 新課程！
造訪 https://aka.ms/genai-js-course 開始學習！
- 課程涵蓋從基礎到 RAG 技術。
- 使用生成式 AI 及我們的夥伴應用與歷史人物互動。
- 有趣且引人入勝的故事，帶你穿越時空！
每堂課含作業、知識檢查及挑戰，幫助你學習：
- 提示語及提示工程
- 文字和圖像應用程式生成
- 搜尋應用程式
造訪 https://aka.ms/genai-js-course 開始學習！
老師們，我們在 for-teachers.md 中提供了一些使用本課程綱要的建議。歡迎於我們的討論區分享回饋！
學生，每堂課請先完成課前小測驗，接著閱讀教材，完成各種活動，最後以課後小測驗來檢驗理解。
為提升學習體驗，建議你與同學一同合作專案！鼓勵在我們的討論區進行討論，我們的管理團隊會隨時協助回答你的問題。
若想進一步進修，我們強烈推薦探索 Microsoft Learn 的補充學習資源。
本課程綱要已準備好開發環境！你可選擇在 Codespace（瀏覽器執行，免安裝）或使用電腦上的文字編輯器（如 Visual Studio Code）執行課程。
為方便儲存作業，建議你複製本倉庫。可點擊頁面頂端的 Use this template 按鈕，於你的 GitHub 帳戶中建立一份本課程綱要的複本。
步驟如下：
- 分叉此倉庫：點擊頁面右上角的「Fork」按鈕。
- 複製倉庫：
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
於你建立的倉庫複本中，點擊 Code 按鈕並選擇 Open with Codespaces。系統會為你建立一個新的 Codespace 以供使用。
要在本機執行此課程，需準備文字編輯器、瀏覽器及指令工具。首課 程式語言與開發工具簡介 中會帶你了解各種工具選項，幫助你選擇最適合的組合。
我們建議使用 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 個，每個測驗有三個問題。它們也可在此處 https://ff-quizzes.netlify.app/web/ 使用，測驗應用程式可以在本地執行或部署至 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 基礎 | 陣列與迴圈 | 使用陣列和迴圈處理資料 | 陣列與迴圈 | 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 | 太空遊戲 | 進階遊戲開發：繼承與發布訂閱模式 | 介紹繼承 (繼承類別與組合) 及 Pub/Sub 模式，為遊戲製作做準備 | 進階遊戲開發簡介 | 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 |
我們的課程設計以兩項重要教學原則為基礎：
- 專案導向學習
- 頻繁的測驗
本課程教授 JavaScript、HTML 及 CSS 的基本概念，以及當今網頁開發者所使用的最新工具與技術。學員將有機會親手製作打字遊戲、虛擬生態缸、環保瀏覽器擴充功能、太空侵略者風格遊戲及商業銀行應用程式。完成課程系列後，將建立穩固的網頁開發基礎。
🎓 你可以將本課程前幾堂課程視為 Microsoft Learn 的 學習路徑！
透過讓課程內容與專案相結合，使學生學習過程更具吸引力，並提升概念記憶。我們也撰寫多個 JavaScript 基礎入門課程，引入概念，搭配來自 「JavaScript 初學者系列」視頻教程系列的影片，由部分作者參與本課程製作。
此外，課前低壓力小測驗設定學生學習意向，課後第二次測驗則確保學習內容更穩固。本課程設計彈性且有趣，可全部或部分學習。專案由淺入深，於 12 週課程末期漸趨複雜。
雖然我們刻意避免引入 JavaScript 框架，以集中學習成為網頁開發者前所需的基本技能，完成本課程後，下一步可透過另一系列影片學習 Node.js：「Node.js 初學者系列」。
您可以使用 Docsify 離線瀏覽本文件。請分叉此版本庫，於本機安裝 Docsify，然後在版本庫根目錄下執行 docsify serve。網站將於本地端 3000 端口啟動：localhost:3000。
所有課程的 PDF 可從此下載 這裡。
我哋團隊亦有出其他課程！睇睇：
-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 檔案。
免責聲明：
本文件係經由人工智能翻譯服務 Co-op Translator 翻譯而成。雖然我哋致力追求準確性，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件之母語版本應視為權威來源。對於重要資訊，建議採用專業人工翻譯。本公司不對因使用本翻譯而引致之任何誤解或誤釋負責。