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, 12 changes)

Browse Source
update-translations
localizeflow[bot] 4 days ago
parent bf98c081ca
commit fa714421a9
12 changed files with 2058 additions and 2036 deletions
Show Stats Download Patch File Download Diff File

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

@ -1,7 +1,7 @@
{
"1-getting-started-lessons/1-intro-to-programming-languages/README.md": {
"original_hash": "d45ddcc54eb9232a76d08328b09d792e",
"translation_date": "2026-01-06T13:11:27+00:00",
"original_hash": "bec5e35642176d9e483552bfc82996d8",
"translation_date": "2026-03-06T17:59:01+00:00",
"source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md",
"language_code": "zh-HK"
},
@ -493,7 +493,7 @@
},
"AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2026-02-06T16:23:03+00:00",
"translation_date": "2026-03-06T18:07:37+00:00",
"source_file": "AGENTS.md",
"language_code": "zh-HK"
},
@ -516,8 +516,8 @@
"language_code": "zh-HK"
},
"README.md": {
"original_hash": "6d6385fd098088cb2d690fb0a6cdaedc",
"translation_date": "2026-02-06T16:16:46+00:00",
"original_hash": "a2c9eed480687319517c08a6319e5536",
"translation_date": "2026-03-06T17:55:10+00:00",
"source_file": "README.md",
"language_code": "zh-HK"
},

719
translations/zh-HK/1-getting-started-lessons/1-intro-to-programming-languages/README.md
View File

File diff suppressed because it is too large Load Diff

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

@ -2,27 +2,27 @@
## Project Overview
這是一個教育課程倉庫，用於教授初學者網頁開發基礎。該課程由 Microsoft Cloud Advocates 開發，是一個為期12週的綜合課程，包含24堂實作課程，涵蓋 JavaScript、CSS 和 HTML。
這是一個教導初學者網頁開發基礎的教育課程資料庫。此課程是一個由 Microsoft Cloud Advocates 開發的完整 12 週課程，包含 24 節涵蓋 JavaScript、CSS 和 HTML 的實作課程。
### Key Components
- **教育內容**：24堂結構化課程，組織成以專案為基礎的模組
- **實作專案**：溫室模擬器、打字遊戲、瀏覽器擴充功能、太空遊戲、銀行應用、程式碼編輯器及 AI 聊天助理
- **互動測驗**：48個測驗，每個3題（課前／課後評估）
- **多語言支援**：透過 GitHub Actions 自動翻譯超過50種語言
- **技術棧**：HTML、CSS、JavaScript、Vue.js 3、Vite、Node.js、Express、Python（用於 AI 專案）
- **教育內容**：24 節結構化課程，按專案模組組織
- **實作專案**：生態缸、打字遊戲、瀏覽器擴充套件、太空遊戲、銀行應用程式、程式碼編輯器和 AI 聊天助理
- **互動測驗**：48 小測驗，每個包含 3 題（課程前後評估）
- **多語言支援**：透過 GitHub Actions 自動翻譯超過 50 種語言
- **技術**：HTML、CSS、JavaScript、Vue.js 3、Vite、Node.js、Express、Python（AI 專案）
### Architecture
- 以課程為基礎的教育倉庫結構
- 每堂課資料夾包含README、程式碼範例及解答
- 獨立專案位於不同目錄（quiz-app、多個課程專案）
- 以課程為基礎結構的教育資源庫
- 每個課程資料夾包含 README、程式碼範例及解答
- 各自獨立的專案目錄（quiz-app、各課程專案）
- 使用 GitHub Actions 的翻譯系統（co-op-translator）
- 文件使用 Docsify 提供，並可匯出 PDF
- 文件使用 Docsify 提供並可輸出 PDF
## Setup Commands
此倉庫主要用於教育內容學習。若要操作特定專案：
此資料庫主要用於教育內容的學習。若要使用特定專案：
### Main Repository Setup
@ -36,8 +36,8 @@ cd Web-Dev-For-Beginners
```bash
cd quiz-app
npm install
npm run dev # 啟動開發伺服器
npm run build # 建置生產版本
npm run dev # 開始開發伺服器
npm run build # 編譯生產環境版本
npm run lint # 執行 ESLint
```
@ -47,7 +47,7 @@ npm run lint # 執行 ESLint
cd 7-bank-project/api
npm install
npm start # 啟動 API 伺服器
npm run lint # 運行 ESLint
npm run lint # 執行 ESLint
npm run format # 使用 Prettier 格式化
```
@ -56,7 +56,7 @@ npm run format # 使用 Prettier 格式化
```bash
cd 5-browser-extension/solution
npm install
# 遵循瀏覽器專屬的擴充功能載入指引
# 遵循瀏覽器特定的擴充功能載入指示
```
### Space Game Projects
@ -64,7 +64,7 @@ npm install
```bash
cd 6-space-game/solution
npm install
# 於瀏覽器中開啟 index.html 或使用 Live Server
# 在瀏覽器中打開 index.html 或使用實時伺服器
```
### Chat Project (Python Backend)
@ -81,28 +81,28 @@ python api.py
### For Content Contributors
1. **Fork 倉庫** 至您的 GitHub 帳號
2. **Clone 您的 fork** 至本地
3. **建立新分支** 以提交更改
2. **Clone 您的 fork** 至本地端
3. **建立新分支** 以做出變更
4. 修改課程內容或程式碼範例
5. 在相關專案資料夾測試程式碼更動
6. 遵循貢獻指南提交 pull request
5. 在相關專案目錄測試任何程式碼變更
6. 依貢獻指南提交 pull request
### For Learners
1. Fork 或 clone 此倉庫
2. 依序瀏覽課程資料夾
3. 閱讀每課的 README 檔案
1. Fork 或 clone 這個倉庫
2. 按順序進入課程目錄
3. 閱讀每課程的 README 文件
4. 在 https://ff-quizzes.netlify.app/web/ 完成課前測驗
5. 練習課程中的程式碼範例
6. 完成作業與挑戰
7. 參加課後測驗
5. 練習課程資料夾內的程式碼範例
6. 完成作業及挑戰
7. 完成課後測驗
### Live Development
- **文件**：在根目錄執行 `docsify serve`（預設埠號 3000）
- **測驗應用**：在 quiz-app 目錄執行 `npm run dev`
- **專案**：對 HTML 專案使用 VS Code 的 Live Server 擴充
- **API 專案**：在相應 API 目錄執行 `npm start`
- **文件**：在根目錄執行 `docsify serve`（預設端口 3000）
- **Quiz App**：在 quiz-app 資料夾執行 `npm run dev`
- **專案**：使用 VS Code Live Server 擴充套件啟動 HTML 專案
- **API 專案**：在相應 API 資料夾執行 `npm start`
## Testing Instructions
@ -111,7 +111,7 @@ python api.py
```bash
cd quiz-app
npm run lint # 檢查代碼風格問題
npm run build # 確認建置成功
npm run build # 驗證構建是否成功
```
### Bank API Testing
@ -119,79 +119,79 @@ npm run build # 確認建置成功
```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 中測試程式碼範例
- 確認翻譯結構正確
- 驗證 markdown 連結的有效性
- 瀏覽器或 Node.js 中測試程式碼範例
- 確認翻譯保持正確結構
## Code Style Guidelines
### JavaScript
- 使用現代 ES6+ 語法
- 遵循專案提供的 ESLint 標準配置
- 使用具意義的變數與函式名稱，利於教學理解
- 加入說明性註解方便學習者
- 在有設定的地方使用 Prettier 格式化
- 遵循專案中的標準 ESLint 配置
- 使用具意義的變數和函式名稱以增進教育清晰度
- 加入說明概念的註解給學習者
- 使用已配置的 Prettier 進行格式化
### HTML/CSS
- 使用語意化的 HTML5 元素
- 採用響應式設計原則
- 清晰的類別命名慣例
- 用註解說明 CSS 技巧便於學習
- 使用語意化 HTML5 元素
- 響應式設計原則
- 清晰的類別命名規範
- 加入說明 CSS 技巧的註解供學習者理解
### Python
- 遵守 PEP 8 風格指南
- 範例程式碼簡潔且具教育意義
- 必要時使用型別提示，輔助學習
- 遵循 PEP 8 風格指南
- 清晰且具教育意義的程式碼範例
- 適時使用型別提示以輔助學習
### Markdown Documentation
- 清晰的標題結構層級
- 程式碼區塊標明語言
- 提供額外資源連結
- 在 `images/` 目錄放置截圖與圖片
- 圖片有替代文字以符合無障礙要求
- 清楚的標題層級
- 使用指定語言的程式碼區塊
- 連結至額外資源
- 在 `images/` 目錄中放置截圖與圖片
- 圖片使用替代文字提高可及性
### File Organization
- 課程依序編號（1-getting-started-lessons、2-js-basics 等）
- 每個專案有 `solution/`，常見還有 `start/` 或 `your-work/` 目錄
- 圖片存放於各課獨立 `images/` 資料夾
- 翻譯置於 `translations/{language-code}/` 結構
- 每個專案含有 `solution/`，並通常有 `start/` 或 `your-work/`
- 圖片存放於課程專屬的 `images/` 資料夾
- 翻譯存放在 `translations/{語言代碼}/` 結構中
## Build and Deployment
### 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 配置：
- **App 位置**：`/quiz-app`
- **輸出位置**：`dist`
- **工作流程**：`.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
- **App location**：`/quiz-app`
- **Output location**：`dist`
- **Workflow**：`.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### Documentation PDF Generation
@ -209,19 +209,19 @@ docsify serve # 在 localhost:3000 提供服務
### Project-specific Builds
各專案資料夾可能有自己的建置流程：
- Vue 專案：`npm run build` 產生生產封包
- 靜態專案：無建置步驟，直接提供檔案
每個專案目錄可能有專屬建置流程：
- Vue 專案：使用 `npm run build` 產生生產用套件
- 靜態專案：無需建置步驟，直接提供檔案
## Pull Request Guidelines
### Title Format
使用清楚描述變更範圍的標題：
- `[Quiz-app] 新增第X課測驗`
- `[Lesson-3] 修正溫室模擬器專案中的錯字`
- `[Translation] 新增第5課西班牙文翻譯`
- `[Docs] 更新環境設定說明`
- `[Quiz-app] 為第 X 課新增測驗`
- `[Lesson-3] 修正生態缸專案錯字`
- `[Translation] 新增第 5 課西班牙語翻譯`
- `[Docs] 更新設定說明`
### Required Checks
@ -229,54 +229,54 @@ docsify serve # 在 localhost:3000 提供服務
1. **程式碼品質**：
- 在受影響專案目錄執行 `npm run lint`
- 修正所有 lint 錯誤與警告
- 修正所有 lint 錯誤和警告
2. **建置驗證**：
- 如適用執行 `npm run build`
- 執行 `npm run build`（若適用）
- 確保無建置錯誤
3. **連結檢查**：
3. **連結驗證**：
- 測試所有 markdown 連結
- 確認圖片引用正常
- 驗證圖片路徑正確
4. **內容審核**：
- 拼字與文法校對
- 確保程式碼範例正確且具教育意義
- 驗證翻譯維持原意
- 校對拼字與文法
- 確認程式碼範例正確且具教育性
- 確認翻譯保持原意
### Contribution Requirements
- 同意 Microsoft CLA（首次 PR 自動檢查）
- 遵守 [Microsoft 開源行為守則](https://opensource.microsoft.com/codeofconduct/)
- 同意 Microsoft CLA（首次 PR 會自動檢查）
- 遵守 [Microsoft 共用開源行為準則](https://opensource.microsoft.com/codeofconduct/)
- 詳細指南請見 [CONTRIBUTING.md](./CONTRIBUTING.md)
- 如有議題，請在 PR 說明中參考議題編號
- 若有，請在 PR 描述中提及議題編號
### Review Process
- PR 由維護者與社群共同審核
- 優先考慮教學清晰度
- 程式碼範例應符合當前最佳實踐
- 翻譯審核準確且符合文化習慣
- PR 由維護者與社群審查
- 優先考量教育清晰度
- 程式碼範例須符合現行最佳實踐
- 翻譯需審核準確度與文化適應性
## Translation System
### Automated Translation
- 使用 GitHub Actions 搭配 co-op-translator 工作流程
- 自動翻譯超過50種語言
- 原始檔案在主目錄
- 翻譯檔在 `translations/{language-code}/`
- 自動翻譯超過 50 種語言
- 原始檔藏於主目錄
- 翻譯檔藏於 `translations/{語言代碼}/` 目錄
### Adding Manual Translation Improvements
1. 找到 `translations/{language-code}/` 內檔案
2. 在保留結構的前提下改善翻譯
3. 確保程式碼範例功能正常
4. 測試當地化測驗內容
1. 尋找 `translations/{語言代碼}/` 中的檔案
2. 進行改善，並保持結構完整
3. 確保程式碼範例持續正常
4. 測試任何在地化的測驗內容
### Translation Metadata
翻譯檔包含元資料標頭：
譯文檔包含元資料標頭：
```markdown
<!--
CO_OP_TRANSLATOR_METADATA:
@ -294,84 +294,84 @@ CO_OP_TRANSLATOR_METADATA:
### Common Issues
**Quiz app 啟動失敗**：
- 檢查 Node.js 版本（建議 v14 以上）
- 刪除 `node_modules` 和 `package-lock.json` 後重新執行 `npm install`
- 檢查埠號衝突（預設: Vite 使用 5173 埠）
- 檢查 Node.js 版本（建議 v14+）
- 刪除 `node_modules` 和 `package-lock.json`，重新執行 `npm install`
- 檢查埠口衝突（預設 Vite 使用 5173 埠）
**API 伺服器無法啟動**：
- 確認 Node.js 版本符合最低要求（node >=10）
- 確認埠號是否已被占用
- 確保已執行 `npm install` 安裝所有依賴
- 確認埠口未被佔用
- 確保執行 `npm install` 安裝所有依賴
**瀏覽器擴充功能無法載入**：
- 驗證 manifest.json 格式正確
- 檢查瀏覽器主控台錯誤訊息
- 遵守瀏覽器擴充安裝指引
**瀏覽器擴充套件無法載入**：
- 確認 manifest.json 格式正確
- 查看瀏覽器主控台錯誤訊息
- 遵循各瀏覽器特定擴充安裝指引
**Python 聊天專案問題**：
- 確保已安裝 OpenAI 套件：`pip install openai`
- 確認 GITHUB_TOKEN 環境變數有設定
- 檢查 GitHub Models 存取權限
- 確認已安裝 OpenAI 套件：`pip install openai`
- 確認 GITHUB_TOKEN 環境變數已設定
- 檢查 GitHub Models 的存取權限
**Docsify 無法提供文件**：
- 全域安裝 docsify-cli：`npm install -g docsify-cli`
**Docsify 不讀取文件**：
- 全局安裝 docsify-cli：`npm install -g docsify-cli`
- 從倉庫根目錄執行
- 確認 `docs/_sidebar.md` 存在
- 確認存在 `docs/_sidebar.md`
### Development Environment Tips
- HTML 專案使用 VS Code 搭配 Live Server 擴充
- 安裝 ESLint 和 Prettier 擴充以保持格式一致
- 使用瀏覽器開發工具除錯 JavaScript
- Vue 專案安裝 Vue DevTools 瀏覽器擴充
- 使用 VS Code 搭配 Live Server 擴充套件開發 HTML 專案
- 安裝 ESLint 和 Prettier 擴充套件維持一致格式
- 使用瀏覽器開發者工具除錯 JavaScript
- Vue 專案安裝 Vue DevTools 瀏覽器擴充套件
### Performance Considerations
- 由於有大量翻譯檔（50+語言），完整 clone 檔案量大
- 如只需內容，使用淺層 clone：`git clone --depth 1`
- 在編輯英文內容時排除翻譯資料夾搜尋
- 初次執行建置流程較慢（npm install、Vite build）
- 支援超過 50 種語言的翻譯檔案多，完整克隆檔案較大
- 對內容作業者可使用淺層克隆：`git clone --depth 1`
- 作英文內容時建議排除翻譯目錄以提升搜尋效率
- 第一次運行建置流程可能較慢（npm install、Vite 建置）
## Security Considerations
### Environment Variables
- API 金鑰不可提交至倉庫
- 使用 `.env` 檔案（已在 `.gitignore` 中）
- 各專案 README 文檔需記錄必要環境變數
- API 金鑰絕不可提交至版本庫
- 使用 `.env` 檔案（已有列入 `.gitignore`）
- 各專案 README 文件說明必須的環境變數
### Python Projects
- 使用虛擬環境：`python -m venv venv`
- 定期更新依賴套件
- GitHub Token 權限需最小化
- 維持依賴最新
- GitHub token 授權應儘量精簡
### GitHub Models Access
- GitHub Models 需個人存取權杖（PAT）
- Token 應設為環境變數儲存
- 禁止提交 token 或憑證
- 使用個人存取權杖（PAT）作為 GitHub Models 存取憑證
- 權杖應儲存於環境變數中
- 禁止將權杖或憑證提交至版本庫
## Additional Notes
### Target Audience
- 完全沒有網頁開發經驗者
- 完全初學者的網頁開發學習者
- 學生與自學者
- 使用此課程的教師
- 內容設計注重無障礙與循序漸進技能養成
- 在課堂使用此課程的教師
- 內容設計兼顧可及性及漸進式技能建立
### Educational Philosophy
- 以專案為主軸的學習方法
- 頻繁知識檢測（測驗）
- 專案導向學習法
- 頻繁的知識檢核（測驗）
- 實作程式練習
- 引入現實應用案例
- 以基礎為主、框架為輔
- 真實場景應用範例
- 著重基礎優先於框架
### Repository Maintenance
- 積極的學習者與貢獻者社群
- 擁有活躍學習與貢獻社群
- 定期更新依賴與內容
- 維護者監控議題與討論
- 翻譯更新自動化透過 GitHub Actions
@ -381,28 +381,28 @@ CO_OP_TRANSLATOR_METADATA:
- [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、資料科學、機器學習、物聯網課程皆可用
- 其他課程：生成式 AI、資料科學、機器學習、物聯網課程
### Working with Specific Projects
詳細專案操作說明請見：
個別專案詳細說明請參考 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 Structure
此倉庫非典型 monorepo，但包含多個獨立專案：
- 每堂課均自成一格
- 專案間無共享依賴
- 可分別開發不影響其他專案
- 若需完整課程體驗，請完整 clone 倉庫
雖非典型 monorepo，但此資料庫包含多個獨立專案：
- 每堂課自行封裝
- 專案間不共用依賴
- 個別專案獨立開發不互相影響
- 想學完完整課程，請 clone 整個倉庫
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免責聲明**：
本文件使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們力求準確，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。如涉及重要資訊，建議採用專業人工翻譯。我們對因使用本翻譯而產生的任何誤解或曲解概不負責。
**免責聲明**：
本文件使用人工智能翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。儘管我們致力於提供準確的翻譯，請注意，自動翻譯可能包含錯誤或不準確之處。原始文件以其本地語言版本為最具權威性的資料來源。對於重要資訊，建議採用專業人工翻譯。我們不對因使用本翻譯而引起的任何誤解或誤譯承擔責任。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

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

@ -10,202 +10,209 @@
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
# 入門網頁開發課程
# 初學者網頁開發課程大綱
透過 Microsoft Cloud Advocates 主辦的 12 週全面課程，學習網頁開發的基礎。24 節課程中涵蓋了 JavaScript、CSS 和 HTML，並透過實作項目如玻璃容器、瀏覽器擴展程式及太空遊戲深入學習。參與測驗、討論及實務作業。透過有效的以專案為導向教學法，提高技能並優化知識吸收。立即開始您的程式設計之旅！
由 Microsoft Cloud Advocates 提供的 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 -->
[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)](./README.md) | [Chinese (Traditional, Macau)](../zh-MO/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)
[阿拉伯語](../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)
> **想本地克隆嗎？**
> 此儲存庫含有 50 多種語言翻譯，會大幅增加下載大小。若想不含翻譯克隆，請使用稀疏簽出：
> **想本地端 Clone？**
>
> 本專案包含 50 多種語言翻譯，會大幅增加下載大小。若想不包含翻譯檔，請使用稀疏取出（sparse checkout）：
>
> **Bash / macOS / Linux:**
> ```bash
> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git
> cd Web-Dev-For-Beginners
> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'
> ```
> 這會讓您用更快的速度下載並取得完成課程所需的所有資源。
>
> **CMD（Windows）:**
> ```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 -->
**若想支援額外的翻譯語言，請參考此處清單 [here](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)，在這裡您可以找到初學者資源、學生套件，甚至獲得免費證書兌換券的方法。這是您會想要書籤收藏並不時查看的頁面，我們會每月更新內容。
請造訪 [**學生中心頁面**](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 助手專案，請查看 [project](./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。
- 使用 GenAI 與我們的伴侶應用程序互動，與歷史人物對話。
- 趣味且引人入勝的故事敘述，讓您穿越時空！
- 課程涵蓋基礎到檢索增強生成（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) 開始學習！
## 🌱 開始學習
## 🌱 起步
> **教師們**，我們提供了[一些建議](for-teachers.md)教你如何使用本課程。歡迎到[討論區](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)分享你的回饋！
> **教師們**，我們已在 [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)**，每堂課從課前小測開始，接著閱讀課程教材，完成各項活動，並通過課後小測檢查理解。
**[學生們](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 專案庫**：點擊本頁右上角的「Fork」按鈕。
2. **Clone 專案庫**： `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
請照以下步驟：
1. **派生此儲存庫**：點擊本頁右上角的「Fork」按鈕。
2. **克隆此儲存庫**： `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-HK/createcodespace.0238bbf4d7a8d955.webp)
#### 在本機電腦上執行課程
若要在本機執行此課程，您需要安裝一個文字編輯器、瀏覽器及終端機工具。我們的第一堂課 [Introduction to Programming Languages and Tools of the Trade](../../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)。
要在本地電腦執行本課程，你需要文字編輯器、瀏覽器及終端機工具。我們的第一堂課，[程式語言及工具介紹](../../1-getting-started-lessons/1-intro-to-programming-languages)，會帶你了解各種工具選項，幫助你選擇最合適的環境。
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) 中打開 [終端機](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 中開啟資料夾。你可以點擊 **檔案** > **開啟資料夾**，然後選擇你剛剛克隆的資料夾。
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 個小測驗，每個小測驗三題。它們可在這裡找到 [Quiz App](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 and 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 及使用本地端儲存變數 | 建立使用本地端儲存變數呼叫 API 的瀏覽器擴充功能 JavaScript 元件 | [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) | 網頁應用程式中的 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 |
> **關於測驗的小提示**：所有測驗皆包含在 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 |
## 🏫 教學法
我們的課程設計基於兩項核心教學原則：
我們的課程設計基於兩個主要的教學原則：
* 專案導向學習
* 頻繁的小測驗
本課程教授 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)」。
> 請參閱我們的 [行為準則](CODE_OF_CONDUCT.md) 與 [貢獻指南](CONTRIBUTING.md)。我們歡迎你的建設性回饋！
雖然我們刻意避免引入 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)。我們歡迎您的建設性回饋！
## 🧭 離線存取
你可以使用 [Docsify](https://docsify.js.org/#/) 離線瀏覽本文件。將本儲存庫分叉，並在本地機器安裝 [Docsify](https://docsify.js.org/#/quickstart)，接著於儲存庫根目錄輸入 `docsify serve`，網站將在本地端口 3000 開啟：`localhost:3000`。
你可以使用 [Docsify](https://docsify.js.org/#/) 離線瀏覽此文件。請將本倉庫分叉、在本機安裝 [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 可於此處下載 [here](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf)。
## 🎒 其他課程
我們團隊還有其他課程！請查看：
我們團隊還製作了其他課程！歡迎瀏覽：
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
@ -222,7 +229,7 @@
---
### 產生式 AI 系列
### 生成式 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)
[![Generative AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
@ -249,7 +256,7 @@
## 尋求協助
如果你遇到困難或對構建 AI 應用有任何疑問，歡迎加入與其他學習者及經驗豐富開發者討論 MCP。這是一個支持性社群，歡迎提出問題並自由分享知識。
如果你在構建 AI 應用時遇到困難或有任何問題，歡迎加入其他學習者及經驗豐富的開發者討論 MCP。這是一個支持性的社群，歡迎提問並自由分享知識。
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
@ -257,13 +264,13 @@
[![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 -->

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

@ -1,7 +1,7 @@
{
"1-getting-started-lessons/1-intro-to-programming-languages/README.md": {
"original_hash": "d45ddcc54eb9232a76d08328b09d792e",
"translation_date": "2025-11-03T23:37:49+00:00",
"original_hash": "bec5e35642176d9e483552bfc82996d8",
"translation_date": "2026-03-06T17:53:07+00:00",
"source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md",
"language_code": "zh-MO"
},
@ -493,7 +493,7 @@
},
"AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2026-02-06T16:13:30+00:00",
"translation_date": "2026-03-06T18:06:28+00:00",
"source_file": "AGENTS.md",
"language_code": "zh-MO"
},
@ -516,8 +516,8 @@
"language_code": "zh-MO"
},
"README.md": {
"original_hash": "6d6385fd098088cb2d690fb0a6cdaedc",
"translation_date": "2026-02-06T16:09:09+00:00",
"original_hash": "a2c9eed480687319517c08a6319e5536",
"translation_date": "2026-03-06T17:49:29+00:00",
"source_file": "README.md",
"language_code": "zh-MO"
},

887
translations/zh-MO/1-getting-started-lessons/1-intro-to-programming-languages/README.md
View File

File diff suppressed because it is too large Load Diff

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

@ -1,47 +1,47 @@
# AGENTS.md
## 項目概覽
## Project Overview
這是一個用於教導初學者網頁開發基礎的教育課程資源庫。課程為一個由 Microsoft Cloud Advocates 開發的完整 12 週課程，包含 24 節實作課程，涵蓋 JavaScript、CSS 和 HTML。
這是一個用於教授初學者網頁開發基礎的教育課程資源庫。課程是一個全面的 12 週課程，由 Microsoft Cloud Advocates 開發，包含 24 個涵蓋 JavaScript、CSS 和 HTML 的實作課程。
### 主要組成部分
### Key Components
- **教育內容**：24 節結構化課程，組織成以專案為基礎的模組
- **實作專案**：Terrarium、打字遊戲、瀏覽器擴充功能、太空遊戲、銀行應用程式、程式碼編輯器和 AI 聊天助理
- **互動測驗**：48 個測驗，每個有 3 題（課前/課後評估）
- **多語言支援**：透過 GitHub Actions 自動翻譯 50 多種語言
- **教育內容**：24 個依專案模塊組織的結構化課程
- **實作專案**：Terrarium、Typing Game、Browser Extension、Space Game、Banking App、Code Editor 和 AI 聊天助理
- **互動小測驗**：48 個小測驗，每個有3題（課程前後評估）
- **多語言支援**：透過 GitHub Actions 自動翻譯超過 50 種語言
- **技術**：HTML、CSS、JavaScript、Vue.js 3、Vite、Node.js、Express、Python（用於 AI 專案）
### 架構
### Architecture
- 以課程為基礎的教育資源庫架構
- 每個課程資料夾包含 README、程式碼示例和解答
- 獨立專案分置於不同目錄中（quiz-app、各課程專案）
- 使用 GitHub Actions（co-op-translator）進行翻譯系統
- 文件使用 Docsify 呈現，並提供 PDF 版本
- 以課程為基礎結構的教育資源庫
- 每個課程資料夾包含 README、程式碼範例及解答
- 獨立專案位於不同目錄（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
@ -51,23 +51,23 @@ 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
npm install
# 在瀏覽器中開啟 index.html 或使用即時伺服器
# 喺瀏覽器開啟 index.html 或者用 Live Server
```
### 聊天專案 (Python 後端)
### Chat Project (Python Backend)
```bash
cd 9-chat-project/solution/backend/python
@ -76,207 +76,207 @@ pip install openai
python api.py
```
## 開發工作流程
## Development Workflow
### 對內容貢獻者
### For Content Contributors
1. **Fork 該資源庫** 至你的 GitHub 帳號
2. **將你的 fork 複製** 至本地
3. **為你的更改創建新分支**
1. **Fork 該資源庫** 到你的 GitHub 帳號
2. **將 fork 克隆** 到本地
3. **建立新分支** 以進行修改
4. 修改課程內容或程式碼範例
5. 在相關專案目錄中測試任何程式碼更動
6. 根據貢獻規範提交 Pull Request
5. 在相關專案目錄測試程式碼變更
6. 按照貢獻指引提交 pull request
### 對學習者
### For Learners
1. Fork 或複製該資源庫
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
- **文件**：在根目錄執行 `docsify serve` (端口 3000)
- **測驗應用**：在 quiz-app 目錄執行 `npm run dev`
- **專案**：HTML 專案使用 VS Code Live Server 擴充套件
- **API 專案**：分別在 API 目錄執行 `npm start`
- **文件**：在根目錄執行 `docsify serve`（預設埠 3000）
- **Quiz App**：在 quiz-app 目錄執行 `npm run dev`
- **專案**：使用 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 lint # 檢查代碼風格問題
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 元素
- 響應式設計原則
- 清晰的類名命名規則
- CSS 技術附加註解以供學習參考
- 使用語意化的 HTML5 元素
- 採用響應式設計原則
- 清晰的 class 命名規範
- CSS 技術附帶學習解說註解
### Python
- 遵循 PEP 8 風格指南
- 清晰且具教育意義的程式碼範例
- 需時可加上型別提示以助學習
- 遵循 PEP 8 樣式指引
- 提供清晰且具教育意義的程式碼範例
- 需要時使用型別提示以輔助學習
### Markdown 文件
### Markdown Documentation
- 清晰的標題層級
- 附帶語言標示的程式碼區塊
- 指向額外資源的連結
- `images/` 資料夾中的截圖和圖片
- 具可及性的圖片替代文字
- 清楚的標題階層結構
- 指定語言的程式碼區塊
- 附加資源連結
- screenshots 與圖片存放於 `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/ 資料夾
# 在 push 到 main 時透過 GitHub Actions 工作流程部署
# 在推送到 main 時透過 GitHub Actions 工作流程部署
```
Azure Static Web Apps 配置：
- **應用位置**：`/quiz-app`
- **App 位置**：`/quiz-app`
- **輸出位置**：`dist`
- **工作流程**：`.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
- **Workflow**：`.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] Add new quiz for lesson X`
- `[Lesson-3] Fix typo in terrarium project`
- `[Translation] Add Spanish translation for lesson 5`
- `[Docs] Update setup instructions`
使用清晰且描述性的標題指出變更範圍：
- `[Quiz-app] 新增第 X 課小測`
- `[Lesson-3] 修正 terrarium 專案打字錯誤`
- `[Translation] 新增第 5 課西班牙語翻譯`
- `[Docs] 更新設置指引`
### 必須檢查事項
### Required Checks
提交 PR 前：
提交 PR 前須:
1. **代碼品質**：
1. **程式碼品質**：
- 在受影響專案目錄執行 `npm run lint`
- 修正所有 lint 錯誤及警告
2. **建置驗證**：
- 如適用執行 `npm run build`
- 必要時執行 `npm run build`
- 確保無建置錯誤
3. **連結驗證**：
- 測試所有 Markdown 連結
- 驗證圖片引用是否有效
- 測試所有 markdown 連結
- 確認圖片參考正常
4. **內容審核**：
- 校對拼寫與文法
4. **內容審查**：
- 校對拼字與文法
- 確認程式碼範例正確且具教育意義
- 驗證翻譯內容保持原意
- 確認翻譯保留原意
### 貢獻要求
### Contribution Requirements
- 同意 Microsoft CLA（首個 PR 自動檢查）
- 遵守 [Microsoft 開源行為守則](https://opensource.microsoft.com/codeofconduct/)
- 詳細規範見 [CONTRIBUTING.md](./CONTRIBUTING.md)
- 如適用，PR 描述中引用議題號碼
- 同意 Microsoft CLA（首個 PR 會自動檢查）
- 遵循 [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
- 詳細規則參考 [CONTRIBUTING.md](./CONTRIBUTING.md)
- 如有議題，於 PR 描述中提及編號
### 審核流程
### Review Process
- PR 由維護者及社群審核
- 優先考量教學清晰度
- 程式碼範例應遵循現行最佳實踐
- 翻譯審核確保準確且符合文化
- PR 由維護者及社群審閱
- 優先確保教育清晰度
- 程式碼範例應採用當前最佳實踐
- 翻譯需確保準確性及文化適切性
## 翻譯系統
## Translation System
### 自動翻譯
### Automated Translation
- 使用 GitHub Actions 搭配 co-op-translator 工作流程
- 自動翻譯至 50 多種語言
- 原始檔置於主目錄
- 翻譯檔案於 `translations/{language-code}/` 目錄
- 使用 GitHub Actions 與 co-op-translator 工作流程
- 自動翻譯成超過 50 種語言
- 原始文件位於主目錄
- 翻譯檔案位於 `translations/{language-code}/` 目錄
### 手動翻譯改善
### Adding Manual Translation Improvements
1. 定位至 `translations/{language-code}/` 中檔案
2. 在保留架構前提下進行改進
3. 確保程式碼範例持續可用
4. 測試任何本地化的測驗內容
1. 尋找文件於 `translations/{language-code}/`
2. 在保留結構下進行改進
3. 確保程式碼範例仍可正常運作
4. 測試任何本地化的小測內容
### 翻譯元資料
### Translation Metadata
翻譯檔包含元資料標頭：
翻譯檔含有元資料標頭：
```markdown
<!--
CO_OP_TRANSLATOR_METADATA:
@ -289,120 +289,120 @@ CO_OP_TRANSLATOR_METADATA:
-->
```
## 除錯與故障排除
## Debugging and Troubleshooting
### 常見問題
### Common Issues
**測驗應用啟動失敗**：
- 檢查 Node.js 版本（建議 v14 以上）
- 刪除 `node_modules` 和 `package-lock.json`，重新執行 `npm install`
- 檢查埠口衝突（預設：Vite 使用端口 5173）
**Quiz app 無法啟動**：
- 檢查 Node.js 版本（建議 v14+）
- 刪除 `node_modules` 和 `package-lock.json` 後重新執行 `npm install`
- 檢查埠口衝突（預設 Vite 使用 5173）
**API 服務器無法啟動**：
- 確認 Node.js 版本符合最低需求（node >=10）
- 檢查埠口是否被佔用
- 確保所有依賴皆已安裝 (`npm install`)
**API 伺服器無法啟動**：
- 確認 Node.js 版本符合要求（node >=10）
- 確認埠口未被佔用
- 確保依賴透過 `npm install` 安裝完整
**瀏覽器擴充功能無法載入**：
- 確認 manifest.json 格式正確
- 檢查瀏覽器控制台錯誤訊息
- 遵循瀏覽器特定的擴充安裝說明
- 驗證 manifest.json 格式無誤
- 查看瀏覽器控制檯錯誤訊息
- 依瀏覽器指示安裝擴充功能
**Python 聊天專案問題**：
- 確認已安裝 OpenAI 套件：`pip install openai`
- 確認已設定 GITHUB_TOKEN 環境變數
- 檢查 GitHub Models 存取權限
- 確認 OpenAI 套件已安裝：`pip install openai`
- GITHUB_TOKEN 環境變量已設定
- 確認 GitHub Models 存取權限
**Docsify 未提供文件服務**：
- 全域安裝 docsify-cli：`npm install -g docsify-cli`
**Docsify 無法提供文件**：
- 全局安裝 docsify-cli：`npm install -g docsify-cli`
- 從資源庫根目錄執行
- 確認 `docs/_sidebar.md` 存在
### 開發環境小提示
### Development Environment Tips
- 使用 VS Code 搭配 Live Server 擴充套件開發 HTML 專案
- 安裝 ESLint 與 Prettier 擴充以維持格式一致
- 使用瀏覽器開發工具除錯 JavaScript
- Vue 專案安裝 Vue DevTools 瀏覽器擴充
- HTML 專案使用 VS Code Live Server 外掛
- 安裝 ESLint 與 Prettier 擴充套件保持格式一致
- 使用瀏覽器 DevTools 偵錯 JavaScript
- Vue 專案建議安裝 Vue DevTools 瀏覽器擴充
### 效能考量
### Performance Considerations
- 翻譯檔案多（50 多種語言）使整體複製體積大
- 對僅操作內容者可用淺層複製：`git clone --depth 1`
- 編輯英文內容時，盡量排除翻譯目錄搜尋
- 建置過程首次執行可能較慢（npm install、Vite 建置）
- 有大量翻譯檔案（超過 50 種語言），完整複製較大
- 僅工作內容時可用淺層複製：`git clone --depth 1`
- 編輯英文內容時排除翻譯目錄搜尋
- 建置首次運行可能較慢（npm 安裝、Vite 建置）
## 安全考量
## Security Considerations
### 環境變數
### Environment Variables
- API 金鑰絕不可提交至資源庫
- 使用 `.env` 檔案（已加入 `.gitignore`）
- 在專案 README 中記錄所需環境變數
- 使用 `.env` 檔案（已包含於 `.gitignore`）
- 專案 README 記錄必要環境變量
### Python 專案
### Python Projects
- 使用虛擬環境管理依賴：`python -m venv venv`
- 使用虛擬環境：`python -m venv venv`
- 保持依賴更新
- GitHub 令牌需設定最小權限
- GitHub 令牌應只具必要最低權限
### GitHub Models 存取
### GitHub Models Access
- 需使用個人存取令牌（PAT）
- 將令牌存為環境變數
- 絕不可將令牌或認證資料提交到資源庫
- 使用個人存取權杖 (PAT) 存取 GitHub Models
- 令牌存於環境變量中
- 絕不可將令牌或認證提交至資源庫
## 補充說明
## Additional Notes
### 目標受眾
### Target Audience
- 完全初學網頁開發者
- 完全初學者學習網頁開發
- 學生及自學者
- 教師課堂使用者
- 內容設計注重無障礙及循序漸進技術提升
- 教師在課堂中使用此課程
- 內容設計注重無障礙及技能循序漸進
### 教育理念
### Educational Philosophy
- 以專案為核心的學習方式
- 頻繁知識檢測（測驗）
- 實作練習為主
- 實務範例導入
- 先學基礎概念再進階框架
- 專案導向學習方式
- 頻繁的知識測驗（小測）
- 實作編碼練習
- 以真實案例示範應用
- 先打穩基礎再學框架
### 資源庫維護
### Repository Maintenance
- 積極活躍的學習者和貢獻者社群
- 定期更新依賴和內容
- 維護者監控議題和討論
- 翻譯更新自動執行於 GitHub Actions
- 活躍的學習者及貢獻者社群
- 定期更新相依元件及內容
- 維護者監控議題與討論
- 翻譯更新透過 GitHub Actions 自動化
### 相關資源
### Related Resources
- [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、數據科學、機器學習、物聯網課程可用
- [Student Hub 資源](https://docs.microsoft.com/learn/student-hub/)
- 推薦學員使用 [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot)
- 其他課程：生成式 AI、資料科學、機器學習、物聯網課程可用
### 使用特定專案說明
### Working with Specific Projects
個別專案詳細說明見相應 README：
- `quiz-app/README.md` - Vue 3 測驗應用
- `7-bank-project/README.md` - 帶認證的銀行應用
各專案詳細指引見以下 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 Structure
雖然非傳統 monorepo，此資源庫包含多個獨立專案：
- 每節課程獨立自主
- 專案間無依賴共用
- 可單獨作業不影響他人
- 複製整個資源庫以獲得完整課程體驗
雖非傳統 monorepo，但此資源庫包含多個獨立專案：
- 每課單獨成章
- 專案不共用相依套件
- 可單獨作業不影響其它專案
- 想獲得完整課程體驗，請克隆整個資源庫
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免責聲明**：
本文件由 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 翻譯。雖然我們力求準確，但請注意，自動翻譯可能包含錯誤或不準確之處。原始語言文件應被視為具權威性的來源。對於重要資訊，建議採用專業人工翻譯。我們對因使用本翻譯而產生的任何誤解或誤譯概不負責。
本文件係使用人工智能翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。儘管我哋致力於確保準確性，但請注意，自動翻譯可能包含錯誤或不準確之處。原始語言版本的文件應被視為權威來源。對於重要信息，建議採用專業人工翻譯。因使用此翻譯而引起的任何誤解或錯誤詮釋，本公司概不負責。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

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

@ -10,200 +10,210 @@
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
# Web Development for Beginners - 課程綱要
# Web 開發初學者教程
透過 Microsoft Cloud Advocates 提供的 12 週完整課程學習網頁開發基礎。24 堂課每堂都透過實作專案深入探討 JavaScript、CSS 與 HTML，專案包括生態瓶、瀏覽器擴充功能及太空遊戲。配合小測驗、討論與實作作業，提升技能與知識吸收效果，體驗有效的專案導向學習法。立即開始你的程式設計旅程！
透過 Microsoft Cloud Advocates 開發嘅 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. **派生此儲存庫**：點擊 [![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)
### 🌐 多語言支援
#### 透過 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) | [中文（繁體，澳門）](./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)
[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)
> **想要本地複製？**
> 此倉庫包含超過 50 種語言翻譯，將大幅增加下載大小。若想省略翻譯內容可使用 sparse checkout：
> **想本地克隆？**
>
> 呢個儲存庫包括 50 多種語言翻譯，會大大增加下載大小。如想不包括翻譯而克隆，請使用稀疏檢出：
>
> **Bash / macOS / Linux:**
> ```bash
> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git
> cd Web-Dev-For-Beginners
> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'
> ```
> 這樣你可以更快下載並取得完成課程所需的一切。
>
> **CMD (Windows):**
> ```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)，這裡提供初學者資源、學生套件，甚至可取得免費證書兌換券。這是你想要收藏並偶爾查看的頁面，內容每月更新。
請訪問 [**學生中心頁面**](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](for-teachers.md) 中提供了一些使用本課程綱要的建議。歡迎於我們的[討論區](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)分享回饋！
> **教師們**，我哋有 [包括建議](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」按鈕。
2. **克隆儲存庫**： `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)下載。
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 裡開啟資料夾。您可以點擊 **檔案** > **開啟資料夾**，然後選擇剛剛克隆的資料夾。
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/](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 and Christopher |
| 06 | JS 基礎 | 用 JS 作決策 | 學習如何在程式中創建條件判斷 | [決策](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS 基礎 | 陣列與迴圈 | 使用陣列和迴圈處理資料 | [陣列與迴圈](./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 以及本地儲存變數 | 在瀏覽器擴充元件中加入呼叫 API 的 JavaScript 元素，並用本地儲存存取變數 | [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) | 進階遊戲開發：繼承與發布訂閱模式 | 介紹繼承 (繼承類別與組合) 及 Pub/Sub 模式，為遊戲製作做準備 | [進階遊戲開發簡介](./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) | 網頁應用的 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 |
- [課後小測驗](https://ff-quizzes.netlify.app/web/)
> **關於小測驗的說明**：所有小測驗都包含在 Quiz-app 資料夾中，共 48 個小測驗，每個包含三個問題。它們可於 [此處](https://ff-quizzes.netlify.app/web/) 取得，Quiz 應用程式可本地執行或部署到 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 |
## 🏫 教學法
我們的課程設計以兩項重要教學原則為基礎：
我們的課程設計遵循兩大核心教學原則：
* 專案導向學習
* 頻繁的測驗
* 頻繁小測驗
本課程教授 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 上的 [Learn Path](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 基礎入門課程，搭配來自 “[Beginners Series to: 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：《[Beginner Series to: 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
@ -245,23 +255,23 @@
[![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) 翻譯而成。雖然我哋致力追求準確性，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件之母語版本應視為權威來源。對於重要資訊，建議採用專業人工翻譯。本公司不對因使用本翻譯而引致之任何誤解或誤釋負責。
**免責聲明**：
本文件係使用人工智能翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們致力於確保翻譯的準確性，但請注意，自動翻譯可能存在錯誤或不準確之處。原始語言的文件應被視為權威來源。對於重要資訊，建議採用專業人工翻譯。我們不對因使用本翻譯而引起的任何誤解或錯誤解釋承擔責任。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

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

@ -1,7 +1,7 @@
{
"1-getting-started-lessons/1-intro-to-programming-languages/README.md": {
"original_hash": "d45ddcc54eb9232a76d08328b09d792e",
"translation_date": "2026-01-06T14:23:14+00:00",
"original_hash": "bec5e35642176d9e483552bfc82996d8",
"translation_date": "2026-03-06T18:05:21+00:00",
"source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md",
"language_code": "zh-TW"
},
@ -493,7 +493,7 @@
},
"AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2026-02-06T16:24:11+00:00",
"translation_date": "2026-03-06T18:08:50+00:00",
"source_file": "AGENTS.md",
"language_code": "zh-TW"
},
@ -516,8 +516,8 @@
"language_code": "zh-TW"
},
"README.md": {
"original_hash": "6d6385fd098088cb2d690fb0a6cdaedc",
"translation_date": "2026-02-06T16:19:00+00:00",
"original_hash": "a2c9eed480687319517c08a6319e5536",
"translation_date": "2026-03-06T18:01:09+00:00",
"source_file": "README.md",
"language_code": "zh-TW"
},

747
translations/zh-TW/1-getting-started-lessons/1-intro-to-programming-languages/README.md
View File

File diff suppressed because it is too large Load Diff

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

@ -2,42 +2,42 @@
## 專案概述
這是一個用於教導初學者網頁開發基礎的教學課程庫。該課程為期12週，由微軟雲端推廣者開發，包含24堂實作課程，涵蓋JavaScript、CSS及HTML。
這是一個針對初學者教授網頁開發基礎的教育課程資源庫。此課程是由 Microsoft Cloud Advocates 所設計的綜合性 12 週課程，包含 24 節實作課程，涵蓋 JavaScript、CSS 與 HTML。
### 主要組成部分
### 主要組成
- **教學內容**：24堂結構化課程，組織為專案模組
- **實務專案**：Terrarium、生字輸入遊戲、瀏覽器擴充功能、太空遊戲、銀行應用、程式碼編輯器以及AI聊天助理
- **互動測驗**：48份測驗，每份含3題（課前/課後評估）
- **多語言支持**：透過GitHub Actions自動翻譯超過50種語言
- **技術棧**：HTML、CSS、JavaScript、Vue.js 3、Vite、Node.js、Express、Python（用於AI專案）
- **教育內容**：24 節結構化課程，按照專案模組組織
- **實際專案**：Terrarium、打字遊戲、瀏覽器擴充功能、太空遊戲、銀行應用程式、程式碼編輯器及 AI 聊天助理
- **互動測驗**：48 個測驗，每個包含 3 題（課前/課後評量）
- **多語言支援**：透過 GitHub Actions 自動翻譯超過 50 種語言
- **技術棧**：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 build # 為生產環境進行建置
npm run lint # 執行 ESLint
```
@ -56,7 +56,7 @@ npm run format # 使用 Prettier 格式化
```bash
cd 5-browser-extension/solution
npm install
# 遵循瀏覽器特定的擴充功能載入說明
# 遵循瀏覽器特定的擴充功能載入指示
```
### 太空遊戲專案
@ -76,42 +76,42 @@ pip install openai
python api.py
```
## 開發工作流程
## 開發流程
### 內容貢獻者
1. **Fork 倉庫**到您的 GitHub 帳號
2. **本機 Clone** 您的 Fork
3. **建立新分支**以進行更改
4. 修改課程內容或程式碼範例
1. **將資源庫 fork** 至您的 GitHub 帳號
2. **在本機 clone 您的 fork**
3. **建立新分支** 進行修改
4. 對課程內容或程式碼範例進行修改
5. 在相關專案目錄測試程式碼變更
6. 遵循貢獻指南提交 Pull Request
6. 按照貢獻指南提交 pull request
### 學習者
1. Fork 或 Clone 倉庫
2. 按順序瀏覽課程目錄
3. 閱讀每堂課的 README 文件
4. 完成 https://ff-quizzes.netlify.app/web/ 的課前測驗
1. Fork 或 clone 此資源庫
2. 依序瀏覽課程目錄
3. 閱讀各課程的 README
4. 完成課前測驗，網址：https://ff-quizzes.netlify.app/web/
5. 練習課程資料夾中的程式碼範例
6. 完成作業和挑戰任務
6. 完成作業與挑戰
7. 進行課後測驗
### 即時開發
### 現場開發
- **文件**：於根目錄執行 `docsify serve`（預設port 3000）
- **測驗應用**：於 quiz-app 目錄執行 `npm run dev`
- **專案**：使用 VS Code Live Server 擴充功能開啟 HTML 專案
- **API 專案**：於各 API 目錄執行 `npm start`
- **文件**：於專案根目錄執行 `docsify serve` (監聽 3000 埠)
- **測驗應用程式**：於 quiz-app 目錄執行 `npm run dev`
- **專案**：對 HTML 專案使用 VS Code Live Server 擴充功能
- **API 專案**：於對應 API 目錄執行 `npm start`
## 測試說明
### 測驗應用測試
### 測驗應用程式測試
```bash
cd quiz-app
npm run lint # 檢查程式碼風格問題
npm run build # 驗證建置成功
npm run build # 驗證建置是否成功
```
### 銀行 API 測試
@ -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 元素
- 採用響應式設計原則
- 清晰的類別命名規範
- 添加註解說明 CSS 技巧給學習者
- 清晰的類別命名約定
- 加入註解解釋 CSS 技巧以便學習
### Python
- 遵循 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 靜態網站配置：
- **應用程式位置**：`/quiz-app`
Azure 靜態網頁應用配置：
- **App 位置**：`/quiz-app`
- **輸出位置**：`dist`
- **工作流程**：`.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
@ -204,79 +204,79 @@ npm run convert # 從 docs 生成 PDF
```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課測驗`
使用明確且描述性的標題指出變更範圍：
- `[Quiz-app] 新增第 X 課測驗`
- `[Lesson-3] 修正 terrarium 專案錯字`
- `[Translation] 新增第5課西班牙語翻譯`
- `[Docs] 更新設置說明`
- `[Translation] 新增第 5 課西班牙語翻譯`
- `[Docs] 更新安裝說明`
### 必要檢查
提交 PR 前：
1. **程式碼品質**：
- 在影響的專案目錄執行 `npm run lint`
- 修正所有 lint 錯誤和警告
- 在受影響專案目錄執行 `npm run lint`
- 修正所有 lint 錯誤與警告
2. **建置驗證**：
- 執行 `npm run build`（若適用）
- 確保無建置錯誤
- 如適用，執行 `npm run build`
- 確認無建置錯誤
3. **連結驗證**：
- 測試所有 markdown 連結
- 確認圖片路徑正確
- 確認圖片引用正常
4. **內容審校**：
- 校對拼寫和語法
4. **內容校對**：
- 文稿拼寫與文法檢查
- 確認程式碼範例正確且具教育意義
- 驗證翻譯維持原意
- 驗證翻譯保有原意
### 貢獻條件
### 貢獻要求
- 同意 Microsoft CLA（自動於首次 PR 檢查）
- 遵守 [Microsoft 開源行為守則](https://opensource.microsoft.com/codeofconduct/)
- 詳細指南請參閱 [CONTRIBUTING.md](./CONTRIBUTING.md)
- 如有，於 PR 描述中引用議題編號
- 同意 Microsoft CLA（首次 PR 進行自動檢查）
- 遵循 [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
- 詳細指南見 [CONTRIBUTING.md](./CONTRIBUTING.md)
- 如適用，於 PR 描述中參考 issue 編號
### 審查流程
- 由維護者與社群共同審查 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. 測試本地化後測驗內容
2. 進行改進時維持結構不變
3. 確保程式碼範例能正常運作
4. 測試本地化的測驗內容
### 翻譯元資料
### 翻譯元數據
翻譯檔包含元資料標頭：
翻譯檔包含如下元資料標頭：
```markdown
<!--
CO_OP_TRANSLATOR_METADATA:
@ -289,120 +289,120 @@ CO_OP_TRANSLATOR_METADATA:
-->
```
## 偵錯與故障排除
## 偵錯與問題排解
### 常見問題
**測驗應用無法啟動**：
- 檢查 Node.js 版本（建議 v14+）
- 刪除 `node_modules` 和 `package-lock.json`，重新執行 `npm install`
- 檢查埠號衝突（預設 Vite 使用 port 5173）
**測驗應用程式無法啟動**：
- 檢查 Node.js 版本（建議最低 v14）
- 刪除 `node_modules` 及 `package-lock.json` 後重新執行 `npm install`
- 檢查埠號衝突（預設 Vite 使用埠 5173）
**API 伺服器無法啟動**：
- 確認 Node.js 版本符合最低要求（node >=10）
- 檢查埠號是否被占用
- 確保已安裝所有依賴（`npm install`）
- 確認埠號未被占用
- 確保所有依賴已安裝（`npm install`）
**瀏覽器擴充功能無法載入**：
**瀏覽器擴充無法載入**：
- 確認 manifest.json 格式正確
- 使用瀏覽器主控台查看錯誤
- 依照瀏覽器特定擴充功能安裝指引操作
- 檢查瀏覽器控制台錯誤訊息
- 遵循瀏覽器特定擴充安裝說明
**Python 聊天專案問題**：
- 確保安裝 OpenAI 套件：`pip install openai`
- 核實 GITHUB_TOKEN 環境變數已設定
- 檢查 GitHub Models 權限設定
- 確認已安裝 OpenAI 套件：`pip install openai`
- 確認已設定 GITHUB_TOKEN 環境變數
- 檢查 GitHub Models 存取權限
**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 瀏覽器擴充功能
- HTML 專案使用 VS Code Live Server 擴充
- 安裝 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` 中忽略）
- 專案 README 中記錄必要環境變數
### Python 專案
- 使用虛擬環境：`python -m venv venv`
- 維持依賴套件更新
- GitHub token 僅需最低權限
- 保持依賴更新
- GitHub token 需設置最低必要權限
### GitHub Models 存取
- 使用個人存取權杖（PAT）存取 GitHub Models
- 將權杖存為環境變數
- 禁止提交權杖或憑證
- 需使用個人存取權杖 (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、資料科學、機器學習、物聯網課程可取得
- 推薦學習使用 [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，本倉庫包含多個獨立專案：
- 每堂課皆自成一體
- 專案間不共用相依套件
- 可單獨作業不影響其他專案
- 若要完整課程體驗，請完整 clone 倉庫
本資源庫非傳統 monorepo，但包含多個獨立專案：
- 每堂課自成一格
- 專案不共用依賴
- 可獨立作業不影響他專案
- 想完整體驗這門課請 clone 整個資源庫
---
<!-- 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 -->

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

@ -10,203 +10,213 @@
[![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. **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. **派生本倉庫**：點擊 [![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)
### 🌐 多語言支援
#### 透過 GitHub Action 支援（自動且永遠最新）
#### 透過 GitHub Action 實現（自動且持續更新）
<!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->
[阿拉伯語](../ar/README.md) | [孟加拉語](../bn/README.md) | [保加利亞語](../bg/README.md) | [緬甸語 (Myanmar)](../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) | [波斯語 (Farsi)](../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) | [中文（繁體，香港）](../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)
> **想要本機 Clone？**
> 此程式庫包含50多種語言翻譯，將大幅增加下載大小。若想不帶翻譯下載，請使用 sparse checkout：
> **偏好本機複製？**
>
> 本倉庫包含 50 多種語言翻譯，會大幅增加下載大小。若想不包含翻譯檔複製，請使用稀疏簽出：
>
> **Bash / macOS / Linux:**
> ```bash
> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git
> cd Web-Dev-For-Beginners
> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'
> ```
> 這可讓你以更快的速度取得完成課程所需的所有內容。
>
> **CMD (Windows):**
> ```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) 這裡有初學者資源、學生套件，甚至還有取得免費證書兌換券的方式。這個頁面非常值得收藏並定期查看，因為內容會每月更新。
請造訪[**學生專區頁面**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon)，這裡提供初學者資源、學生套件，甚至免費證書代金券兌換方式。請收藏此頁，並定期瀏覽，我們會每月更新內容。
### 📣 公告 - 新增 GitHub Copilot Agent 模式挑戰可完成！
### 📣 公告 - 新增 GitHub Copilot 代理模式挑戰關卡！
新增挑戰，請在多數章節尋找「GitHub Copilot Agent Challenge 🚀」。這是利用 GitHub Copilot 和 Agent 模式完成的新挑戰。如果你還沒用過 Agent 模式，它不只會生成文字，還能建立及編輯檔案、執行命令等等。
新挑戰已加入，大多數章節中可見 "GitHub Copilot Agent Challenge 🚀"。這是使用 GitHub Copilot 與代理模式完成的全新挑戰。如果你還沒用過代理模式，它不僅能生成文字，還能建立與編輯檔案、執行指令等。
### 📣 公告 - _新專案使用生成式 AI 建構_
### 📣 公告 - _新增使用生成式 AI 建置的專案_
剛新增 AI 助手專案，請查看 [專案](./9-chat-project/README.md)
最新 AI 助理專案已推出，詳見[專案](./9-chat-project/README.md)
### 📣 公告 - _新課程_ 針對 JavaScript 的生成式 AI 課程剛發布
### 📣 公告 - _全新生成式 AI JavaScript 課程大公開_
別錯過我們的生成式 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-TW/background.148a8d43afde5730.webp)
![背景](../../translated_images/zh-TW/background.148a8d43afde5730.webp)
- 課程範圍涵蓋從基礎到檢索增強生成（RAG）。
- 使用生成式 AI 和我們的伴侶應用與歷史人物互動。
- 有趣且引人入勝的敘事，你將穿越時空！
- 課程涵蓋從基礎到 RAG 技術。
- 使用生成式 AI 與伴隨應用互動，與歷史人物對話。
- 趣味且引人入勝的故事情節，你將展開時光之旅！
![character](../../translated_images/zh-TW/character.5c0dd8e067ffd693.webp)
![角色](../../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)提供回饋！
> **老師們**，我們有[包含一些建議](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 程式庫**：點擊本頁右上方的「Fork」按鈕。
2. **Clone 程式庫**： `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
執行步驟如下：
1. **派生本倉庫**：點擊本頁右上角的「Fork」按鈕。
2. **複製本倉庫**： `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) 將帶你了解各種選項，協助你選擇最適合自己的工具。
我們推薦使用 [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-getting-started-lessons/1-intro-to-programming-languages) 將引導你檢視各種選項，選擇最適合你的工具。
1. 將你的程式庫 Clone 到電腦。可點擊 **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](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 擴充功能：
>
> * [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/)
- [課後測驗](https://ff-quizzes.netlify.app/web/)
> **關於測驗的說明**：所有測驗皆收錄於 Quiz-app 資料夾中，共有 48 組測驗，且每組包含三個問題。這些測驗可於 [此處](https://ff-quizzes.netlify.app/web/) 取得，測驗應用可在本機執行或部署至 Azure；請參照 `quiz-app` 資料夾中的說明。
> **關於測驗的註解**：所有測驗均包含在 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 and Christopher |
| 06 | JS Basics | JavaScript 決策製作 | 學習如何使用決策結構在程式碼中建立條件 | [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 遊戲開發 | 瞭解繼承、類別與組合模式以及發布/訂閱模式，為遊戲開發做準備 | [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 |
| | 專案名稱 | 教授概念 | 學習目標 | 連結課程 | 作者 |
| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 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 |
## 🏫 教學法
我們的課程設計基於兩個主要教學原則：
我們的課程設計基於兩項重要的教學原理：
* 專案導向學習
* 經常性的測驗
* 頻繁測驗
本課程教授 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 基礎入門課程，搭配來自 "[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 週課程結束時逐步變得複雜。
雖然我們刻意避免介紹 JavaScript 框架，以便先著重於作為網頁開發者所需的基本技能，再進一步學習框架，但完成本課程的良好下一步，是透過另一系列影片 "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)" 學習 Node.js。
我們特意避免介紹 JavaScript 框架，專注培養基本技能，學習者後續可利用另一系列影片「[Node.js 初學者系列](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)」來深入 Node.js。
> 請參閱我們的 [行為守則](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/#/) 離線瀏覽本文件。將此倉庫分支，於本機安裝 [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
@ -250,21 +260,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