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

初學者網頁開發課程大綱

透過 Microsoft Cloud Advocates 提供的 12 週全面課程，學習網頁開發的基礎知識。24 課程每堂結合 JavaScript、CSS 和 HTML，透過實作專案如生態瓶、瀏覽器擴充功能及太空遊戲深入學習。課程包含小測驗、討論及實作任務。運用我們有效的專案導向教學法，提升技能與知識吸收效率。即刻開始你的程式設計之旅！

加入 Azure AI Foundry Discord 社群

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

1. 分叉（Fork）此儲存庫：點擊
2. 複製（Clone）此儲存庫： git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
3. 加入 Azure AI Foundry Discord，結識專家與其他開發者

🌐 多語言支援

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

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

偏好本地複製？

此儲存庫包含超過 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 模式挑戰任務！

全新挑戰已新增，在多數章節尋找「GitHub Copilot Agent Challenge 🚀」。這是讓你使用 GitHub Copilot 與代理模式完成的新挑戰。如果你之前沒用過代理模式，它不僅能生成文字，也可以建立與編輯檔案、執行指令等功能。

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

新 AI 助手專案剛加入，詳見 專案

📣 公告 - 最新 JavaScript 生成式 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 帳號建立新儲存庫，裡面包含課程內容。

操作步驟如下：

1. 分叉（Fork）此儲存庫：點擊本頁右上方的「Fork」按鈕。
2. 複製（Clone）此儲存庫： 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 按鈕並複製 URL：

   CodeSpace 接著，在 Visual Studio Code 內打開 Terminal，並執行以下指令，將 <your-repository-url> 替換成你剛才複製的 URL：

   git clone <your-repository-url>
   

2. 在 Visual Studio Code 中打開資料夾。你可以點選 File > Open Folder，然後選擇剛剛克隆的資料夾。

推薦的 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 遊戲開發	學習繼承（Classes）、組合（Composition）及發佈/訂閱模式，為建立遊戲做準備	進階遊戲開發入門	Chris
16	Space Game	畫布繪圖	了解 Canvas API，將元素繪製到畫面	畫布繪圖	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，然後在本機安裝 Docsify，然後在此倉庫根目錄輸入 docsify serve。網站將在本機端 3000 埠口啟動：localhost:3000。

📘 PDF

所有課程的 PDF 可於此處取得。

🎒 其他課程

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

LangChain

---

Azure / Edge / MCP / Agents

---

生成式 AI 系列

---

核心學習

---

Copilot 系列

尋求幫助

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

如果你在開發中有產品回饋或錯誤，請訪問：

授權

此儲存庫採用 MIT 授權。詳情請見 LICENSE 文件。

---

免責聲明：
本文件使用 AI 翻譯服務 Co-op Translator 進行翻譯。雖然我們努力確保準確性，但請注意自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於重要資訊，建議採用專業人工翻譯。對於因使用本翻譯而產生的任何誤解或誤譯，我們概不負責。