Web-Dev-For-Beginners/translations/zh-HK

初學者網頁開發課程

透過由 Microsoft 雲端倡導者團隊提供的 12 週全方位課程，學習網頁開發的基礎知識。24 個課程單元深入探討 JavaScript、CSS 和 HTML，透過實作專案如生態缸、瀏覽器擴充功能和太空遊戲加深理解。參與測驗、討論與實務作業。透過我們有效的專案導向教學法提升技能並優化知識吸收。現在就開始你的程式設計旅程！

加入 Azure AI Foundry Discord 社群

按照以下步驟開始使用這些資源：

1. 分支此儲存庫：點擊
2. 複製儲存庫： git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
3. 加入 Azure AI Foundry Discord，與專家及其他開發者交流

🌐 多語言支援

透過 GitHub Action 支援（自動且隨時更新）

阿拉伯語 | 孟加拉語 | 保加利亞語 | 緬甸語（Myanmar） | 中文（簡體） | 中文（繁體，香港） | 中文（繁體，澳門） | 中文（繁體，台灣） | 克羅地亞語 | 捷克語 | 丹麥語 | 荷蘭語 | 愛沙尼亞語 | 芬蘭語 | 法語 | 德語 | 希臘語 | 希伯來語 | 印地語 | 匈牙利語 | 印度尼西亞語 | 義大利語 | 日語 | 卡納達語 | 韓語 | 立陶宛語 | 馬來語 | 馬拉雅拉姆語 | 馬拉地語 | 尼泊爾語 | 奈及利亞皮欽語 | 挪威語 | 波斯語（法爾西語） | 波蘭語 | 葡萄牙語（巴西） | 葡萄牙語（葡萄牙） | 旁遮普語（古魯穆奇文） | 羅馬尼亞語 | 俄語 | 塞爾維亞語（西里爾字母） | 斯洛伐克語 | 斯洛文尼亞語 | 西班牙語 | 斯瓦希里語 | 瑞典語 | 他加祿語（菲律賓語） | 泰米爾語 | 泰盧固語 | 泰語 | 土耳其語 | 烏克蘭語 | 烏爾都語 | 越南語

偏好本機端複製？

本儲存庫包括 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'

這可讓你更快下載，並取得完成課程所需的所有資源。

若您希望加入其他支援語言，請參考此處

🧑‍🎓 你是學生嗎？

請造訪學生中心頁面，你將找到入門資源、學生套件，甚至取得免費證書憑證的方式。這個頁面值得收藏，並且隨時留意我們每月更新的內容。

📣 公告 - 新增 GitHub Copilot Agent 模式挑戰！

新增挑戰，請於大部分章節中尋找「GitHub Copilot Agent Challenge 🚀」，體驗使用 GitHub Copilot 與 Agent 模式完成的挑戰。如果你沒用過 Agent 模式，它不只能生成人工智慧文字，也能建立與編輯檔案、執行命令等等。

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

最新 AI 助理專案已上線，請查看此專案

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

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

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

• 課程涵蓋從基礎到 RAG（檢索擴充生成模型）
• 使用 GenAI 和配套應用與歷史人物互動
• 有趣且引人入勝的故事，帶你穿越時空！

每課包含作業、知識檢測與挑戰，帶領你學習以下主題：

• 提示詞及提示工程
• 文字與影像應用程式生成
• 搜索應用程式

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

🌱 開始

老師們，我們已提供建議介紹本課程的使用方式。歡迎於討論區分享你的回饋！

學員，每堂課先做課前測驗，接著閱讀課程內容，完成各項活動，再透過課後測驗檢視學習成果。

為提升學習成效，請與同儕合作完成專案！我們鼓勵在討論區交流，由我們的管理團隊隨時回答問題。

建議進一步深造者，探索Microsoft Learn以取得更多學習資源。

📋 設置你的開發環境

本課程已備妥開發環境！開始時可選擇在 Codespace（瀏覽器運行、免安裝環境）或本地電腦使用文字編輯器，例如 Visual Studio Code 來執行課程。

建立你的儲存庫

為方便儲存作品，我們建議你建立本儲存庫的個人副本。點擊頁面頂部的 Use this template 按鈕，即可在你的 GitHub 帳號中建立一個帶有課程副本的新儲存庫。

操作步驟如下：

1. 分支儲存庫：點擊頁面右上角的「Fork」按鈕。
2. 複製儲存庫： git clone https://github.com/microsoft/Web-Dev-For-Beginners.git

在 Codespace 上執行課程

在你的儲存庫副本中，點選 Code 按鈕並選擇 Open with Codespaces。這會為你建立一個新的 Codespace 工作環境。

在本地電腦上執行課程

要在本地電腦執行課程，你需要文字編輯器、瀏覽器和命令列工具。我們的第一堂課，程式語言與工具入門，會引導你了解這些工具各種選擇，幫助你決定最適合的工具。

我們推薦使用 Visual Studio Code 做為編輯器，其內建 終端機 功能。你可以從這裡下載 Visual Studio Code。

1. 把你的儲存庫複製到電腦中。可點擊 Code 按鈕並複製網址：

   CodeSpace 然後，在 Visual Studio Code 裡面打開 Terminal，並執行以下命令，將 <your-repository-url> 替換成你剛剛複製的 URL：

   git clone <your-repository-url>
   

2. 在 Visual Studio Code 中打開資料夾。你可以點擊 File > Open Folder 並選擇你剛剛 clone 的資料夾。

推薦的 Visual Studio Code 擴充功能：

• Live Server - 在 Visual Studio Code 中預覽 HTML 頁面
• Copilot - 幫助你更快寫程式碼

📂 每堂課包含：

• 選擇性的手繪筆記
• 選擇性的補充影片
• 課前熱身小測驗
• 課文
• 專案導向課程中，逐步指導如何建立專案
• 知識檢測
• 挑戰
• 補充閱讀材料
• 作業
• 課後小測驗

有關小測驗的說明：所有小測驗均包含在 Quiz-app 資料夾中，共 48 個小測驗，每個小測驗三題。它們可以在此處 取得，測驗應用程式可在本地執行或部署於 Azure；請參考 quiz-app 資料夾內的說明。

🗃️ 課程列表

	專案名稱	教授的概念	學習目標	連結課程	作者
01	Getting Started	程式設計與開發工具介紹	了解大多數程式語言的基本原理，以及協助專業開發人員工作的軟體	程式語言與工具簡介	Jasmine
02	Getting Started	GitHub 基礎與團隊協作	如何在專案中使用 GitHub，及如何與他人協作撰寫程式碼	GitHub 簡介	Floor
03	Getting Started	無障礙設計	了解網頁無障礙設計基礎	無障礙設計基礎	Christopher
04	JS Basics	JavaScript 資料型態	JavaScript 資料型態基礎	資料型態	Jasmine
05	JS Basics	函式與方法	學習函式與方法，管理應用程式的邏輯流程	函式與方法	Jasmine 和 Christopher
06	JS Basics	使用 JS 做決策判斷	學習如何用判斷式創造條件流程	決策判斷	Jasmine
07	JS Basics	陣列與迴圈	使用 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	Typing Game	製作打字遊戲	學習如何用鍵盤事件驅動 JavaScript 應用程式邏輯	事件驅動程式設計	Christopher
12	Green Browser Extension	瀏覽器基本原理	了解瀏覽器運作與歷史，並構建瀏覽器擴充功能的基本介面	關於瀏覽器	Jen
13	Green Browser Extension	表單製作、API 呼叫與本地儲存	利用本地儲存變數撰寫瀏覽器擴充功能中的 JavaScript 元素，呼叫 API	API、表單與本地儲存	Jen
14	Green Browser Extension	瀏覽器背景程序與網路效能優化	利用瀏覽器背景程序管理擴充功能圖示；學習網路效能及優化方法	背景程序與效能	Jen
15	Space Game	進階 JavaScript 遊戲開發	學習使用類別與組成繼承以及發布/訂閱模式，為遊戲開發做準備	進階遊戲開發入門	Chris
16	Space Game	Canvas 繪圖	了解 Canvas API，用於繪製畫面元素	Canvas 繪圖	Chris
17	Space Game	元素在畫面上移動	探索如何用笛卡爾坐標和 Canvas API 讓元素產生動作	移動畫面元素	Chris
18	Space Game	碰撞偵測	讓元素碰撞並互相反應，使用按鍵事件並加入冷卻功能以確保遊戲效能	碰撞偵測	Chris
19	Space Game	計分	根據遊戲狀態與表現進行數學計算	計分	Chris
20	Space Game	遊戲結束與重啟	學習遊戲結束與重新開始流程，包括清理資源和重設變數	結束條件	Chris
21	Banking App	網頁應用的 HTML 模板與路由	學習如何用路由與 HTML 模板建立多頁網站架構	HTML 模板與路由	Yohan
22	Banking App	建立登入與註冊表單	學習表單建立及驗證流程	表單	Yohan
23	Banking App	資料擷取與利用方法	了解資料如何流入與流出你的應用，如何取得、儲存與釋放	資料處理	Yohan
24	Banking App	狀態管理概念	了解應用如何保留狀態及如何程式化管理	狀態管理	Yohan
25	Browser/VScode Code	使用 VScode	學習如何使用程式碼編輯器	使用 VScode 程式碼編輯器	Chris
26	AI Assistants	使用 AI	學習如何建立自己的 AI 助理	AI 助理專案	Chris

🏫 教學法

我們的課程設計有兩項核心教學原則：

• 專案導向學習
• 經常性小測驗

課程教授 JavaScript、HTML 及 CSS 的基礎知識，及當今網頁開發者使用的最新工具與技術。學生將有機會透過製作打字遊戲、虛擬生態箱、環保瀏覽器擴充功能、太空侵略者風格遊戲及企業銀行應用程式，累積實務經驗。完成整套課程後，學生將建立紮實的網頁開發基礎。

🎓 你可以將本課程的前幾堂課當作 Microsoft Learn 上的 學習路徑！

透過確保內容與專案對齊，讓學習過程對學生更具吸引力，且概念記憶更為深刻。我們也撰寫了多堂 JavaScript 基礎入門課程，搭配來自「JavaScript 初學者系列」影片教學，部分作者也參與了本課程的撰寫。

此外，於上課前進行低風險的測驗，幫助學生設定學習主題的心態，而課後的第二次測驗則確保持續記憶。課程設計靈活且有趣，既可完整修習，也可部分選修。專案自小而簡單，隨著 12 週課程逐步變得更複雜。

我們刻意避免介紹 JavaScript 框架，專注於網頁開發人員在採用框架前所需的基礎能力，完成本課程後的良好下一步是透過另一系列影片學習 Node.js：「Node.js 初學者系列」。

請參閱我們的 行為準則 和 貢獻指南。歡迎您的寶貴建議！

🧭 離線瀏覽

您可以使用 Docsify 來離線執行此文件。請 fork 此 repo，在本機安裝 Docsify，然後在此 repo 根目錄執行 docsify serve，網站將在本機的 3000 埠提供服務：localhost:3000。

📘 PDF

所有課程的 PDF 檔案可於此處下載。

🎒 其他課程

我們團隊還製作其他課程！快來看看：

LangChain

---

Azure / Edge / MCP / Agents

---

生成式 AI 系列

---

核心學習

---

Copilot 系列

尋求幫助

如果你遇到困難或對建立 AI 應用有任何疑問，歡迎加入學習者與經驗豐富的開發者討論 MCP。這是一個支援性強的社群，歡迎提出問題並自由分享知識。

如果你在開發過程中有產品回饋或發現錯誤，請造訪：

授權條款

本倉庫採用 MIT 許可證。詳情請參見 LICENSE 檔案。

---

免責聲明：
本文件由 AI 翻譯服務 Co-op Translator 所翻譯。儘管我們致力於提供準確的翻譯，但請注意，自動翻譯可能會包含錯誤或不準確之處。原始語言版本的文件應視為權威來源。如涉及重要資訊，建議進行專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或誤釋概不負責。