與微軟雲端推廣者一起學習網頁開發的基礎知識，參加我們為期 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+ 種語言的翻譯，會顯著增加下載大小。若想要不含翻譯版，請使用稀疏檢出：
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 開始！
老師們，我們已在 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
在你建立的倉庫副本中，點擊 Code 按鈕，選擇 Open with Codespaces。這會建立一個新的 Codespace 讓你使用。
想在本機執行此課程，需要一個文字編輯器、瀏覽器與命令列工具。第一課 程式語言與工具介紹 會帶你了解各種工具選項，幫你挑選合適的開發環境。
我們推薦使用 Visual Studio Code 作為編輯器，它還內建了終端機。你可以從這裡下載 Visual Studio Code。
-
將您的倉庫克隆到您的電腦。您可以點擊 Code 按鈕並複製 URL：
然後，在 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 個測驗，每個測驗包含三個問題。它們可在這裡使用，測驗應用程式可以本地運行或部署至 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 | 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 及本地存儲變數 | 編寫瀏覽器擴展的 JavaScript 元素，使用本地存儲變數調用 API | API、表單與本地存儲 | Jen |
| 14 | 綠色瀏覽器擴展 | 瀏覽器背景進程與網頁效能 | 使用瀏覽器背景進程管理擴展圖標；學習網頁效能及優化技巧 | 背景任務與效能 | Jen |
| 15 | 太空遊戲 | 使用 JavaScript 進階遊戲開發 | 學習繼承（使用類和組合）與發布/訂閱模式，為構建遊戲做準備 | 進階遊戲開發簡介 | Chris |
| 16 | 太空遊戲 | 畫布繪圖 | 了解 Canvas API，用於在螢幕繪製元素 | 繪製到畫布 | Chris |
| 17 | 太空遊戲 | 元素移動 | 發現如何使用笛卡爾座標和 Canvas API 為元素賦予動態 | 移動元素 | Chris |
| 18 | 太空遊戲 | 碰撞偵測 | 使元素相互碰撞並反應，並使用冷卻時間功能確保遊戲效能 | 碰撞偵測 | Chris |
| 19 | 太空遊戲 | 計分 | 根據遊戲狀態和表現進行數學計算 | 計分 | Chris |
| 20 | 太空遊戲 | 結束與重新開始遊戲 | 瞭解結束與重新開始遊戲，包括資源清理和變數重置 | 結束條件 | Chris |
| 21 | 銀行應用程式 | 網頁應用中的 HTML 範本與路由 | 學習如何使用路由和 HTML 範本架構多頁面網站 | HTML 範本與路由 | Yohan |
| 22 | 銀行應用程式 | 建立登入與註冊表單 | 了解如何構建表單與處理驗證程序 | 表單 | Yohan |
| 23 | 銀行應用程式 | 取得與使用數據的方式 | 資料在應用程式中如何流動，如何取得、存儲及處理 | 數據 | Yohan |
| 24 | 銀行應用程式 | 狀態管理概念 | 學習您的應用如何保留狀態以及如何透過程式管理狀態 | 狀態管理 | Yohan |
| 25 | Browser/VScode Code | 使用 VScode | 學習如何使用程式碼編輯器 | 使用 VScode 編輯器 | Chris |
| 26 | AI 助理 | 與 AI 合作 | 學習如何建立您的 AI 助理 | AI 助理專案 | Chris |
我們的課程設計基於兩個主要教學原則：
- 專案式學習
- 頻繁測驗
該計劃教授 JavaScript、HTML 和 CSS 的基礎知識，以及當今網頁開發者使用的最新工具和技術。學生將有機會通過構建一個打字遊戲、虛擬生態瓶、環保瀏覽器擴展、太空入侵者風格遊戲和企業銀行應用程式來獲得實際操作經驗。系列結束時，學生將對網頁開發有堅實的理解。
🎓 您可以先上本課程中幾個初級課程，作為 Microsoft Learn 上的 學習路徑！
通過確保內容與專案一致，使學習過程更具吸引力並能增強概念記憶。我們還編寫了幾個 JavaScript 基礎入門課程，搭配來自 "JavaScript 初學者系列" 影片教程集的一些視頻，該系列的部分作者也參與了本課程編寫。
此外，課前的低風險測驗設定學生的學習意圖，而課後的第二次測驗則確保進一步的記憶。本課程設計靈活且有趣，可以整體或部分學習。專案從簡單開始，並在 12 週的週期結束時變得越來越複雜。
儘管我們有意避免引入 JavaScript 框架，專注於在採用框架前培養作為網頁開發者所需的基本技能，完成本課程的下一個良好步驟是通過另一組視頻學習 Node.js：「Node.js 初學者系列」。
您可以使用 Docsify 離線瀏覽本文件。Fork 此倉庫，在您的本機安裝 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 檔案。
免責聲明：
本文件是使用 AI 翻譯服務 Co-op Translator 進行翻譯。雖然我們致力於準確性，但請注意，自動翻譯可能包含錯誤或不準確之處。原文文件的母語版本應視為權威來源。對於重要資訊，建議聘請專業人工翻譯。我們不對因使用本翻譯而產生的任何誤解或誤釋負責。