msb-public
/
Web-Dev-For-Beginners
mirror of https://github.com/microsoft/Web-Dev-For-Beginners.git
1
0
Code Issues Projects Releases Wiki Activity

chore(i18n): sync translations with latest source changes (chunk 1/1, 9 changes)

Browse Source
pull/1781/head
localizeflow[bot] 3 months ago
parent 3a6dc390f4
commit 2bad752688
9 changed files with 899 additions and 900 deletions
Show Stats Download Patch File Download Diff File

6
translations/zh-HK/.co-op-translator.json
Unescape View File

@ -493,7 +493,7 @@
},
"AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2026-03-27T22:47:08+00:00",
"translation_date": "2026-04-06T16:03:06+00:00",
"source_file": "AGENTS.md",
"language_code": "zh-HK"
},
@ -516,8 +516,8 @@
"language_code": "zh-HK"
},
"README.md": {
"original_hash": "a2c9eed480687319517c08a6319e5536",
"translation_date": "2026-03-06T17:55:10+00:00",
"original_hash": "b885c87c7544109b78d6684daad6cba6",
"translation_date": "2026-04-06T15:58:08+00:00",
"source_file": "README.md",
"language_code": "zh-HK"
},

396
translations/zh-HK/AGENTS.md
Unescape View File

@ -1,65 +1,65 @@
# AGENTS.md
## 專案概覽
## Project Overview
這是一個用於教授初學者網頁開發基礎的教育課程資源庫。該課程為一個由 Microsoft Cloud Advocates 開發的完整 12 週課程，包含 24 個涵蓋 JavaScript、CSS 和 HTML 的實作課程。
這是一個用於教授初學者網頁開發基礎的教育課程儲存庫。該課程是一個由 Microsoft Cloud Advocates 開發的全面 12 週課程，包括 24 個涵蓋 JavaScript、CSS 和 HTML 的實作課程。
### 主要組件
### Key Components
- <strong>教育內容</strong>：24 個結構化課程，組織於專案模組中
- <strong>實用專案</strong>：生態球、打字遊戲、瀏覽器擴充功能、太空遊戲、銀行應用、程式碼編輯器及 AI 聊天助手
- <strong>互動測驗</strong>：48 次測驗，每次包含 3 題（課前/課後評估）
- <strong>多語言支援</strong>：透過 GitHub Actions 自動支援 50+ 種語言翻譯
- <strong>技術堆疊</strong>：HTML、CSS、JavaScript、Vue.js 3、Vite、Node.js、Express、Python（用於 AI 專案）
- <strong>教育內容</strong>：24 個結構化課程，組織成基於專案的模組
- <strong>實作專案</strong>：溫室生態箱、打字遊戲、瀏覽器擴充功能、太空遊戲、銀行應用程式、程式碼編輯器及 AI 聊天助理
- <strong>互動測驗</strong>：48 個包含 3 題的測驗（課程前後評量）
- <strong>多語言支援</strong>：透過 GitHub Actions 自動翻譯 50 多種語言
- <strong>技術</strong>：HTML、CSS、JavaScript、Vue.js 3、Vite、Node.js、Express、Python（AI 專案用）
### 架構
### Architecture
- 以課程為基礎結構的教育資源庫
- 以課程為基礎結構的教育儲存庫
- 每個課程資料夾包含 README、程式碼範例和解決方案
- 獨立專案位於獨立目錄中（quiz-app、各種課程專案）
- 透過 GitHub Actions (co-op-translator) 的翻譯系統
- 文件透過 Docsify 提供並可生成 PDF
- 獨立專案存放在單獨目錄（quiz-app、各課程專案）
- 使用 GitHub Actions (co-op-translator) 的翻譯系統
- 文件透過 Docsify 提供並有 PDF 格式
## 設定指令
## Setup Commands
此資源庫主要供教育內容閱讀使用。若要操作特定專案，請依以下指引：
此儲存庫主要用於教育內容消費。若要操作特定專案：
### 主要資源庫設定
### Main Repository Setup
```bash
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners
```
### 測驗應用程式設定（Vue 3 + Vite）
### Quiz App Setup (Vue 3 + Vite)
```bash
cd quiz-app
npm install
npm run dev # 啟動開發伺服器
npm run build # 建立生產版本
npm run build # 為生產環境編譯
npm run lint # 執行 ESLint
```
### 銀行專案 API（Node.js + Express）
### Bank Project API (Node.js + Express)
```bash
cd 7-bank-project/api
npm install
npm start # 啟動 API 伺服器
npm run lint # 運行 ESLint
npm run lint # 執行 ESLint
npm run format # 使用 Prettier 格式化
```
### 瀏覽器擴充功能專案
### Browser Extension Projects
```bash
cd 5-browser-extension/solution
npm install
# 遵循瀏覽器特定的擴充功能載入指示
# 遵循瀏覽器專用的擴充功能加載指示
```
### 太空遊戲專案
### Space Game Projects
```bash
cd 6-space-game/solution
@ -67,125 +67,125 @@ npm install
# 在瀏覽器中打開 index.html 或使用 Live Server
```
### 聊天專案（Python 後端）
### Chat Project (Python Backend)
```bash
cd 9-chat-project/solution/backend/python
pip install openai
# 設定 GITHUB_TOKEN 環境變量
# 設定 GITHUB_TOKEN 環境變數
python api.py
```
## 開發工作流程
## Development Workflow
### 對內容貢獻者
### For Content Contributors
1. **將資源庫 fork 到您的 GitHub 帳號**
2. **將 fork 複製到本地端**
3. <strong>為您的修改建立新分支</strong>
1. **Fork 儲存庫** 至您的 GitHub 帳號
2. **本地複製您的 fork**
3. <strong>建立新分支</strong> 以進行修改
4. 修改課程內容或程式碼範例
5. 在相關專案目錄中測試程式碼修改
6. 根據貢獻指南提交 pull requests
5. 在相關專案資料夾測試程式碼變更
6. 按照貢獻指南提交 pull requests
### 對學習者
### For Learners
1. Fork 或 Clone 此資源庫
2. 依序瀏覽課程資料夾
3. 閱讀每堂課的 README 檔案
4. 完成課前測驗，網址：https://ff-quizzes.netlify.app/web/
5. 實作課程資料夾內的程式碼範例
6. 完成作業與挑戰
7. 參加課後測驗
1. Fork 或複製儲存庫
2. 依序導覽各課程目錄
3. 閱讀每課程的 README 檔案
4. 完成 https://ff-quizzes.netlify.app/web/ 中的課前測驗
5. 練習課程資料夾中的程式範例
6. 完成作業及挑戰
7. 進行課後測驗
### 即時開發
### Live Development
- <strong>文件</strong>：在根目錄運行 `docsify serve`（預設埠 3000）
- <strong>測驗應用程式</strong>：在 quiz-app 目錄運行 `npm run dev`
- <strong>專案</strong>：HTML 專案使用 VS Code Live Server 擴充功能
- **API 專案**：在對應 API 目錄運行 `npm start`
- <strong>文件</strong>：在根目錄執行 `docsify serve` (預設埠 3000)
- <strong>測驗應用程式</strong>：在 quiz-app 目錄執行 `npm run dev`
- <strong>專案</strong>：使用 VS Code 的 Live Server 外掛實作 HTML 專案服務
- **API 專案**：在對應 API 目錄執行 `npm start`
## 測試說明
## Testing Instructions
### 測驗應用程式測試
### Quiz App Testing
```bash
cd quiz-app
npm run lint # 檢查代碼風格問題
npm run build # 驗證編譯成功
npm run build # 驗證構建是否成功
```
### 銀行 API 測試
### Bank API Testing
```bash
cd 7-bank-project/api
npm run lint # 檢查代碼風格問題
node server.js # 驗證伺服器無錯誤啟動
node server.js # 驗證服務器啟動時無錯誤
```
### 一般測試方式
### General Testing Approach
- 此為教育資源庫，沒有全面自動化測試
- 這是教育儲存庫，沒有完整自動化測試
- 手動測試重點：
- 程式碼範例無錯誤執行
- 文件中連結正常
- 專案成功構建
- 範例遵從最佳實務
- 程式碼範例可順利執行
- 文件內連結功能正常
- 專案建置成功
- 範例遵循最佳實務
### 提交前檢查
### Pre-submission Checks
- 在含 package.json 的目錄執行 `npm run lint`
- 確認 Markdown 連結有效
- 在瀏覽器或 Node.js 中測試程式碼範例
- 確保翻譯結構無誤
- 在含有 package.json 的目錄執行 `npm run lint`
- 驗證 Markdown 連結有效
- 在瀏覽器或 Node.js 中測試程式範例
- 確認翻譯保持正確結構
## 程式碼風格指南
## Code Style Guidelines
### JavaScript
- 使用現代 ES6+ 語法
- 遵從專案中提供的標準 ESLint 設定
- 變數及函式命名具意義以利學習理解
- 新增註解解釋概念給學習者
- 使用 Prettier 格式化（有配置時）
- 遵循專案中提供的標準 ESLint 設定
- 使用有意義的變數與函數名稱以利教育理解
- 添加解說概念的註解給學習者
- 在有設定的地方使用 Prettier 格式化
### HTML/CSS
- 使用語意化 HTML5 元素
- 響應式設計原則
- 使用語義化 HTML5 元素
- 採用響應式設計原則
- 清晰的 class 命名規則
- 註解說明 CSS 技術給學習者
### Python
- 遵守 PEP 8 風格指南
- 清楚且具教學性的程式碼範例
- 需要時使用型別提示以利學習
- 遵循 PEP 8 樣式指南
- 清晰且有教育意義的程式範例
- 在有助學習的地方使用型別提示
### Markdown 文件
### Markdown Documentation
- 清晰的標題階層
- 標明語言的程式區塊
- 連結至額外資源
- `images/` 資料夾的截圖與圖片
- 圖片具備替代文字以利無障礙
- 明確的標題階層
- 具語言宣告的程式碼區塊
- 連結到補充資源
- 在 `images/` 目錄包含截圖與圖片
- 圖片包含無障礙的替代文字
### 檔案組織
### File Organization
- 課程依序編號 (1-getting-started-lessons, 2-js-basics 等)
- 每個專案含有 `solution/`，通常有 `start/` 或 `your-work/`
- 圖片存放於課程專屬 `images/` 資料夾
- 翻譯存放於 `translations/{language-code}/` 結構
- 課程依序編號（1-getting-started-lessons、2-js-basics 等）
- 每個專案有 `solution/`，通常有 `start/` 或 `your-work/` 目錄
- 圖片儲存在特定課程的 `images/` 資料夾
- 翻譯在 `translations/{language-code}/` 結構中
## 建構與部署
## Build and Deployment
### 測驗應用程式部署（Azure Static Web Apps）
### Quiz App Deployment (Azure Static Web Apps)
quiz-app 已配置 Azure Static Web Apps 部署：
quiz-app 已配置為 Azure Static Web Apps 部署：
```bash
cd quiz-app
npm run build # 建立 dist/ 資料夾
# 在推送到 main 時，透過 GitHub Actions 工作流程部署
# 當推送到 main 分支時透過 GitHub Actions 工作流程進行部署
```
Azure Static Web Apps 配置：
@ -193,90 +193,90 @@ Azure Static Web Apps 配置：
- <strong>輸出位置</strong>：`dist`
- <strong>工作流程</strong>：`.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### 文件 PDF 產生
### Documentation PDF Generation
```bash
npm install # 安裝 docsify-to-pdf
npm run convert # 從 docs 生成 PDF
```
### Docsify 文件
### Docsify Documentation
```bash
npm install -g docsify-cli # 全域安裝 Docsify
npm install -g docsify-cli # 全局安裝 Docsify
docsify serve # 在 localhost:3000 提供服務
```
### 專案專屬建構
### Project-specific Builds
每個專案目錄可能有自己的建構流程：
- Vue 專案：`npm run build` 建置正式包
每個專案目錄可能有獨立建置流程：
- Vue 專案：使用 `npm run build` 產生正式包
- 靜態專案：無建置步驟，直接提供檔案服務
## Pull Request 指南
## Pull Request Guidelines
### 標題格式
### Title Format
使用清晰且描述性標題顯示修改範圍：
- `[Quiz-app] 新增第 X 課測驗`
- `[Lesson-3] 修正生態球專案拼寫錯誤`
使用清晰描述變更領域的標題：
- `[Quiz-app] 新增第 X 課的測驗`
- `[Lesson-3] 修正溫室生態箱專案的錯字`
- `[Translation] 新增第 5 課西班牙語翻譯`
- `[Docs] 更新設定指示`
- `[Docs] 更新設置說明`
### 必要檢查事項
### Required Checks
在提交 PR 前：
提交 PR 前：
1. <strong>程式碼品質</strong>：
- 在受影響專案目錄執行 `npm run lint`
- 修正所有 lint 錯誤及警告
- 在受影響的專案目錄執行 `npm run lint`
- 修復所有錯誤與警告
2. <strong>建構驗證</strong>：
- 執行 `npm run build`（若適用）
- 確保無建構錯誤
2. <strong>建置驗證</strong>：
- 如適用執行 `npm run build`
- 確保無建置錯誤
3. <strong>連結驗證</strong>：
3. <strong>連結檢查</strong>：
- 測試所有 Markdown 連結
- 確認圖片參考可用
- 確認圖片引用正確
4. <strong>內容審查</strong>：
- 校對拼字與語法
- 確認程式碼範例正確且具教學意義
- 確保翻譯保持原意
4. <strong>內容審核</strong>：
- 校對拼字與文法
- 確保程式範例正確且具教育意義
- 確認翻譯保持原意
### 貢獻要求
### Contribution Requirements
- 同意 Microsoft CLA（首次 PR 自動檢查）
- 遵從 [Microsoft 開源行為守則](https://opensource.microsoft.com/codeofconduct/)
- 詳細指南見 [CONTRIBUTING.md](./CONTRIBUTING.md)
- PR 描述中引用相關 issue 編號（如適用）
- 同意 Microsoft CLA（首次 PR 有自動檢查）
- 遵守 [Microsoft 開源行為守則](https://opensource.microsoft.com/codeofconduct/)
- 參考 [CONTRIBUTING.md](./CONTRIBUTING.md) 詳細指引
- 如適用，在 PR 描述中引用 Issue 編號
### 審查流程
### Review Process
- PR 由維護者及社群共同審查
- PR 由維護者與社群審核
- 優先考量教育清晰度
- 範例程式要遵循當前最佳實務
- 翻譯須審核準確性及文化適切性
- 程式範例需遵循最新最佳實務
- 翻譯會審核準確性與文化適切性
## 翻譯系統
## Translation System
### 自動翻譯
### Automated Translation
- 使用 GitHub Actions 與 co-op-translator 工作流程
- 自動翻譯成 50 多種語言
- 原文檔案在主目錄
- 翻譯檔案存放於 `translations/{language-code}/` 目錄
- 自動翻譯至 50 多種語言
- 原始檔在主要目錄
- 翻譯檔位於 `translations/{language-code}/` 目錄
### 手動翻譯改進
### Adding Manual Translation Improvements
1. 定位檔案於 `translations/{language-code}/`
2. 在保留結構的情況下進行改進
3. 確保程式碼範例繼續可運作
4. 測試任何本地化的測驗內容
1. 找到 `translations/{language-code}/` 中的檔案
2. 在保持結構下進行修正
3. 確保程式碼範例依然可用
4. 測試本地化的測驗內容
### 翻譯元資料
### Translation Metadata
翻譯檔包含元資料標頭：
翻譯檔案包含 metadata 標頭：
```markdown
<!--
CO_OP_TRANSLATOR_METADATA:
@ -289,120 +289,120 @@ CO_OP_TRANSLATOR_METADATA:
-->
```
## 除錯與故障排除
## Debugging and Troubleshooting
### 常見問題
### Common Issues
<strong>測驗應用無法啟動</strong>：
**Quiz app 啟動失敗**：
- 檢查 Node.js 版本（建議 v14+）
- 刪除 `node_modules` 與 `package-lock.json`，重新執行 `npm install`
- 檢查埠號衝突（預設 Vite 使用 5173 埠）
- 刪除 `node_modules` 和 `package-lock.json`，重新執行 `npm install`
- 檢查埠號衝突（預設：Vite 使用埠 5173）
**API 伺服器無法啟動**：
- 確認 Node.js 版本符合最低要求 (node >=10)
- 檢查埠號是否已被使用
- 確認所有依賴已安裝（`npm install`）
- 確認 Node.js 版本符合最低需求（node >=10）
- 檢查埠號是否被佔用
- 確保所有相依套件已用 `npm install` 安裝
<strong>瀏覽器擴充功能無法載入</strong>：
- 確認 manifest.json 格式正確
- 查看瀏覽器主控台錯誤訊息
- 遵循瀏覽器專屬擴充功能安裝指示
- 檢查瀏覽器控制台錯誤
- 按瀏覽器特定擴充安裝說明操作
**Python 聊天專案問題**：
- 確認已安裝 OpenAI 套件：`pip install openai`
- 確認 GITHUB_TOKEN 環境變數已設定
- 檢查 GitHub Models 存取權限
- 稽核 GitHub Models 權限是否正常
**Docsify 未提供文件服務**：
**Docsify 不能提供文件服務**：
- 全域安裝 docsify-cli：`npm install -g docsify-cli`
- 從資源庫根目錄執行
- 確認 `docs/_sidebar.md` 已存在
- 從儲存庫根目錄執行
- 確認 `docs/_sidebar.md` 存在
### 開發環境提示
### Development Environment Tips
- 使用 VS Code 及 Live Server 擴充功能瀏覽 HTML 專案
- 安裝 ESLint 與 Prettier 擴充以統一格式
- 使用瀏覽器開發者工具偵錯 JavaScript
- Vue 專案安裝 Vue DevTools 瀏覽器擴充功能
- 使用 VS Code 並安裝 Live Server 外掛來服務 HTML 專案
- 安裝 ESLint 與 Prettier 擴充以保持格式一致
- 使用瀏覽器 DevTools 除錯 JavaScript
- Vue 專案安裝 Vue DevTools 瀏覽器擴充
### 性能考量
### Performance Considerations
- 多達 50+ 種語言翻譯檔數量多，完整 clone 體積大
- 僅操作內容時可使用淺層 clone：`git clone --depth 1`
- 作英文內容時可排除搜尋翻譯檔
- 首次執行建構較慢（npm install、Vite build）
- 大量翻譯檔案（50+ 語言），完整 clone 容量龐大
- 若僅處理內容，使用淺層 clone：`git clone --depth 1`
- 工作英文內容時，排除翻譯目錄搜尋
- 第一次運行建置可能較慢（npm install、Vite build）
## 安全考量
## Security Considerations
### 環境變數
### Environment Variables
- API 金鑰絕不可提交到資源庫
- 使用 `.env` 檔案（已加入 `.gitignore`）
- 專案 README 有文件說明所需環境變數
- API 金鑰絕不可提交到儲存庫
- 使用 `.env` 檔（已加到 `.gitignore`）
- 在專案 README 文件中記錄所需環境變數
### Python 專案
### Python Projects
- 使用虛擬環境：`python -m venv venv`
- 維持依賴套件更新
- GitHub Token 需具最低必要權限
- 維持相依套件更新
- GitHub 令牌需具最小必要權限
### GitHub Models 存取
### GitHub Models Access
- 需要個人存取權杖（PAT）存取 GitHub Models
- 權杖以環境變數儲存
- 絕不可將權杖或憑證提交
- 使用個人存取權杖 (PAT) 存取 GitHub Models
- 將令牌存於環境變數
- 絕不可提交令牌或認證資料
## 補充說明
## Additional Notes
### 目標對象
### Target Audience
- 完全的網頁開發初學者
- 學生與自學者
- 在教室使用此課程的教師
- 內容設計注重無障礙及循序漸進技能建立
- 完全沒有經驗的網頁開發入門者
- 學生及自學者
- 在課堂使用本課程的教師
- 內容設計考量無障礙與逐步技能培養
### 教育理念
### Educational Philosophy
- 專案導向學習
- 採用專案導向學習方法
- 頻繁知識檢核（測驗）
- 實作程式練習
- 真實世界應用範例
- 先掌握基礎，再談框架
- 先打好基礎再談框架
### 資源庫維護
### Repository Maintenance
- 活躍的學習者與貢獻者社群
- 依賴與內容定期更新
- 維護者監控 issues 與討論
- 使用 GitHub Actions 自動翻譯更新
- 積極活躍的學習與貢獻社群
- 定期更新相依套件與內容
- 維護者監控 Issues 與討論
- 翻譯更新由 GitHub Actions 自動化
### 相關資源
### Related Resources
- [Microsoft Learn 課程模組](https://docs.microsoft.com/learn/)
- [Microsoft Learn 模組](https://docs.microsoft.com/learn/)
- [學生中心資源](https://docs.microsoft.com/learn/student-hub/)
- 推薦學習者使用 [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot)
- 其他課程：生成式 AI、資料科學、機器學習、物聯網課程可用
- 建議學習者使用 [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot)
- 其他課程：生成式 AI、資料科學、機器學習、物聯網課程
### 操作特定專案
### Working with Specific Projects
詳細說明請參考以下專案 README：
- `quiz-app/README.md` - Vue 3 測驗應用
詳見各專案 README 指引：
- `quiz-app/README.md` - Vue 3 測驗應用程式
- `7-bank-project/README.md` - 含身份驗證銀行應用
- `5-browser-extension/README.md` - 瀏覽器擴充功能開發
- `6-space-game/README.md` - 基於 Canvas 的遊戲開發
- `9-chat-project/README.md` - AI 聊天助手專案
- `6-space-game/README.md` - Canvas 遊戲開發
- `9-chat-project/README.md` - AI 聊天助理專案
### Monorepo 架構
### Monorepo Structure
雖非傳統 monorepo，但此資源庫包含多個獨立專案：
- 每堂課程皆自成一格
- 專案間未共用依賴
- 可單獨開發專案，不影響其他專案
- 可整體 clone 以體驗完整課程
雖非傳統 monorepo，本儲存庫包含多個獨立專案：
- 每個課程自包含
- 專案彼此不共享相依
- 專注個別專案開發不影響其他專案
- 全部課程體驗可複製整個儲存庫
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免責聲明**：
本文件透過 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 翻譯。雖然我們致力於保持準確性，但請注意自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應視為權威來源。對於重要資訊，建議使用專業人類翻譯。對於因使用此翻譯而引起的任何誤解或誤譯，我們概不負責。
此文件是使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們致力於翻譯的準確性，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件的原文版本應被視為權威來源。對於重要資訊，建議進行專業人工翻譯。我們不對因使用此翻譯而產生的任何誤解或誤釋負責。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

209
translations/zh-HK/README.md
Unescape View File

@ -10,29 +10,29 @@
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
# 初學者網頁開發課程大綱
# 初學者網頁開發課程
由 Microsoft Cloud Advocates 提供的 12 週全面課程，讓你學習網頁開發基礎。24 堂課程深入介紹 JavaScript、CSS 與 HTML，並透過製作生態瓶、瀏覽器擴充功能和太空遊戲等實作專案學習。參與小測驗、討論和實務作業。利用我們有效的專案導向教學法，提升技能並優化知識吸收。立即開始你的程式編寫之旅！
與微軟雲端推廣者一起學習網頁開發的基礎知識，參加我們為期 12 週的完整課程。24 堂課涵蓋 JavaScript、CSS 和 HTML，透過動手實作的專案，如玻璃庭園、瀏覽器擴充功能及太空遊戲。參與小測驗、討論與實務作業。利用我們有效的專案式教學，提升你的技能及加強知識吸收。今天就開始你的程式設計之旅吧！
加入 Azure AI Foundry Discord 社群
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
開始使用這些資源請依照以下步驟：
1. **Fork 這個專案庫**：按此[![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Clone 這個專案庫**： `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**加入 Azure AI Foundry Discord，與專家和其他開發者交流**](https://discord.com/invite/ByRwuEEgH4)
按照以下步驟使用這些資源開始你的學習：
1. <strong>分叉這個倉庫</strong>：按一下[![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. <strong>克隆倉庫</strong>： `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**加入 Azure AI Foundry Discord，結識專家與開發者夥伴**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 多語言支援
#### 透過 GitHub Action 支援（自動且持續更新）
#### 透過 GitHub Action 支援（自動且隨時更新）
<!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->
[阿拉伯語](../ar/README.md) | [孟加拉語](../bn/README.md) | [保加利亞語](../bg/README.md) | [緬甸語](../my/README.md) | [中文（簡體）](../zh-CN/README.md) | [中文（繁體，香港）](./README.md) | [中文（繁體，澳門）](../zh-MO/README.md) | [中文（繁體，台灣）](../zh-TW/README.md) | [克羅地亞語](../hr/README.md) | [捷克語](../cs/README.md) | [丹麥語](../da/README.md) | [荷蘭語](../nl/README.md) | [愛沙尼亞語](../et/README.md) | [芬蘭語](../fi/README.md) | [法語](../fr/README.md) | [德語](../de/README.md) | [希臘語](../el/README.md) | [希伯來語](../he/README.md) | [印地語](../hi/README.md) | [匈牙利語](../hu/README.md) | [印尼語](../id/README.md) | [義大利語](../it/README.md) | [日語](../ja/README.md) | [坎納達語](../kn/README.md) | [韓語](../ko/README.md) | [立陶宛語](../lt/README.md) | [馬來語](../ms/README.md) | [馬拉雅拉姆語](../ml/README.md) | [馬拉地語](../mr/README.md) | [尼泊爾語](../ne/README.md) | [奈及利亞皮欽語](../pcm/README.md) | [挪威語](../no/README.md) | [波斯語（法爾西語）](../fa/README.md) | [波蘭語](../pl/README.md) | [葡萄牙語（巴西）](../pt-BR/README.md) | [葡萄牙語（葡萄牙）](../pt-PT/README.md) | [旁遮普語（古魯穆奇）](../pa/README.md) | [羅馬尼亞語](../ro/README.md) | [俄語](../ru/README.md) | [塞爾維亞語（西里爾文）](../sr/README.md) | [斯洛伐克語](../sk/README.md) | [斯洛文尼亞語](../sl/README.md) | [西班牙語](../es/README.md) | [斯瓦希里語](../sw/README.md) | [瑞典語](../sv/README.md) | [他加祿語（菲律賓語）](../tl/README.md) | [泰米爾語](../ta/README.md) | [泰盧固語](../te/README.md) | [泰語](../th/README.md) | [土耳其語](../tr/README.md) | [烏克蘭語](../uk/README.md) | [烏爾都語](../ur/README.md) | [越南語](../vi/README.md)
[阿拉伯文](../ar/README.md) | [孟加拉文](../bn/README.md) | [保加利亞文](../bg/README.md) | [緬甸文](../my/README.md) | [中文 (簡體)](../zh-CN/README.md) | [中文 (繁體，香港)](./README.md) | [中文 (繁體，澳門)](../zh-MO/README.md) | [中文 (繁體，台灣)](../zh-TW/README.md) | [克羅地亞文](../hr/README.md) | [捷克文](../cs/README.md) | [丹麥文](../da/README.md) | [荷蘭文](../nl/README.md) | [愛沙尼亞文](../et/README.md) | [芬蘭文](../fi/README.md) | [法文](../fr/README.md) | [德文](../de/README.md) | [希臘文](../el/README.md) | [希伯來文](../he/README.md) | [印地文](../hi/README.md) | [匈牙利文](../hu/README.md) | [印尼文](../id/README.md) | [義大利文](../it/README.md) | [日文](../ja/README.md) | [坎那達文](../kn/README.md) | [高棉文](../km/README.md) | [韓文](../ko/README.md) | [立陶宛文](../lt/README.md) | [馬來文](../ms/README.md) | [馬拉雅拉姆文](../ml/README.md) | [馬拉地文](../mr/README.md) | [尼泊爾文](../ne/README.md) | [尼日利亞皮欽語](../pcm/README.md) | [挪威文](../no/README.md) | [波斯文 (法爾西)](../fa/README.md) | [波蘭文](../pl/README.md) | [葡萄牙文 (巴西)](../pt-BR/README.md) | [葡萄牙文 (葡萄牙)](../pt-PT/README.md) | [旁遮普文 (古魯穆奇)](../pa/README.md) | [羅馬尼亞文](../ro/README.md) | [俄文](../ru/README.md) | [塞爾維亞文 (西里爾)](../sr/README.md) | [斯洛伐克文](../sk/README.md) | [斯洛維尼亞文](../sl/README.md) | [西班牙文](../es/README.md) | [斯瓦希里文](../sw/README.md) | [瑞典文](../sv/README.md) | [他加祿文 (菲律賓語)](../tl/README.md) | [泰米爾文](../ta/README.md) | [泰盧固文](../te/README.md) | [泰文](../th/README.md) | [土耳其文](../tr/README.md) | [烏克蘭文](../uk/README.md) | [烏爾都文](../ur/README.md) | [越南文](../vi/README.md)
> **想本地端 Clone？**
> **較喜歡本地端克隆嗎？**
>
> 本專案包含 50 多種語言翻譯，會大幅增加下載大小。若想不包含翻譯檔，請使用稀疏取出（sparse checkout）：
> 此倉庫包含 50+ 種語言的翻譯，會顯著增加下載大小。若想要不含翻譯版，請使用稀疏檢出：
>
> **Bash / macOS / Linux:**
> ```bash
@ -41,178 +41,179 @@
> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'
> ```
>
> **CMD（Windows）:**
> **CMD (Windows):**
> ```cmd
> 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"
> ```
>
> 這樣可以讓你更快完成下載，同時獲得完成課程所需的所有資源。
> 這樣會讓你以更快的速度下載所有完成課程所需的內容。
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**若您希望支持其他翻譯語言，請參閱 [此處](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**若你希望支援更多翻譯語言，請參考[此處](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑‍🎓 _你是學生嗎？_
請造訪 [**學生中心頁面**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon)，這裡有初學者資源、學生套件，甚至還有免費證書券的取得方式。這頁建議你加入書籤，並經常回來查看，因為內容會每月更新。
請造訪[<strong>學生中心頁面</strong>](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon)，這裡有初學者資源、學生套件，甚至免費證書兌換券的方式。這個頁面值得你加入書籤並定期查看，因為我們每個月都會更新內容。
### 📣 公告 - 全新 GitHub Copilot Agent 模式挑戰等你來完成！
### 📣 新通知 - 新增 GitHub Copilot Agent 模式的挑戰任務！
新增挑戰，請在大多數章節中尋找「GitHub Copilot Agent Challenge 🚀」。這是一項使用 GitHub Copilot 及 Agent 模式的新挑戰。如果你以前沒用過 Agent 模式，它不只會產生文字，還能建立與編輯檔案、執行命令等。
新增挑戰，請在大部分章節尋找 “GitHub Copilot Agent Challenge 🚀” 。這是運用 GitHub Copilot 及 Agent 模式完成的新挑戰。如果你之前沒使用過 Agent 模式，它不只會生成文字，還能建立與編輯檔案、執行指令等等。
### 📣 公告 - _使用生成式 AI 建置的新專案_
### 📣 新通知 - _新增使用生成式 AI 的專案_
新增 AI 助手專案，詳情請查看 [專案](./9-chat-project/README.md)
剛新增 AI 助手專案，快來查看[專案](./9-chat-project/README.md)
### 📣 公告 - _剛發布的 JavaScript 生成式 AI 新課程_
### 📣 新通知 - _針對 JavaScript 發布的生成式 AI 新課程_
別錯過我們的生成式 AI 新課程！
千萬別錯過我們的生成式 AI 新課程！
造訪 [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) 開始！
請訪問 [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) 開始！
![Background](../../translated_images/zh-HK/background.148a8d43afde5730.webp)
- 課程涵蓋基礎到檢索增強生成（RAG）。
- 利用生成式 AI 和我們的配套應用與歷史人物互動。
- 趣味且引人入勝的敘事，帶你穿越時空！
- 課程涵蓋從基礎到 RAG。
- 使用生成式 AI 和配套應用程式與歷史人物互動。
- 有趣且吸引人的劇情，你將展開時光旅行！
![character](../../translated_images/zh-HK/character.5c0dd8e067ffd693.webp)
每堂課包含作業、知識檢測和挑戰，指導你學習如下主題：
- 提示及提示工程
- 文字與圖片應用生成
- 搜尋應用
每堂課都包含作業、知識檢測和挑戰，引導你學習以下主題：
- 提示與提示工程
- 文字及影像應用程式生成
- 搜索應用程式
造訪 [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) 開始！
請訪問 [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) 開始！
## 🌱 開始之前
> <strong>老師們</strong>，我們已在 [included some suggestions](for-teachers.md) 提供一些使用此課程的建議。我們也歡迎你在[討論區](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)留下回饋！
## 🌱 開始學習
**[學員們](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**，每堂課請先從課前測驗開始，接著閱讀講義內容，完成各種活動，並透過課後測驗檢查理解。
> **教師們**，我們提供了[一些建議](for-teachers.md)教你如何使用本課程。歡迎到[討論區](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)分享你的回饋！
為了提升學習效果，建議與同儕一起合作完成專案！鼓勵在我們的[討論區](https://github.com/microsoft/Web-Dev-For-Beginners/discussions)進行交流，我們的管理團隊會隨時回答你的問題。
**[學習者](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**，每堂課從課前小測開始，接著閱讀課程教材，完成各項活動，並通過課後小測檢查理解。
若要更深入學習，強烈建議探索 [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) 取得更多學習資源。
為了提升學習效果，建議你與同儕共同協作完成專案！鼓勵在[討論區](https://github.com/microsoft/Web-Dev-For-Beginners/discussions)交流，我們的版主團隊會在線上解答你的問題。
### 📋 設置你的開發環境
想更進一步學習，強力推薦你探訪 [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) 獲取更多學習資源。
此課程已準備好開發環境！開始時你可以選擇在[Codespace](https://github.com/features/codespaces/)（瀏覽器環境，無需安裝）執行課程，或在電腦本機使用文字編輯器，例如 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)。
### 📋 環境設定
#### 建立你的倉庫
為方便保存作品，建議你建立自己的此倉庫副本。點擊頁頂的 **Use this template** 按鈕，即可在你的 GitHub 帳戶建立新倉庫並複製課程內容。
本課程已備好開發環境！起步時，你可以選擇在 [Codespace](https://github.com/features/codespaces/)（瀏覽器執行、免安裝環境）或使用像是 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 的文字編輯器在本地電腦執行課程。
#### 建立你的專案庫
為方便儲存工作，建議你建立本專案庫的複本。你可點選本頁最上方的 **Use this template** 按鈕，於 GitHub 帳號建立複本。
請按照步驟操作：
1. **Fork 專案庫**：點擊本頁右上角的「Fork」按鈕。
2. **Clone 專案庫**： `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
請依序執行：
1. <strong>分叉倉庫</strong>：點擊本頁右上角的 “Fork” 按鈕。
2. <strong>克隆倉庫</strong>： `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### 在 Codespace 執行課程
在你建立的這個複本中，點 **Code** 按鈕並選擇 **Open with Codespaces**。系統會為你建立新的 Codespace 供你使用。
在你建立的倉庫副本中，點擊 **Code** 按鈕，選擇 **Open with Codespaces**。這會建立一個新的 Codespace 讓你使用。
![Codespace](../../translated_images/zh-HK/createcodespace.0238bbf4d7a8d955.webp)
#### 在本地電腦執行課程
#### 在本機電腦執行課程
要在本地電腦執行本課程，你需要文字編輯器、瀏覽器及終端機工具。我們的第一堂課，[程式語言及工具介紹](../../1-getting-started-lessons/1-intro-to-programming-languages)，會帶你了解各種工具選項，幫助你選擇最合適的環境。
想在本機執行此課程，需要一個文字編輯器、瀏覽器與命令列工具。第一課 [程式語言與工具介紹](../../1-getting-started-lessons/1-intro-to-programming-languages) 會帶你了解各種工具選項，幫你挑選合適的開發環境。
我們推薦使用 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 作為編輯器，它內建有 [終端機](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)。你可以從[這裡下載](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) Visual Studio Code。
1. 將你的版本庫複製到你的電腦。你可以點擊 **Code** 按鈕並複製 URL：
我們推薦使用 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 作為編輯器，它還內建了[終端機](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)。你可以從[這裡](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)下載 Visual Studio Code。
1. 將您的倉庫克隆到您的電腦。您可以點擊 **Code** 按鈕並複製 URL：
[CodeSpace](./images/createcodespace.png)
然後，在 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 中打開 [終端機](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)，並運行以下命令，將 `<your-repository-url>` 替換為你剛剛複製的 URL：
然後，在 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 中打開 [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)，並運行以下命令，將 `<your-repository-url>` 替換為剛才複製的 URL：
```bash
git clone <your-repository-url>
```
2. 在 Visual Studio Code 中打開資料夾。你可以透過點擊 **File** > **Open Folder** 並選擇你剛複製的資料夾來完成。
2. 在 Visual Studio Code 中打開該資料夾。您可以點擊 **File** > **Open Folder** 並選擇剛才克隆的資料夾。
> 推薦的 Visual Studio Code 擴充套件：
> 推薦的 Visual Studio Code 擴展：
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - 在 Visual Studio Code 內預覽 HTML 頁面
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - 幫助你更快編寫程式碼
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - 在 Visual Studio Code 中預覽 HTML 頁面
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - 幫助您更快編寫代碼
## 📂 每堂課包含：
## 📂 每一課包含：
- 可選的速寫筆記
- 可選的補充影片
- 課前暖身小測驗
- 選擇性手繪筆記
- 選擇性補充視頻
- 課前熱身小測驗
- 書面課程內容
- 對於專案導向課程，提供如何構建專案的逐步指南
- 對於基於專案的課程，有逐步指導如何構建專案
- 知識檢測
- 挑戰題
- 補充閱讀材料
- 一個挑戰
- 補充閱讀
- 作業
- [課後測驗](https://ff-quizzes.netlify.app/web/)
> **關於測驗的小提示**：所有測驗皆包含在 Quiz-app 資料夾中，共有 48 個測驗，每個測驗包含三題問題。它們可在 [這裡](https://ff-quizzes.netlify.app/web/) 使用，該測驗應用程式可以本地執行或部署到 Azure；請參考 `quiz-app` 資料夾中的說明。
> <strong>關於測驗的小提示</strong>：所有測驗均包含在 Quiz-app 資料夾中，共 48 個測驗，每個測驗包含三個問題。它們可在[這裡](https://ff-quizzes.netlify.app/web/)使用，測驗應用程式可以本地運行或部署至 Azure；請遵循 `quiz-app` 資料夾中的指示。
## 🗃️ 課程列表
| | 專案名稱 | 教授概念 | 學習目標 | 相關課程 | 作者 |
| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 01 | 入門篇 | 程式設計簡介與開發工具 | 了解大多數程式語言的基本原理及協助專業開發者工作的軟體工具 | [程式語言與開發工具簡介](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | 入門篇 | GitHub 基礎，包括團隊協作 | 如何在專案中使用 GitHub 以及如何與他人協作代碼 | [GitHub 簡介](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | 入門篇 | 無障礙設計 | 了解網頁無障礙性的基礎 | [無障礙設計基礎](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS 基礎 | JavaScript 資料型別 | JavaScript 資料型別基礎 | [資料型別](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS 基礎 | 函式與方法 | 了解函式與方法如何管理應用程式邏輯流 | [函式與方法](./2-js-basics/2-functions-methods/README.md) | Jasmine 和 Christopher |
| 06 | JS 基礎 | 使用 JS 作決策 | 了解如何使用決策方式在程式碼中創建條件 | [決策制定](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS 基礎 | 陣列與迴圈 | 使用 JavaScript 陣列和迴圈處理資料 | [陣列與迴圈](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [微型生態箱](./3-terrarium/solution/README.md) | HTML 實務 | 建立 HTML 結構以創建線上微型生態箱，重點在佈局建立 | [HTML 入門](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [微型生態箱](./3-terrarium/solution/README.md) | CSS 實務 | 建立 CSS 為線上微型生態箱添加樣式，重點在 CSS 基礎及響應式設計 | [CSS 入門](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [微型生態箱](./3-terrarium/solution/README.md) | JavaScript 閉包、DOM 操作 | 編寫 JavaScript 來讓微型生態箱具備拖放功能，重點在閉包與 DOM 操作 | [JavaScript 閉包與 DOM 操作](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [打字遊戲](./4-typing-game/solution/README.md) | 建立打字遊戲 | 了解如何使用鍵盤事件控制 JavaScript 應用邏輯 | [事件驅動程式設計](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [綠色瀏覽器擴充](./5-browser-extension/solution/README.md) | 瀏覽器工作原理 | 了解瀏覽器的工作方式和歷史以及如何架構瀏覽器擴充的第一個元素 | [瀏覽器介紹](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [綠色瀏覽器擴充](./5-browser-extension/solution/README.md) | 建立表單、調用 API 及本地存儲變數 | 建立瀏覽器擴充的 JavaScript 元素以透過儲存在本地的變數調用 API | [API、表單與本地儲存](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [綠色瀏覽器擴充](./5-browser-extension/solution/README.md) | 瀏覽器背景程序與網頁效能 | 使用瀏覽器背景程序管理擴充圖示；了解網頁效能以及一些優化方式 | [背景工作與效能](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [太空遊戲](./6-space-game/solution/README.md) | 更進階的 JavaScript 遊戲開發 | 了解類別繼承與組合及發布/訂閱模式，為製作遊戲做準備 | [進階遊戲開發入門](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [太空遊戲](./6-space-game/solution/README.md) | Canvas 繪圖 | 了解 Canvas API，利用它將元素繪製到畫面上 | [Canvas 繪圖](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [太空遊戲](./6-space-game/solution/README.md) | 螢幕上移動元素 | 探索如何使用笛卡兒座標系和 Canvas API 讓元素產生運動 | [元素移動](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [太空遊戲](./6-space-game/solution/README.md) | 碰撞偵測 | 讓元素相互碰撞並對彼此作出反應，利用按鍵提供冷卻功能以確保遊戲效能 | [碰撞偵測](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [太空遊戲](./6-space-game/solution/README.md) | 計分 | 根據遊戲狀態與表現進行數學計算 | [計分系統](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [太空遊戲](./6-space-game/solution/README.md) | 結束與重啟遊戲 | 了解結束及重新開始遊戲，包括資源清理及變數重設 | [結束條件](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [銀行應用程式](./7-bank-project/solution/README.md) | Web 應用程式的 HTML 模板與路由 | 了解如何使用路由與 HTML 模板建立多頁網站架構 | [HTML 模板與路由](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [銀行應用程式](./7-bank-project/solution/README.md) | 建立登入與註冊表單 | 了解表單建立與驗證流程 | [表單](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [銀行應用程式](./7-bank-project/solution/README.md) | 取得與使用資料的方法 | 了解資料在應用程式中的流向、取得、儲存與釋放 | [資料](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [銀行應用程式](./7-bank-project/solution/README.md) | 狀態管理概念 | 了解應用程式如何維持狀態，以及如何以程式方式管理 | [狀態管理](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [瀏覽器/VScode 程式碼](../../8-code-editor) | 使用 VScode | 了解如何使用程式碼編輯器 | [使用 VScode 程式碼編輯器](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI 助手](./9-chat-project/README.md) | 使用 AI | 了解如何建立你自己的 AI 助手 | [AI 助手專案](./9-chat-project/README.md) | Chris |
| 01 | 入門篇 | 程式設計介紹與開發工具 | 學習大多數程式語言的基本基礎以及幫助專業開發者工作的軟件工具 | [程式語言與開發工具簡介](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | 入門篇 | GitHub 基礎與團隊協作 | 如何在專案中使用 GitHub，如何與他人協作管理代碼 | [GitHub 入門](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | 入門篇 | 無障礙設計 | 學習網頁無障礙設計的基礎 | [無障礙設計基礎](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS 基礎 | JavaScript 資料型別 | JavaScript 資料型別的基礎 | [資料型別](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS 基礎 | 函數與方法 | 學習使用函數和方法管理應用程式的邏輯流程 | [函數與方法](./2-js-basics/2-functions-methods/README.md) | Jasmine 和 Christopher |
| 06 | JS 基礎 | 使用 JS 做決策 | 學習如何使用決策結構在程式中建立條件 | [決策制定](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS 基礎 | 陣列與迴圈 | 使用 JavaScript 陣列與迴圈操作資料 | [陣列與迴圈](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML 實作 | 建立 HTML 來創建線上生態瓶，重點是建立布局 | [HTML 入門](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS 實作 | 建立 CSS 來為線上生態瓶設計樣式，重點是 CSS 基礎及響應式設計 | [CSS 入門](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript 閉包與 DOM 操作 | 編寫 JavaScript 使生態瓶具備拖放功能，著重於閉包與 DOM 操作 | [JavaScript 閉包與 DOM 操作](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [打字遊戲](./4-typing-game/solution/README.md) | 製作一個打字遊戲 | 學習使用鍵盤事件驅動 JavaScript 應用邏輯 | [事件驅動程式設計](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [綠色瀏覽器擴展](./5-browser-extension/solution/README.md) | 瀏覽器運作 | 了解瀏覽器運作原理、歷史及構建首個瀏覽器擴展元素 | [關於瀏覽器](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [綠色瀏覽器擴展](./5-browser-extension/solution/README.md) | 建立表單、調用 API 及本地存儲變數 | 編寫瀏覽器擴展的 JavaScript 元素，使用本地存儲變數調用 API | [API、表單與本地存儲](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [綠色瀏覽器擴展](./5-browser-extension/solution/README.md) | 瀏覽器背景進程與網頁效能 | 使用瀏覽器背景進程管理擴展圖標；學習網頁效能及優化技巧 | [背景任務與效能](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [太空遊戲](./6-space-game/solution/README.md) | 使用 JavaScript 進階遊戲開發 | 學習繼承（使用類和組合）與發布/訂閱模式，為構建遊戲做準備 | [進階遊戲開發簡介](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [太空遊戲](./6-space-game/solution/README.md) | 畫布繪圖 | 了解 Canvas API，用於在螢幕繪製元素 | [繪製到畫布](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [太空遊戲](./6-space-game/solution/README.md) | 元素移動 | 發現如何使用笛卡爾座標和 Canvas API 為元素賦予動態 | [移動元素](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [太空遊戲](./6-space-game/solution/README.md) | 碰撞偵測 | 使元素相互碰撞並反應，並使用冷卻時間功能確保遊戲效能 | [碰撞偵測](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [太空遊戲](./6-space-game/solution/README.md) | 計分 | 根據遊戲狀態和表現進行數學計算 | [計分](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [太空遊戲](./6-space-game/solution/README.md) | 結束與重新開始遊戲 | 瞭解結束與重新開始遊戲，包括資源清理和變數重置 | [結束條件](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [銀行應用程式](./7-bank-project/solution/README.md) | 網頁應用中的 HTML 範本與路由 | 學習如何使用路由和 HTML 範本架構多頁面網站 | [HTML 範本與路由](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [銀行應用程式](./7-bank-project/solution/README.md) | 建立登入與註冊表單 | 了解如何構建表單與處理驗證程序 | [表單](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [銀行應用程式](./7-bank-project/solution/README.md) | 取得與使用數據的方式 | 資料在應用程式中如何流動，如何取得、存儲及處理 | [數據](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [銀行應用程式](./7-bank-project/solution/README.md) | 狀態管理概念 | 學習您的應用如何保留狀態以及如何透過程式管理狀態 | [狀態管理](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | 使用 VScode | 學習如何使用程式碼編輯器 | [使用 VScode 編輯器](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI 助理](./9-chat-project/README.md) | 與 AI 合作 | 學習如何建立您的 AI 助理 | [AI 助理專案](./9-chat-project/README.md) | Chris |
## 🏫 教學法
我們的課程設計基於兩個主要的教學原則：
* 專案導向學習
* 頻繁的小測驗
我們的課程設計基於兩個主要教學原則：
* 專案式學習
* 頻繁測驗
課程教授 JavaScript、HTML 和 CSS 的基礎，以及當今網頁開發人員所用的最新工具與技術。學生將有機會透過構建打字遊戲、虛擬微型生態箱、環保瀏覽器擴充、太空侵略者風格遊戲及企業銀行應用程式等專案，獲得實作經驗。系列結束時，學生將建立紮實的網頁開發基礎。
該計劃教授 JavaScript、HTML 和 CSS 的基礎知識，以及當今網頁開發者使用的最新工具和技術。學生將有機會通過構建一個打字遊戲、虛擬生態瓶、環保瀏覽器擴展、太空入侵者風格遊戲和企業銀行應用程式來獲得實際操作經驗。系列結束時，學生將對網頁開發有堅實的理解。
> 🎓 你可以將此課程的前幾堂課作為 Microsoft Learn 上的 [學習路徑](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon)！
> 🎓 您可以先上本課程中幾個初級課程，作為 Microsoft Learn 上的 [學習路徑](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon)！
透過讓內容與專案結合，過程對學生更具吸引力，並增強概念的記憶。我們還撰寫了數堂 JavaScript 入門課程來介紹概念，並搭配了 "[JavaScript 初學者系列](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" 教學影片，其中部分作者也參與了本課程撰寫。
通過確保內容與專案一致，使學習過程更具吸引力並能增強概念記憶。我們還編寫了幾個 JavaScript 基礎入門課程，搭配來自 "[JavaScript 初學者系列](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" 影片教程集的一些視頻，該系列的部分作者也參與了本課程編寫。
此外，上課前的低壓力小測驗設定學生的學習目標，而課後的第二次小測驗則鞏固所學。本課程設計靈活且有趣，可整套選修或分段學習。專案從簡單開始，至 12 週結束時最新穎且越來越複雜。
此外，課前的低風險測驗設定學生的學習意圖，而課後的第二次測驗則確保進一步的記憶。本課程設計靈活且有趣，可以整體或部分學習。專案從簡單開始，並在 12 週的週期結束時變得越來越複雜。
雖然我們刻意避免引入 JavaScript 框架，以專注於成為網頁開發者所需的基本技能，但完成本課程後的良好下一步是透過另一系列影片學習 Node.js：「[Node.js 初學者系列](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)」。
儘管我們有意避免引入 JavaScript 框架，專注於在採用框架前培養作為網頁開發者所需的基本技能，完成本課程的下一個良好步驟是通過另一組視頻學習 Node.js：「[Node.js 初學者系列](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)」。
> 請參閱我們的 [行為守則](CODE_OF_CONDUCT.md) 和 [貢獻指南](CONTRIBUTING.md)。我們歡迎您的建設性反饋！
> 查看我們的 [行為守則](CODE_OF_CONDUCT.md) 與 [貢獻指南](CONTRIBUTING.md)。我們歡迎您的建設性回饋！
## 🧭 離線存取
你可以使用 [Docsify](https://docsify.js.org/#/) 離線瀏覽此文件。請將本倉庫分叉、在本機安裝 [Docsify](https://docsify.js.org/#/quickstart)，然後在本倉庫根目錄執行 `docsify serve`。網站將會在本地主機的 3000 埠口上啟動：`localhost:3000`。
您可以使用 [Docsify](https://docsify.js.org/#/) 離線瀏覽本文件。Fork 此倉庫，在您的本機安裝 [Docsify](https://docsify.js.org/#/quickstart)，然後在此倉庫的根目錄輸入 `docsify serve`。網站將在本地端口 3000 提供服務：`localhost:3000`。
## 📘 PDF
所有課程的 PDF 可於此處下載 [here](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf)。
所有課堂的 PDF 檔案可在 [此處](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) 下載。
## 🎒 其他課程
我們團隊還製作了其他課程！歡迎瀏覽：
我們團隊還製作了其他課程！請參考：
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
@ -256,21 +257,21 @@
## 尋求協助
如果你在構建 AI 應用時遇到困難或有任何問題，歡迎加入其他學習者及經驗豐富的開發者討論 MCP。這是一個支持性的社群，歡迎提問並自由分享知識。
如果你遇到困難或有任何關於構建 AI 應用程式的問題，歡迎加入和其他學習者與經驗豐富的開發者一起討論 MCP。這是一個支持性的社區，歡迎提出問題並自由分享知識。
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
如果你在開發過程中有產品反饋或錯誤，請訪問：
如果你在建置過程中有產品反饋或錯誤，請造訪：
[![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum)
## 授權
## 授權條款
此存儲庫採用 MIT 授權。詳情請參閱 [LICENSE](../../LICENSE) 文件。
本專案庫使用 MIT 授權條款。更多資訊請參閱 [LICENSE](../../LICENSE) 檔案。
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免責聲明**：
本文件是使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 翻譯而成。儘管我們努力確保準確性，但請注意自動翻譯可能包含錯誤或不準確之處。原文文件的母語版本應被視為權威來源。對於重要資訊，建議採用專業人工翻譯。我們不對因使用本翻譯而引致的任何誤解或誤釋承擔責任。
本文件是使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們致力於準確性，但請注意，自動翻譯可能包含錯誤或不準確之處。原文文件的母語版本應視為權威來源。對於重要資訊，建議聘請專業人工翻譯。我們不對因使用本翻譯而產生的任何誤解或誤釋負責。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

6
translations/zh-MO/.co-op-translator.json
Unescape View File

@ -493,7 +493,7 @@
},
"AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2026-03-27T22:45:59+00:00",
"translation_date": "2026-04-06T16:01:53+00:00",
"source_file": "AGENTS.md",
"language_code": "zh-MO"
},
@ -516,8 +516,8 @@
"language_code": "zh-MO"
},
"README.md": {
"original_hash": "a2c9eed480687319517c08a6319e5536",
"translation_date": "2026-03-06T17:49:29+00:00",
"original_hash": "b885c87c7544109b78d6684daad6cba6",
"translation_date": "2026-04-06T15:56:13+00:00",
"source_file": "README.md",
"language_code": "zh-MO"
},

414
translations/zh-MO/AGENTS.md
Unescape View File

@ -1,62 +1,62 @@
# AGENTS.md
## 項目概述
## 項目概覽
這是一個教育課程存儲庫，旨在向初學者教授網頁開發基礎知識。該課程由微軟雲端推廣者開發，為期12週，包含24個實作課程，涵蓋JavaScript、CSS和HTML。
這是一個用於教導初學者網頁開發基礎的教育課程庫。該課程為一個由 Microsoft Cloud Advocates 開發的全面12週課程，包含24個涵蓋 JavaScript、CSS 和 HTML 的實作課程。
### 主要組件
### 主要組成部分
- <strong>教育內容</strong>：24個結構化課程，分為基於項目的模組
- <strong>實踐項目</strong>：生態瓶、打字遊戲、瀏覽器擴展、太空遊戲、銀行應用、代碼編輯器及AI聊天助理
- <strong>互動測驗</strong>：48個測驗，每個包含3個問題（課前/課後評估）
- <strong>多語言支援</strong>：透過GitHub Actions自動翻譯超過50種語言
- <strong>技術棧</strong>：HTML、CSS、JavaScript、Vue.js 3、Vite、Node.js、Express、Python（用於AI項目）
- <strong>教育內容</strong>：24堂結構化課程，組織成以項目為基礎的模塊
- <strong>實作項目</strong>：植物生態瓶、打字遊戲、瀏覽器擴充功能、太空遊戲、銀行應用程式、程式碼編輯器及 AI 聊天助理
- <strong>互動測驗</strong>：48個測驗，每個測驗有3題（課前/課後評估）
- <strong>多語言支援</strong>：透過 GitHub Actions 自動翻譯超過50種語言
- <strong>技術棧</strong>：HTML、CSS、JavaScript、Vue.js 3、Vite、Node.js、Express、Python（AI 項目用）
### 架構
- 教育存儲庫，採用課程為基礎的結構
- 每個課程資料夾包含README、代碼範例和解決方案
- 獨立項目位於不同目錄（quiz-app，各種課程項目）
- 使用GitHub Actions（co-op-translator）進行翻譯系統
- 通過Docsify提供文件服務，並可生成PDF版本
- 以課程為基礎結構的教學倉庫
- 各課程資料夾包含 README、程式碼範例及解決方案
- 獨立項目位於不同目錄（quiz-app、各種課程項目）
- 使用 GitHub Actions 的翻譯系統（co-op-translator）
- 文件以 Docsify 提供，亦可下載 PDF
## 設置命令
## 設置指令
本存儲庫主要用於教育內容的學習。若需操作特定項目：
此倉庫主要用於教育內容的使用。如欲使用特定項目：
### 主存儲庫設置
### 主要倉庫設置
```bash
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners
```
### 測驗應用設置（Vue 3 + Vite）
### 測驗應用程式設置 (Vue 3 + Vite)
```bash
cd quiz-app
npm install
npm run dev # 啟動開發伺服器
npm run build # 為生產環境構建
npm run dev # 開始開發伺服器
npm run build # 為生產環境建置
npm run lint # 執行 ESLint
```
### 銀行項目API（Node.js + Express）
### 銀行項目 API (Node.js + Express)
```bash
cd 7-bank-project/api
npm install
npm start # 啟動 API 伺服器
npm run lint # 執行 ESLint
npm run format # 用 Prettier 格式化
npm run format # 使用 Prettier 格式化
```
### 瀏覽器擴展項目
### 瀏覽器擴充功能項目
```bash
cd 5-browser-extension/solution
npm install
# 遵循瀏覽器特定的擴充功能載入指示
# 遵循瀏覽器特定的擴展加載說明
```
### 太空遊戲項目
@ -64,45 +64,45 @@ npm install
```bash
cd 6-space-game/solution
npm install
# 在瀏覽器中打開 index.html 或使用 Live Server
# 於瀏覽器中開啟 index.html 或使用即時伺服器
```
### 聊天項目（Python後端）
### 聊天項目 (Python 後端)
```bash
cd 9-chat-project/solution/backend/python
pip install openai
# 設置 GITHUB_TOKEN 環境變數
# 設定 GITHUB_TOKEN 環境變數
python api.py
```
## 開發工作流程
### 內容貢獻者
### 內容貢獻者指南
1. <strong>Fork本存儲庫</strong>至您的GitHub帳戶
2. **本地克隆您的 fork**
3. <strong>建立新分支</strong>以進行更改
4. 修改課程內容或代碼範例
5. 在相關項目目錄中測試代碼更改
6. 按貢獻指南提交拉取請求
1. <strong>Fork 倉庫</strong>到你的 GitHub 帳戶
2. <strong>Clone 你的 Fork</strong>到本地
3. <strong>建立新分支</strong>以進行修改
4. 修改課程內容或程式碼範例
5. 在相關項目目錄中測試程式碼變更
6. 根據貢獻指引提交 Pull Request
### 學習者
### 學習者指南
1. Fork或克隆存儲庫
2. 按順序瀏覽課程目錄
3. 閱讀每課程的README檔案
4. 完成課前測驗，網址：https://ff-quizzes.netlify.app/web/
5. 學習課程中的代碼範例
6. 完成作業和挑戰
7. 參加課後測驗
1. Fork 或 clone 此倉庫
2. 按順序進入課程目錄
3. 閱讀每堂課的 README
4. 完成 https://ff-quizzes.netlify.app/web/ 上的課前測驗
5. 操作課程資料夾中的程式碼範例
6. 完成作業與挑戰
7. 進行課後測驗
### 實時開發
- <strong>文件服務</strong>：在根目錄執行 `docsify serve`（端口3000）
- <strong>測驗應用</strong>：在quiz-app目錄執行 `npm run dev`
- <strong>項目</strong>：使用VS Code Live Server擴展提供HTML項目服務
- **API項目**：在對應API目錄運行 `npm start`
- <strong>文件</strong>：在根目錄運行 `docsify serve` (默認埠 3000)
- <strong>測驗應用</strong>：在 quiz-app 目錄中執行 `npm run dev`
- <strong>項目</strong>：對 HTML 項目使用 VS Code Live Server 擴充
- **API 項目**：在相應 API 目錄中運行 `npm start`
## 測試說明
@ -110,173 +110,173 @@ python api.py
```bash
cd quiz-app
npm run lint # 檢查代碼風格問題
npm run build # 驗證構建是否成功
npm run lint # 檢查程式碼風格問題
npm run build # 驗證建置成功
```
### 銀行API測試
### 銀行 API 測試
```bash
cd 7-bank-project/api
npm run lint # 檢查程式碼風格問題
node server.js # 驗證伺服器無錯誤啟動
node server.js # 確認伺服器無錯誤啟動
```
### 一般測試方法
- 本存儲庫為教育用途，無全面自動化測試
- 手動測試專注於：
- 代碼範例無錯誤執行
- 文件中的鏈接正常運作
- 項目可成功構建
- 範例遵循最佳實踐
- 此為教育用倉庫，未配置全面自動測試
- 手動測試聚焦於：
- 程式碼範例能無錯誤執行
- 文件中的連結能正常運作
- 項目能成功構建
- 範例符合最佳實踐
### 提交前檢查
### 送出前檢查
- 在含有package.json的目錄執行 `npm run lint`
- 驗證Markdown鏈接有效性
- 在瀏覽器或Node.js中測試代碼範例
- 確保翻譯結構正確
- 在含 package.json 目錄下執行 `npm run lint`
- 確認 Markdown 連結有效
- 在瀏覽器或 Node.js 測試程式碼範例
- 確認翻譯保持正確結構
## 代碼風格指引
## 程式碼風格指南
### JavaScript
- 使用現代ES6+語法
- 遵循項目中標準ESLint配置
- 使用有意義的變量與函數名稱，便於學習理解
- 添加註釋解釋概念給學習者
- 在配置好的地方使用Prettier格式化
- 使用現代 ES6+ 語法
- 遵循項目中提供的標準 ESLint 配置
- 使用有意義的變量及函式名稱以利教育理解
- 添加註解解釋概念供學習者理解
- 在配置了 Prettier 的地方進行格式化
### HTML/CSS
- 使用語義化HTML5元素
- 採用響應式設計原則
- 清晰的類命名規範
- 添加CSS技巧註釋給學習者
- 使用語義化 HTML5 元素
- 遵循響應式設計原則
- 明確的類別命名規則
- 添加 CSS 技巧註解供學習者參考
### Python
- 遵循PEP 8風格指導
- 清晰且具教育意義的代碼範例
- 在有助於學習處加上類型提示
- 遵循 PEP 8 風格指引
- 清晰且具教育意義的程式碼範例
- 適當使用型別提示以協助學習
### Markdown 文檔
### Markdown 文件
- 清晰的標題層級結構
- 帶語言標示的代碼區塊
- 提供附加資源鏈接
- 在 `images/` 目錄中放置截圖與圖片
- 圖片配有替代文字以提升無障礙性
- 清楚的標題層級
- 含語言標示的程式碼區塊
- 連結至額外資源
- `images/` 目錄中的截圖與圖片
- 圖片備註文字以輔助無障礙
### 文件組織
### 檔案組織
- 課程依序編號（1-getting-started-lessons，2-js-basics 等）
- 每個項目都有 `solution/` 及通常 `start/` 或 `your-work/` 目錄
- 圖片置於課程專屬的 `images/` 文件夾
- 翻譯按照 `translations/{language-code}/` 結構存放
- 課程依序編號 (1-getting-started-lessons, 2-js-basics 等)
- 每個項目包含 `solution/`，常有 `start/` 或 `your-work/` 目錄
- 圖片存放於課程專屬的 `images/` 資料夾
- 翻譯存放於 `translations/{language-code}/` 結構
## 編譯與部署
## 建置與部署
### 測驗應用部署（Azure 靜態網站）
### 測驗應用部署 (Azure 靜態網站)
quiz-app已配置為Azure靜態網站部署：
quiz-app 已配置為 Azure 靜態網站部署：
```bash
cd quiz-app
npm run build # 建立 dist/ 資料夾
# 在推送至 main 時透過 GitHub Actions 工作流程部署
# 在推送到 main 時，透過 GitHub Actions 工作流程進行部署
```
Azure 靜態網站配置：
- <strong>應用位置</strong>：`/quiz-app`
- <strong>應用程式位置</strong>：`/quiz-app`
- <strong>輸出位置</strong>：`dist`
- <strong>工作流程</strong>：`.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### 文件PDF生成
### 文件 PDF 生成
```bash
npm install # 安裝 docsify-to-pdf
npm run convert # 從 docs 生成 PDF
npm run convert # 從 docs 產生 PDF
```
### Docsify 文件服務
### Docsify 文件
```bash
npm install -g docsify-cli # 全局安裝 Docsify
docsify serve # 在 localhost:3000 提供服務
docsify serve # 在 localhost:3000 上提供服務
```
### 項目專屬編譯
### 各項目專用建置
每個項目目錄可能有自己編譯流程：
- Vue項目：使用 `npm run build` 生成生產包
- 靜態項目：無編譯步驟，直接提供文件服務
每個項目目錄可能有其專屬建置流程：
- Vue 項目：使用 `npm run build` 建立生產束檔
- 靜態項目：無建置步驟，直接提供檔案服務
## 拉取請求指引
## Pull Request 指引
### 標題格式
使用清晰描述且說明更改範圍的標題：
使用清晰描述修改範圍的標題：
- `[Quiz-app] 新增第X課測驗`
- `[Lesson-3] 修正生態瓶項目錯字`
- `[Translation] 為第5課新增西班牙語翻譯`
- `[Docs] 更新設置指引`
- `[Lesson-3] 修正植物生態瓶項目錯字`
- `[Translation] 新增第5課西班牙語翻譯`
- `[Docs] 更新設定指引`
### 必須檢查
### 必要檢查
提交PR前：
提交 PR 之前：
1. **代碼品質：**
- 在相關項目目錄執行 `npm run lint`
- 修復所有lint錯誤與警告
1. <strong>程式碼品質</strong>：
- 在影響的項目目錄執行 `npm run lint`
- 修正所有 lint 錯誤及警告
2. **構建驗證：**
- 如適用執行 `npm run build`
- 確保無構建錯誤
2. <strong>建置驗證</strong>：
- 如適用，執行 `npm run build`
- 確保無建置錯誤
3. **鏈接核查：**
- 測試所有Markdown鏈接
- 確認圖片引用有效
3. <strong>連結驗證</strong>：
- 測試所有 Markdown 連結
- 確認圖片引用可用
4. **內容審核：**
- 校對拼字與語法
- 確保代碼範例正確且有教育意義
- 驗證翻譯準確且保持原意
4. <strong>內容審查</strong>：
- 拼字及文法校對
- 確認程式碼範例正確且具教育意義
- 確認翻譯維持原意
### 貢獻要求
- 同意微軟CLA（首次PR時自動檢查）
- 遵守 [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
- 詳細指引見 [CONTRIBUTING.md](./CONTRIBUTING.md)
- 在PR描述中引用相關議題編號（如適用）
- 同意 Microsoft CLA（首次 PR 自動檢查）
- 遵循 [Microsoft 開源行為守則](https://opensource.microsoft.com/codeofconduct/)
- 詳細指南見 [CONTRIBUTING.md](./CONTRIBUTING.md)
- 如有，於 PR 描述中引用 Issue 號碼
### 審核流程
### 審查流程
- PR由維護者與社群共同審核
- 優先保證教育內容清晰易懂
- 代碼範例應遵循現行最佳實踐
- 翻譯審核精確且文化適切
- PR 由維護者及社群審查
- 優先以教育清晰度為準
- 程式碼範例應遵循當前最佳實踐
- 翻譯需審核準確性與文化適切性
## 翻譯系統
### 自動翻譯
- 使用GitHub Actions與co-op-translator工作流程
- 使用 GitHub Actions 和 co-op-translator 工作流
- 自動翻譯超過50種語言
- 源文件位於主目錄
- 翻譯文件存於 `translations/{language-code}/` 目錄
- 原始檔案位於主目錄
- 翻譯檔案位於 `translations/{language-code}/` 目錄
### 添加手動翻譯改進
### 手動翻譯改進
1. 在 `translations/{language-code}/` 找到文件
2. 保持結構進行改進
3. 確保代碼範例功能正常
1. 尋找 `translations/{language-code}/` 中的檔案
2. 在保留結構的前提下改進翻譯
3. 確保程式碼範例維持可用性
4. 測試本地化測驗內容
### 翻譯元資料
翻譯文件包含元資料頭信息：
翻譯檔包含元資料標頭：
```markdown
<!--
CO_OP_TRANSLATOR_METADATA:
@ -289,120 +289,120 @@ CO_OP_TRANSLATOR_METADATA:
-->
```
## 偵錯與故障排除
## 除錯與疑難排解
### 常見問題
<strong>測驗應用無法啟動</strong>：
- 檢查Node.js版本（建議v14+）
- 檢查 Node.js 版本 (建議 v14+)
- 刪除 `node_modules` 與 `package-lock.json`，重新執行 `npm install`
- 檢查端口是否衝突（預設：Vite使用端口5173）
**API伺服器無法啟動**：
- 確認Node.js版本達到最低需求（node >=10）
- 檢查端口是否已被佔用
- 確保全部依賴已安裝，執行 `npm install`
<strong>瀏覽器擴展無法載入</strong>：
- 檢查manifest.json格式正確
- 查看瀏覽器控制台錯誤
- 遵循各瀏覽器擴展安裝說明
**Python聊天項目問題**：
- 確認安裝OpenAI套件：`pip install openai`
- 檢查GITHUB_TOKEN環境變量設定
- 確保GitHub Models存取權限
**Docsify無法提供文件服務**：
- 全局安裝docsify-cli：`npm install -g docsify-cli`
- 從存儲庫根目錄執行
- 檢查埠號衝突（預設：Vite 使用埠 5173）
**API 伺服器無法啟動**：
- 確認 Node.js 版本符合最低要求（node >=10）
- 檢查埠號是否已被使用
- 確認所有相依已使用 `npm install` 安裝完成
<strong>瀏覽器擴充功能無法載入</strong>：
- 確保 manifest.json 格式正確
- 查看瀏覽器主控台錯誤訊息
- 遵循瀏覽器專屬擴充安裝指引
**Python 聊天項目問題**：
- 確認已安裝 OpenAI 套件：`pip install openai`
- 確認 GITHUB_TOKEN 環境變量已設定
- 檢查 GitHub Models 存取權限
**Docsify 無法提供文件**：
- 全域安裝 docsify-cli：`npm install -g docsify-cli`
- 從倉庫根目錄執行
- 確認存在 `docs/_sidebar.md`
### 開發環境建議
### 開發環境提示
- 使用帶Live Server擴展的VS Code瀏覽HTML項目
- 安裝ESLint和Prettier擴展保持格式統一
- 使用瀏覽器開發者工具調試JavaScript
- Vue項目建議安裝Vue DevTools瀏覽器擴展
- 對 HTML 項目使用 VS Code 與 Live Server 擴充功能
- 安裝 ESLint 與 Prettier 擴充以統一格式
- 使用瀏覽器開發者工具偵錯 JavaScript
- Vue 項目安裝 Vue DevTools 瀏覽器擴充
### 性能考量
### 性能注意事項
- 超過50種語言的翻譯文件數量龐大，完整克隆體積較大
- 若僅需內容，使用淺克隆：`git clone --depth 1`
- 編寫英文內容時排除翻譯目錄搜索
- 初次構建（npm install、Vite build）可能較慢
- 大量翻譯檔案（50+語言）導致完整 clone 較大
- 僅需處理內容時，可使用淺層 clone：`git clone --depth 1`
- 編輯英文內容時，建議排除翻譯目錄搜索
- 首次運行建置流程可能較慢（npm install、Vite 建置）
## 安全考量
## 安全注意事項
### 環境變量
- API密鑰絕不可提交至存儲庫
- 使用 `.env` 文件（已列入 `.gitignore`）
- 在項目README中記錄需要的環境變量
- API 金鑰嚴禁提交至倉庫
- 使用 `.env` 檔案（已加入 `.gitignore`）
- 必要環境變量於項目 README 中記錄
### Python項目
### Python 項目
- 使用虛擬環境：`python -m venv venv`
- 保持依賴更新
- GitHub令牌應具最小必要權限
- GitHub 令牌應設定最低必要權限
### GitHub Models存取
### GitHub Models 存取
- 需要個人訪問令牌（PAT）
- 將令牌作為環境變量存儲
- 絕不可提交令牌或憑證
- GitHub Models 需個人訪問令牌（PAT）
- 令牌應存為環境變量
- 絕對不得提交令牌或憑證
## 附加說明
### 目標受眾
- 初學網頁開發的新人
- 學生和自學者
- 課堂使用此課程的教師
- 內容設計符合無障礙及循序漸進的技能培養
- 完全初學者的網頁開發學習者
- 學生與自學者
- 用於課堂教學的教師
- 內容設計符合無障礙並逐步增強技能
### 教育理念
### 教學理念
- 基於項目學習方法
- 透過測驗持續檢驗知識
- 實踐編碼練習
- 範例具真實應用背景
- 先掌握基礎，再學習框架
- 以項目導向學習
- 頻繁的知識檢測（測驗）
- 實作編碼練習
- 真實應用案例
- 重視基礎再談框架
### 存儲庫維護
### 倉庫維護
- 活躍的學習者與貢獻者社群
- 定期更新依賴與內容
- 維護者監控問題與討論
- 翻譯更新透過GitHub Actions自動化
- 積極的學習者與貢獻者社群
- 定期更新相依與內容
- 維護者監控 Issues 和討論
- 透過 GitHub Actions 自動更新翻譯
### 相關資源
- [Microsoft Learn模組](https://docs.microsoft.com/learn/)
- [Microsoft Learn 模組](https://docs.microsoft.com/learn/)
- [學生中心資源](https://docs.microsoft.com/learn/student-hub/)
- 推薦學習者使用[GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot)
- 額外課程：生成式AI、數據科學、機器學習、物聯網課程
- 推薦學習者使用 [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot)
- 額外課程：生成式 AI、資料科學、機器學習、物聯網課程可用
### 專案使用說明
### 特定項目操作指南
詳細說明請參見個別項目README：
- `quiz-app/README.md` - Vue 3測驗應用
- `7-bank-project/README.md` - 帶身份驗證的銀行應用
- `5-browser-extension/README.md` - 瀏覽器擴展開發
- `6-space-game/README.md` - Canvas遊戲開發
- `9-chat-project/README.md` - AI聊天助理項目
個別項目詳細說明見以下 README 檔案：
- `quiz-app/README.md` - Vue 3 測驗應用
- `7-bank-project/README.md` - 具認證功能銀行應用
- `5-browser-extension/README.md` - 瀏覽器擴充開發
- `6-space-game/README.md` - Canvas 遊戲開發
- `9-chat-project/README.md` - AI 聊天助理項目
### Monorepo 結構
雖非傳統monorepo，該存儲庫包含多個獨立項目：
- 每節課皆自成一體
雖非傳統 monorepo，此倉庫包含多個獨立項目：
- 各課程自成一體
- 項目間不共享依賴
- 單獨作業不影響其他項目
- 克隆整個存儲庫可完整體驗課程內容
- 可獨立工作不互相影響
- 克隆整個倉庫可獲得完整課程體驗
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免責聲明**：
本文件經由 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 翻譯。雖然我們致力於準確性，但請注意自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應視為權威來源。針對重要資訊，建議採用專業人工翻譯。我們不對因使用此翻譯而導致的任何誤解或誤譯承擔責任。
**免責聲明**：
本文件由 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們力求準確，但請注意自動翻譯可能包含錯誤或不準確之處。原始文件之原文版本應視為權威來源。對於重要資訊，建議尋求專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或誤釋概不負責。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

215
translations/zh-MO/README.md
Unescape View File

@ -10,29 +10,29 @@
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
# Web 開發初學者教程
# Web Development for Beginners - 課程大綱
透過 Microsoft Cloud Advocates 開發嘅 12 星期全方位課程，學習網頁開發基礎知識。24 堂課涵蓋 JavaScript、CSS 同 HTML，並透過實作項目如生態瓶、瀏覽器擴充功能同太空遊戲深入了解。參與測驗、討論同實踐作業。運用具成效嘅項目導向教學，提高技能同優化知識記憶。今日就開始你嘅編碼旅程！
透過Microsoft Cloud Advocates團隊提供的為期12週全面課程，學習網頁開發的基礎知識。24堂課中，每堂皆透過實作專案（例如生態瓶、瀏覽器擴充功能及太空遊戲）來深入探討JavaScript、CSS與HTML。參與測驗、討論及實作作業。利用我們有效的專案導向教學法提升技能並優化知識吸收。現在就開始你的程式設計之旅吧！
加入 Azure AI Foundry Discord 社群
加入Azure AI Foundry Discord社群
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
跟從以下步驟開始使用呢啲資源：
1. **派生此儲存庫**：點擊 [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **克隆儲存庫**： `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**加入 Azure AI Foundry Discord 遇見專家同其他開發者**](https://discord.com/invite/ByRwuEEgH4)
依照以下步驟開始使用這些資源：
1. <strong>派生這個儲存庫</strong>：按這裡 [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. <strong>複製儲存庫</strong>： `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**加入Azure AI Foundry Discord，與專家及開發者交流**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 多語言支援
#### 透過 GitHub Action 支援（自動化及保持更新）
#### 透過GitHub Action支援（自動化且總是最新）
<!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->
[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](./README.md) | [Chinese (Traditional, Taiwan)](../zh-TW/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md)
[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](./README.md) | [Chinese (Traditional, Taiwan)](../zh-TW/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Khmer](../km/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md)
> **想本地克隆？**
> **想要本地複製？**
>
> 呢個儲存庫包括 50 多種語言翻譯，會大大增加下載大小。如想不包括翻譯而克隆，請使用稀疏檢出：
> 該儲存庫包含50多種語言翻譯，會大幅增加下載大小。若想不下載翻譯檔案，可以使用稀疏擷取：
>
> **Bash / macOS / Linux:**
> ```bash
@ -48,172 +48,171 @@
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> ```
>
> 呢啲方法會更快下載，亦包含你完成課程所需全部資源。
> 這樣可以更快下載，仍能完成課程所需的所有內容。
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**如果你希望新增其他翻譯語言，支援語言列表在 [這裡](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**若想新增其他翻譯語言支援，請見此頁 [here](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑‍🎓 _你係學生嗎？_
#### 🧑‍🎓 _你是學生嗎？_
請訪問 [**學生中心頁面**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon)，度有初學者資源、學生工具包，同埋免費證書券嘅方法。呢頁建議你加書籤，並不時返回查看，因為我哋每月都更新內容。
造訪[<strong>學生中心頁面</strong>](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon)，你會找到初學資源、學生套組，甚至可以免費取得證書兌換券。這是你想收藏並定期回顧查看的頁面，內容每月更新。
### 📣 公告 - 新嘅 GitHub Copilot Agent 模式挑戰登場！
### 📣 公告 - 新增GitHub Copilot Agent模式挑戰！
新增挑戰，請於大部分章節中尋找「GitHub Copilot Agent Challenge 🚀」。呢個係你用 GitHub Copilot 同 Agent 模式完成嘅新挑戰。若你未用過 Agent 模式，佢唔止生成文字，仲可以創建同編輯文件、執行指令等等。
新增挑戰項目，查看大多數章節中的 "GitHub Copilot Agent Challenge 🚀"。這是使用GitHub Copilot與Agent模式完成的新挑戰。如果你還沒用過Agent模式，它不僅能產生文字，也能創建與編輯檔案、執行命令等等。
### 📣 公告 - _用生成式 AI 建造新項目_
### 📣 公告 - _全新生成式AI專案_
新 AI 助手項目剛新增，查看 [項目](./9-chat-project/README.md)
剛新增AI助理專案，點此查看[專案](./9-chat-project/README.md)
### 📣 公告 - _新課程_ ：面向 JavaScript 嘅生成式 AI
### 📣 公告 - _剛發布JavaScript的生成式AI新課程_
唔好錯過我哋嘅新生成式 AI 課程！
別錯過我們全新的生成式AI課程！
請訪問 [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) 開始學習！
造訪 [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) 開始學習！
![Background](../../translated_images/zh-MO/background.148a8d43afde5730.webp)
- 課程涵蓋由基礎到 RAG 等所有內容。
- 利用生成式 AI 同我哋嘅伴侶應用同歷史人物互動。
- 好玩同投入嘅故事，會令你穿越時空！
- 課程涵蓋基礎到RAG技術。
- 使用生成AI和配套應用與歷史人物互動。
- 內容生動有趣，彷彿穿越時空！
![character](../../translated_images/zh-MO/character.5c0dd8e067ffd693.webp)
每堂課包括作業、知識檢測同挑戰，引導你學習：
- 提示與提示工程
- 文字同圖片應用開發
每堂課附有作業、知識檢測和挑戰，輔導你學習：
- 提示語句與提示工程
- 文字及影像應用產生
- 搜尋應用
請訪問 [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) 開始學習！
造訪 [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) 開始學習！
## 🌱 開始使用
> **教師們**，我哋有 [包括建議](for-teachers.md) 教你點用呢套課程。好歡迎喺我哋嘅 [討論區](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) 提供反饋！
> <strong>教師們</strong>，我們[已包含一些建議](for-teachers.md)教您如何使用此課程。非常歡迎您在[討論區](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)留下寶貴意見！
**[學生們](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**，每堂課開始前先做預習測驗，再閱讀課程內容、完成各種活動，並用課後測驗檢查理解。
**[學習者們](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**，每課程請先完成課前測驗，再閱讀課程內容、完成各種活動，最後進行課後測驗來檢驗學習成效。
為促進學習，鼓勵你與同儕一齊完成項目！歡迎你喺我哋嘅[討論區](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) 互動，管理員團隊會隨時答你問題。
為提升學習效果，建議與同儕連線一起完成專案！歡迎在我們的[討論區](https://github.com/microsoft/Web-Dev-For-Beginners/discussions)交流，社群管理團隊會隨時回答你的問題。
若要進一步學習，我哋強烈建議瀏覽 [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) 獲取更多資料。
若想更進一步學習，我們強烈建議探索[Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon)提供的其他學習材料。
### 📋 建立你的開發環境
### 📋 環境建置
呢套課程早已有開發環境裝備。当你開始學習時，可選擇喺 [Codespace](https://github.com/features/codespaces/)（瀏覽器運行、無需安裝環境）或喺本地電腦使用文字編輯器如 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 運行。
本課程已配置好開發環境！開始學習時，你可選擇利用[Codespace](https://github.com/features/codespaces/)（瀏覽器內操作，無須安裝）執行本課程，或本機使用文字編輯器（如[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)）進行開發。
#### 建立你自己的儲存庫
為方便儲存工作，建議你建立自己嘅儲存庫複本。點擊頁面頂部嘅 **使用此範本（Use this template）** 按鈕，即可在你的 GitHub 帳戶中創建套用課程嘅新儲存庫。
#### 建立你的儲存庫
為方便保存學習成果，我們建議你建立本儲存庫的個人複本。你可按頁面頂端的 **Use this template** 按鈕，即可在你的GitHub帳號中建立一份課程複本。
跟從以下步驟：
1. **派生儲存庫**：點擊右上方嘅「Fork」按鈕。
2. **克隆儲存庫**： `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
操作步驟：
1. <strong>派生儲存庫</strong>：點選此頁右上方的 "Fork" 按鈕。
2. <strong>複製儲存庫</strong>： `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### 喺 Codespace 執行課程
#### 在Codespace執行課程
喺你創建嘅儲存庫複本中，點選 **Code** 按鈕，揀選 **Open with Codespaces**。會建立一個新嘅 Codespace 俾你使用。
於你建立的儲存庫中，點選 **Code** 按鈕，再選擇 **Open with Codespaces**。系統將為你建立全新Codespace工作區。
![Codespace](../../translated_images/zh-MO/createcodespace.0238bbf4d7a8d955.webp)
#### 喺本地電腦運行課程
#### 在本機電腦執行課程
想喺本地電腦運行，需有文字編輯器、一個瀏覽器及命令行工具。第一堂課 [編程語言入門與工具介紹](../../1-getting-started-lessons/1-intro-to-programming-languages) 會介紹你啲可選工具，讓你揀選最適合嘅。
若要在本機執行課程，你需要文字編輯器、瀏覽器和命令列工具。我們的第一課[程式語言與開發工具介紹](../../1-getting-started-lessons/1-intro-to-programming-languages)會引導你了解各種工具選項，讓你選擇最合適的。
我哋推薦用 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 作為編輯器，佢仲自帶 [終端機](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)。你可以喺 [呢度](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 下載 Visual Studio Code。
1. 把你的倉庫克隆到你的電腦。你可以點擊 **Code** 按鈕並複製 URL：
我們建議使用[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)作為編輯器，它也內建[終端機](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)。你可以從這裡下載Visual Studio Code [連結](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)。
1. 將你的儲存庫克隆到你的電腦。你可以按一下 **Code** 按鈕並複製 URL：
[CodeSpace](./images/createcodespace.png)
然後，在 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 內開啟 [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)，並執行以下指令，將 `<your-repository-url>` 換成你剛才複製的 URL：
然後，在 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 內開啟 [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)，並執行以下命令，將 `<your-repository-url>` 替換為剛剛複製的 URL：
```bash
git clone <your-repository-url>
```
2. 在 Visual Studio Code 開啟資料夾。你可以點擊 **File** > **Open Folder**，然後選擇你剛剛克隆的資料夾。
2. 在 Visual Studio Code 中開啟資料夾。你可以透過點擊 **File** > **Open Folder**，然後選擇你剛剛克隆的資料夾來完成。
> 推薦的 Visual Studio Code 擴充套件：
> 推薦的 Visual Studio Code 擴充功能：
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - 於 Visual Studio Code 預覽 HTML 頁面
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - 幫助你更快寫程式碼
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - 用於在 Visual Studio Code 中預覽 HTML 頁面
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - 幫助你更快編寫程式碼
## 📂 每課包含：
## 📂 每課程包含：
- 可選的草圖筆記
- 可選的補充影片
- 選擇性的手繪筆記
- 選擇性的補充影片
- 課前暖身小測驗
- 書面課程內容
- 對專案導向課程，包含分步驟專案建置指南
- 針對專案導向課程，包含如何構建專案的逐步指南
- 知識檢測
- 挑戰
- 補充閱讀
- 挑戰題
- 補充閱讀材料
- 作業
- [課後小測驗](https://ff-quizzes.netlify.app/web/)
> **關於小測驗的說明**：所有小測驗都包含在 Quiz-app 資料夾中，共 48 個小測驗，每個包含三個問題。它們可於 [此處](https://ff-quizzes.netlify.app/web/) 取得，Quiz 應用程式可本地執行或部署到 Azure；請依照 `quiz-app` 資料夾中的指示操作。
> <strong>關於測驗的說明</strong>：所有測驗均包含在 Quiz-app 資料夾中，共 48 個測驗，每個測驗有三個問題。它們可於[此處](https://ff-quizzes.netlify.app/web/) 使用；測驗應用程式可以本地運行或部署到 Azure；請參照 `quiz-app` 資料夾中的指示。
## 🗃️ 課程清單
## 🗃️ 課程列表
| | 專案名稱 | 教授概念 | 學習目標 | 連結課程 | 作者 |
| | 專案名稱 | 教授概念 | 學習目標 | 連結課程 | 作者 |
| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 01 | Getting Started | 程式設計與工具入門 | 了解多數程式語言的基本原理與協助專業開發者工作的軟體 | [Intro to Programming Languages and Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Getting Started | GitHub 基礎與團隊合作 | 如何在專案中使用 GitHub，以及如何與他人協作管理程式碼 | [Intro to GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Getting Started | 無障礙設計 | 學習網頁無障礙設計基礎 | [Accessibility Fundamentals](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Basics | JavaScript 資料類型 | JavaScript 資料類型基礎 | [Data Types](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Basics | 函數與方法 | 學習如何以函數與方法管理應用程式流程 | [Functions and Methods](./2-js-basics/2-functions-methods/README.md) | Jasmine 和 Christopher |
| 06 | JS Basics | 使用 JS 做決策 | 學習如何在程式碼中使用條件判斷 | [Making Decisions](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Basics | 陣列與迴圈 | 使用陣列與迴圈操作資料 | [Arrays and Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML 實作 | 建構打造線上生態缸的 HTML，重點在建置版面 | [Introduction to HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS 實作 | 製作 CSS 為線上生態缸套用樣式，重點是 CSS 基礎與響應式設計 | [Introduction to CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript 閉包與 DOM 操作 | 使用 JavaScript 實現拖放介面，著重閉包與 DOM 操作 | [JavaScript Closures, DOM manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | 打字遊戲製作 | 學習如何使用鍵盤事件驅動 JavaScript 應用邏輯 | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | 瀏覽器運作原理 | 了解瀏覽器運作及歷史，並構建基本的瀏覽器擴充功能元件 | [About Browsers](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | 建立表單、呼叫 API 及本地儲存變數 | 製作瀏覽器擴充的 JavaScript 元件，使用本地儲存的變數呼叫 API | [APIs, Forms, and Local Storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | 瀏覽器的背景程序與網頁效能 | 使用瀏覽器背景程序管理擴充圖示；學習網頁效能與優化方法 | [Background Tasks and Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | 進階遊戲開發：JavaScript 繼承與設計模式 | 學習使用 Classes 和 Composition 以及 Pub/Sub 模式，為製作遊戲做準備 | [Introduction to Advanced Game Development](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | 畫布繪圖 | 了解 Canvas API，如何繪圖顯示元素 | [Drawing to Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | 元素移動與動畫 | 探索如何用笛卡兒座標與 Canvas API 讓元件動起來 | [Moving Elements Around](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | 碰撞偵測 | 使元素碰撞並以按鍵事件反應彼此，並提供冷卻功能以維持遊戲效能 | [Collision Detection](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | 計分 | 根據遊戲狀態進行數學計算與分數統計 | [Keeping Score](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | 結束與重新開始遊戲 | 了解遊戲結束與重啟，包括資源清理與變數重置 | [The Ending Condition](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | 網頁應用 HTML 模板與路由 | 學習如何運用路由與 HTML 模板建構多頁網站架構 | [HTML Templates and Routes](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | 製作登入與註冊表單 | 學習製作表單與處理驗證流程 | [Forms](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | 資料抓取與使用方法 | 資料在應用程式的流入與流出，如何抓取、儲存與釋放 | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | 狀態管理概念 | 了解應用程式如何保留狀態並程式化管理 | [State Management](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | 使用 VScode 編輯器 | 學習如何使用程式碼編輯器| [Use VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | 使用人工智慧 | 學習如何打造自己的 AI 助理 | [AI Assistant project](./9-chat-project/README.md) | Chris |
| 01 | 入門篇 | 程式設計簡介與工作工具 | 學習大多數程式語言背後的基本原理及專業開發者使用的軟件工具 | [程式語言與工作工具簡介](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | 入門篇 | GitHub 基礎與協作 | 如何在專案中使用 GitHub，及如何與他人協作編碼 | [GitHub 入門](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | 入門篇 | 無障礙性 | 學習網頁無障礙性的基礎知識 | [無障礙性基礎](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS 基礎 | JavaScript 資料型態 | 掌握 JavaScript 資料型態的基礎 | [資料型態](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS 基礎 | 函式與方法 | 學習函式與方法以管理應用程式的邏輯流程 | [函式與方法](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | JS 基礎 | JavaScript 條件判斷 | 學習如何在程式碼中使用條件判斷函式 | [條件判斷](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS 基礎 | 陣列與迴圈 | 使用陣列與迴圈在 JavaScript 中操作資料 | [陣列與迴圈](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [室內生態缸](./3-terrarium/solution/README.md) | HTML 實作 | 建立 HTML 以創建線上生態缸，專注於版面細節 | [HTML 入門](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [室內生態缸](./3-terrarium/solution/README.md) | CSS 實作 | 製作 CSS 以美化線上生態缸，專注於 CSS 基礎及頁面響應設計 | [CSS 入門](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [室內生態缸](./3-terrarium/solution/README.md) | JavaScript 閉包與 DOM 操作 | 編寫 JavaScript 使生態缸具備拖放功能，專注閉包與 DOM 操作 | [JavaScript 閉包與 DOM 操作](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [打字遊戲](./4-typing-game/solution/README.md) | 建構打字遊戲 | 學習如何使用鍵盤事件來驅動你的 JavaScript 應用程式邏輯 | [事件驅動程式設計](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [綠色瀏覽器擴充功能](./5-browser-extension/solution/README.md) | 瀏覽器運作原理 | 探討瀏覽器如何運作、歷史，以及如何設計瀏覽器擴充功能最初界面 | [瀏覽器介紹](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [綠色瀏覽器擴充功能](./5-browser-extension/solution/README.md) | 製作表單、呼叫 API 及本地儲存變數 | 編寫瀏覽器擴充功能的 JavaScript 元素，透過本地儲存變數呼叫 API | [API、表單與本地儲存](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [綠色瀏覽器擴充功能](./5-browser-extension/solution/README.md) | 瀏覽器背景處理與網頁效能優化 | 利用瀏覽器的背景處理來管理擴充功能圖示；了解網頁效能以及一些最佳化作法 | [背景處理與效能](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [太空遊戲](./6-space-game/solution/README.md) | 更進階的遊戲開發：繼承與發布/訂閱模式 | 學習使用類別與組合來實作繼承，以及發佈/訂閱設計模式，為建置遊戲做準備 | [進階遊戲開發入門](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [太空遊戲](./6-space-game/solution/README.md) | 畫布繪圖 | 了解用於畫面繪製的 Canvas API | [畫布繪圖](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [太空遊戲](./6-space-game/solution/README.md) | 畫面上元素移動 | 探索如何使用笛卡兒座標系與 Canvas API 讓元素產生移動 | [元素移動](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [太空遊戲](./6-space-game/solution/README.md) | 碰撞偵測 | 讓元素能互相碰撞並響應按鍵，並提供冷卻功能以確保遊戲效能 | [碰撞偵測](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [太空遊戲](./6-space-game/solution/README.md) | 計分 | 根據遊戲狀態與表現進行數學計算 | [計分](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [太空遊戲](./6-space-game/solution/README.md) | 遊戲結束與重啟 | 了解遊戲如何結束與重啟，包括清理資源與重設變數 | [結束條件](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [銀行應用程式](./7-bank-project/solution/README.md) | 網頁應用程式的 HTML 範本與路由 | 學習如何使用路由與 HTML 範本建立多頁網站的框架 | [HTML 範本與路由](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [銀行應用程式](./7-bank-project/solution/README.md) | 製作登入與註冊表單 | 瞭解表單建立及驗證流程 | [表單](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [銀行應用程式](./7-bank-project/solution/README.md) | 資料擷取與運用 | 介紹資料如何流入與流出應用程式、如何獲取、儲存及處理 | [資料](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [銀行應用程式](./7-bank-project/solution/README.md) | 狀態管理概念 | 學習應用程式保留狀態的方式與程式化管理 | [狀態管理](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | 使用 VScode 編輯器 | 學習如何使用程式碼編輯器 | [使用 VScode 編輯器](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI 助理](./9-chat-project/README.md) | 使用人工智能 | 學習如何建立你的專屬 AI 助理 | [AI 助理專案](./9-chat-project/README.md) | Chris |
## 🏫 教學法
我們的課程設計遵循兩大核心教學原則：
我們的課程設計基於兩項關鍵的教學原則：
* 專案導向學習
* 頻繁小測驗
* 頻繁測驗
本課程教授 JavaScript、HTML 與 CSS 的基礎，並涵蓋現代網頁開發者所使用的最新工具與技術。學生將有機會透過製作打字遊戲、線上生態缸、環保瀏覽器擴充、太空入侵者風格遊戲及商用銀行應用程式，累積實作經驗。結束課程時，學生將具備牢固的網頁開發基礎。
課程傳授 JavaScript、HTML 與 CSS 的基礎知識，以及現今網頁開發者常用的最新工具與技術。學生將有機會透過開發打字遊戲、虛擬生態缸、環保瀏覽器擴充功能、太空侵略者風格遊戲及企業銀行應用程式來累積實務經驗。課程結束時，學生將具備扎實的網頁開發基礎。
> 🎓 你可以將本課程初期幾堂課當成 Microsoft Learn 上的 [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) 學習！
> 🎓 你可以將本課程的前幾堂課當作 Microsoft Learn 上的 [學習路徑](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon)！
透過確保內容與專案對齊，讓學習過程更有趣且提升概念吸收率。我們也撰寫了幾堂 JavaScript 基礎入門課程，搭配來自 “[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)” 影片集的教學影片，一些作者也參與本課程設計。
確保內容與專案一致，讓學習過程更具吸引力，並加強概念的記憶。我們也編寫了數個 JavaScript 基礎入門課程，搭配來自「[初學者系列：JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)」影片教程，其中部分作者同時參與本課程編寫。
此外，課前的低壓力小測驗能設定學習動機，而課後的小測驗則加強概念記憶。本課程設計靈活有趣，可全部或部分選修。專案從簡單開始，至 12 週課程尾聲逐步增加難度。
此外，課前的低壓力測驗幫助學生建立學習動機，課後測驗則確保更深層的理解與記憶。本課程設計靈活且有趣，學生可全部修習或部分選讀。專案難度從簡至繁，12 週課程結束時達到較高層次。
雖然我們刻意迴避引入 JavaScript 框架，以專注於網頁開發者在採用框架前所需的基本技能，但完成本課程後，下一步可透過另一套影片課程學習 Node.js：《[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)》。
雖然我們刻意避開介紹 JavaScript 框架，專注於掌握作為網頁開發者所需的基本技能，接下來的好選擇是透過另一系列影片學習 Node.js：「[初學者系列：Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)」。
> 請參閱我們的 [行為準則](CODE_OF_CONDUCT.md) 與 [貢獻指南](CONTRIBUTING.md)。我們歡迎你的建設性意見！
> 請參閱我們的 [行為守則](CODE_OF_CONDUCT.md) 與 [貢獻指南](CONTRIBUTING.md)。我們歡迎您的建設性回饋！
## 🧭 離線使用
## 🧭 離線存取
你可以利用 [Docsify](https://docsify.js.org/#/) 離線瀏覽本文件。先 fork 本倉庫，在你的本機安裝 [Docsify](https://docsify.js.org/#/quickstart)，然後至本倉庫根目錄輸入 `docsify serve`。網站將於本機 3000 埠運行：`localhost:3000`。
你可以使用 [Docsify](https://docsify.js.org/#/) 離線執行本說明文件。Fork 此儲存庫，在本地安裝 [Docsify](https://docsify.js.org/#/quickstart)，然後在此儲存庫根目錄下輸入 `docsify serve`。網站會在本地端的 3000 端口運行：`localhost:3000`。
## 📘 PDF
PDF 版本的所有課程可在[這裡](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf)找到。
所有課程的 PDF 可從 [這裡](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) 下載。
## 🎒 其他課程
我們團隊還製作其他課程！快來看看：
我們的團隊也製作了其他課程！快來看看：
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
@ -229,7 +228,7 @@ PDF 版本的所有課程可在[這裡](https://microsoft.github.io/Web-Dev-For-
[![AI Agents for Beginners](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### 生成式 AI 系列
[![Generative AI for Beginners](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Generative AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
@ -237,7 +236,7 @@ PDF 版本的所有課程可在[這裡](https://microsoft.github.io/Web-Dev-For-
[![Generative AI (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
---
### 核心學習
[![ML for Beginners](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[![Data Science for Beginners](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
@ -248,30 +247,30 @@ PDF 版本的所有課程可在[這裡](https://microsoft.github.io/Web-Dev-For-
[![XR Development for Beginners](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Copilot 系列
[![Copilot for AI Paired Programming](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[![Copilot for C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[![Copilot Adventure](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
<!-- CO-OP TRANSLATOR OTHER COURSES END -->
## 尋求協助
## 尋求幫助
如果你在建立 AI 應用程式時遇到困難或有任何問題，歡迎加入 MCP 的學習者與經驗豐富的開發者討論社群。這是一個支持性的社群，歡迎提問並自由分享知識。
如果你遇到困難或有任何關於建立 AI 應用程式的問題，加入其他學習者及經驗豐富的開發人員，一起在 MCP 論壇交流吧。這是一個支持性的社群，歡迎提出問題並自由分享知識。
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
如果你有產品意見反饋或遇到錯誤，請訪問：
如果你在開發過程中有產品反饋或錯誤，請造訪：
[![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum)
## 授權
## 授權聲明
本儲存庫採用 MIT 授權。詳細資訊請參閱 [LICENSE](../../LICENSE) 檔案。
本存儲庫採用 MIT 授權。更多資訊請參閱 [LICENSE](../../LICENSE) 檔案。
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免責聲明**：
本文件係使用人工智能翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們致力於確保翻譯的準確性，但請注意，自動翻譯可能存在錯誤或不準確之處。原始語言的文件應被視為權威來源。對於重要資訊，建議採用專業人工翻譯。我們不對因使用本翻譯而引起的任何誤解或錯誤解釋承擔責任。
本文件係使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 翻譯。雖然我們致力於確保準確性，但請注意自動翻譯可能包含錯誤或不準確之處。原始語言文件應被視為權威來源。對於重要資訊，建議採用專業人工翻譯。我們不對因使用此翻譯而產生之任何誤解或誤釋負責。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

6
translations/zh-TW/.co-op-translator.json
Unescape View File

@ -493,7 +493,7 @@
},
"AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2026-03-27T22:48:22+00:00",
"translation_date": "2026-04-06T16:04:20+00:00",
"source_file": "AGENTS.md",
"language_code": "zh-TW"
},
@ -516,8 +516,8 @@
"language_code": "zh-TW"
},
"README.md": {
"original_hash": "a2c9eed480687319517c08a6319e5536",
"translation_date": "2026-03-06T18:01:09+00:00",
"original_hash": "b885c87c7544109b78d6684daad6cba6",
"translation_date": "2026-04-06T16:00:23+00:00",
"source_file": "README.md",
"language_code": "zh-TW"
},

344
translations/zh-TW/AGENTS.md
Unescape View File

@ -2,36 +2,36 @@
## 專案概覽
這是一個用於教學網頁開發基礎的教育課程資源庫。此課程是一個由 Microsoft Cloud Advocates 開發的全面 12 週課程，包含 24 節涵蓋 JavaScript、CSS 及 HTML 的實作課程。
這是一個用於教學網頁開發基礎的教育課程儲存庫，適合初學者。課程由 Microsoft Cloud Advocates 開發，為期 12 週，包含 24 個實作課程，涵蓋 JavaScript、CSS 與 HTML。
### 主要組成
- <strong>教育內容</strong>：24 節結構化課程，依專案模組組織
- <strong>實務專案</strong>：生態瓶、打字遊戲、瀏覽器擴充功能、太空遊戲、銀行應用程式、程式碼編輯器及 AI 聊天助理
- <strong>互動測驗</strong>：48 次測驗，每次 3 題（課前/課後評估）
- <strong>多語言支援</strong>：透過 GitHub Actions 自動翻譯至 50 多種語言
- <strong>技術堆疊</strong>：HTML、CSS、JavaScript、Vue.js 3、Vite、Node.js、Express、Python（AI 專案用）
- <strong>教育內容</strong>：24 個結構化課程，依專案模組組織
- <strong>實作專案</strong>：生態瓶、打字遊戲、瀏覽器擴充功能、太空遊戲、銀行應用程式、代碼編輯器與 AI 聊天助理
- <strong>互動測驗</strong>：48 個測驗，每項包含 3 個問題（課前/課後評估）
- <strong>多語言支援</strong>：透過 GitHub Actions 自動翻譯至 50+ 種語言
- <strong>技術棧</strong>：HTML、CSS、JavaScript、Vue.js 3、Vite、Node.js、Express、Python（專案使用 AI）
### 架構
- 以課程為主的教育資源庫結構
- 每個課程資料夾包含 README、程式碼範例與解答
- 獨立專案置於不同目錄（quiz-app、各課程專案）
- 使用 GitHub Actions（co-op-translator）實現翻譯系統
- 文件透過 Docsify 提供，並可匯出 PDF
- 教育專案庫，依課程組織結構
- 每堂課資料夾內包含 README、程式碼範例及解答
- 獨立專案存放於獨立目錄（quiz-app 及各課程專案）
- 透過 GitHub Actions（co-op-translator）進行翻譯系統管理
- 文件使用 Docsify 服務，並提供 PDF 版本
## 安裝指令
## 設置指令
此資源庫主要供教育內容學習使用。操作特定專案請參考以下指令：
本儲存庫主要用於教育內容瀏覽。針對特定專案開發：
### 主資源庫設定
### 主要儲存庫設置
```bash
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners
```
### 測驗應用程式設定 (Vue 3 + Vite)
### 測驗應用設置 (Vue 3 + Vite)
```bash
cd quiz-app
@ -51,12 +51,12 @@ npm run lint # 執行 ESLint
npm run format # 使用 Prettier 格式化
```
### 瀏覽器擴充功能專案
### 瀏覽器擴充專案
```bash
cd 5-browser-extension/solution
npm install
# 請遵循特定瀏覽器的擴充功能載入說明
# 請依照瀏覽器特定的擴充功能載入指示進行操作
```
### 太空遊戲專案
@ -78,35 +78,35 @@ python api.py
## 開發工作流程
### 對內容貢獻者
### 內容貢獻者指南
1. **Fork 本資源庫** 到你的 GitHub 帳號
2. **Clone 你的 fork** 至本機端
3. <strong>建立新分支</strong> 用來變更程式碼
4. 修改課程內容或程式範例
5. 在相關專案目錄中測試程式碼變更
6. 依貢獻指南提交 pull requests
1. **Fork 儲存庫** 至您的 GitHub 帳號
2. **本地 Clone 您的 Fork**
3. <strong>建立新分支</strong> 以進行變更
4. 修改課程內容或程式碼範例
5. 在相關專案資料夾測試程式碼變更
6. 提交 PR，遵循貢獻指導規範
### 對學習者
### 學習者指南
1. Fork 或 clone 資源庫
2. 依序進入各課程目錄
3. 閱讀各課程 README 文件
4. 完成 https://ff-quizzes.netlify.app/web/ 上的課前測驗
5. 實作課程資料夾內的程式碼範例
6. 完成作業與挑戰
7. 進行課後測驗
1. Fork 或 clone 本儲存庫
2. 按順序瀏覽課程資料夾
3. 閱讀每課 README 文件
4. 完成課前測驗：https://ff-quizzes.netlify.app/web/
5. 操作課程內的程式碼範例
6. 完成作業及挑戰任務
7. 參加課後測驗
### 線上開發
### 即時開發
- <strong>文件</strong>：於根目錄執行 `docsify serve`（預設埠號 3000）
- <strong>測驗應用程式</strong>：於 quiz-app 目錄執行 `npm run dev`
- <strong>專案</strong>：以 VS Code Live Server 外掛提供 HTML 專案即時伺服
- **API 專案**：於相應 API 目錄執行 `npm start`
- <strong>文件</strong>：在根目錄執行 `docsify serve`（預設埠 3000）
- <strong>測驗應用</strong>：在 quiz-app 目錄執行 `npm run dev`
- <strong>專案</strong>：使用 VS Code Live Server 外掛運行 HTML 專案
- **API 專案**：在相應 API 目錄執行 `npm start`
## 測試指令
### 測驗應用程式測試
### 測驗應用測試
```bash
cd quiz-app
@ -119,77 +119,77 @@ npm run build # 驗證建置是否成功
```bash
cd 7-bank-project/api
npm run lint # 檢查程式碼風格問題
node server.js # 驗證伺服器啟動時無錯誤
node server.js # 確認伺服器啟動無錯誤
```
### 一般測試方式
### 測試一般方針
- 本為教育資源庫，未完善自動化測試
- 本教育儲存庫無全面自動化測試
- 手動測試重點：
- 程式碼範例可正常執行且無錯誤
- 文件連結正確無誤
- 專案可成功建置
- 範例遵循最佳實務
- 程式碼範例無錯誤執行
- 文件中的連結有效
- 專案能成功建置
- 範例遵循最佳實踐
### 提交前檢查
- 在含 package.json 目錄執行 `npm run lint`
- 驗證 markdown 連結有效
- 在瀏覽器或 Node.js 中測試程式碼範例
- 確認翻譯文件結構無誤
- 在含有 package.json 的目錄執行 `npm run lint`
- 驗證 markdown 連結有效性
- 在瀏覽器或 Node.js 測試程式碼範例
- 確認翻譯檔結構正確
## 程式碼風格指南
### JavaScript
- 使用現代 ES6+ 語法
- 遵循專案提供的 ESLint 標準設定
- 變數與函式命名具教育意義
- 加註解說明概念方便學習者理解
- 在有設定的地方使用 Prettier 格式化
- 採用現代 ES6+ 語法
- 遵循專案內的 ESLint 標準設定
- 使用具意義的變數及函數名稱，加強教育清晰度
- 加入說明概念的註解
- 有設定時使用 Prettier 格式化
### HTML/CSS
- 採用語義化 HTML5 元素
- 採用語意化 HTML5 元素
- 響應式設計原則
- 清晰的 class 命名規範
- CSS 技巧的註解說明供學習用途
- 明確的 class 命名規範
- 加入說明 CSS 技巧的註解，方便學習者
### Python
- 遵循 PEP 8 風格指南
- 清楚、具教學意義的程式範例
- 需要時提供型別提示以利學習
- 遵守 PEP 8 風格規範
- 提供清晰且具教育意義的程式碼範例
- 適用時添加型別提示促進學習
### Markdown 文件
- 清晰的標題階層
- 指定語言的程式碼區塊
- 附加資源超鏈結
- 圖片置於 `images/` 資料夾
- 圖片附有替代文字方便無障礙
- 明確的標題層級
- 程式碼區塊標明語言
- 連結額外資源
- 在 `images/` 資料夾存放截圖與圖片
- 圖片添加替代文字以利無障礙
### 檔案組織
- 課程以序號編排（1-getting-started-lessons、2-js-basics 等）
- 每個專案含 `solution/`，且常見 `start/` 或 `your-work/` 目錄
- 圖片放置於課程專屬 `images/` 資料夾
- 翻譯文件依 `translations/{language-code}/` 結構管理
- 課程目錄依序編號 (1-getting-started-lessons, 2-js-basics 等)
- 各專案含 `solution/` 及多為 `start/` 或 `your-work/` 目錄
- 圖片存放於各課程專屬 `images/` 資料夾
- 翻譯存於 `translations/{language-code}/` 架構
## 建置與部署
### 測驗應用程式部署 (Azure 靜態網頁應用)
### 測驗應用部署 (Azure 靜態網站應用)
quiz-app 已設定用於 Azure 靜態網頁應用部署：
quiz-app 配置用於 Azure 靜態網站應用部署：
```bash
cd quiz-app
npm run build # 建立 dist/ 資料夾
# 在推送至 main 時透過 GitHub Actions 工作流程進行部署
# 在推送到 main 分支時，透過 GitHub Actions 工作流程部署
```
Azure 靜態網頁應用配置：
- <strong>應用程式位置</strong>：`/quiz-app`
Azure 靜態網站應用設定：
- <strong>應用位置</strong>：`/quiz-app`
- <strong>輸出位置</strong>：`dist`
- <strong>工作流程</strong>：`.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
@ -203,80 +203,80 @@ npm run convert # 從 docs 生成 PDF
### Docsify 文件
```bash
npm install -g docsify-cli # 全域安裝 Docsify
npm install -g docsify-cli # 全局安裝 Docsify
docsify serve # 在 localhost:3000 提供服務
```
### 專案建置
### 專案專屬建置流程
各專案目錄可能有自己的建置流程：
- Vue 專案：執行 `npm run build` 產生正式套件
- 靜態專案：無須建置，直接提供檔案伺服
各專案目錄可能有獨立建置流程：
- Vue 專案：執行 `npm run build` 生成生產包
- 靜態專案：無建置步驟，直接提供檔案
## Pull Request 指引
## 拉取請求指導方針
### 標題格式
使用清楚的描述標題，表明更動領域：
使用清晰描述性標題，明確變更範圍：
- `[Quiz-app] 新增第 X 課測驗`
- `[Lesson-3] 修正生態瓶專案錯字`
- `[Translation] 新增第 5 課西班牙語翻譯`
- `[Docs] 更新安裝指引`
- `[Docs] 更新安裝指示`
### 必要檢查
### 必須檢查
提交 PR 前：
1. <strong>程式碼品質</strong>：
- 在受影響專案目錄執行 `npm run lint`
- 修正所有 lint 警告與錯誤
- 在改動專案目錄執行 `npm run lint`
- 修正所有 lint 錯誤與警告
2. <strong>建置驗證</strong>：
- 如需要執行 `npm run build`
- 如適用，執行 `npm run build`
- 確認無建置錯誤
3. <strong>連結驗證</strong>：
- 測試所有 markdown 連結
- 確認圖片路徑正確
- 確認圖片引用有效
4. <strong>內容審查</strong>：
- 校對拼寫與語法
- 確認程式碼範例正確且具教學性
- 驗證翻譯保留原意
- 校對拼寫與文法
- 確定程式碼範例正確且教學性佳
- 確認翻譯保持原意
### 貢獻要求
- 同意 Microsoft CLA（首次 PR 自動檢查）
- 遵守 [Microsoft 開源行為守則](https://opensource.microsoft.com/codeofconduct/)
- 詳細規範見 [CONTRIBUTING.md](./CONTRIBUTING.md)
- PR 描述中註明議題編號（如有）
- 同意 Microsoft CLA（首個 PR 自動檢查）
- 遵守 [Microsoft 開源行為準則](https://opensource.microsoft.com/codeofconduct/)
- 詳細指南見 [CONTRIBUTING.md](./CONTRIBUTING.md)
- 如有，於 PR 描述中參照議題編號
### 審查流程
### 審核過程
- 由維護者與社群進行審查
- 強調教育清晰度
- 程式碼範例遵循最佳實務
- 翻譯審查正確性與文化適切性
- PR 由維護者與社群審核
- 優先考慮教育清晰度
- 程式碼範例應遵循當前最佳實踐
- 翻譯需準確且符合文化背景
## 翻譯系統
### 自動翻譯
- 使用 GitHub Actions 與 co-op-translator 工作流程
- 自動翻譯成 50 多種語言
- 原始文件位於主目錄
- 翻譯文件置於 `translations/{language-code}/` 目錄
- 使用 GitHub Actions 配合 co-op-translator 工作流程
- 自動翻譯超過 50 種語言
- 原始檔位於主目錄
- 翻譯檔存放於 `translations/{language-code}/`
### 手動翻譯改進
1. 找出 `translations/{language-code}/` 內對應檔案
2. 在保持結構不變下進行改良
3. 確保程式範例仍能正常執行
4. 測試本地化測驗內容
1. 定位 `translations/{language-code}/` 中的檔案
2. 在保留結構下進行改進
3. 確保程式碼範例可正確運行
4. 測試任何本地化測驗內容
### 翻譯元資料
翻譯文件內含元資料標頭：
翻譯檔包含元資料標頭：
```markdown
<!--
CO_OP_TRANSLATOR_METADATA:
@ -289,120 +289,120 @@ CO_OP_TRANSLATOR_METADATA:
-->
```
## 除錯與疑難排解
## 除錯與故障排除
### 常見問題
<strong>測驗應用程式無法啟動</strong>：
- 檢查 Node.js 版本（建議 v14 以上）
- 刪除 `node_modules` 與 `package-lock.json`，重新執行 `npm install`
- 確認埠號無衝突（Vite 預設使用 5173）
<strong>測驗應用無法啟動</strong>：
- 檢查 Node.js 版本（建議 v14+）
- 刪除 `node_modules` 與 `package-lock.json`，重啟 `npm install`
- 確認埠口無衝突（預設 Vite 埠 :5173）
**API 伺服器無法啟動**：
- 確認 Node.js 版本符合需求（node >=10）
- 檢查埠號是否已使用
- 確保所有依賴安裝完整（npm install）
- 檢查 Node.js 版本（node >=10）
- 確認埠口未被佔用
- 確保已執行 `npm install` 安裝所有相依套件
<strong>瀏覽器擴充功能載入失敗</strong>：
- 驗證 manifest.json 格式正確
- 查看瀏覽器主控台錯誤訊息
- 遵循瀏覽器擴充功能安裝指引
<strong>瀏覽器擴充無法載入</strong>：
- 檢查 manifest.json 格式是否正確
- 查看瀏覽器控制台錯誤訊息
- 遵循瀏覽器專用擴充安裝說明
**Python 聊天專案問題**：
- 確認已安裝 OpenAI 套件：`pip install openai`
- 設定 GITHUB_TOKEN 環境變數
- 確認 GitHub Models 存取權限
- 確認已設定 GITHUB_TOKEN 環境變數
- 檢查 GitHub Models 存取權限
**Docsify 無法提供文件**：
**Docsify 無法提供文件服務**：
- 全域安裝 docsify-cli：`npm install -g docsify-cli`
- 於資源庫根目錄執行
- 確認 `docs/_sidebar.md` 存在
- 於儲存庫根目錄執行
- 確認存在 `docs/_sidebar.md`
### 開發環境小技巧
### 開發環境提示
- 使用 VS Code 及 Live Server 外掛以支援 HTML 專案即時預覽
- 安裝 ESLint 與 Prettier 外掛以保持程式碼風格一致
- 利用瀏覽器開發工具除錯 JavaScript
- Vue 專案則安裝 Vue DevTools 瀏覽器外掛
- 使用 VS Code 搭配 Live Server 外掛瀏覽 HTML 專案
- 安裝 ESLint 與 Prettier 外掛保持格式一致
- 透過瀏覽器開發者工具調試 JavaScript
- Vue 專案可安裝 Vue DevTools 瀏覽器外掛
### 效能考量
### 性能考量
- 多達 50 多種語言翻譯檔案，完整 clone 容量大
- 僅作內容開發時可淺層 clone：`git clone --depth 1`
- 英文內容開發時排除翻譯目錄查詢
- 第一次執行建置流程較慢（npm install、Vite build）
- 翻譯檔案量大（50+ 種語言）導致完整 clone 檔案龐大
- 若只處理內容，可用淺層 clone：`git clone --depth 1`
- 編輯英文內容時，可排除翻譯檔搜索
- 建置流程初次執行較慢（npm install、Vite 建置）
## 安全考量
### 環境變數
- API 金鑰嚴禁提交至資源庫
- 使用 `.env` 檔案（已列入 `.gitignore`）
- 各專案 README 中記錄必須環境變數
- API 金鑰切勿提交至儲存庫
- 使用 `.env` 檔（已列入 `.gitignore`）
- 文件中說明所需環境變數
### Python 專案
- 建議使用虛擬環境：`python -m venv venv`
- 保持依賴套件最新
- GitHub 令牌應設權限最小化
- 使用虛擬環境：`python -m venv venv`
- 維持相依性更新
- GitHub 令牌應限制在必須權限
### GitHub Models 存取
- 需使用個人存取代幣 (PAT)
- 令牌存放於環境變數中
- 切勿提交令牌或認證資料
- 需個人存取令牌 (PAT)
- 將令牌設為環境變數保存
- 切勿提交令牌或認證資訊
## 其他備註
## 補充說明
### 目標對象
- 完全沒有網頁開發經驗者
- 學生及自學者
- 教師在課堂上使用此課程
- 內容設計兼顧無障礙及逐步技能養成
- 教師於教室中使用此課程
- 內容設計強調無障礙與逐步技能建立
### 教學理念
### 教育理念
- 專案導向學習
- 經常性知識檢核（測驗）
- 著重動手寫程式練習
- 應用真實範例
- 先建立基礎，再進入框架應用
- 專案導向學習法
- 頻繁的知識檢測（測驗）
- 動手編寫程式練習
- 實務應用範例
- 著重基礎概念，漸進探索框架
### 資源庫維護
### 儲存庫維護
- 積極活躍的學習社群與貢獻者
- 定期更新套件與內容
- 維護者持續追蹤議題與討論
- 翻譯更新由 GitHub Actions 自動化
- 積極活躍的學習及貢獻社群
- 定期更新相依套件與內容
- 維護者監控議題與討論
- 翻譯透過 GitHub Actions 自動更新
### 相關資源
- [Microsoft Learn 模組](https://docs.microsoft.com/learn/)
- [學生中心資源](https://docs.microsoft.com/learn/student-hub/)
- 建議學習者使用 [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot)
- 其他課程：生成式 AI、資料科學、機器學習、物聯網課程可用
- [學生資源中心](https://docs.microsoft.com/learn/student-hub/)
- 推薦使用 [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot)
- 其他課程：生成式 AI、資料科學、機器學習、物聯網課程
### 操作特定專案說明
### 個別專案操作
詳細操作說明請參考以下專案 README：
詳細說明請參閱下列 README：
- `quiz-app/README.md` - Vue 3 測驗應用
- `7-bank-project/README.md` - 含身分驗證的銀行應用
- `5-browser-extension/README.md` - 瀏覽器擴充功能開發
- `7-bank-project/README.md` - 含驗證的銀行應用
- `5-browser-extension/README.md` - 瀏覽器擴充開發
- `6-space-game/README.md` - Canvas 遊戲開發
- `9-chat-project/README.md` - AI 聊天助理專案
### 單一資源庫結構
### Monorepo 結構
本資源庫雖非傳統 monorepo，但包含多個獨立專案：
- 各課程單元彼此獨立
- 專案間不共用依賴
- 可單獨作業不影響他專案
- 完整課程體驗建議 clone 全部資源
雖非傳統 monorepo，但包含多個獨立專案：
- 每堂課皆自成一格
- 專案間無相依共享
- 可單獨作業不影響其他專案
- 克隆完整儲存庫以取得完整課程體驗
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免責聲明**：
本文件由 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 翻譯而成。雖然我們致力於準確性，但請注意自動翻譯可能包含錯誤或不準確之處。原始文件的原文版本應視為權威來源。對於重要資訊，建議採用專業人工翻譯。我們不對因使用本翻譯而產生的任何誤解或誤譯負責。
本文件係使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們致力於保持準確性，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應視為權威資料來源。對於重要資訊，建議採用專業人工翻譯。我們不對因使用本翻譯所引起之任何誤解或誤釋負責。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

203
translations/zh-TW/README.md
Unescape View File

@ -10,29 +10,29 @@
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
# 初學者的網頁開發課程
# 新手入門網頁開發課程
透過微軟雲端推廣員的 12 週全面課程，學習網頁開發的基礎知識。24 個課程單元透過實作專案如生態瓶、瀏覽器擴充功能及太空遊戲，深入探討 JavaScript、CSS 和 HTML。參與測驗、討論及實務作業。利用我們高效的專案導向教學法，強化技能並優化知識吸收。立即展開你的程式設計之旅！
透過微軟雲端推廣團隊帶來的為期12週綜合課程，學習網頁開發的基礎知識。這24堂課會深入探討JavaScript、CSS與HTML，並且透過各種動手專案，例如微型生態瓶、瀏覽器擴充功能以及太空遊戲。參與小測驗、討論與實作作業。運用我們有效的專案導向教學法，提升你的技能並優化知識吸收。今天就開始你的程式設計旅程吧！
加入 Azure AI Foundry Discord 社群
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
按照以下步驟開始使用這些資源：
1. **派生本倉庫**：點擊 [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **複製本倉庫**： `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**加入 Azure AI Foundry Discord，與專家及其他開發者互動**](https://discord.com/invite/ByRwuEEgH4)
開始使用這些資源的步驟如下：
1. **Fork 該儲存庫**：點擊 [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Clone 該儲存庫**： `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**加入 Azure AI Foundry Discord，與專家及其他開發者交流合作**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 多語言支援
#### 透過 GitHub Action 實現（自動且持續更新）
#### 透過 GitHub Action 支援（自動且保持最新）
<!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->
[阿拉伯語](../ar/README.md) | [孟加拉語](../bn/README.md) | [保加利亞語](../bg/README.md) | [緬甸語](../my/README.md) | [中文（簡體）](../zh-CN/README.md) | [中文（繁體，香港）](../zh-HK/README.md) | [中文（繁體，澳門）](../zh-MO/README.md) | [中文（繁體，台灣）](./README.md) | [克羅埃西亞語](../hr/README.md) | [捷克語](../cs/README.md) | [丹麥語](../da/README.md) | [荷蘭語](../nl/README.md) | [愛沙尼亞語](../et/README.md) | [芬蘭語](../fi/README.md) | [法語](../fr/README.md) | [德語](../de/README.md) | [希臘語](../el/README.md) | [希伯來語](../he/README.md) | [印地語](../hi/README.md) | [匈牙利語](../hu/README.md) | [印尼語](../id/README.md) | [義大利語](../it/README.md) | [日語](../ja/README.md) | [卡納達語](../kn/README.md) | [韓語](../ko/README.md) | [立陶宛語](../lt/README.md) | [馬來語](../ms/README.md) | [馬拉亞拉姆語](../ml/README.md) | [馬拉地語](../mr/README.md) | [尼泊爾語](../ne/README.md) | [奈及利亞洋腔](../pcm/README.md) | [挪威語](../no/README.md) | [波斯語 (法爾西)](../fa/README.md) | [波蘭語](../pl/README.md) | [葡萄牙語 (巴西)](../pt-BR/README.md) | [葡萄牙語 (葡萄牙)](../pt-PT/README.md) | [旁遮普語 (Gurmukhi)](../pa/README.md) | [羅馬尼亞語](../ro/README.md) | [俄語](../ru/README.md) | [塞爾維亞語 (西里爾字母)](../sr/README.md) | [斯洛伐克語](../sk/README.md) | [斯洛文尼亞語](../sl/README.md) | [西班牙語](../es/README.md) | [斯瓦希里語](../sw/README.md) | [瑞典語](../sv/README.md) | [他加祿語 (菲律賓語)](../tl/README.md) | [泰米爾語](../ta/README.md) | [泰盧固語](../te/README.md) | [泰語](../th/README.md) | [土耳其語](../tr/README.md) | [烏克蘭語](../uk/README.md) | [烏爾都語](../ur/README.md) | [越南語](../vi/README.md)
[阿拉伯文](../ar/README.md) | [孟加拉文](../bn/README.md) | [保加利亞文](../bg/README.md) | [緬甸語](../my/README.md) | [中文（簡體）](../zh-CN/README.md) | [中文（繁體，香港）](../zh-HK/README.md) | [中文（繁體，澳門）](../zh-MO/README.md) | [中文（繁體，台灣）](./README.md) | [克羅埃西亞文](../hr/README.md) | [捷克文](../cs/README.md) | [丹麥文](../da/README.md) | [荷蘭文](../nl/README.md) | [愛沙尼亞文](../et/README.md) | [芬蘭文](../fi/README.md) | [法文](../fr/README.md) | [德文](../de/README.md) | [希臘文](../el/README.md) | [希伯來文](../he/README.md) | [印地文](../hi/README.md) | [匈牙利文](../hu/README.md) | [印尼文](../id/README.md) | [義大利文](../it/README.md) | [日文](../ja/README.md) | [卡納達文](../kn/README.md) | [高棉文](../km/README.md) | [韓文](../ko/README.md) | [立陶宛文](../lt/README.md) | [馬來文](../ms/README.md) | [馬拉雅拉姆文](../ml/README.md) | [馬拉地文](../mr/README.md) | [尼泊爾文](../ne/README.md) | [奈及利亞派金語](../pcm/README.md) | [挪威文](../no/README.md) | [波斯文（法爾西語）](../fa/README.md) | [波蘭文](../pl/README.md) | [葡萄牙文（巴西）](../pt-BR/README.md) | [葡萄牙文（葡萄牙）](../pt-PT/README.md) | [旁遮普文（古魯穆奇體）](../pa/README.md) | [羅馬尼亞文](../ro/README.md) | [俄文](../ru/README.md) | [塞爾維亞文（西里爾字母）](../sr/README.md) | [斯洛伐克文](../sk/README.md) | [斯洛文尼亞文](../sl/README.md) | [西班牙文](../es/README.md) | [斯瓦希里文](../sw/README.md) | [瑞典文](../sv/README.md) | [他加祿文（菲律賓語）](../tl/README.md) | [坦米爾文](../ta/README.md) | [泰盧固文](../te/README.md) | [泰文](../th/README.md) | [土耳其文](../tr/README.md) | [烏克蘭文](../uk/README.md) | [烏爾都文](../ur/README.md) | [越南文](../vi/README.md)
> **偏好本機複製？**
> **想要本機複製？**
>
> 本倉庫包含 50 多種語言翻譯，會大幅增加下載大小。若想不包含翻譯檔複製，請使用稀疏簽出：
> 此儲存庫包含50多種語言的翻譯，顯著增加下載大小。想要不含翻譯的複製，可以使用稀疏檢出：
>
> **Bash / macOS / Linux:**
> ```bash
@ -48,175 +48,174 @@
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> ```
>
> 這可幫助你用更快速度下載並擁有完成課程所需的一切資料。
> 這會讓你快速下載所需完成課程的所有內容。
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**若希望支援更多翻譯語言，可查看[此處](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**若你希望新增其他翻譯語言，支援語言列表見[此處](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑‍🎓 _你是學生嗎？_
請造訪[**學生專區頁面**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon)，這裡提供初學者資源、學生套件，甚至免費證書代金券兌換方式。請收藏此頁，並定期瀏覽，我們會每月更新內容。
請造訪[<strong>學生中心頁面</strong>](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon)，你會找到初學資源、學生套件，甚至取得免費證書憑證的方式。這是你想要收藏並時常關注的網頁，因為我們會每月更換內容。
### 📣 公告 - 新增 GitHub Copilot 代理模式挑戰關卡！
### 📣 公告 - 新增 GitHub Copilot Agent 模式挑戰任務！
新挑戰已加入，大多數章節中可見 "GitHub Copilot Agent Challenge 🚀"。這是使用 GitHub Copilot 與代理模式完成的全新挑戰。如果你還沒用過代理模式，它不僅能生成文字，還能建立與編輯檔案、執行指令等。
新增挑戰任務，請在多數章節中尋找「GitHub Copilot Agent Challenge 🚀」。這是使用 GitHub Copilot 與 Agent 模式完成的新挑戰。如果你從未使用過 Agent 模式，它不僅能生成文字，還可建立與編輯檔案、執行指令等等。
### 📣 公告 - _新增使用生成式 AI 建置的專案_
### 📣 公告 - _新增使用生成式 AI 的專案_
最新 AI 助理專案已推出，詳見[專案](./9-chat-project/README.md)
新 AI 助理專案已新增，請查看該[專案](./9-chat-project/README.md)
### 📣 公告 - _全新生成式 AI JavaScript 課程大公開_
### 📣 公告 - _新推出 JavaScript 生成式 AI 課程_
別錯過我們的全新生成式 AI 課程！
別錯過我們全新的生成式 AI 課程！
造訪 [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) 開始學習！
請造訪 [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) 開始學習！
![背景](../../translated_images/zh-TW/background.148a8d43afde5730.webp)
![Background](../../translated_images/zh-TW/background.148a8d43afde5730.webp)
- 課程涵蓋從基礎到 RAG 技術。
- 使用生成式 AI 與伴隨應用互動，與歷史人物對話。
- 趣味且引人入勝的故事情節，你將展開時光之旅！
- 課程涵蓋從基礎到 RAG（檢索增強生成）
- 利用生成式 AI 與我們的伴隨應用互動歷史人物
- 有趣且引人入勝的敘事，你將穿越時空！
![角色](../../translated_images/zh-TW/character.5c0dd8e067ffd693.webp)
![character](../../translated_images/zh-TW/character.5c0dd8e067ffd693.webp)
每課皆包含一項作業、知識測試與挑戰，引導你學習以下主題：
- 提示及提示工程
- 文字與圖像應用程式生成
- 搜尋應用程式
每堂課均包含作業、知識測試及挑戰，協助你學習以下主題：
- 提示語及提示語工程
- 文字與圖片應用生成
- 搜尋應用
造訪 [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) 開始學習！
請造訪 [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) 開始學習！
## 🌱 開始使用
> **老師們**，我們有[包含一些建議](for-teachers.md)來協助您使用此課程。歡迎您在[討論區](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)給予回饋！
> <strong>老師們</strong>，我們提供 [使用此課程的一些建議](for-teachers.md)。非常歡迎您在[討論區](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)分享您的反饋！
**[學習者](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**，每堂課從課前測驗開始，接著閱讀課程內容，完成各種活動，並以課後測驗檢驗理解度。
**[學習者](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**，每堂課，請先完成課前小測驗，接著閱讀講義材料，完成各項活動，最後以課後小測驗檢視理解。
為強化學習體驗，請與同儕合作專案！我們歡迎在[討論區](https://github.com/microsoft/Web-Dev-For-Beginners/discussions)分享並討論，管理員團隊會協助解答你的問題。
為提升學習體驗，建議與夥伴合作完成專案！鼓勵您在我們的[討論區](https://github.com/microsoft/Web-Dev-For-Beginners/discussions)中互動，我們的版主團隊將隨時為您解答問題。
若想進一步進修，强烈推薦探索[Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon)提供的額外學習資源。
若想進一步學習，強烈建議探索[Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon)以取得更多學習資源。
### 📋 環境設定
### 📋 設定你的開發環境
本課程提供一整套開發環境！開始時，你可以選擇在 [Codespace](https://github.com/features/codespaces/) 中執行（基於瀏覽器，無需安裝軟體），或在本機電腦上使用文字編輯器，如 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)。
此課程已有準備好開發環境！開始時，你可以選擇使用 [Codespace](https://github.com/features/codespaces/)（瀏覽器執行、免安裝環境），或是使用文字編輯器（例如 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)）在本機電腦執行。
#### 建立你的代碼庫
為方便儲存作業，建議你建立本倉庫的個人副本。按下頁面頂端的 **Use this template** 按鈕，系統會在你的 GitHub 帳號內建立包含課程內容的新代碼庫。
#### 建立你的儲存庫
為方便儲存你的作品，建議你建立此儲存庫的個人複本。你可以點選頁面頂端的 **Use this template** 按鈕，這將在你的 GitHub 帳號中建立一個帶有課程內容的全新儲存庫。
執行步驟如下：
1. **派生本倉庫**：點擊本頁右上角的「Fork」按鈕。
2. **複製本倉庫**： `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
操作步驟如下：
1. **Fork 該儲存庫**：點擊本頁面右上方的「Fork」按鈕。
2. **Clone 該儲存庫**： `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### 在 Codespace 執行課程
#### 在 Codespace 中運行課程
於持有的此倉庫副本中點擊 **Code** 按鈕，選擇 **Open with Codespaces**，系統即為你建立新的 Codespace 工作環境。
在你建立的複本中，點擊 **Code** 按鈕並選擇 **Open with Codespaces**。系統將建立一個新的 Codespace 供你使用。
![Codespace](../../translated_images/zh-TW/createcodespace.0238bbf4d7a8d955.webp)
#### 在本機電腦執行課程
#### 在本機電腦上運行課程
欲在本機運行課程，需準備文字編輯器、瀏覽器及命令列工具。我們的第一堂課，[程式語言與開發工具入門](../../1-getting-started-lessons/1-intro-to-programming-languages) 將引導你檢視各種選項，選擇最適合你的工具。
若要在本機電腦上運行本課程，你需要文字編輯工具、瀏覽器及命令列工具。我們的第一課，[程式語言與開發工具簡介](../../1-getting-started-lessons/1-intro-to-programming-languages)，會帶你了解各種這些工具的選項，讓你挑選最適合自己的。
建議使用 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 作為編輯器，其內建[終端機](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)功能。你可在此處下載 Visual Studio Code：[https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 。
1. 將您的存放庫複製到您的電腦。您可以點擊 **Code** 按鈕並複製 URL：
我們推薦使用 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 作為你的編輯器，它也內建有 [終端機](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)。你可以從這裡下載 Visual Studio Code：[連結](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)。
1. 將您的儲存庫複製到您的電腦。您可以點擊 **Code** 按鈕並複製 URL：
[CodeSpace](./images/createcodespace.png)
接著，在 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 中開啟 [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) 並執行以下指令，將 `<your-repository-url>` 替換成剛剛複製的 URL：
然後，在 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 中打開 [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) 並執行以下命令，將 `<your-repository-url>` 替換為剛才複製的網址：
```bash
git clone <your-repository-url>
```
2. 在 Visual Studio Code 中開啟資料夾。您可以點擊 **File** > **Open Folder** 並選擇剛剛複製的資料夾。
2. 在 Visual Studio Code 中打開該資料夾。您可以點擊 **File** > **Open Folder** 並選擇剛剛複製的資料夾。
> 推薦的 Visual Studio Code 擴充功能：
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - 在 Visual Studio Code 內預覽 HTML 頁面
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - 幫助您加快寫程式碼的速度
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - 用於在 Visual Studio Code 中預覽 HTML 頁面
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - 幫助您更快地撰寫程式碼
## 📂 每堂課包含：
## 📂 每個課程包括：
- 選擇性手繪筆記
- 選擇性補充影片
- 課前熱身小測驗
- 可選的手繪筆記
- 可選的補充影片
- 課前暖身測驗
- 書面課程內容
- 專案導向課程會有逐步專案建立指南
- 知識檢核
- 專案導向課程包含逐步指引如何建置專案
- 知識檢查
- 挑戰題
- 補充閱讀材料
- 作業
- [課後測驗](https://ff-quizzes.netlify.app/web/)
> **關於測驗的註解**：所有測驗均包含在 Quiz-app 資料夾中，共 48 場測驗，每場三題。可在[此處](https://ff-quizzes.netlify.app/web/)取得。測驗應用可以在本機運行或部署至 Azure；詳細說明請參考 quiz-app 資料夾。
> <strong>關於測驗的備註</strong>：所有測驗都包含在 Quiz-app 資料夾中，總共有 48 個測驗，每個測驗三個問題。可於[這裡](https://ff-quizzes.netlify.app/web/)使用，這個測驗應用程式可在本地執行或部署到 Azure；請遵循 `quiz-app` 資料夾中的說明。
## 🗃️ 課程列表
| | 專案名稱 | 教授概念 | 學習目標 | 連結課程 | 作者 |
| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 01 | 開始入門 | 程式設計與開發工具導論 | 學習大部分程式語言的基礎原理以及協助專業開發者工作的軟體 | [程式語言與開發工具導論](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | 開始入門 | GitHub 基礎，包含團隊協作 | 如何在專案中使用 GitHub，如何與他人協作程式碼庫 | [GitHub 入門](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | 開始入門 | 無障礙設計 | 學習網頁無障礙設計的基本概念 | [無障礙基礎](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS 基礎 | JavaScript 資料型別 | JavaScript 資料型別基礎 | [資料型別](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS 基礎 | 函數與方法 | 了解如何使用函數及方法管理應用程式的邏輯流程 | [函數與方法](./2-js-basics/2-functions-methods/README.md) | Jasmine 和 Christopher |
| 06 | JS 基礎 | 使用 JS 做決策 | 學習使用決策方法建立程式條件 | [做決策](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS 基礎 | 陣列與迴圈 | 使用 JavaScript 陣列與迴圈操作資料 | [陣列與迴圈](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML 實務 | 建置 HTML 製作線上生態缸，專注於網頁排版 | [HTML入門](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS 實務 | 建置 CSS 來設計線上生態缸，專注於基礎 CSS 及響應式網頁設計 | [CSS入門](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript 閉包與 DOM 操作 | 建置 JavaScript 使完整生態缸具拖拉介面功能，專注閉包與 DOM 操作 | [JavaScript 閉包與 DOM 操作](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [打字遊戲](./4-typing-game/solution/README.md) | 建立打字遊戲 | 學習如何使用鍵盤事件驅動 JavaScript 應用邏輯 | [事件驅動程式設計](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [綠色瀏覽器擴充功能](./5-browser-extension/solution/README.md) | 瀏覽器工作原理 | 了解瀏覽器如何運作及其歷史，並架構瀏覽器擴充功能的基本元素 | [認識瀏覽器](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [綠色瀏覽器擴充功能](./5-browser-extension/solution/README.md) | 建立表單、呼叫 API 並儲存變數於本地儲存 | 建立瀏覽器擴充功能的 JavaScript 元素，使用本地儲存的變數呼叫 API | [API、表單與本地儲存](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [綠色瀏覽器擴充功能](./5-browser-extension/solution/README.md) | 瀏覽器背景程序與網頁效能 | 使用瀏覽器背景程序來管理擴充圖示；學習網頁效能與優化方式 | [背景作業與效能](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [太空遊戲](./6-space-game/solution/README.md) | 進階的 JavaScript 遊戲開發 | 了解繼承、類別與組合以及 Pub/Sub 模式，為建立遊戲做準備 | [進階遊戲開發入門](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [太空遊戲](./6-space-game/solution/README.md) | 畫到畫布 | 學習 Canvas API，用於繪製畫面元素 | [畫到 Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [太空遊戲](./6-space-game/solution/README.md) | 移動畫面上的元素 | 探索元素如何透過笛卡兒座標與 Canvas API 產生運動 | [移動畫素](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [太空遊戲](./6-space-game/solution/README.md) | 碰撞偵測 | 讓元素相互碰撞並做出反應，使用按鍵事件並提供冷卻功能以確保遊戲順暢 | [碰撞偵測](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [太空遊戲](./6-space-game/solution/README.md) | 計分 | 根據遊戲狀態與表現進行數學計算 | [計分](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [太空遊戲](./6-space-game/solution/README.md) | 遊戲結束與重新開始 | 了解遊戲結束與重新開始，包括清理資源與重設變數 | [結束條件](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [銀行應用程式](./7-bank-project/solution/README.md) | HTML 範本與網頁路由 | 學習如何建立多頁網站架構，使用路由與 HTML 範本 | [HTML 範本與路由](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [銀行應用程式](./7-bank-project/solution/README.md) | 建立登入與註冊表單 | 了解建立表單及處理驗證程序 | [表單](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [銀行應用程式](./7-bank-project/solution/README.md) | 資料抓取與使用 | 了解資料在應用程式中的流動，如何抓取、儲存與處理 | [資料](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [銀行應用程式](./7-bank-project/solution/README.md) | 狀態管理概念 | 學習應用程式如何保持狀態並以程式方式管理 | [狀態管理](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [瀏覽器/VSCode 程式碼](../../8-code-editor) | 使用 VSCode | 學習如何使用程式碼編輯器 | [使用 VSCode 程式碼編輯器](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI 助理](./9-chat-project/README.md) | 使用 AI | 學習如何打造自己的 AI 助理 | [AI 助理專案](./9-chat-project/README.md) | Chris |
| 01 | Getting Started | 程式設計入門與工具介紹 | 學習多數程式語言的基本原理與協助專業開發者工作的軟體 | [Intro to Programming Languages and Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Getting Started | GitHub 基本操作與團隊協作 | 如何在您的專案中使用 GitHub 並與他人協作 | [Intro to GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Getting Started | 無障礙設計基礎 | 學習網頁無障礙設計基礎 | [Accessibility Fundamentals](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Basics | JavaScript 資料型態 | JavaScript 資料型態的基礎 | [Data Types](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Basics | 函數與方法 | 學習如何使用函數與方法管理應用程式中的邏輯流 | [Functions and Methods](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | JS Basics | 使用 JS 做決策判斷 | 學習如何在程式碼中使用判斷條件 | [Making Decisions](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Basics | 陣列與迴圈 | 使用 JavaScript 中的陣列與迴圈操作資料 | [Arrays and Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML 實作 | 建立 HTML 以創建線上生態箱，專注於版面設計 | [Introduction to HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS 實作 | 編寫 CSS 以美化線上生態箱，專注於 CSS 基礎及使頁面具備響應式 | [Introduction to CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript 閉包與 DOM 操作 | 編寫 JavaScript 使生態箱具備拖放功能，專注於閉包與 DOM 操作 | [JavaScript Closures, DOM manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | 建置打字遊戲 | 學習如何使用鍵盤事件驅動 JavaScript 應用邏輯 | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | 瀏覽器運作 | 瞭解瀏覽器運作原理、歷史以及如何架構第一個瀏覽器擴充功能元素 | [About Browsers](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | 建立表單、呼叫 API 及使用本機端儲存變數 | 編寫瀏覽器擴充功能的 JavaScript 元素，使用儲存於本機端的變數呼叫 API | [APIs, Forms, and Local Storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | 瀏覽器背景程序與網頁效能優化 | 利用瀏覽器背景程序管理擴充功能圖示；了解網頁效能及部分優化技巧 | [Background Tasks and Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | 進階 JavaScript 遊戲開發 | 學習使用類別繼承、組合與公佈/訂閱 (Pub/Sub) 模式，為建置遊戲做準備 | [Introduction to Advanced Game Development](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Canvas 繪圖 | 認識 Canvas API，用於畫面元素繪製 | [Drawing to Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | 移動畫面中的元素 | 探索如何使用笛卡兒坐標與 Canvas API 來讓元素產生移動效果 | [Moving Elements Around](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | 碰撞偵測 | 使元素能相互碰撞且反應，利用按鍵事件並提供冷卻功能確保遊戲效能 | [Collision Detection](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | 計分 | 根據遊戲狀態與表現進行數學計算 | [Keeping Score](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | 結束及重新開始遊戲 | 了解如何結束並重啟遊戲，包括清理資源與重設變數值 | [The Ending Condition](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | 網頁應用中的 HTML 模板與路由 | 學習如何使用路由與 HTML 模板建立多頁網站架構 | [HTML Templates and Routes](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | 建立登入與註冊表單 | 學習建立表單及處理驗證流程 | [Forms](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | 資料抓取與使用方法 | 資料如何流入流出您的應用，如何抓取、儲存與處理 | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | 狀態管理概念 | 瞭解您的應用如何保留狀態及如何以程式方式管理狀態 | [State Management](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | 使用 VScode | 學習如何使用程式碼編輯器 | [Use VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | 使用 AI | 學習如何打造自己的 AI 助手 | [AI Assistant project](./9-chat-project/README.md) | Chris |
## 🏫 教學法
我們的課程設計基於兩項重要的教學原理：
我們的課程設計基於兩個關鍵教學原則：
* 專案導向學習
* 頻繁測驗
* 頻繁的測驗
本課程教授 JavaScript、HTML 和 CSS 的基礎，以及現今網頁開發者常用的最新工具與技術。學生將有機會透過實作打造打字遊戲、虛擬生態缸、環保瀏覽器擴充功能、太空侵略者風格遊戲及銀行業務應用。課程結束時，學生將具備紮實的網頁開發理解。
該計畫涵蓋 JavaScript、HTML 及 CSS 的基礎，以及當前網頁開發人員所使用的最新工具與技術。學生將有機會透過建構打字遊戲、虛擬生態箱、環保瀏覽器擴充功能、太空入侵者風格遊戲和企業銀行應用程式來累積實作經驗。課程結束時，學生將對網頁開發獲得扎實的理解。
> 🎓 您可以將本課程的前幾堂課以 Microsoft Learn 的[學習路徑](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon)形式來學習！
> 🎓 您也可以在 Microsoft Learn 上以此課程的[學習路徑](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon)開始前幾課！
確保課程內容配合專案，使學習過程更具吸引力並提升概念記憶。我們也撰寫多堂 JavaScript 基礎入門課程搭配「[JavaScript 初學者系列](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)」影片教學，其中多位作者參與本課程。
透過確保內容與專案緊密對應，學習過程對學生來說更具吸引力且概念吸收更佳。我們也撰寫了多堂 JavaScript 基礎入門課程，搭配「[JavaScript 新手系列](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)」的教學影片，其中部分作者也參與本課程內容的編撰。
此外，課前低難度測驗設立學習目標，課後第二次測驗確保加強記憶。這課程設計靈活有趣，可以完整學習或部分學習。專案從簡單開始，12 週課程結束時逐步變得複雜。
此外，每堂課前的低壓力測驗幫助學生專心學習主題，而課後的測驗則促進進一步的概念鞏固。此課程設計靈活有趣，可全程參與或分段學習。專案由淺入深，逐漸增加難度，包含一個 12 週的循環課程。
我們特意避免介紹 JavaScript 框架，專注培養基本技能，學習者後續可利用另一系列影片「[Node.js 初學者系列](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)」來深入 Node.js。
雖然我們刻意避免介紹 JavaScript 框架，以便先專注於成為網頁開發人員所需的基本技能，再採用框架，接下來的好選擇是透過另一系列教學影片學習 Node.js：「[Node.js 新手系列](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)」。
> 請參閱我們的[行為準則](CODE_OF_CONDUCT.md)與[貢獻指南](CONTRIBUTING.md)。歡迎您提供建設性回饋！
> 請參考我們的[行為準則](CODE_OF_CONDUCT.md)及[貢獻指南](CONTRIBUTING.md)。我們歡迎您提出建設性的回饋！
## 🧭 離線使用
## 🧭 離線存取
您可透過 [Docsify](https://docsify.js.org/#/) 離線瀏覽本文件。將此倉庫分支，於本機安裝 [Docsify](https://docsify.js.org/#/quickstart)，接著在此倉庫根目錄執行 `docsify serve`。網站將在本機的 3000 埠提供服務：`localhost:3000`。
您可以使用 [Docsify](https://docsify.js.org/#/) 離線瀏覽本文件。請 fork 此儲存庫，在本機安裝 [Docsify](https://docsify.js.org/#/quickstart)，然後於本儲存庫根目錄輸入 `docsify serve`。網站將透過本地主機的 3000 埠提供服務：`localhost:3000`。
## 📘 PDF
所有課程的 PDF 可在[這裡](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf)找到。
所有課程的 PDF 版本可在[此處](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf)下載。
## 🎒 其他課程
我們團隊還製作其他課程！請參考：
我們團隊還製作了其他課程！請參考：
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
@ -260,21 +259,21 @@
## 尋求協助
如果你遇到困難或對建立 AI 應用有任何疑問，歡迎加入 MCP 的學習者和資深開發者討論群。這是一個支持性社群，歡迎提出問題並自由分享知識。
如果你遇到困難或對建置 AI 應用程式有任何疑問，歡迎加入其他學習者及經驗豐富開發者，參與 MCP 的討論。這裏是一個支持性強的社群，歡迎提問並自由分享知識。
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
如果你在開發過程中有產品回饋或錯誤，請造訪：
如果你在建置過程中有產品回饋或錯誤，請造訪：
[![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum)
## 授權
## 授權條款
本專案庫採用 MIT 授權。詳情請參閱 [LICENSE](../../LICENSE) 檔案。
本專案庫採用 MIT 授權條款。詳情請參閱[LICENSE](../../LICENSE)檔案。
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免責聲明**：
本文件係使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們力求準確，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件之母語版本應被視為權威來源。對於重要資訊，建議採用專業人工翻譯。我們不對因使用本翻譯所引起的任何誤解或誤譯承擔責任。
本文件由 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們力求準確，但請注意自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應視為權威來源。對於重要資訊，建議採用專業人工翻譯。我們不對因使用本翻譯而產生的任何誤解或曲解承擔責任。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
Write Preview
Loading…
Cancel
Save