diff --git a/translations/hk/7-bank-project/1-template-route/assignment.md b/translations/hk/7-bank-project/1-template-route/assignment.md
index 4ec0677e..72ad437d 100644
--- a/translations/hk/7-bank-project/1-template-route/assignment.md
+++ b/translations/hk/7-bank-project/1-template-route/assignment.md
@@ -1,26 +1,60 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "8223e429218befa731dd5bfd22299520",
-  "translation_date": "2025-08-24T00:09:55+00:00",
+  "original_hash": "df0dcecddcd28ea8cbf6ede0ad57d673",
+  "translation_date": "2026-01-06T12:51:16+00:00",
   "source_file": "7-bank-project/1-template-route/assignment.md",
   "language_code": "hk"
 }
 -->
 # 改善路由
 
-## 指引
+## 指示
 
-目前的路由宣告僅包含要使用的模板 ID，但在顯示新頁面時，有時需要更多功能。讓我們透過以下兩個額外功能來改進路由的實現：
+既然你已建立基本的路由系統，現在是時候以專業功能加以強化，提升用戶體驗和提供更好的開發工具。實際應用程式不僅僅需要模板切換，還需要動態頁面標題、生命週期掛勾和可擴充架構。
 
-- 為每個模板設定標題，並在模板變更時更新窗口標題為新標題。
-- 增加一個選項，在模板變更後執行一些程式碼。我們希望每次顯示儀表板頁面時，在開發者主控台中打印 `'Dashboard is shown'`。
+在此作業中，你將擴充你的路由實作，加入兩個常見於生產環境網頁應用程式的重要功能。這些增強會讓你的銀行應用感覺更完善，並為未來功能奠定基礎。
+
+路由宣告目前只包含要使用的模板 ID，但顯示新頁面時有時需要更多資訊。讓我們透過兩個額外功能改進路由實作：
+
+### 功能一：動態頁面標題
+**目標：** 為每個模板設定標題，並在模板更換時更新瀏覽器視窗標題。
+
+**重要原因：**
+- **提升**使用者體驗，顯示具描述性的瀏覽器分頁標題  
+- **增強**輔助技術與螢幕閱讀器的可存取性  
+- **提供**更好的書籤與瀏覽器歷史上下文  
+- **遵循**專業網站開發最佳實務  
+
+**實作方式：**
+- **擴充** routes 物件，包含每條路由的標題資訊  
+- **修改** `updateRoute()` 函式，動態更新 `document.title`  
+- **測試**在不同頁面切換時標題是否正常變更  
+
+### 功能二：路由生命週期掛勾  
+**目標：** 新增在模板切換後執行程式碼的選項。我們希望每次顯示儀表板頁面時，在開發者控制台印出 `'Dashboard is shown'`。
+
+**重要原因：**
+- **啟用**特定路由載入時執行自訂邏輯  
+- **提供**分析、記錄或初始化程式碼的掛勾  
+- **建立**支援更複雜路由行為的基礎  
+- **展示**網站開發中觀察者模式的概念  
+
+**實作方式：**
+- **新增**路由設定的可選回呼函式屬性  
+- **模板渲染完成後執行**該回呼函式（如存在）  
+- **確保**此功能能作用於任何含有定義回呼的路由  
+- **測試**造訪儀表板時，控制台訊息是否出現  
 
 ## 評分標準
 
-| 評分標準 | 卓越                                                                                                                          | 合格                                                                                                                                                                                  | 需要改進                                       |
-| -------- | ----------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------- |
-|          | 兩個功能均已實現並正常運作。標題和程式碼新增功能也適用於在 `routes` 宣告中新增的路由。                                           | 兩個功能均正常運作，但行為是硬編碼的，無法透過 `routes` 宣告進行配置。新增第三個具有標題和程式碼新增功能的路由無法運作或僅部分運作。                                                   | 其中一個功能缺失或未正常運作。                 |
+| 標準 | 優異                                                                                                                               | 合格                                                                                                                                                                                     | 需要改進                                              |
+| ---- | ---------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- |
+|      | 兩項功能皆已實作並正常運作。標題與程式碼新增亦可支援 `routes` 宣告中添加的新路由。                                                   | 兩項功能皆可運作，但行為為硬編碼，無法透過 `routes` 宣告設定。無法或部分可用於添加第三條帶標題與程式碼的路由。                                                                          | 缺少其中一項功能或功能無法正常運作。                  |
+
+---
 
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
 **免責聲明**：  
-本文件已使用人工智能翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。應以原文文件作為權威來源。對於關鍵資訊，建議尋求專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或錯誤解釋概不負責。
\ No newline at end of file
+本文件乃使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 翻譯而成。雖然我們力求準確，但請注意自動翻譯可能包含錯誤或不準確之處。原始文件之母語版本應被視為權威來源。對於重要資訊，建議採用專業人工翻譯。本公司對因使用此翻譯而引起的任何誤解或誤釋不負任何責任。
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->
\ No newline at end of file
diff --git a/translations/hk/7-bank-project/2-forms/README.md b/translations/hk/7-bank-project/2-forms/README.md
index e9cb4ba2..3d8943a2 100644
--- a/translations/hk/7-bank-project/2-forms/README.md
+++ b/translations/hk/7-bank-project/2-forms/README.md
@@ -1,313 +1,965 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "8baca047d77a5f43fa4099c0578afa42",
-  "translation_date": "2025-08-29T14:57:16+00:00",
+  "original_hash": "7cbdbd132d39a2bb493e85bc2a9387cc",
+  "translation_date": "2026-01-06T12:46:26+00:00",
   "source_file": "7-bank-project/2-forms/README.md",
   "language_code": "hk"
 }
 -->
-# 建立銀行應用程式第二部分：建立登入和註冊表單
-
-## 課前測驗
-
-[課前測驗](https://ff-quizzes.netlify.app/web/quiz/43)
-
-### 簡介
-
-在幾乎所有現代的網頁應用程式中，您都可以創建一個帳戶來擁有自己的私人空間。由於多個使用者可以同時訪問網頁應用程式，因此需要一種機制來分別儲存每個使用者的個人資料，並選擇要顯示的資訊。我們不會涵蓋如何[安全地管理使用者身份](https://en.wikipedia.org/wiki/Authentication)，因為這是一個非常廣泛的主題，但我們會確保每個使用者能夠在我們的應用程式中創建一個（或多個）銀行帳戶。
+# 建立銀行應用程式第二部分：建立登入及註冊表單
+
+```mermaid
+journey
+    title 你的表單開發歷程
+    section HTML 基礎
+      了解表單元素: 3: Student
+      學習輸入類型: 4: Student
+      掌握無障礙設計: 4: Student
+    section JavaScript 整合
+      處理表單提交: 4: Student
+      實作 AJAX 通訊: 5: Student
+      處理伺服器回應: 5: Student
+    section 驗證系統
+      建立多層驗證: 5: Student
+      增強使用者體驗: 5: Student
+      確保資料完整性: 5: Student
+```
+## 課前小測驗
+
+[課前小測驗](https://ff-quizzes.netlify.app/web/quiz/43)
+
+是否曾經在線上填寫表格，卻被拒絕你的電郵格式？或者點擊提交時所有資料都遺失了？我們都遇過這些令人挫敗的經歷。
+
+表格是使用者與應用程序功能之間的橋樑。就像航空管制員謹慎使用的程序，引導飛機安全抵達目的地一樣，良好設計的表格提供明確回饋並防止昂貴錯誤。反之，糟糕的表格可能比忙碌機場裡的誤會更快令使用者流失。
+
+在本課程中，我們將把你的靜態銀行應用轉換成互動式應用。你將學會建立驗證使用者輸入、與伺服器通訊並提供實用回饋的表格。可視為建立讓使用者導航應用功能的控制界面。
+
+最後，你將擁有一套完整的登入及註冊系統，透過驗證引導使用者走向成功而非挫敗。
+
+```mermaid
+mindmap
+  root((表單開發))
+    HTML Foundation
+      語義元素
+      輸入類型
+      無障礙設計
+      標籤關聯
+    User Experience
+      驗證反饋
+      錯誤預防
+      載入狀態
+      成功訊息
+    JavaScript Integration
+      事件處理
+      AJAX 通信
+      資料處理
+      錯誤管理
+    Validation Layers
+      HTML5 驗證
+      用戶端邏輯
+      伺服器端安全
+      漸進增強
+    Modern Patterns
+      Fetch API
+      Async/Await
+      表單資料 API
+      Promise 處理
+```
+## 預備知識
 
-在這部分，我們將使用 HTML 表單為我們的網頁應用程式新增登入和註冊功能。我們將學習如何以程式化方式將資料發送到伺服器 API，並最終定義使用者輸入的基本驗證規則。
+在開始建立表格前，先確保你的環境設置妥當。本課程緊接上次課程內容，因此如果你跳過了中間步驟，建議你回去先完成基礎設定。
 
-### 先決條件
+### 必要設置
 
-您需要完成本課程的[HTML 模板和路由](../1-template-route/README.md)部分。此外，您還需要安裝 [Node.js](https://nodejs.org) 並在本地運行[伺服器 API](../api/README.md)，以便能夠發送資料來創建帳戶。
+| 元件 | 狀態 | 描述 |
+|-----------|--------|-------------|
+| [HTML 模板](../1-template-route/README.md) | ✅ 必須 | 你的基本銀行應用結構 |
+| [Node.js](https://nodejs.org) | ✅ 必須 | 伺服器的 JavaScript 執行環境 |
+| [銀行 API 伺服器](../api/README.md) | ✅ 必須 | 用於資料存取的後端服務 |
 
-**請注意**
-您需要同時運行以下兩個終端：
-1. 用於我們在[HTML 模板和路由](../1-template-route/README.md)課程中建立的主要銀行應用程式。
-2. 用於我們剛剛設置的[銀行應用程式伺服器 API](../api/README.md)。
+> 💡 **開發提示**：你會同時執行兩個伺服器 — 前端銀行應用伺服器和後端 API 伺服器。這種設定模擬真實開發中前後端分離的環境。
 
-您需要這兩個伺服器都在運行，才能繼續完成本課程的其餘部分。它們分別監聽不同的埠（埠 `3000` 和埠 `5000`），因此應該可以正常運作。
+### 伺服器配置
 
-您可以在終端中執行以下命令來測試伺服器是否正常運行：
+**你的開發環境會包括：**
+- **前端伺服器**：提供銀行應用（通常使用 `3000` 端口）
+- **後端 API 伺服器**：負責資料存取（使用 `5000` 端口）
+- **兩個伺服器**可以同時運行而不衝突
 
-```sh
+**測試 API 連線：**
+```bash
 curl http://localhost:5000/api
-# -> should return "Bank API v1.0.0" as a result
+# 預期回應: "Bank API v1.0.0"
 ```
 
+**若你看到 API 版本回應，表示環境準備就緒！**
+
 ---
 
-## 表單與控制項
+## 了解 HTML 表格與控制元件
+
+HTML 表格是使用者與你的網頁應用程式溝通的方式。你可以將它們想像成 19 世紀連接遠方地點的電報系統──它們是使用者意圖與應用回應間的通訊協議。設計良好時，會捕捉錯誤、指導格式並提供有用提示。
 
-`<form>` 元素封裝了 HTML 文件的一個區域，使用者可以在其中使用互動式控制項輸入和提交資料。在表單中可以使用各種使用者介面（UI）控制項，其中最常見的是 `<input>` 和 `<button>` 元素。
+現代表格比起基本文字輸入框複雜得多。HTML5 引入特定輸入類型，自動處理電郵驗證、數字格式及日期選擇。這些改良有助無障礙和行動用戶體驗。
 
-`<input>` 有許多不同的[類型](https://developer.mozilla.org/docs/Web/HTML/Element/input)，例如，要創建一個讓使用者輸入用戶名的欄位，您可以使用：
+### 必備表格元素
+
+**每個表格都需要的建構模組：**
 
 ```html
-<input id="username" name="username" type="text">
+<!-- Basic form structure -->
+<form id="userForm" method="POST">
+  <label for="username">Username</label>
+  <input id="username" name="username" type="text" required>
+  
+  <button type="submit">Submit</button>
+</form>
 ```
 
-`name` 屬性將在表單資料發送時用作屬性名稱。`id` 屬性則用於將 `<label>` 與表單控制項關聯。
+**這段代碼做了什麼：**
+- **建立**一個帶有唯一識別碼的表格容器
+- **指定**資料提交所使用的 HTTP 方法
+- **關聯**標籤與輸入欄位以提升無障礙性
+- **定義**一個送出按鈕來處理表格提交
 
-> 查看 [`<input>` 類型](https://developer.mozilla.org/docs/Web/HTML/Element/input)和[其他表單控制項](https://developer.mozilla.org/docs/Learn/Forms/Other_form_controls)的完整列表，了解在構建 UI 時可以使用的所有原生 UI 元素。
+### 現代輸入類型與屬性
 
-✅ 請注意，`<input>` 是一個[空元素](https://developer.mozilla.org/docs/Glossary/Empty_element)，您不應為其添加匹配的閉合標籤。不過，您可以使用自閉合的 `<input/>` 表示法，但這不是必須的。
+| 輸入類型 | 用途 | 範例用法 |
+|------------|---------|---------------|
+| `text` | 一般文字輸入 | `<input type="text" name="username">` |
+| `email` | 電郵驗證 | `<input type="email" name="email">` |
+| `password` | 隱藏文字輸入 | `<input type="password" name="password">` |
+| `number` | 數字輸入 | `<input type="number" name="balance" min="0">` |
+| `tel` | 電話號碼 | `<input type="tel" name="phone">` |
 
-表單中的 `<button>` 元素有些特殊。如果您未指定其 `type` 屬性，則按下時會自動將表單資料提交到伺服器。以下是可能的 `type` 值：
+> 💡 **現代 HTML5 優勢**：使用特定輸入類型可提供自動驗證、行動裝置適合的鍵盤，以及更佳的無障礙支援，無需額外 JavaScript！
 
-- `submit`：表單中的預設值，按鈕觸發表單提交操作。
-- `reset`：按鈕將所有表單控制項重置為其初始值。
-- `button`：按鈕按下時不分配預設行為。您可以使用 JavaScript 為其分配自定義操作。
+### 按鈕類型及行為
 
-### 任務
+```html
+<!-- Different button behaviors -->
+<button type="submit">Save Data</button>     <!-- Submits the form -->
+<button type="reset">Clear Form</button>    <!-- Resets all fields -->
+<button type="button">Custom Action</button> <!-- No default behavior -->
+```
+
+**各按鈕類型功能說明：**
+- **送出按鈕**：觸發表格提交並將資料發送至指定端點
+- **重設按鈕**：重置所有表格欄位為初始狀態
+- **一般按鈕**：沒有預設行為，須配合自訂 JavaScript 實現功能
+
+> ⚠️ **重要提醒**：`<input>` 是自閉合元素，無需閉合標籤。現代最佳實踐為 `<input>`，不加斜線。
+
+### 建立你的登入表格
 
-讓我們從在 `login` 模板中新增一個表單開始。我們需要一個*用戶名*欄位和一個*登入*按鈕。
+現在讓我們建立一個實用的登入表格，展示現代 HTML 表格實務。我們先從基本結構開始，逐步加強無障礙性及驗證。
 
 ```html
 <template id="login">
   <h1>Bank App</h1>
   <section>
     <h2>Login</h2>
-    <form id="loginForm">
-      <label for="username">Username</label>
-      <input id="username" name="user" type="text">
-      <button>Login</button>
+    <form id="loginForm" novalidate>
+      <div class="form-group">
+        <label for="username">Username</label>
+        <input id="username" name="user" type="text" required 
+               autocomplete="username" placeholder="Enter your username">
+      </div>
+      <button type="submit">Login</button>
     </form>
   </section>
 </template>
 ```
 
-如果仔細觀察，您會注意到我們還新增了一個 `<label>` 元素。`<label>` 元素用於為 UI 控制項（例如我們的用戶名欄位）添加名稱。標籤對於表單的可讀性非常重要，並且還帶來其他好處：
+**分析這裡發生的事情：**
+- **用語義化 HTML5 元素**來結構化表格
+- **使用帶有描述性類別的 `<div>` 容器**分組相關元素
+- **用 `for` 與 `id` 屬性**關聯標籤與輸入
+- **加入現代屬性**如 `autocomplete` 和 `placeholder` 改善使用者體驗
+- **加上 `novalidate`**，改由 JavaScript 處理驗證，而非瀏覽器預設
+
+### 正確標籤的重要性
+
+**為何標籤對現代網頁開發很重要：**
+
+```mermaid
+graph TD
+    A[標籤元素] --> B[螢幕閱讀器支援]
+    A --> C[點擊目標擴大]
+    A --> D[表單驗證]
+    A --> E[SEO 益處]
+    
+    B --> F[所有用戶可達]
+    C --> G[更佳的手機體驗]
+    D --> H[清晰的錯誤訊息]
+    E --> I[更好的搜尋排名]
+```
+**正確標籤的作用：**
+- **讓螢幕閱讀器清楚宣告表格欄位**
+- **擴大點擊區域（點擊標籤可聚焦輸入欄位）**
+- **提升行動裝置使用體驗，觸控目標更大**
+- **支援更有意義的錯誤訊息驗證**
+- **增強 SEO，提供表格元素語意**
 
-- 通過將標籤與表單控制項關聯，可以幫助使用輔助技術（如螢幕閱讀器）的使用者了解他們需要提供哪些資料。
-- 您可以點擊標籤直接將焦點放在相關的輸入欄位上，這使得在觸控螢幕設備上更容易操作。
+> 🎯 **無障礙目標**：每個輸入都應有相對應標籤。這個簡單做法讓你的表格對所有人都更友善，包括有障礙的使用者，並提升整體使用體驗。
 
-> [網頁無障礙性](https://developer.mozilla.org/docs/Learn/Accessibility/What_is_accessibility)是一個經常被忽視但非常重要的主題。得益於[語義化 HTML 元素](https://developer.mozilla.org/docs/Learn/Accessibility/HTML)，如果正確使用它們，創建無障礙內容並不困難。您可以[閱讀更多關於無障礙性的內容](https://developer.mozilla.org/docs/Web/Accessibility)，以避免常見錯誤並成為一名負責任的開發者。
+### 建立註冊表格
 
-現在，我們將在前一個表單下方新增第二個註冊表單：
+註冊表格需要填寫較多詳細資料來建立完整帳號。讓我們用現代 HTML5 功能及加強無障礙性來建立它。
 
 ```html
 <hr/>
 <h2>Register</h2>
-<form id="registerForm">
-  <label for="user">Username</label>
-  <input id="user" name="user" type="text">
-  <label for="currency">Currency</label>
-  <input id="currency" name="currency" type="text" value="$">
-  <label for="description">Description</label>
-  <input id="description" name="description" type="text">
-  <label for="balance">Current balance</label>
-  <input id="balance" name="balance" type="number" value="0">
-  <button>Register</button>
+<form id="registerForm" novalidate>
+  <div class="form-group">
+    <label for="user">Username</label>
+    <input id="user" name="user" type="text" required 
+           autocomplete="username" placeholder="Choose a username">
+  </div>
+  
+  <div class="form-group">
+    <label for="currency">Currency</label>
+    <input id="currency" name="currency" type="text" value="$" 
+           required maxlength="3" placeholder="USD, EUR, etc.">
+  </div>
+  
+  <div class="form-group">
+    <label for="description">Account Description</label>
+    <input id="description" name="description" type="text" 
+           maxlength="100" placeholder="Personal savings, checking, etc.">
+  </div>
+  
+  <div class="form-group">
+    <label for="balance">Starting Balance</label>
+    <input id="balance" name="balance" type="number" value="0" 
+           min="0" step="0.01" placeholder="0.00">
+  </div>
+  
+  <button type="submit">Create Account</button>
 </form>
 ```
 
-使用 `value` 屬性，我們可以為給定的輸入欄位定義預設值。
-另外，請注意 `balance` 的輸入欄位使用了 `number` 類型。它看起來是否與其他輸入欄位不同？試著與它互動看看。
+**上述代碼中，我們：**
+- **將每個欄位置於容器 `<div>` 中**以便更好地調整樣式和版面
+- **加入適當的 `autocomplete` 屬性**以支援瀏覽器自動填入
+- **包含實用的 placeholder 文字**指引用戶輸入
+- **使用 `value` 設定合理預設值**
+- **套用驗證屬性**如 `required`、`maxlength` 和 `min`
+- **balance 欄位使用 `type="number"`**且支援小數點
+
+### 探索輸入類型與行為
+
+**現代輸入類型帶來的功能強化：**
+
+| 功能 | 好處 | 範例 |
+|---------|---------|----------|
+| `type="number"` | 行動裝置數字鍵盤 | 較易輸入餘額 |
+| `step="0.01"` | 小數點精度控制 | 支援貨幣分角 |
+| `autocomplete` | 瀏覽器自動填入 | 更快填表 |
+| `placeholder` | 背景提示 | 指導使用者預期 |
 
-✅ 您能僅使用鍵盤導航並與表單互動嗎？您會如何操作？
+> 🎯 **無障礙挑戰**：嘗試僅用鍵盤操作表格！用 `Tab` 鍵移動欄位，`Space` 勾選多選框，`Enter` 送出。這可幫助你理解螢幕閱讀器使用者的互動模式。
 
-## 將資料提交到伺服器
+### 🔄 **學習進度檢查**
+**表格基礎理解**：在實作 JavaScript 前，請確保你知道：
+- ✅ 怎樣用語義化 HTML 建立無障礙表格結構
+- ✅ 輸入類型對行動鍵盤與驗證的重要性
+- ✅ 標籤與表格控制元件的相互關係
+- ✅ 表格屬性如何影響瀏覽器預設行為
 
-現在我們有了一個功能性 UI，下一步是將資料發送到伺服器。讓我們使用當前的程式碼進行快速測試：如果您點擊*登入*或*註冊*按鈕會發生什麼？
+**自我檢測題**：若沒有 JavaScript 管理，送出表格會發生什麼事？
+*答案：瀏覽器進行預設提交，通常跳轉至 action 指定的 URL*
 
-您是否注意到瀏覽器的 URL 區域發生了變化？
+**HTML5 表格好處**：現代表格提供：
+- **內建驗證**：自動檢查電郵及數字格式
+- **行動優化**：依輸入類型調整鍵盤
+- **無障礙**：支援螢幕閱讀器和鍵盤導航
+- **漸進增強**：即使無 JavaScript 也可正常使用
 
-![點擊註冊按鈕後瀏覽器 URL 的變化截圖](../../../../translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.hk.png)
+## 理解表格提交方式
 
-`<form>` 的預設行為是使用 [GET 方法](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3)將表單資料提交到當前伺服器 URL，並將表單資料直接附加到 URL 中。然而，這種方法有一些缺點：
+當有人填完你的表格並點擊提交時，資料需要被送到某處──通常是伺服器進行儲存。有幾種方式可以實現這點，了解何時使用可少很多麻煩。
 
-- 發送的資料大小非常有限（約 2000 個字元）。
-- 資料直接顯示在 URL 中（對於密碼來說並不理想）。
-- 不支持檔案上傳。
+讓我們看清楚按下「提交」按鈕時到底發生什麼。
 
-因此，您可以將其更改為使用 [POST 方法](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5)，該方法將表單資料作為 HTTP 請求的主體發送到伺服器，沒有上述限制。
+### 預設表格行為
 
-> 雖然 POST 是最常用於發送資料的方法，但[在某些特定情況下](https://www.w3.org/2001/tag/doc/whenToUseGet.html)，例如實現搜尋欄時，使用 GET 方法更為合適。
+先看基本表格提交的表現：
 
-### 任務
+**測試你現在的表格：**
+1. 點擊你表格中的*註冊*按鈕
+2. 觀察瀏覽器網址列的變化
+3. 注意頁面重新載入且資料出現在 URL 中
 
-為註冊表單新增 `action` 和 `method` 屬性：
+![點擊註冊按鈕後瀏覽器網址變化截圖](../../../../translated_images/click-register.e89a30bf0d4bc9ca.hk.png)
+
+### HTTP 方法比較
+
+```mermaid
+graph TD
+    A[表單提交] --> B{HTTP 方法}
+    B -->|GET| C[資料在網址]
+    B -->|POST| D[資料在請求主體]
+    
+    C --> E[地址欄可見]
+    C --> F[資料大小有限]
+    C --> G[可加入書籤]
+    
+    D --> H[網址隱藏]
+    D --> I[大容量資料]
+    D --> J[較安全]
+```
+**了解差異：**
+
+| 方法 | 使用場景 | 資料位置 | 安全等級 | 大小限制 |
+|--------|----------|---------------|----------------|-------------|
+| `GET` | 搜尋查詢、篩選器 | URL 參數 | 低（可見） | 約 2000 字元 |
+| `POST` | 使用者帳號、敏感資料 | 請求主體 | 較高（隱藏） | 無實際限制 |
+
+**基本差異認識：**
+- **GET**：在 URL 以查詢參數附加表格資料（適合搜尋操作）
+- **POST**：將資料放在請求主體中（敏感資料時必須）
+- **GET 限制**：大小有限制、資料可見、瀏覽器歷史會保存
+- **POST 優勢**：容量大、資料隱藏、支援檔案上傳
+
+> 💡 **最佳實務**：搜尋及篩選使用 `GET`，用戶註冊、登入與資料建立用 `POST`。
+
+### 配置表格提交
+
+讓我們配置註冊表格，透過 POST 與後端 API 正確通訊：
 
 ```html
-<form id="registerForm" action="//localhost:5000/api/accounts" method="POST">
+<form id="registerForm" action="//localhost:5000/api/accounts" 
+      method="POST" novalidate>
 ```
 
-現在嘗試使用您的名字註冊一個新帳戶。點擊*註冊*按鈕後，您應該會看到如下內容：
+**此配置會：**
+- **將表格提交導向你的 API 端點**
+- **使用 POST 方法進行安全資料傳送**
+- **加入 `novalidate` 屬性，改用 JavaScript 验證**
 
-![瀏覽器窗口顯示 localhost:5000/api/accounts 的地址，並顯示包含使用者資料的 JSON 字串](../../../../translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.hk.png)
+### 測試表格提交
 
-如果一切順利，伺服器應該會以包含已創建帳戶資料的 [JSON](https://www.json.org/json-en.html) 回應您的請求。
+**按步驟測試你的表格：**
+1. **填寫**註冊表格資料
+2. **點擊**「建立帳戶」按鈕
+3. **觀察**瀏覽器中的伺服器回應
 
-✅ 再次使用相同的名字嘗試註冊。會發生什麼？
+![瀏覽器視窗顯示 localhost:5000/api/accounts 地址，呈現包含用戶資料的 JSON 字串](../../../../translated_images/form-post.61de4ca1b964d91a.hk.png)
 
-## 無需重新載入頁面提交資料
+**你應該看到：**
+- **瀏覽器跳轉**至 API 端點 URL
+- **JSON 回應**包含你新建立的帳號資料
+- **伺服器確認**帳號已成功創建
 
-您可能已經注意到，我們剛剛使用的方法有一個小問題：提交表單時，我們離開了應用程式，瀏覽器重定向到伺服器 URL。我們正在嘗試避免所有頁面重新載入，因為我們正在構建一個[單頁應用程式 (SPA)](https://en.wikipedia.org/wiki/Single-page_application)。
+> 🧪 **實驗時間**：試試用相同使用者名稱再次註冊。你會收到什麼反應？這幫助你了解伺服器如何處理重複資料與錯誤狀況。
 
-要將表單資料發送到伺服器而不強制重新載入頁面，我們需要使用 JavaScript 程式碼。與其在 `<form>` 元素的 `action` 屬性中放置 URL，您可以使用任何以 `javascript:` 字串開頭的 JavaScript 程式碼來執行自定義操作。使用這種方法意味著您需要實現一些瀏覽器之前自動完成的任務：
+### 了解 JSON 回應
+
+**當伺服器成功處理你的表格時：**
+```json
+{
+  "user": "john_doe",
+  "currency": "$",
+  "description": "Personal savings",
+  "balance": 100,
+  "id": "unique_account_id"
+}
+```
+
+**此回應證明：**
+- **建立**一個新帳戶，使用你提供的資料
+- **指派**唯一識別碼以便未來參考
+- **回傳**完整帳戶資訊以供驗證
+- **表示**資料庫已成功存儲
+
+## 使用 JavaScript 的現代表格處理
+
+傳統表格提交會導致整頁重新載入，就像早期太空任務需要完全重設系統才能修正軌道。這方法打斷使用者體驗並損失應用狀態。
+
+JavaScript 表格處理猶如現代太空船的持續導航系統──可即時調整且不失去導航脈絡。我們可以攔截表單提交，立即回饋、優雅處理錯誤，根據伺服器回應更新介面，同時維持用戶在應用中的位置。
+
+### 為何要避免頁面重新載入？
+
+```mermaid
+sequenceDiagram
+    participant User
+    participant SPA
+    participant Server
+    
+    User->>SPA: 提交表單
+    SPA->>Server: AJAX 請求
+    Server-->>SPA: JSON 回應
+    SPA->>User: 更新介面
+    
+    Note over User,SPA: 無需重新載入頁面！
+```
+**JavaScript 表格處理優勢：**
+- **維持**應用狀態與使用者上下文
+- **提供**即時回饋與載入指示
+- **使能**動態錯誤處理與驗證
+- **創造**流暢、類應用程式使用經驗
+- **允許**依伺服器回應調整條件邏輯
 
-- 獲取表單資料
-- 將表單資料轉換並編碼為合適的格式
-- 創建 HTTP 請求並將其發送到伺服器
+### 傳統與現代表格過渡
 
-### 任務
+**傳統方法挑戰：**
+- **將使用者導離**你的應用程式
+- **失去**當前應用狀態與上下文
+- **必須**完全重新載入頁面才能簡單操作
+- **控制反饋**有限
 
-將註冊表單的 `action` 替換為：
+**現代 JavaScript 方法優勢：**
+- **讓使用者停留**在應用程式中
+- **保存**所有應用狀態與資料
+- **實現**即時驗證與回饋
+- **支援**漸進增強與無障礙
+
+### 實作 JavaScript 表格處理
+
+讓我們用現代 JavaScript 事件處理取消傳統表格提交：
 
 ```html
-<form id="registerForm" action="javascript:register()">
+<!-- Remove the action attribute and add event handling -->
+<form id="registerForm" method="POST" novalidate>
 ```
 
-打開 `app.js`，新增一個名為 `register` 的函數：
+**在 `app.js` 文件中加入註冊邏輯：**
 
-```js
+```javascript
+// 現代事件驅動表單處理
 function register() {
   const registerForm = document.getElementById('registerForm');
   const formData = new FormData(registerForm);
   const data = Object.fromEntries(formData);
   const jsonData = JSON.stringify(data);
+  
+  console.log('Form data prepared:', data);
 }
+
+// 當頁面加載時附加事件監聽器
+document.addEventListener('DOMContentLoaded', () => {
+  const registerForm = document.getElementById('registerForm');
+  registerForm.addEventListener('submit', (event) => {
+    event.preventDefault(); // 阻止表單默認提交
+    register();
+  });
+});
+```
+
+**分析代碼作用：**
+- **使用 `event.preventDefault()`** 避免預設表格提交
+- **用現代 DOM 方法**取得表格元素
+- **運用強大的 `FormData` API**擷取表格資料
+- **用 `Object.fromEntries()` 將 FormData 轉成純物件**
+- **將資料序列化成 JSON 格式**以便伺服器通信
+- **記錄處理後資料**供除錯及驗證
+
+### 了解 FormData API
+
+**FormData API 提供強大的表格資料處理功能：**
+```javascript
+// FormData 擷取內容的範例
+const formData = new FormData(registerForm);
+
+// FormData 自動擷取：
+// {
+//   "user": "john_doe",
+//   "currency": "$",
+//   "description": "個人帳戶",
+//   "balance": "100"
+// }
 ```
 
-在這裡，我們使用 `getElementById()` 獲取表單元素，並使用 [`FormData`](https://developer.mozilla.org/docs/Web/API/FormData) 幫助器將表單控制項中的值提取為一組鍵/值對。然後，我們使用 [`Object.fromEntries()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries) 將資料轉換為普通物件，最後將資料序列化為 [JSON](https://www.json.org/json-en.html)，這是一種網頁上常用的資料交換格式。
+**FormData API 優勢：**
+- **全面收集**：捕捉所有表單元素，包括文字、檔案及複雜輸入
+- **類型識別**：自動處理不同輸入類型，無需自訂程式碼
+- **高效**：以單一 API 呼叫取代手動欄位收集
+- **適應性強**：隨表單結構變化依然保持功能正常
+
+### 建立與伺服器通訊功能
 
-資料現在已準備好發送到伺服器。新增一個名為 `createAccount` 的函數：
+現在讓我們使用現代 JavaScript 模式，打造一個穩健的 API 伺服器通訊函式：
 
-```js
+```javascript
 async function createAccount(account) {
   try {
     const response = await fetch('//localhost:5000/api/accounts', {
       method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
+      headers: { 
+        'Content-Type': 'application/json',
+        'Accept': 'application/json'
+      },
       body: account
     });
+    
+    // 檢查回應是否成功
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    
     return await response.json();
   } catch (error) {
-    return { error: error.message || 'Unknown error' };
+    console.error('Account creation failed:', error);
+    return { error: error.message || 'Network error occurred' };
   }
 }
 ```
 
-這個函數在做什麼？首先，注意這裡的 `async` 關鍵字。這表示該函數包含將[**異步**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function)執行的程式碼。當與 `await` 關鍵字一起使用時，它允許等待異步程式碼執行（例如等待伺服器回應）後再繼續。
-
-這裡有一段關於 `async/await` 用法的影片：
-
-[![管理 Promise 的 Async 和 Await](https://img.youtube.com/vi/YwmlRkrxvkk/0.jpg)](https://youtube.com/watch?v=YwmlRkrxvkk "管理 Promise 的 Async 和 Await")
-
-> 🎥 點擊上方圖片觀看關於 async/await 的影片。
-
-我們使用 `fetch()` API 將 JSON 資料發送到伺服器。此方法接受兩個參數：
+**認識非同步 JavaScript：**
+
+```mermaid
+sequenceDiagram
+    participant JS as JavaScript
+    participant Fetch as Fetch API
+    participant Server as 後端伺服器
+    
+    JS->>Fetch: fetch() 請求
+    Fetch->>Server: HTTP POST
+    Server-->>Fetch: JSON 回應
+    Fetch-->>JS: await 回應
+    JS->>JS: 處理資料
+```
+**這個現代實作達成了：**
+- **使用** `async/await` 以撰寫易讀的非同步程式碼
+- **包含** try/catch 區塊以妥善處理錯誤
+- **檢查** 回應狀態後再處理資料
+- **設定** 適當的標頭以傳送 JSON 通訊
+- **提供** 詳細錯誤訊息以方便除錯
+- **回傳** 成功與錯誤案例均一致的資料結構
 
-- 伺服器的 URL，因此我們在這裡放回 `//localhost:5000/api/accounts`。
-- 請求的設置。在這裡，我們將方法設置為 `POST`，並提供請求的 `body`。由於我們將 JSON 資料發送到伺服器，因此還需要將 `Content-Type` 標頭設置為 `application/json`，以便伺服器知道如何解釋內容。
+### 現代 Fetch API 的強大之處
 
-由於伺服器將以 JSON 回應請求，我們可以使用 `await response.json()` 解析 JSON 內容並返回結果物件。請注意，此方法是異步的，因此我們在返回之前使用 `await` 關鍵字以確保在解析期間的任何錯誤也能被捕獲。
+**Fetch API 優於舊方法的特色：**
 
-現在，新增一些程式碼到 `register` 函數中以呼叫 `createAccount()`：
+| 功能 | 優點 | 實作方式 |
+|---------|---------|----------------|
+| 基於 Promise | 清晰非同步程式碼 | `await fetch()` |
+| 請求客製化 | HTTP 全面控制 | 標頭、方法、主體 |
+| 回應處理 | 彈性資料解析 | `.json()`, `.text()`, `.blob()` |
+| 錯誤處理 | 全面錯誤攔截 | try/catch 區塊 |
 
-```js
-const result = await createAccount(jsonData);
-```
+> 🎥 **深入學習**： [Async/Await 教學](https://youtube.com/watch?v=YwmlRkrxvkk) - 理解非同步 JavaScript 模式，用於現代網頁開發。
 
-由於我們在這裡使用了 `await` 關鍵字，因此需要在 register 函數之前新增 `async` 關鍵字：
+**伺服器通訊的核心概念：**
+- **非同步函式**允許暫停執行，等待伺服器回應
+- **await 關鍵字**讓非同步程式讀起來像同步程式碼
+- **Fetch API**提供現代、基於 Promise 的 HTTP 請求
+- **錯誤處理**確保應用程式能優雅回應網路問題
 
-```js
-async function register() {
-```
+### 完善登記功能
 
-最後，讓我們新增一些日誌來檢查結果。最終的函數應如下所示：
+讓我們將所有元素結合，打造完整、適合生產環境的登錄函式：
 
-```js
+```javascript
 async function register() {
   const registerForm = document.getElementById('registerForm');
-  const formData = new FormData(registerForm);
-  const jsonData = JSON.stringify(Object.fromEntries(formData));
-  const result = await createAccount(jsonData);
-
-  if (result.error) {
-    return console.log('An error occurred:', result.error);
+  const submitButton = registerForm.querySelector('button[type="submit"]');
+  
+  try {
+    // 顯示加載狀態
+    submitButton.disabled = true;
+    submitButton.textContent = 'Creating Account...';
+    
+    // 處理表單數據
+    const formData = new FormData(registerForm);
+    const jsonData = JSON.stringify(Object.fromEntries(formData));
+    
+    // 發送到伺服器
+    const result = await createAccount(jsonData);
+    
+    if (result.error) {
+      console.error('Registration failed:', result.error);
+      alert(`Registration failed: ${result.error}`);
+      return;
+    }
+    
+    console.log('Account created successfully!', result);
+    alert(`Welcome, ${result.user}! Your account has been created.`);
+    
+    // 成功註冊後重置表單
+    registerForm.reset();
+    
+  } catch (error) {
+    console.error('Unexpected error:', error);
+    alert('An unexpected error occurred. Please try again.');
+  } finally {
+    // 恢復按鈕狀態
+    submitButton.disabled = false;
+    submitButton.textContent = 'Create Account';
   }
-
-  console.log('Account created!', result);
 }
 ```
 
-這有點長，但我們完成了！如果您打開[瀏覽器開發者工具](https://developer.mozilla.org/docs/Learn/Common_questions/What_are_browser_developer_tools)，並嘗試註冊一個新帳戶，您應該不會看到網頁發生任何變化，但控制台中會出現一條訊息，確認一切正常運作。
+**此強化實作包含：**
+- **提供** 表單提交期間的視覺回饋
+- **禁用** 提交按鈕防止重複提交
+- **妥善處理** 預期內外錯誤
+- **顯示** 使用者友善的成功與錯誤訊息
+- **成功後** 重設表單
+- **恢復** UI 狀態，不論結果如何
+
+### 測試你的實作
+
+**開啟瀏覽器開發者工具測試注冊流程：**
+
+1. **打開** 瀏覽器控制台（F12 → Console 分頁）
+2. **填寫** 註冊表單
+3. **點擊**「建立帳戶」
+4. **觀察** 控制台訊息及使用者回饋
+
+![瀏覽器控制台顯示紀錄訊息的截圖](../../../../translated_images/browser-console.efaf0b51aaaf6778.hk.png)
+
+**你應該看到：**
+- **提交按鈕出現** 加載狀態
+- **控制台輸出** 詳細流程資訊
+- **成功訊息** 在帳號創建後出現
+- **提交後** 表單自動重設
+
+> 🔒 **安全提醒**：目前資料透過 HTTP 傳送，生產環境並不安全。實務中務必使用 HTTPS 來加密傳輸。了解更多 [HTTPS 安全性](https://en.wikipedia.org/wiki/HTTPS) 及其重要性。
+
+### 🔄 **教學檢核**
+**現代 JavaScript 整合**：確認你掌握非同步表單處理：
+- ✅ `event.preventDefault()` 如何改變表單預設行為？
+- ✅ 為何 FormData API 比手動收集欄位更有效？
+- ✅ async/await 模式如何改善程式可讀性？
+- ✅ 錯誤處理在使用者體驗扮演什麼角色？
+
+**系統架構**：你的表單處理示範了：
+- **事件驅動程式設計**：表單對使用者互動即時回應，無需頁面重新載入
+- **非同步通訊**：伺服器請求不阻塞介面操作
+- **錯誤處理**：網路失敗時能優雅退化
+- **狀態管理**：UI 根據伺服器回應適當更新
+- **漸進強化**：基礎功能可用，JavaScript 更加強化體驗
+
+**專業範式**：你實作了：
+- **單一職責原則**：函式目的明確專注
+- **錯誤邊界**：try/catch 防止程式崩潰
+- **用戶回饋**：加載狀態與成功/錯誤訊息
+- **資料轉型**：FormData 轉 JSON 以便伺服器通訊
+
+## 全面表單驗證
+
+表單驗證防止送出後才發現錯誤的挫折體驗。就如同國際太空站多重備援系統，有效驗證採用多層安全檢查。
+
+最佳策略結合瀏覽器層即時驗證、JavaScript 驗證提升使用者體驗，以及伺服器端驗證守護安全與資料完整。多重備援確保用戶滿意與系統防護。
+
+### 理解驗證層級
+
+```mermaid
+graph TD
+    A[用戶輸入] --> B[HTML5 驗證]
+    B --> C[自訂 JavaScript 驗證]
+    C --> D[客戶端完成]
+    D --> E[伺服器端驗證]
+    E --> F[數據存儲]
+    
+    B -->|不合格| G[瀏覽器錯誤訊息]
+    C -->|不合格| H[自訂錯誤顯示]
+    E -->|不合格| I[伺服器錯誤回應]
+```
+**多層驗證策略：**
+- **HTML5 驗證**：瀏覽器即時檢查
+- **JavaScript 驗證**：客製邏輯與使用者體驗
+- **伺服器驗證**：最後安全及資料完整檢核
+- **漸進增強**：即使停用 JavaScript 仍能運作
 
-![瀏覽器控制台中顯示日誌訊息的截圖](../../../../translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.hk.png)
+### HTML5 驗證屬性
 
-✅ 您認為資料是安全地發送到伺服器的嗎？如果有人能攔截請求會怎麼樣？您可以閱讀[HTTPS](https://en.wikipedia.org/wiki/HTTPS)來了解更多關於安全資料通信的內容。
+**你可用的現代驗證工具：**
 
-## 資料驗證
+| 屬性 | 目的 | 範例用法 | 瀏覽器行為 |
+|-----------|---------|---------------|------------------|
+| `required` | 必填欄位 | `<input required>` | 防止空白送出 |
+| `minlength`/`maxlength` | 文字長度限制 | `<input maxlength="20">` | 強制字數限制 |
+| `min`/`max` | 數字範圍 | `<input min="0" max="1000">` | 檢驗數值界線 |
+| `pattern` | 自訂正則表達式 | `<input pattern="[A-Za-z]+">` | 符合指定格式 |
+| `type` | 資料型別驗證 | `<input type="email">` | 格式特定驗證 |
 
-如果您嘗試在未先設置用戶名的情況下註冊新帳戶，您會看到伺服器返回了一個狀態碼為 [400 (Bad Request)](https://developer.mozilla.org/docs/Web/HTTP/Status/400#:~:text=The%20HyperText%20Transfer%20Protocol%20(HTTP,%2C%20or%20deceptive%20request%20routing).) 的錯誤。
+### CSS 驗證樣式
 
-在將資料發送到伺服器之前，最好先[驗證表單資料](https://developer.mozilla.org/docs/Learn/Forms/Form_validation)，以確保您發送的是有效請求。HTML5 表單控制項提供了內建的驗證功能，通過使用各種屬性：
+**為驗證狀態創造視覺回饋：**
 
-- `required`：該欄位必須填寫，否則表單無法提交。
-- `minlength` 和 `maxlength`：定義文本欄位的最小和最大字元數。
-- `min` 和 `max`：定義數字欄位的最小和最大值。
-- `type`：定義預期的資料類型，例如 `number`、`email`、`file` 或[其他內建類型](https://developer.mozilla.org/docs/Web/HTML/Element/input)。此屬性還可能改變表單控制項的視覺呈現。
-- `pattern`：允許定義一個[正則表達式](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Regular_Expressions)模式，用於測試輸入的資料是否有效。
-提示：你可以使用 `:valid` 和 `:invalid` CSS 偽類來根據表單控件是否有效進行自定義外觀設計。
-### 任務
+```css
+/* Valid input styling */
+input:valid {
+  border-color: #28a745;
+  background-color: #f8fff9;
+}
 
-要創建一個有效的新帳戶，需要填寫兩個必填欄位：用戶名和貨幣，其餘欄位為可選。更新表單的 HTML，使用 `required` 屬性以及在欄位標籤中添加文字來說明：
+/* Invalid input styling */
+input:invalid {
+  border-color: #dc3545;
+  background-color: #fff5f5;
+}
 
-```html
-<label for="user">Username (required)</label>
-<input id="user" name="user" type="text" required>
-...
-<label for="currency">Currency (required)</label>
-<input id="currency" name="currency" type="text" value="$" required>
+/* Focus states for better accessibility */
+input:focus:valid {
+  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
+}
+
+input:focus:invalid {
+  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
+}
 ```
 
-雖然這個特定的伺服器實現並未對欄位的最大長度設置具體限制，但為用戶輸入的文字定義合理的限制始終是一個良好的做法。
+**這些視覺提示達成了：**
+- **綠色邊框**：表示驗證成功，猶如任務控制的綠燈
+- **紅色邊框**：代表驗證錯誤需注意
+- **焦點高亮**：清晰呈現目前輸入焦點位置
+- **風格一致**：建立使用者易學習的介面規則
+
+> 💡 **專業秘訣**：用 `:valid` 與 `:invalid` CSS 偽類，隨輸入即時提供視覺回饋，打造響應式且有用介面。
 
-為文字欄位添加 `maxlength` 屬性：
+### 實作全面驗證
+
+讓我們強化註冊表單，提供優良使用者體驗與優質資料：
 
 ```html
-<input id="user" name="user" type="text" maxlength="20" required>
-...
-<input id="currency" name="currency" type="text" value="$" maxlength="5" required>
-...
-<input id="description" name="description" type="text" maxlength="100">
+<form id="registerForm" method="POST" novalidate>
+  <div class="form-group">
+    <label for="user">Username <span class="required">*</span></label>
+    <input id="user" name="user" type="text" required 
+           minlength="3" maxlength="20" 
+           pattern="[a-zA-Z0-9_]+" 
+           autocomplete="username"
+           title="Username must be 3-20 characters, letters, numbers, and underscores only">
+    <small class="form-text">Choose a unique username (3-20 characters)</small>
+  </div>
+  
+  <div class="form-group">
+    <label for="currency">Currency <span class="required">*</span></label>
+    <input id="currency" name="currency" type="text" required 
+           value="$" maxlength="3" 
+           pattern="[A-Z$€£¥₹]+" 
+           title="Enter a valid currency symbol or code">
+    <small class="form-text">Currency symbol (e.g., $, €, £)</small>
+  </div>
+  
+  <div class="form-group">
+    <label for="description">Account Description</label>
+    <input id="description" name="description" type="text" 
+           maxlength="100" 
+           placeholder="Personal savings, checking, etc.">
+    <small class="form-text">Optional description (up to 100 characters)</small>
+  </div>
+  
+  <div class="form-group">
+    <label for="balance">Starting Balance</label>
+    <input id="balance" name="balance" type="number" 
+           value="0" min="0" step="0.01" 
+           title="Enter a positive number for your starting balance">
+    <small class="form-text">Initial account balance (minimum $0.00)</small>
+  </div>
+  
+  <button type="submit">Create Account</button>
+</form>
 ```
 
-現在，如果你按下 *註冊* 按鈕，而某個欄位未遵守我們定義的驗證規則，你應該會看到類似以下的提示：
+**理解此強化驗證：**
+- **結合** 必填欄位標示與說明文字
+- **加入** `pattern` 屬性做格式驗證
+- **附加** `title` 屬性供無障礙與工具提示
+- **增加** 輔助文本指導使用者輸入
+- **使用** 語意化 HTML 結構提升存取性
+
+### 進階驗證規則
+
+**各檢核規則意義：**
+
+| 欄位 | 驗證規則 | 使用者利益 |
+|-------|------------------|--------------|
+| 使用者名稱 | `required`, `minlength="3"`, `maxlength="20"`, `pattern="[a-zA-Z0-9_]+"` | 確保有效且唯一的標識 |
+| 貨幣 | `required`, `maxlength="3"`, `pattern="[A-Z$€£¥₹]+"` | 接受常見貨幣符號 |
+| 帳戶餘額 | `min="0"`, `step="0.01"`, `type="number"` | 防止負餘額 |
+| 描述 | `maxlength="100"` | 合理長度限制 |
+
+### 測試驗證行為
+
+**試試這些驗證場景：**
+1. **送出** 留空必填欄位
+2. **使用** 少於 3 個字元的使用者名稱
+3. **嘗試** 在使用者名稱內輸入特殊字元
+4. **輸入** 負數餘額金額
+
+![嘗試送出表單時顯示驗證錯誤的截圖](../../../../translated_images/validation-error.8bd23e98d416c22f.hk.png)
+
+**你會觀察到：**
+- **瀏覽器呈現** 原生驗證訊息
+- **樣式變化** 隨 `:valid` 和 `:invalid` 狀態變動
+- **禁止表單送出** 直到所有驗證通過
+- **焦點自動移至** 第一個無效欄位
+
+### 客戶端與伺服器端驗證
+
+```mermaid
+graph LR
+    A[客戶端驗證] --> B[即時反饋]
+    A --> C[更佳用戶體驗]
+    A --> D[減輕伺服器負擔]
+    
+    E[伺服器端驗證] --> F[安全性]
+    E --> G[數據完整性]
+    E --> H[業務規則]
+    
+    A -.-> I[兩者均需]
+    E -.-> I
+```
+**你為何需要雙層驗證：**
+- **客戶端驗證**：即時回饋並提升用戶體驗
+- **伺服器端驗證**：保證安全並處理複雜商業規則
+- **雙管齊下**：打造強健、用戶友善又安全的應用
+- **漸進增強**：即便停用 JavaScript 仍可運作
+
+> 🛡️ **安全提醒**：切勿只信任客戶端驗證！惡意使用者可繞過客戶端檢查，所以伺服器端驗證對安全與資料完整至關重要。
+
+### ⚡ **接下來 5 分鐘你可以做什麼**
+- [ ] 用錯誤資料測試表單，查看驗證訊息
+- [ ] 嘗試關閉 JavaScript 後，提交表單體驗 HTML5 驗證
+- [ ] 開啟瀏覽器開發工具，檢查送往伺服器的表單資料
+- [ ] 嘗試多種輸入類型，觀察手機鍵盤變化
+
+### 🎯 **本時段你能完成什麼**
+- [ ] 完成本堂測驗，理解表單處理概念
+- [ ] 實作全面驗證挑戰，加強即時回饋
+- [ ] 添加 CSS 樣式，打造專業表單外觀
+- [ ] 創建錯誤處理邏輯，應對重複用戶名與伺服器錯誤
+- [ ] 新增密碼確認欄位及對應驗證
+
+### 📅 **為期一週的表單精修旅程**
+- [ ] 完成進階功能齊全的銀行應用表單
+- [ ] 實作個人資料或文件上傳功能
+- [ ] 加入多步驟表單，含進度指標與狀態管理
+- [ ] 創建依用戶選擇動態變化的表單
+- [ ] 實現表單自動保存與恢復提升體驗
+- [ ] 實作進階驗證如 Email 驗證與電話格式化
+
+### 🌟 **你的一個月前端表單開發精通**
+- [ ] 開發具條件邏輯與工作流程的複雜表單應用
+- [ ] 學習表單庫與框架加速開發
+- [ ] 精通無障礙指引與包容性設計原則
+- [ ] 實現國際化與本地化的全球化表單
+- [ ] 創建可重用表單元件庫與設計系統
+- [ ] 貢獻開源表單專案並分享最佳實踐
+
+## 🎯 你的表單開發精通時程
+
+```mermaid
+timeline
+    title 表單開發與使用者體驗學習進度
+    
+    section HTML 基礎 (15 分鐘)
+        語義表單: 表單元素
+                    : 輸入類型
+                    : 標籤與無障礙
+                    : 漸進式增強
+        
+    section JavaScript 整合 (25 分鐘)
+        事件處理: 表單提交
+                  : 資料收集
+                  : AJAX 通訊
+                  : 非同步/等待模式
+        
+    section 驗證系統 (35 分鐘)
+        多層安全: HTML5 驗證
+                  : 客戶端邏輯
+                  : 伺服器端驗證
+                  : 錯誤處理
+        
+    section 使用者體驗 (45 分鐘)
+        介面美化: 載入狀態
+                  : 成功訊息
+                  : 錯誤恢復
+                  : 無障礙功能
+        
+    section 進階模式 (1 週)
+        專業表單: 動態驗證
+                  : 多步驟工作流程
+                  : 檔案上傳
+                  : 即時反饋
+        
+    section 企業技能 (1 個月)
+        生產應用: 表單函式庫
+                  : 測試策略
+                  : 效能優化
+                  : 安全最佳實務
+```
+### 🛠️ 你的表單開發工具包總結
+
+學完本課程，你已掌握：
+- **HTML5 表單**：語意結構、輸入類型與無障礙功能
+- **JavaScript 表單處理**：事件管理、資料收集及 AJAX 通訊
+- **驗證架構**：多層驗證保障安全與使用者體驗
+- **非同步程式設計**：現代 fetch API 與 async/await 模式
+- **錯誤管理**：全面錯誤處理與用戶回饋系統
+- **使用者體驗設計**：加載狀態、成功訊息及錯誤復原
+- **漸進增強**：跨瀏覽器與能耐皆適用之表單
+
+**實務應用**：你的表單開發技能直接適用於：
+- **電子商務**：結帳流程、帳戶註冊與付款表單
+- **企業軟體**：資料輸入系統、報表介面與工作流程應用
+- **內容管理**：發佈平台、用戶產生內容與管理介面
+- **金融應用**：銀行介面、投資平台與交易系統
+- **醫療系統**：病患入口網站、預約排程與醫療紀錄表單
+- **教育平台**：課程註冊、評估工具與學習管理
+
+**專業技能**：你現在能：
+- **設計** 適用於所有用戶（含身障者）的可存取表單
+- **實作** 安全驗證，預防資料損毀與安全漏洞
+- **打造** 提供明確回饋與指導的響應介面
+- **除錯** 複雜表單互動，使用瀏覽器開發工具及網路分析
+- **優化** 表單效能，透過高效資料處理與驗證策略
+
+**前端開發概念精通：**
+- **事件驅動架構**：用戶交互處理與回應系統
+- **非同步程式設計**：非阻塞伺服器通訊與錯誤管理
+- **資料驗證**：客戶端與伺服器端安全完整性檢查
+- **使用者體驗設計**：引導用戶成功的直覺介面
+- **無障礙工程**：滿足多元用戶需求的包容設計
+
+**下一階段**：你已準備好探索進階表單庫、實作複雜驗證規則，或打造企業級資料蒐集系統！
+
+🌟 **成就解鎖**：你已完成一套完整表單處理系統，具備專業驗證、錯誤處理與使用者體驗模式！
 
-![截圖顯示嘗試提交表單時的驗證錯誤](../../../../translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.hk.png)
+---
 
-這種在將任何數據發送到伺服器之前執行的驗證被稱為 **客戶端驗證**。但需要注意的是，並非所有檢查都能在不發送數據的情況下完成。例如，我們無法在這裡檢查是否已經存在相同用戶名的帳戶，除非向伺服器發送請求。在伺服器上執行的額外驗證被稱為 **伺服器端驗證**。
 
-通常需要同時實現這兩種驗證。客戶端驗證通過即時向用戶提供反饋來改善用戶體驗，而伺服器端驗證則至關重要，確保你處理的用戶數據是可靠且安全的。
 
 ---
 
+## GitHub Copilot Agent 挑戰 🚀
+
+使用 Agent 模式完成以下挑戰：
+
+**說明：** 強化註冊表單，實現全面的客戶端驗證與用戶回饋。此挑戰將幫助你練習表單驗證、錯誤處理與透過互動式反饋提升使用者體驗。
+**提示：** 建立一個完整的註冊表單驗證系統，包含：1) 使用者輸入時每個欄位即時驗證反饋，2) 自訂驗證訊息顯示於每個輸入欄位下方，3) 密碼確認欄位及配對驗證，4) 視覺指示器（如對有效欄位顯示綠色勾勾，對無效欄位顯示紅色警告），5) 僅在所有驗證通過後，送出按鈕才會啟用。使用 HTML5 驗證屬性、CSS 來設計驗證狀態樣式，並用 JavaScript 實作互動行為。
+
+在此了解更多關於 [agent 模式](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) 。
+
 ## 🚀 挑戰
 
-如果用戶已存在，請在 HTML 中顯示一條錯誤訊息。
+若使用者已存在，請在 HTML 顯示錯誤訊息。
 
-以下是一個經過一些樣式設計後的最終登錄頁面的示例：
+以下是簡單美化後的最終登入頁面範例：
 
-![添加 CSS 樣式後的登錄頁面截圖](../../../../translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.hk.png)
+![Screenshot of the login page after adding CSS styles](../../../../translated_images/result.96ef01f607bf856a.hk.png)
 
-## 課後測驗
+## 課後小測驗
 
-[課後測驗](https://ff-quizzes.netlify.app/web/quiz/44)
+[課後小測驗](https://ff-quizzes.netlify.app/web/quiz/44)
 
-## 回顧與自學
+## 複習與自學
 
-開發者在構建表單，特別是驗證策略方面，已經變得非常有創意。通過瀏覽 [CodePen](https://codepen.com) 來了解不同的表單流程；你能找到一些有趣且具有啟發性的表單嗎？
+開發者在表單建置特別是驗證策略上很有創意。試著在 [CodePen](https://codepen.com) 上瀏覽，能否發現一些有趣且有啟發性的表單？
 
 ## 作業
 
-[為你的銀行應用程式設計樣式](assignment.md)
+[美化你的銀行應用程式](assignment.md)
 
 ---
 
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
 **免責聲明**：  
-此文件已使用人工智能翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 翻譯。我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。應以原始語言的文件作為權威來源。對於關鍵資訊，建議使用專業的人類翻譯。我們對因使用此翻譯而引起的任何誤解或誤釋不承擔責任。
\ No newline at end of file
+本文件是使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們努力確保準確性，但請注意自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應視為權威來源。對於重要資訊，建議採用專業人工翻譯。我們對因使用本翻譯而產生的任何誤解或誤釋概不負責。
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->
\ No newline at end of file
diff --git a/translations/hk/7-bank-project/2-forms/assignment.md b/translations/hk/7-bank-project/2-forms/assignment.md
index 304932fc..081901f7 100644
--- a/translations/hk/7-bank-project/2-forms/assignment.md
+++ b/translations/hk/7-bank-project/2-forms/assignment.md
@@ -1,25 +1,165 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "474f3ab1ee755ca980fc9104a0316e17",
-  "translation_date": "2025-08-24T00:01:08+00:00",
+  "original_hash": "efb01fcafd2ef40c593a6e662fc938a8",
+  "translation_date": "2026-01-06T12:48:34+00:00",
   "source_file": "7-bank-project/2-forms/assignment.md",
   "language_code": "hk"
 }
 -->
-# 為你的銀行應用程式設計樣式
+# 使用現代 CSS 美化您的銀行應用程式
 
-## 指引
+## 專案概覽
 
-建立一個新的 `styles.css` 檔案，並在你現有的 `index.html` 檔案中加入一個連結到該檔案。在你剛建立的 CSS 檔案中，加入一些樣式，讓 *登入* 和 *儀表板* 頁面看起來整潔美觀。嘗試設計一個色彩主題，為你的應用程式打造專屬的品牌形象。
+將您功能完善的銀行應用程式轉化為視覺上吸引、專業外觀的網頁應用程式，使用現代 CSS 技巧。您將建立一套一致的設計系統，提高使用者體驗，同時維持可及性與響應式設計原則。
 
-> 提示：如果需要，你可以修改 HTML 並新增新的元素和類別。
+此任務挑戰您應用當代網頁設計模式，實施一致的視覺識別，並打造用戶既喜愛又直覺易用的介面。
+
+## 指示
+
+### 第一步：設置您的樣式表
+
+**建立您的 CSS 基礎：**
+
+1. **建立** 一個名為 `styles.css` 的新檔案於您的專案根目錄
+2. **在** `index.html` 檔案中連結此樣式表：   ```html
+   <link rel="stylesheet" href="styles.css">
+   ```
+3. **開始** 使用 CSS 重設與現代預設值：
+   ```css
+   /* Modern CSS reset and base styles */
+   * {
+     margin: 0;
+     padding: 0;
+     box-sizing: border-box;
+   }
+   
+   body {
+     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+     line-height: 1.6;
+     color: #333;
+   }
+   ```
+
+### 第二步：設計系統需求
+
+**實作這些基本設計元素：**
+
+#### 顏色調色盤
+- **主色**：選擇專業的顏色用於按鈕和重點元素
+- **次要色**：用於強調及次要動作的互補色
+- **中性色**：用於文字、邊框及背景的灰色系
+- **成功/錯誤色**：成功狀態使用綠色，錯誤狀態使用紅色
+
+#### 排版
+- **標題階層**：清晰分辨 H1、H2 及 H3 元素
+- **正文字體**：易讀字體大小（最小 16px）及適當行高
+- **表單標籤**：清晰且可及的文字樣式
+
+#### 版面配置與間距
+- **一致間距**：使用間距刻度（8px、16px、24px、32px）
+- **格線系統**：有組織的表單及內容區塊佈局
+- **響應式設計**：以行動裝置為起點的斷點設計
+
+### 第三步：元件樣式
+
+**為這些特定元件設計樣式：**
+
+#### 表單
+- **輸入欄位**：專業邊框、聚焦狀態與驗證樣式
+- **按鈕**：懸停效果、禁用狀態及載入指示
+- **標籤**：清楚定位及必填欄位指示
+- **錯誤訊息**：顯著錯誤樣式與有用的提示訊息
+
+#### 導航
+- **頁首**：乾淨且具品牌識別的導航區域
+- **連結**：明顯的懸停狀態與啟用指示
+- **標誌/標題**：具特色的品牌元素
+
+#### 內容區域
+- **區塊**：不同區域間清晰的視覺分隔
+- **卡片**：若使用卡片式佈局，包含陰影及邊框
+- **背景**：適當運用空白及細膩背景
+
+### 第四步：進階功能（選擇性）
+
+**考慮實作這些高級功能：**
+- **暗模式**：可在亮/暗主題間切換
+- **動畫**：細緻過渡與微互動效果
+- **載入狀態**：表單提交時的視覺反饋
+- **響應式圖片**：針對不同螢幕尺寸做優化的圖片
+
+## 設計靈感
+
+**現代銀行應用特色：**
+- **乾淨、極簡設計**搭配豐富的空白
+- **專業色彩方案**（藍色、綠色或精緻的中性色）
+- **明確視覺階層**與顯著的行動呼籲按鈕
+- **達到 WCAG 準則的可及對比**
+- **適用所有裝置的響應式佈局**
+
+## 技術需求
+
+### CSS 組織架構
+```css
+/* 1. CSS Custom Properties (Variables) */
+:root {
+  --primary-color: #007bff;
+  --secondary-color: #6c757d;
+  /* Add more variables */
+}
+
+/* 2. Base Styles */
+/* Reset, typography, general elements */
+
+/* 3. Layout */
+/* Grid, flexbox, positioning */
+
+/* 4. Components */
+/* Forms, buttons, cards */
+
+/* 5. Utilities */
+/* Helper classes, responsive utilities */
+
+/* 6. Media Queries */
+/* Responsive breakpoints */
+```
+
+### 可及性需求
+- **色彩對比**：確保普通文字至少有 4.5:1 對比度
+- **聚焦指標**：鍵盤導覽可見的聚焦狀態
+- **表單標籤**：正確與輸入欄位關聯
+- **響應式設計**：適用寬度從 320px 至 1920px 的螢幕
 
 ## 評分標準
 
-| 評分標準 | 優異                                                                                                                   | 合格                                                                         | 需要改進                                                                                     |
-| -------- | ----------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------- |
-|          | 所有頁面看起來整潔易讀，擁有一致的色彩主題，不同的區塊能夠清晰地突顯出來。                                               | 頁面有樣式，但缺乏主題，或者區塊未能清楚地劃分。                               | 頁面缺乏樣式，區塊看起來雜亂無章，資訊難以閱讀。                                             |
+| 評分標準 | 優秀 (A) | 稱職 (B) | 有待發展 (C) | 需改進 (F) |
+|----------|----------|----------|--------------|------------|
+| **設計系統** | 實施完整設計系統，色彩、排版與間距一致 | 使用一致樣式，有明確設計模式及良好視覺階層 | 基本樣式，有些一致性問題或設計元素缺失 | 樣式極少且不一致，設計衝突 |
+| **使用者體驗** | 建立直覺、專業介面，具優異可用性與視覺吸引力 | 提供良好體驗，導航清楚，內容易讀 | 基本可用，需加強 UX | 可用性差，難以導航或閱讀 |
+| **技術實作** | 使用現代 CSS 技巧，程式結構有組織，遵守最佳實踐 | 有效運用 CSS，組織良好且技術適當 | CSS 正常運作，但組織或現代技術不足 | CSS 實作差，含技術問題或瀏覽器相容性問題 |
+| **響應式設計** | 完全響應，適用所有裝置尺寸且效果優良 | 響應良好，部分畫面大小有輕微問題 | 基本響應，部分佈局存在問題 | 無響應或行動裝置嚴重問題 |
+| **可及性** | 達 WCAG 標準，具優秀鍵盤導覽及讀屏支援 | 良好可及性，對比及聚焦指標適當 | 基本可及性考量，有少部分缺失 | 可及性差，行動不便使用者難以使用 |
+
+## 提交指南
+
+**提交內容包含：**
+- **styles.css**：您的完整樣式表
+- **更新後的 HTML**：您所修改的任何 HTML 檔
+- **截圖**：展示桌面與行動裝置上設計的圖片
+- **README**：簡述您的設計選擇與色彩調色盤
+
+**加分項目：**
+- **CSS 自訂屬性**，以維持可維護的主題化
+- **進階 CSS 功能**，如 Grid、Flexbox 或 CSS 動畫
+- **效能考量**，如優化 CSS 與檔案大小
+- **跨瀏覽器測試**，確保不同瀏覽器相容性
+
+> 💡 **專家提示**：先從行動裝置設計開始，再為大螢幕增強功能。此行動優先 (mobile-first) 方法確保您的應用程式在所有裝置上均良好運行，並遵循現代網頁開發最佳實踐。
+
+---
 
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
 **免責聲明**：  
-本文件已使用人工智能翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。應以原文文件作為權威來源。對於關鍵資訊，建議尋求專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或錯誤解釋概不負責。
\ No newline at end of file
+本文件已使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們致力於翻譯的準確性，但請注意自動翻譯可能包含錯誤或不準確之處。原始文件以其母語版本為準，應視為權威來源。對於重要資訊，建議使用專業人工翻譯。我們不對因使用此翻譯而引起的任何誤解或誤釋承擔責任。
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->
\ No newline at end of file
diff --git a/translations/hk/7-bank-project/3-data/README.md b/translations/hk/7-bank-project/3-data/README.md
index 5a075154..8718fd7a 100644
--- a/translations/hk/7-bank-project/3-data/README.md
+++ b/translations/hk/7-bank-project/3-data/README.md
@@ -1,67 +1,243 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "89d0df9854ed020f155e94882ae88d4c",
-  "translation_date": "2025-08-29T14:56:12+00:00",
+  "original_hash": "86ee5069f27ea3151389d8687c95fac9",
+  "translation_date": "2026-01-06T12:51:26+00:00",
   "source_file": "7-bank-project/3-data/README.md",
   "language_code": "hk"
 }
 -->
-# 建立銀行應用程式第 3 部分：獲取和使用數據的方法
+# 建立銀行應用程式 第3部分：擷取及使用資料的方法
 
-## 課前測驗
+想像《星艦迷航記》裡的星際企業號電腦——當皮卡爾艦長查詢船隻狀態時，資訊即時顯示，整個介面不會停頓或重新載入。我們要打造的，正是這種動態資料擷取的無縫資訊流。
 
-[課前測驗](https://ff-quizzes.netlify.app/web/quiz/45)
+目前你的銀行應用程式就像一份印刷報紙——資訊豐富但靜態。我們將其轉變成類似 NASA 任務控制中心，資料持續流動並即時更新，且不會打斷使用者的工作流程。
 
-### 簡介
+你將學習如何非同步與伺服器溝通，處理在不同時間到達的資料，並將原始資訊轉換為對用戶有意義的內容。這正是從示範軟體進入生產級軟體的關鍵差異。
 
-在每個網絡應用程式的核心，都是*數據*。數據可以有多種形式，但其主要目的是向用戶顯示信息。隨著網絡應用程式變得越來越互動和複雜，用戶如何訪問和與信息互動已成為網絡開發中的關鍵部分。
+## ⚡ 下一五分鐘你能做到什麼
 
-在本課中，我們將學習如何從伺服器異步獲取數據，並使用這些數據在不重新加載 HTML 的情況下，在網頁上顯示信息。
+**忙碌開發者的快速啟動路徑**
+
+```mermaid
+flowchart LR
+    A[⚡ 5 分鐘] --> B[設置 API 伺服器]
+    B --> C[用 curl 測試獲取]
+    C --> D[建立登入功能]
+    D --> E[查看實際資料]
+```
+- **第1-2分鐘**：啟動你的 API 伺服器（`cd api && npm start`）並測試連線
+- **第3分鐘**：使用 fetch 建立基本的 `getAccount()` 函數
+- **第4分鐘**：使用 `action="javascript:login()"` 連接登入表單
+- **第5分鐘**：測試登入，觀察帳戶資料在控制台顯示
+
+**快速測試指令**：
+```bash
+# 驗證 API 是否正在運行
+curl http://localhost:5000/api
 
-### 先決條件
+# 測試帳戶資料擷取
+curl http://localhost:5000/api/accounts/test
+```
 
-在學習本課之前，你需要完成網絡應用程式的[登錄和註冊表單](../2-forms/README.md)部分。此外，你還需要安裝 [Node.js](https://nodejs.org) 並[本地運行伺服器 API](../api/README.md)，以便獲取帳戶數據。
+**重要原因**：五分鐘內你會見識到非同步資料擷取的魔力，這是現代所有網頁應用程式的核心。它是讓應用程式感覺迅速且生動的基石。
+
+## 🗺️ 你的資料驅動網頁應用程式學習之旅
+
+```mermaid
+journey
+    title 從靜態頁面到動態應用程式
+    section 理解演變過程
+      傳統頁面重新載入: 3: You
+      發現 AJAX/SPA 好處: 5: You
+      精通 Fetch API 模式: 7: You
+    section 建立認證系統
+      建立登入功能: 4: You
+      處理非同步操作: 6: You
+      管理使用者會話: 8: You
+    section 動態用戶介面更新
+      學習 DOM 操作: 5: You
+      建立交易顯示: 7: You
+      製作回應式儀表板: 9: You
+    section 專業模式
+      基於模板的渲染: 6: You
+      錯誤處理策略: 7: You
+      效能優化: 8: You
+```
+**旅程終點**：課程結束後，你將理解現代網頁應用如何動態擷取、處理並顯示資料，打造專業級軟體所期望的順暢用戶體驗。
 
-你可以通過在終端執行以下命令來測試伺服器是否正常運行：
+## 課前測驗
 
-```sh
+[課前測驗](https://ff-quizzes.netlify.app/web/quiz/45)
+
+### 先備條件
+
+在深入資料擷取前，請確保具備以下元件：
+
+- **上一課**：完成[登入與註冊表單](../2-forms/README.md)——我們將在此基礎上繼續擴充
+- **本地伺服器**：安裝 [Node.js](https://nodejs.org) 並[啟動 API 伺服器](../api/README.md)，以提供帳戶資料
+- **API 連線**：用以下指令測試伺服器連線：
+
+```bash
 curl http://localhost:5000/api
-# -> should return "Bank API v1.0.0" as a result
+# 預期回應: "Bank API v1.0.0"
+```
+
+這個快速測試能確保各元件正常通訊：
+- 確認 Node.js 在系統中正確運作
+- 確認 API 伺服器活躍並有回應
+- 驗證你的應用程式能連線到伺服器（就像任務前確保無線電聯繫）
+
+## 🧠 資料管理生態系統概覽
+
+```mermaid
+mindmap
+  root((數據管理))
+    Authentication Flow
+      Login Process
+        Form Validation
+        Credential Verification
+        Session Management
+      User State
+        Global Account Object
+        Navigation Guards
+        Error Handling
+    API Communication
+      Fetch Patterns
+        GET Requests
+        POST Requests
+        Error Responses
+      Data Formats
+        JSON Processing
+        URL Encoding
+        Response Parsing
+    Dynamic UI Updates
+      DOM Manipulation
+        Safe Text Updates
+        Element Creation
+        Template Cloning
+      User Experience
+        Real-time Updates
+        Error Messages
+        Loading States
+    Security Considerations
+      XSS Prevention
+        textContent Usage
+        Input Sanitization
+        Safe HTML Creation
+      CORS Handling
+        Cross-Origin Requests
+        Header Configuration
+        Development Setup
 ```
+**核心原則**：現代網頁應用是資料協調系統——它協調使用者介面、伺服器 API 與瀏覽器安全模型，創造順暢且回應迅速的體驗。
 
 ---
 
-## AJAX 和數據獲取
+## 了解現代網頁應用的資料擷取
 
-傳統的網站在用戶選擇鏈接或使用表單提交數據時，會通過重新加載整個 HTML 頁面來更新顯示的內容。每次需要加載新數據時，網絡伺服器都會返回一個全新的 HTML 頁面，瀏覽器需要處理這些頁面，這會中斷當前的用戶操作並限制重新加載期間的互動。這種工作流程也被稱為*多頁應用程式*（Multi-Page Application，MPA）。
+網頁應用處理資料的方式在過去二十年大幅演進。了解這個演變有助於你體會為什麼 AJAX 與 Fetch API 如此強大，並成為網頁開發必備工具。
 
-![多頁應用程式中的更新工作流程](../../../../translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.hk.png)
+讓我們來探索傳統網站與現代動態、反應式應用的不同。
 
-隨著網絡應用程式變得更加複雜和互動性更強，一種名為 [AJAX（Asynchronous JavaScript and XML）](https://en.wikipedia.org/wiki/Ajax_(programming)) 的新技術應運而生。這種技術允許網絡應用程式使用 JavaScript 從伺服器異步發送和檢索數據，而無需重新加載 HTML 頁面，從而實現更快的更新和更流暢的用戶互動。當從伺服器接收到新數據時，可以使用 [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model) API 通過 JavaScript 更新當前的 HTML 頁面。隨著時間的推移，這種方法演變成現在所謂的[*單頁應用程式*（Single-Page Application，SPA）](https://en.wikipedia.org/wiki/Single-page_application)。
+### 傳統多頁面應用 (Multi-Page Applications, MPA)
 
-![單頁應用程式中的更新工作流程](../../../../translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.hk.png)
+早期網頁時代，每次點擊就像換電視台頻道——畫面會變空白，然後慢慢載入新內容。這是早期網頁應用的現實：每次操作都要重建整個頁面。
 
-在 AJAX 剛推出時，唯一可用的異步獲取數據的 API 是 [`XMLHttpRequest`](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest)。但現代瀏覽器現在還實現了更方便且功能更強大的 [`Fetch` API](https://developer.mozilla.org/docs/Web/API/Fetch_API)，它使用 Promise，並且更適合處理 JSON 數據。
+```mermaid
+sequenceDiagram
+    participant User
+    participant Browser
+    participant Server
+    
+    User->>Browser: 點擊連結或提交表單
+    Browser->>Server: 請求新的 HTML 頁面
+    Note over Browser: 頁面變空白
+    Server->>Browser: 返回完整的 HTML 頁面
+    Browser->>User: 顯示新頁面（閃爍/重載）
+```
+![多頁面應用的更新流程](../../../../translated_images/mpa.7f7375a1a2d4aa77.hk.png)
+
+**這方法令人覺得笨拙的原因：**
+- 每次點擊都重建整個頁面
+- 使用者在操作過程中會被刺眼的頁面閃爍打斷
+- 網路頻寬無謂地重複下載相同標頭與頁腳
+- 應用程式感覺像是在翻閱資料櫃，而非使用軟體
+
+### 現代單頁應用 (Single-Page Applications, SPA)
+
+AJAX（非同步 JavaScript 與 XML）完全改變了這個模式。就像國際太空站的模組化設計，太空人可以更換單一組件而不用重建整個結構，AJAX 允許我們只更新頁面特定部分，而不重新載入全部。雖然名字包含 XML，但現在我們多用 JSON，核心概念是不變的：只更新需要更改的部分。
+
+```mermaid
+sequenceDiagram
+    participant User
+    participant Browser
+    participant JavaScript
+    participant Server
+    
+    User->>Browser: 與頁面互動
+    Browser->>JavaScript: 觸發事件處理程序
+    JavaScript->>Server: 只獲取所需數據
+    Server->>JavaScript: 返回 JSON 數據
+    JavaScript->>Browser: 更新指定的頁面元素
+    Browser->>User: 顯示更新內容（無需重新載入）
+```
+![單頁應用的更新流程](../../../../translated_images/spa.268ec73b41f992c2.hk.png)
+
+**SPA 感覺更好的原因：**
+- 只更新實際改變的部分（很聰明吧？）
+- 不會有突兀的中斷，使用者流程順暢
+- 傳輸資料量降低，載入更快
+- 互動回應迅速，彷彿手機應用程式一般
+
+### 演進至現代 Fetch API
+
+現代瀏覽器提供了 [`Fetch` API](https://developer.mozilla.org/docs/Web/API/Fetch_API)，取代舊有的 [`XMLHttpRequest`](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest)。像用電報到電子郵件的差異，Fetch API 使用 promises提供更乾淨的非同步程式碼，且天然支援 JSON。
+
+| 功能 | XMLHttpRequest | Fetch API |
+|---------|----------------|----------|
+| **語法** | 複雜的回呼函式 | 簡潔的 promise 用法 |
+| **JSON 處理** | 需手動解析 | 內建 `.json()` 方法 |
+| **錯誤處理** | 錯誤訊息有限 | 詳盡的錯誤資訊 |
+| **現代支援** | 舊版相容性 | ES6+ promises 與 async/await |
+
+> 💡 **瀏覽器相容性**：好消息是 Fetch API 支援所有現代瀏覽器！若想了解詳細版本支援，[caniuse.com](https://caniuse.com/fetch) 有完整資料。
+> 
+**總結：**
+- 在 Chrome、Firefox、Safari 及 Edge 運作良好（基本涵蓋所有用戶）
+- 只有 Internet Explorer 需要額外處理（坦白說，該淘汰 IE 了）
+- 完美支持我們稍後會用的 async/await 非同步語法模式
 
-> 雖然所有現代瀏覽器都支持 `Fetch API`，但如果你希望你的網絡應用程式能在舊版或老舊瀏覽器上運行，最好先檢查 [caniuse.com 上的兼容性表](https://caniuse.com/fetch)。
+### 實作使用者登入及資料擷取
 
-### 任務
+現在來實作登入系統，將你的銀行應用從靜態顯示轉為功能完整的應用。就像軍事安全設施使用的驗證協定，我們會檢查使用者資格，然後提供專屬資料。
 
-在[上一課](../2-forms/README.md)中，我們實現了註冊表單來創建帳戶。現在，我們將添加代碼來使用現有帳戶登錄並獲取其數據。打開 `app.js` 文件，並添加一個新的 `login` 函數：
+我們會逐步建立，從基本身份驗證開始，接著加入資料擷取功能。
 
-```js
+#### 步驟1：建立登入函數基礎
+
+開啟你的 `app.js`，新增 `login` 函數，處理使用者驗證流程：
+
+```javascript
 async function login() {
-  const loginForm = document.getElementById('loginForm')
+  const loginForm = document.getElementById('loginForm');
   const user = loginForm.user.value;
 }
 ```
 
-我們首先使用 `getElementById()` 獲取表單元素，然後通過 `loginForm.user.value` 獲取輸入框中的用戶名。每個表單控件都可以通過其名稱（在 HTML 中使用 `name` 屬性設置）作為表單的屬性來訪問。
+**解析說明：**
+- `async` 關鍵字表示這函式可能需要等待非同步操作結束
+- 我們從頁面抓取登入表單（簡單，直接用 ID 找）
+- 擷取使用者輸入的帳號名稱
+- 小技巧：可以用表單控制元件的 `name` 屬性直接存取輸入欄位，不用頻繁用 getElementById！
+
+> 💡 **表單存取模式**：每個表單控制元件都能用 HTML 中 `name` 屬性作為表單物件的屬性取得，讓讀取表單資料簡潔易懂。
+
+#### 步驟2：建立帳戶資料擷取函數
 
-與我們為註冊所做的類似，我們將創建另一個函數來執行伺服器請求，但這次是用於檢索帳戶數據：
+接著我們建立專門的函數從伺服器取回帳戶資料。這和你的註冊函數類似，但重點放在取得資料：
 
-```js
+```javascript
 async function getAccount(user) {
   try {
     const response = await fetch('//localhost:5000/api/accounts/' + encodeURIComponent(user));
@@ -72,15 +248,58 @@ async function getAccount(user) {
 }
 ```
 
-我們使用 `fetch` API 從伺服器異步請求數據，但這次我們不需要額外的參數，只需調用的 URL，因為我們只是查詢數據。默認情況下，`fetch` 創建一個 [`GET`](https://developer.mozilla.org/docs/Web/HTTP/Methods/GET) HTTP 請求，這正是我們需要的。
-
-✅ `encodeURIComponent()` 是一個用於對 URL 中的特殊字符進行編碼的函數。如果我們不調用此函數而直接在 URL 中使用 `user` 值，可能會出現什麼問題？
+**這段程式碼做了什麼：**
+- **使用** 現代 `fetch` API 進行非同步資料請求
+- **組裝** GET 請求 URL 並帶入帳號參數
+- **套用** `encodeURIComponent()` 確保網址安全處理特殊字元
+- **轉換** 回應為 JSON 格式方便操作
+- **妥善** 處理錯誤，回傳錯誤物件而非崩潰
+
+> ⚠️ **安全提示**：`encodeURIComponent()` 函數會處理網址中特殊字元。像海軍通訊的編碼系統，確保訊息準確無誤地傳達，避免 "#" 或 "&" 等字元被誤解。
+> 
+**重要性：**
+- 避免特殊字元破壞 URL 格式
+- 防止網址遭竄改攻擊
+- 確保伺服器接收正確資料
+- 遵循安全編碼最佳實踐
+
+#### 了解 HTTP GET 請求
+
+這裡有個可能令你驚訝的事：當你使用 `fetch` 而沒有傳入特別設定，預設會是 [`GET`](https://developer.mozilla.org/docs/Web/HTTP/Methods/GET) 請求。非常適合我們的需求——向伺服器請求看某使用者帳戶資料。
+
+想像 GET 請求像是禮貌地向圖書館借書——請求檢視已存在資料。而 POST 請求（註冊時用的）則像送新書加入館藏。
+
+| GET 請求 | POST 請求 |
+|-------------|-------------|
+| **目的** | 取得現有資料 | 傳送新資料到伺服器 |
+| **參數** | 在網址路徑/查詢字串 | 在請求主體中 |
+| **快取** | 可被瀏覽器快取 | 通常不快取 |
+| **安全性** | 顯示於網址/紀錄中 | 隱藏在請求主體 |
+
+```mermaid
+sequenceDiagram
+    participant B as 瀏覽器
+    participant S as 伺服器
+    
+    Note over B,S: GET 請求（資料檢索）
+    B->>S: GET /api/accounts/test
+    S-->>B: 200 成功 + 帳戶資料
+    
+    Note over B,S: POST 請求（資料提交）
+    B->>S: POST /api/accounts + 新帳戶資料
+    S-->>B: 201 已建立 + 確認訊息
+    
+    Note over B,S: 錯誤處理
+    B->>S: GET /api/accounts/nonexistent
+    S-->>B: 404 未找到 + 錯誤訊息
+```
+#### 步驟3：彙整整合
 
-現在我們來更新 `login` 函數以使用 `getAccount`：
+現在來一段令人滿意的串連程式，將帳戶擷取函數接入登入流程：
 
-```js
+```javascript
 async function login() {
-  const loginForm = document.getElementById('loginForm')
+  const loginForm = document.getElementById('loginForm');
   const user = loginForm.user.value;
   const data = await getAccount(user);
 
@@ -93,94 +312,272 @@ async function login() {
 }
 ```
 
-首先，由於 `getAccount` 是一個異步函數，我們需要使用 `await` 關鍵字來等待伺服器結果。與任何伺服器請求一樣，我們還需要處理錯誤情況。目前，我們只添加一條日誌消息來顯示錯誤，稍後再處理。
+這個函數依序執行：
+- 從表單取得使用者帳號
+- 向伺服器索取該帳號的資料
+- 處理過程中可能出現的錯誤
+- 成功時存儲帳戶資料並跳轉至儀表板
+
+> 🎯 **Async/Await 範式**：因為 `getAccount` 是非同步函式，我們用 `await` 暫停程式執行，直到伺服器有回應，避免後續使用未定義資料。
 
-然後，我們需要將數據存儲在某個地方，以便稍後用於顯示儀表板信息。由於 `account` 變量尚不存在，我們將在文件頂部創建一個全局變量：
+#### 步驟4：為資料打造存放處
 
-```js
+應用程式需要記憶讀入的帳戶資訊，像短期記憶一樣，保持目前登入用戶資料隨時可用。在 `app.js` 檔案上方加這行：
+
+```javascript
+// 儲存當前用戶的帳戶資料
 let account = null;
 ```
 
-在用戶數據保存到變量後，我們可以使用已經存在的 `navigate()` 函數從*登錄*頁面導航到*儀表板*。
+**為什麼需要它：**
+- 讓整個應用程式能隨時存取帳戶資料
+- 初始設為 `null` 表示「尚未有人登入」
+- 當有人成功登入或註冊時更新其內容
+- 作為唯一資料來源，避免登入狀態混淆
+
+#### 步驟5：連接表單與功能
 
-最後，我們需要在提交登錄表單時調用 `login` 函數，通過修改 HTML：
+接著將你的登入新功能連結到 HTML 表單，修改表單標籤如下：
 
 ```html
 <form id="loginForm" action="javascript:login()">
+  <!-- Your existing form inputs -->
+</form>
 ```
 
-通過註冊新帳戶並嘗試使用相同帳戶登錄，測試一切是否正常運行。
+**這個小改動帶來的效果：**
+- 阻止表單預設的「整頁重新載入」動作
+- 改由自訂的 JavaScript 函數處理
+- 保持單頁應用的平滑體驗
+- 完全控制使用者按下「登入」的行為
 
-在進入下一部分之前，我們還可以通過在 `register` 函數底部添加以下內容來完成該函數：
+#### 步驟6：增強註冊功能
 
-```js
+為保持一致性，更新你的 `register` 函式，也讓它存取帳戶資料並跳轉到儀表板：
+
+```javascript
+// 將這些行添加到您的註冊功能的末尾
 account = result;
 navigate('/dashboard');
 ```
 
-✅ 你知道嗎？默認情況下，你只能從與你正在查看的網頁相同的*域名和端口*調用伺服器 API。這是瀏覽器強制執行的一種安全機制。但等等，我們的網絡應用程式運行在 `localhost:3000`，而伺服器 API 運行在 `localhost:5000`，為什麼它能正常工作？通過使用一種名為 [跨域資源共享（CORS）](https://developer.mozilla.org/docs/Web/HTTP/CORS) 的技術，如果伺服器在響應中添加了特殊的標頭，允許特定域名的例外，就可以執行跨域 HTTP 請求。
+**這項優化帶來：**
+- 註冊完成無縫轉到儀表板
+- 登入與註冊流程體驗一致
+- 成功註冊後立即取得帳戶資料
+
+#### 測試你的實作
+
+```mermaid
+flowchart TD
+    A[用戶輸入憑證] --> B[呼叫登入功能]
+    B --> C[從伺服器取得帳戶資料]
+    C --> D{資料是否成功接收？}
+    D -->|是| E[全域儲存帳戶資料]
+    D -->|否| F[顯示錯誤訊息]
+    E --> G[導向儀表板]
+    F --> H[用戶停留在登入頁面]
+```
+**現在試運行：**
+1. 建立新帳戶，確認流程正常
+2. 使用同樣的憑證嘗試登入
+3. 如有異常，打開瀏覽器控制台（F12）檢查
+4. 確認成功登入後進入儀表板頁面
+
+遇到問題別慌，多數情況下是簡單錯誤或忘了啟動 API 伺服器。
+
+#### 跨來源通訊的小秘密
+
+你可能會想：「我的網頁應用跟 API 伺服器分別跑在不同埠口，怎能互通？」好問題！這是所有網頁開發者都會遇到的話題。
+
+> 🔒 **跨來源安全政策**：瀏覽器強制執行「同源政策」以防止未授權跨域通訊，就像五角大廈的檢查站，核對通訊是否授權後才允許資料傳送。
+> 
+**本示範設定：**
+- 你的網頁應用運行於 `localhost:3000`（開發伺服器）
+- API 伺服器運行於 `localhost:5000`（後端伺服器）
+- API 伺服器包含 [CORS 標頭](https://developer.mozilla.org/docs/Web/HTTP/CORS) 明確授權來自網頁應用的通訊
 
-> 通過學習這個[課程](https://docs.microsoft.com/learn/modules/use-apis-discover-museum-art/?WT.mc_id=academic-77807-sagibbon)了解更多關於 API 的知識。
+這種架構與實務開發情境相符，前後端通常分別部署於不同伺服器。
 
-## 更新 HTML 以顯示數據
+> 📚 **擴充學習**：深入瞭解 API 與資料擷取，請參考 Microsoft Learn 的完整 [API 課程](https://docs.microsoft.com/learn/modules/use-apis-discover-museum-art/?WT.mc_id=academic-77807-sagibbon)。
 
-現在我們已經獲取了用戶數據，我們需要更新現有的 HTML 來顯示這些數據。我們已經知道如何使用例如 `document.getElementById()` 從 DOM 中檢索元素。在獲取基礎元素後，以下是一些可以用來修改或添加子元素的 API：
+## 將資料動態呈現在 HTML 中
 
-- 使用 [`textContent`](https://developer.mozilla.org/docs/Web/API/Node/textContent) 屬性可以更改元素的文本內容。請注意，更改此值會刪除該元素的所有子元素（如果有的話），並將其替換為提供的文本。因此，通過將空字符串 `''` 賦值給它，也是一種高效的方法來刪除給定元素的所有子元素。
+現在我們透過 DOM 操控將擷取的資料呈現給使用者。就像洗相片暗房的過程，我們將看不見的資料轉成使用者可見且可互動的內容。
+DOM 操作是將靜態網頁轉換成動態應用程式的技術，能根據用戶互動和伺服器回應更新內容。
 
-- 使用 [`document.createElement()`](https://developer.mozilla.org/docs/Web/API/Document/createElement) 和 [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append) 方法，你可以創建並附加一個或多個新的子元素。
+### 選擇合適的工具完成工作
 
-✅ 使用元素的 [`innerHTML`](https://developer.mozilla.org/docs/Web/API/Element/innerHTML) 屬性也可以更改其 HTML 內容，但應避免使用此方法，因為它容易受到[跨站腳本（XSS）](https://developer.mozilla.org/docs/Glossary/Cross-site_scripting) 攻擊。
+在使用 JavaScript 更新 HTML 時，你有幾個選擇。把它們想成工具箱中的不同工具—每一個都適合特定工作：
 
-### 任務
+| 方法 | 適合用途 | 何時使用 | 安全程度 |
+|--------|---------------------|----------------|--------------|
+| `textContent` | 安全顯示用戶資料 | 任何顯示文字時 | ✅ 非常穩固 |
+| `createElement()` + `append()` | 建立複雜排版 | 新增區域/清單時 | ✅ 可靠無虞 |
+| `innerHTML` | 設定 HTML 內容 | ⚠️ 建議盡量避免 | ❌ 有風險 |
 
-在進入*儀表板*頁面之前，我們應該先在*登錄*頁面上完成一件事。目前，如果你嘗試使用不存在的用戶名登錄，控制台會顯示一條消息，但對於普通用戶來說，什麼都沒有改變，也不知道發生了什麼。
+#### 安全顯示文字：textContent
 
-讓我們在登錄表單中添加一個占位元素，以便在需要時顯示錯誤消息。一個不錯的位置是在登錄 `<button>` 的前面：
+[`textContent`](https://developer.mozilla.org/docs/Web/API/Node/textContent) 屬性是顯示用戶資料的好幫手。就像網頁的保鏢—避免任何有害的內容通過：
+
+```javascript
+// 安全、可靠的文本更新方式
+const balanceElement = document.getElementById('balance');
+balanceElement.textContent = account.balance;
+```
+
+**textContent 的好處：**
+- 將所有內容當成純文字處理（防止執行腳本）
+- 自動清除已有內容
+- 簡單文字更新效率高
+- 內建防止惡意內容的安全機制
+
+#### 建立動態 HTML 元素
+
+對於更複雜的內容，結合 [`document.createElement()`](https://developer.mozilla.org/docs/Web/API/Document/createElement) 與 [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append) 方法：
+
+```javascript
+// 創建新元素的安全方法
+const transactionItem = document.createElement('div');
+transactionItem.className = 'transaction-item';
+transactionItem.textContent = `${transaction.date}: ${transaction.description}`;
+container.append(transactionItem);
+```
+
+**這種做法的理解：**
+- **程式化**建立新的 DOM 元素
+- **完整控制**元素屬性與內容
+- **允許**複雜且巢狀的元素結構
+- **維持安全**，透過分離結構和內容
+
+> ⚠️ **安全考量**：雖然 [`innerHTML`](https://developer.mozilla.org/docs/Web/API/Element/innerHTML) 在許多教學中出現，但它會執行嵌入的腳本。就像歐洲核子研究組織(CERN)的安全規定防止未經授權的程式碼執行，使用 `textContent` 和 `createElement` 是更安全的選擇。
+> 
+**innerHTML 的風險：**
+- 會執行用戶資料中的 `<script>` 標籤
+- 容易遭受程式碼注入攻擊
+- 造成潛在安全漏洞
+- 我們使用的安全替代方案功能相同
+
+### 讓錯誤訊息對用戶友善
+
+目前登入錯誤只會在瀏覽器控制台顯示，用戶無法看到。就像飛行員的內部診斷與乘客資訊系統的差別，我們需要透過適當管道告知重要資訊。
+
+實作可見錯誤訊息讓用戶立即知道發生什麼錯誤，接下來該怎麼做。
+
+#### 第一步：新增錯誤訊息顯示區
+
+先在你的 HTML 中新增錯誤訊息的容器，放在登入按鈕前使用戶很自然看見：
 
 ```html
-...
-<div id="loginError"></div>
+<!-- This is where error messages will appear -->
+<div id="loginError" role="alert"></div>
 <button>Login</button>
-...
 ```
 
-這個 `<div>` 元素是空的，這意味著在我們向其中添加內容之前，屏幕上不會顯示任何內容。我們還為它設置了一個 `id`，以便可以通過 JavaScript 輕鬆檢索它。
+**這裡發生的事：**
+- 建立空容器，預設隱藏
+- 放在點擊「登入」後用戶自然會看的位置
+- `role="alert"` 為輔助讀屏軟件提供訊息—告訴它「這很重要！」
+- 唯一的 `id` 讓 JavaScript 容易找到目標
+
+#### 第二步：建立便利的輔助函式
 
-回到 `app.js` 文件，創建一個新的輔助函數 `updateElement`：
+寫一個小工具函式，能更新任何元素的文字。這是種「寫一次，到處用」的函式，省時又方便：
 
-```js
+```javascript
 function updateElement(id, text) {
   const element = document.getElementById(id);
   element.textContent = text;
 }
 ```
 
-這個函數非常簡單：給定一個元素的 *id* 和 *text*，它會更新具有匹配 `id` 的 DOM 元素的文本內容。讓我們在 `login` 函數中用這個方法替換之前的錯誤消息：
+**函式優點：**
+- 介面簡單，只需元素ID和文字
+- 安全地定位並更新 DOM 元素
+- 可重複使用，減少程式碼重複
+- 保持全應用程式一致的更新行為
+
+#### 第三步：讓用戶看見錯誤
+
+現在把隱藏的控制台訊息換成用戶可見的，更新你的登入函式：
 
-```js
+```javascript
+// 不只是記錄到控制台，要向用戶顯示錯誤原因
 if (data.error) {
   return updateElement('loginError', data.error);
 }
 ```
 
-現在，如果你嘗試使用無效帳戶登錄，你應該會看到如下所示的內容：
+**這小變動影響大：**
+- 錯誤訊息直接顯示在用戶注視處
+- 不再有神祕且無聲的失敗
+- 用戶得到即時且有用的回饋
+- 讓你的應用感覺更專業而且貼心
 
-![顯示登錄錯誤消息的截圖](../../../../translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.hk.png)
+以後測試錯誤帳號，你會立刻在頁面看到有幫助的錯誤訊息！
 
-現在我們有了可視化的錯誤文本，但如果你使用屏幕閱讀器，你會發現什麼都沒有被宣讀。為了讓動態添加到頁面的文本能被屏幕閱讀器宣讀，我們需要使用一種名為[實時區域（Live Region）](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) 的技術。這裡我們將使用一種特定類型的實時區域，稱為警報：
+![Screenshot showing the error message displayed during login](../../../../translated_images/login-error.416fe019b36a6327.hk.png)
+
+#### 第四步：考慮無障礙使用
+
+剛才加入的 `role="alert"` 很酷，不只是裝飾！它建立了一個稱為[即時區域](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions)的特性，螢幕閱讀器會即刻朗讀變更：
 
 ```html
 <div id="loginError" role="alert"></div>
 ```
 
-為 `register` 函數的錯誤實現相同的行為（別忘了更新 HTML）。
+**原因如下：**
+- 螢幕閱讀使用者在錯誤訊息出現時立刻聽到
+- 不論如何瀏覽，人人都能獲得重要資訊
+- 簡單方式讓你的應用支援更多使用者
+- 展示你對包容性體驗的用心
+
+這種小細節能區分好開發者與頂尖開發者！
+
+### 🎯 教學檢視：認證模式
+
+**暫停思考**：你剛完成一個完整的認證流程。這是網頁開發的基礎範型。
+
+**自我評估小測驗**：
+- 能解釋為何使用 async/await 進行 API 呼叫嗎？
+- 若忘了 `encodeURIComponent()` 會怎樣？
+- 我們的錯誤處理怎麼改善用戶體驗？
+
+**實戰連結**：你學到的模式（非同步資料抓取、錯誤處理、用戶回饋）是所有主流網應用（社交媒體到電子商務）必備的。你正在打造生產等級的技能！
+
+**挑戰問題**：如何修改這套認證系統支援多種用戶角色（顧客、管理員、出納員）？想想資料結構和 UI 需做哪些改變。
+
+#### 第五步：將相同步驟應用於註冊
+
+為保持一致，註冊表單也加入同樣的錯誤處理：
+
+1. **新增**錯誤顯示元素到註冊 HTML：
+```html
+<div id="registerError" role="alert"></div>
+```
+
+2. **更新**你的 register 函式使用相同的錯誤顯示方式：
+```javascript
+if (data.error) {
+  return updateElement('registerError', data.error);
+}
+```
+
+**一致錯誤處理的好處：**
+- **提供**整體一致的用戶體驗
+- **降低**用戶心理負擔，熟悉模式易操作
+- **簡化**維護，重用程式碼
+- **確保**整個應用符合無障礙標準
 
-## 在儀表板上顯示信息
+## 建立動態儀表板
 
-使用我們剛剛學到的相同技術，我們還將處理在儀表板頁面上顯示帳戶信息。
+現在將靜態儀表板變成動態介面，呈現真實帳戶資料。就像印刷的航班表與機場實時出發資訊板的差異，我們從靜態訊息轉向即時、反應迅速的顯示。
 
-以下是從伺服器接收到的帳戶對象的樣子：
+利用已學的 DOM 操作技術，打造會隨著當前帳戶資訊自動更新的儀表板。
+
+### 認識你的資料
+
+開始建置前，先瞧瞧伺服器成功登入後傳回的資料長什麼樣：
 
 ```json
 {
@@ -192,15 +589,49 @@ if (data.error) {
     { "id": "1", "date": "2020-10-01", "object": "Pocket money", "amount": 50 },
     { "id": "2", "date": "2020-10-03", "object": "Book", "amount": -10 },
     { "id": "3", "date": "2020-10-04", "object": "Sandwich", "amount": -5 }
-  ],
+  ]
 }
 ```
 
-> 注意：為了讓你的操作更簡單，你可以使用已經填充了數據的預設 `test` 帳戶。
+**這個資料結構提供：**
+- **`user`**：用來客製化體驗（「歡迎回來，Sarah！」）
+- **`currency`**：確保貨幣金額顯示正確
+- **`description`**：帳戶友好名稱
+- **`balance`**：重要的當前餘額
+- **`transactions`**：完整交易歷史詳情
+
+所有你需要的專業銀行儀表板資訊！
+
+```mermaid
+flowchart TD
+    A[用戶登入] --> B[獲取帳戶數據]
+    B --> C{數據有效？}
+    C -->|Yes| D[儲存在全域變數]
+    C -->|No| E[顯示錯誤訊息]
+    D --> F[導航至儀表板]
+    F --> G[更新用戶介面元素]
+    G --> H[顯示結餘]
+    G --> I[顯示說明]
+    G --> J[渲染交易紀錄]
+    J --> K[建立表格列]
+    K --> L[格式化貨幣]
+    L --> M[用戶看到即時數據]
+```
+> 💡 **小貼士**：想立刻看到儀表板效果？登入時輸入用戶名 `test`，裡面內建範例資料，能直接看到各項功能，不需自己建立交易。
+> 
+**為何測試帳戶很方便：**
+- 內建真實感範例資料
+- 方便觀察交易顯示
+- 適合測試儀表板功能
+- 免去手動建立假資料的麻煩
+
+### 建立儀表板顯示元件
 
-### 任務
+我們一步步建立介面，先從帳戶摘要資訊開始，接著建置更複雜的交易列。
 
-首先，替換 HTML 中的 "Balance" 部分，添加占位元素：
+#### 第一步：更新 HTML 結構
+
+先用動態佔位元素替換靜態的「餘額」區塊，讓 JavaScript 可以填入資料：
 
 ```html
 <section>
@@ -208,17 +639,25 @@ if (data.error) {
 </section>
 ```
 
-我們還將在下面添加一個新部分來顯示帳戶描述：
+接著加入帳戶描述區。由於它是儀表板內容的標題，請使用語意標籤：
 
 ```html
 <h2 id="description"></h2>
 ```
 
-✅ 由於帳戶描述作為其下方內容的標題，因此在語義上將其標記為標題。了解更多關於[標題結構](https://www.nomensa.com/blog/2017/how-structure-headings-web-accessibility)對無障礙的重要性，並仔細檢查頁面以確定還有哪些內容可以作為標題。
+**HTML 結構說明：**
+- **分別使用**`<span>`標籤顯示餘額與貨幣符號，以獨立控制
+- **給予**各元素唯一 ID，方便 JavaScript 操控
+- **使用**`<h2>`標籤標示帳戶描述，符合語意
+- **建立**螢幕閱讀器和搜尋引擎的邏輯層級
+
+> ✅ **無障礙提示**：帳戶描述被視為儀表板內容的標題，故用語意標題標示。了解更多關於[標題結構如何影響無障礙](https://www.nomensa.com/blog/2017/how-structure-headings-web-accessibility)。試想頁面中還有其他哪裡適合加入標題標籤？
+
+#### 第二步：建立 Dashboard 更新函式
 
-接下來，我們將在 `app.js` 中創建一個新函數來填充占位符：
+接著寫一個函式，填入實際帳戶資料：
 
-```js
+```javascript
 function updateDashboard() {
   if (!account) {
     return navigate('/login');
@@ -230,40 +669,87 @@ function updateDashboard() {
 }
 ```
 
-首先，我們檢查是否擁有所需的帳戶數據，然後再繼續。接著，我們使用之前創建的 `updateElement()` 函數來更新 HTML。
+**函式逐步說明：**
+- **先確認**帳戶資料存在才繼續
+- **未登入者**導向登入頁
+- **用**可重複使用的 updateElement 函式更新帳戶描述
+- **格式化**餘額，確保小數點顯示兩位
+- **顯示**正確的貨幣符號
 
-> 為了讓餘額顯示得更美觀，我們使用方法 [`toFixed(2)`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed) 強制顯示小數點後 2 位。
+> 💰 **貨幣格式化小撇步**：[`toFixed(2)`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed) 是存活救星！能讓餘額看起來像真實的貨幣—「75.00」而不是「75」。用戶會喜歡這種熟悉的貨幣格式。
 
-現在，我們需要在每次加載儀表板時調用 `updateDashboard()` 函數。如果你已經完成了[第 1 課的作業](../1-template-route/assignment.md)，這應該很簡單，否則你可以使用以下實現。
+#### 第三步：確保 Dashboard 會更新
 
-將以下代碼添加到 `updateRoute()` 函數的末尾：
+要讓儀表板每次訪問都刷新資料，我們必須在路由系統掛鉤。這部分如果有完成[課程第一單元](../1-template-route/assignment.md)，應該不陌生。沒做過也沒關係—這是你要加的：
 
-```js
+在 `updateRoute()` 函式末尾加入：
+
+```javascript
 if (typeof route.init === 'function') {
   route.init();
 }
 ```
 
-並使用以下代碼更新路由定義：
+然後更新路由設定，包含儀表板初始化：
 
-```js
+```javascript
 const routes = {
   '/login': { templateId: 'login' },
   '/dashboard': { templateId: 'dashboard', init: updateDashboard }
 };
 ```
 
-通過此更改，每次顯示儀表板頁面時，都會調用 `updateDashboard()` 函數。登錄後，你應該能夠看到帳戶餘額、貨幣和描述。
-
-## 使用 HTML 模板動態創建表格行
-
-在[第一課](../1-template-route/README.md)中，我們使用 HTML 模板和 [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) 方法實現了應用程式中的導航。模板也可以更小，並用於動態填充頁面中重複的部分。
-
-我們將使用類似的方法來顯示 HTML 表格中的交易列表。
-
-### 任務
+**這樣聰明的配置做了什麼：**
+- 檢查路由是否有初始化程式碼
+- 當路由讀取時自動執行它
+- 確保你的儀表板隨時顯示最新資料
+- 讓路由邏輯保持乾淨組織
+
+#### 測試你的儀表板
+
+完成後測試：
+
+1. **使用測試帳號登入**
+2. **確認被導往儀表板**
+3. **檢查帳戶描述、餘額和貨幣是否正確顯示**
+4. **嘗試登出後再登入**，確保資料正確更新
+
+你的儀表板現在應該能動態呈現根據使用者登入資料更新的帳戶資訊！
+
+## 用範本建立智慧交易列表
+
+我們不再手動產生每筆交易的 HTML，用範本自動生成一致且規範的格式。就像航太器製造用標準化元件，範本確保每列交易都有相同結構和外觀。
+
+此技巧從少筆交易到成千上萬筆都能有效擴充，維持表現與呈現一致。
+
+```mermaid
+graph LR
+    A[HTML 模板] --> B[JavaScript 複製]
+    B --> C[填充資料]
+    C --> D[加入片段]
+    D --> E[批次插入到 DOM]
+    
+    subgraph "效能優勢"
+        F[單次 DOM 更新]
+        G[一致格式]
+        H[可重用模式]
+    end
+    
+    E --> F
+    E --> G
+    E --> H
+```
+```mermaid
+flowchart LR
+    A[交易資料] --> B[HTML 範本]
+    B --> C[複製範本]
+    C --> D[填充資料]
+    D --> E[加入到 DOM]
+    E --> F[為每筆交易重複]
+```
+### 第一步：建立交易範本
 
-在 HTML `<body>` 中添加一個新模板：
+在 HTML `<body>` 內新增可重複使用的交易列範本：
 
 ```html
 <template id="transaction">
@@ -275,17 +761,30 @@ const routes = {
 </template>
 ```
 
-此模板表示單個表格行，包含我們希望填充的 3 列：交易的*日期*、*對象*和*金額*。
+**HTML 範本理解：**
+- **定義**單一表格列結構
+- **保持**隱藏，待複製並由 JavaScript 填入
+- **包含**三個儲存格：日期、描述與金額
+- **提供**一致格式的重用模式
 
-然後，為儀表板模板中的表格 `<tbody>` 元素添加此 `id` 屬性，以便通過 JavaScript 更輕鬆地找到它：
+### 第二步：準備可放動態內容的表格
+
+接著在 `<tbody>` 加入 `id`，方便 JavaScript 找到插入位置：
 
 ```html
 <tbody id="transactions"></tbody>
 ```
 
-我們的 HTML 已準備就緒，現在切換到 JavaScript 代碼，創建一個新函數 `createTransactionRow`：
+**這麼做的目的：**
+- **建立**明確目標位置插入交易列
+- **分離**表格結構與動態內容
+- **方便**清空與重新填入交易資料
+
+### 第三步：建立交易列工廠函式
 
-```js
+寫個函式將交易資料轉換成 HTML 元素：
+
+```javascript
 function createTransactionRow(transaction) {
   const template = document.getElementById('transaction');
   const transactionRow = template.content.cloneNode(true);
@@ -297,9 +796,19 @@ function createTransactionRow(transaction) {
 }
 ```
 
-此函數正如其名稱所示：使用我們之前創建的模板，創建一個新的表格行，並使用交易數據填充其內容。我們將在 `updateDashboard()` 函數中使用它來填充表格：
+**這個工廠函式解析：**
+- **以 ID 找到**範本元素
+- **複製**範本內容以便安全操作
+- **選擇**複製後內容內的表格列
+- **填入**每個儲存格交易資料
+- **格式化**金額顯示正確小數位數
+- **回傳**完成的列，準備插入表格中
+
+### 第四步：高效產生多筆交易列
 
-```js
+將此程式碼加入 `updateDashboard()` 函式呈現全部交易：
+
+```javascript
 const transactionsRows = document.createDocumentFragment();
 for (const transaction of account.transactions) {
   const transactionRow = createTransactionRow(transaction);
@@ -308,40 +817,154 @@ for (const transaction of account.transactions) {
 updateElement('transactions', transactionsRows);
 ```
 
-這裡我們使用了方法 [`document.createDocumentFragment()`](https://developer.mozilla.org/docs/Web/API/Document/createDocumentFragment)，它創建了一個新的 DOM 片段，我們可以在其上操作，最後將其附加到 HTML 表格中。
+**這種高效作法說明：**
+- **建立**文件片段，批次操作 DOM
+- **遍歷**帳戶所有交易
+- **運用**工廠函式為每筆交易生成列
+- **將所有列聚集**在文件片段中
+- **一次性**將所有列加入 DOM，避免多次個別插入造成效能問題
+> ⚡ **性能優化**: [`document.createDocumentFragment()`](https://developer.mozilla.org/docs/Web/API/Document/createDocumentFragment) 就好似波音嘅組裝過程 — 零件係主生產線之外準備好，之後一次過裝好成件貨。呢種批量處理方法通過一次插入代替多次單獨操作，最大限度減少 DOM 重排。
+
+### 第 5 步：增強混合內容嘅更新函數
 
-在此代碼能正常工作之前，我們還需要做一件事，因為我們的 `updateElement()` 函數目前僅支持文本內容。讓我們稍微修改一下它的代碼：
+你嘅 `updateElement()` 函數而家淨係處理純文字內容。更新佢，使佢可以處理文字同 DOM 節點嘅混合內容：
 
-```js
+```javascript
 function updateElement(id, textOrNode) {
   const element = document.getElementById(id);
-  element.textContent = ''; // Removes all children
+  element.textContent = ''; // 移除所有子元素
   element.append(textOrNode);
 }
 ```
 
-我們使用 [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append) 方法，因為它允許將文本或 [DOM 節點](https://developer.mozilla.org/docs/Web/API/Node) 附加到父元素，這非常適合我們的所有用例。
-如果你嘗試使用 `test` 帳戶登入，現在應該可以在儀表板上看到交易清單了 🎉。
+**此次更新嘅關鍵改進：**
+- **清除**現有內容後再添加新內容
+- **接收**文字字串或 DOM 節點作為參數
+- **使用**[`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append) 方法以增強靈活性
+- **保持**與現有基於文字嘅用法向後兼容
+
+### 嘗試下你嘅儀表板
+
+到體驗嘅時刻啦！即刻睇下你嘅動態儀表板點樣運作：
+
+1. 用 `test` 帳號登入（入面有準備好嘅樣本數據）
+2. 進入你嘅儀表板
+3. 確認交易行正確顯示格式
+4. 確保日期、描述同金額都睇落正確
+
+如果一切正常，你就會見到一個功能齊全嘅交易清單喺儀表板度！🎉
+
+**你完成嘅事：**
+- 建立可擴展至任意數據量嘅儀表板
+- 創建可重用嘅模板以統一格式
+- 實施高效嘅 DOM 操作技巧
+- 開發出媲美生產級銀行應用嘅功能
+
+你已成功將靜態網頁轉化為動態網頁應用。
+
+### 🎯 教學檢視：動態內容生成
+
+**架構理解**：你已實作一條複雜嘅數據到 UI 流程，與 React、Vue、Angular 等框架所用模式相似。
+
+**掌握嘅關鍵概念**：
+- **基於模板嘅渲染**：創建可重用UI元件
+- **文檔片段**：優化 DOM 性能
+- **安全 DOM 操作**：防止安全漏洞
+- **數據轉換**：將伺服器數據轉為用戶界面
+
+**行業關聯**：呢啲技巧係現代前端框架嘅基礎。React 嘅虛擬 DOM、Vue 嘅模板系統，以及 Angular 嘅元件架構全部建立於呢啲核心理念。
+
+**反思問題**：你會點樣擴展呢套系統，以支援即時更新（例如新交易自動出現）？可以考慮使用 WebSockets 或 Server-Sent Events。
 
 ---
 
+## 📈 你嘅資料管理精通時程
+
+```mermaid
+timeline
+    title 數據驅動開發旅程
+    
+    section 基礎建設
+        API 設置與測試
+            : 了解客戶端與伺服器通訊
+            : 精通 HTTP 請求/回應循環
+            : 學習除錯技巧
+    
+    section 認證精通
+        非同步函數模式
+            : 編寫乾淨的 async/await 代碼
+            : 有效處理 promises
+            : 實作錯誤邊界
+        用戶會話管理
+            : 建立全域狀態模式
+            : 建構導航守衛
+            : 設計用戶反饋系統
+    
+    section 動態 UI 開發
+        安全的 DOM 操作
+            : 防範 XSS 漏洞
+            : 使用 textContent 替代 innerHTML
+            : 創建無障礙友善介面
+        範本系統
+            : 建置可重用的 UI 元件
+            : 利用 fragments 優化效能
+            : 擴展以處理大型資料集
+    
+    section 專業模式
+        可用於生產的代碼
+            : 實作全面的錯誤處理
+            : 遵循安全最佳實踐
+            : 建立可維護的架構
+        現代網路標準
+            : 精通 Fetch API 模式
+            : 理解 CORS 配置
+            : 建立響應式、無障礙的 UI
+```
+**🎓 畢業里程碑**：你已成功利用現代 JavaScript 模式打造完整嘅資料驅動網頁應用。呢啲技能可直接轉用於 React、Vue 或 Angular 等框架。
+
+**🔄 下一階段能力**：
+- 準備探索以呢啲概念為基礎嘅前端框架
+- 能實現基於 WebSockets 嘅實時功能
+- 可構建具備離線能力嘅進階網頁應用（PWA）
+- 為進階狀態管理模式學習奠定基礎
+
+## GitHub Copilot Agent 挑戰 🚀
+
+使用 Agent 模式完成以下挑戰：
+
+**描述：** 增強銀行應用，實現交易搜尋和過濾功能，讓用戶可以按日期區間、金額或描述搜尋特定交易。
+
+**提示：** 為銀行應用建立搜尋功能，包含：1）一個包含日期區間（從／至）、最小／最大金額及交易描述關鍵字輸入框嘅搜尋表單；2）一個 `filterTransactions()` 函數，按搜尋條件對 account.transactions 陣列進行過濾；3）更新 `updateDashboard()` 函數以顯示過濾後嘅結果；4）增加「清除過濾器」按鈕重設視圖。使用現代 JavaScript 陣列方法 `filter()`，並妥善處理空搜尋條件嘅邊界情況。
+
+了解更多關於 [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode)。
+
 ## 🚀 挑戰
 
-一起合作，讓儀表板頁面看起來像一個真正的銀行應用程式。如果你已經為應用程式設計了樣式，試著使用 [媒體查詢](https://developer.mozilla.org/docs/Web/CSS/Media_Queries) 來創建一個 [響應式設計](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks)，讓它在桌面和移動設備上都能良好運作。
+準備將你嘅銀行應用提升到新層次？一齊打造一個你真心想用嘅介面。以下係啲靈感：
+
+**美化界面**：加啲 CSS 令你嘅功能性儀表板變得美觀，諗啲乾淨嘅線條、合理嘅間距，甚至輕微動畫。
+
+**響應式設計**：試下用 [媒體查詢](https://developer.mozilla.org/docs/Web/CSS/Media_Queries) 建立[響應式設計](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks)，喺手機、平板同桌上裝置都好好睇。用家肯定感激！
+
+**添增趣味**：諗下用顏色區分交易（收入用綠，支出用紅），加圖示，或者加入滑鼠懸停效果，令介面感覺更互動。
+
+呢度係一個經過樣式化嘅儀表板嘅示例：
 
-以下是一個已設計樣式的儀表板頁面範例：
+![Screenshot of an example result of the dashboard after styling](../../../../translated_images/screen2.123c82a831a1d14a.hk.png)
 
-![已設計樣式的儀表板範例結果截圖](../../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.hk.png)
+唔使死乞白賴要完全一樣，用嚟做靈感，打造屬於你嘅風格！
 
-## 課後測驗
+## 課後小測
 
-[課後測驗](https://ff-quizzes.netlify.app/web/quiz/46)
+[課後小測](https://ff-quizzes.netlify.app/web/quiz/46)
 
 ## 作業
 
-[重構並為你的程式碼添加註解](assignment.md)
+[重構並添加註釋你嘅代碼](assignment.md)
 
 ---
 
-**免責聲明**：  
-此文件已使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 翻譯。我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。應以原始語言的文件作為權威來源。對於關鍵資訊，建議尋求專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或錯誤解讀概不負責。
\ No newline at end of file
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**免責聲明**：
+本文件由 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 翻譯而成。雖然我們致力於達到準確度，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件的本地語言版本應視為權威來源。對於重要資訊，建議採用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或錯誤詮釋概不負責。
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->
\ No newline at end of file
diff --git a/translations/hk/7-bank-project/3-data/assignment.md b/translations/hk/7-bank-project/3-data/assignment.md
index 7ae99f96..f48b7a6b 100644
--- a/translations/hk/7-bank-project/3-data/assignment.md
+++ b/translations/hk/7-bank-project/3-data/assignment.md
@@ -1,27 +1,144 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "a4abf305ede1cfaadd56a8fab4b4c288",
-  "translation_date": "2025-08-24T00:06:07+00:00",
+  "original_hash": "d0a02cb117e91a5b5f24178080068a3d",
+  "translation_date": "2026-01-06T12:54:17+00:00",
   "source_file": "7-bank-project/3-data/assignment.md",
   "language_code": "hk"
 }
 -->
-# 重構及添加註解到你的程式碼
+# 代碼重構與文件編寫作業
 
-## 指引
+## 學習目標
 
-隨著你的代碼庫不斷增長，定期重構程式碼對於保持其可讀性和可維護性至關重要。請添加註解並重構你的 `app.js`，以提升代碼質量：
+完成此作業後，您將練習專業開發者日常使用的關鍵軟體開發技能。您將學會如何組織代碼以維護性為主、透過抽象減少重複，並為未來的開發者（包括您自己）撰寫文件說明。
 
-- 抽取常數，例如伺服器 API 的基礎 URL
-- 將相似的代碼進行統一處理：例如，你可以創建一個 `sendRequest()` 函數，將 `createAccount()` 和 `getAccount()` 中使用的代碼整合起來
-- 重新組織代碼，使其更易於閱讀，並添加註解
+乾淨且具備良好文件說明的代碼，對於多位開發者協作且代碼庫隨時間演進的真實網頁開發專案至關重要。
 
-## 評分標準
+## 作業概述
 
-| 評分標準 | 優秀                                                                                                                                                          | 合格                                                                                             | 有待改進                                                                             |
-| -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
-|          | 程式碼有註解，分為不同部分且易於閱讀。常數已被抽取，並創建了一個統一的 `sendRequest()` 函數。                                                                  | 程式碼乾淨，但仍可通過添加更多註解、抽取常數或進行統一處理來進一步改進。                                                               | 程式碼混亂，沒有註解，常數未被抽取，且代碼未進行統一處理。                                                               |
+您的銀行應用程式中的 `app.js` 檔案已隨著登入、註冊與儀表板功能大幅成長。現在是時候使用專業開發實務來重構這份代碼，以提升可讀性、可維護性，並減少冗餘代碼。
 
+## 指示
+
+請透過實作以下三個核心重構技巧，轉換您目前的 `app.js` 程式碼：
+
+### 1. 抽取設定常數
+
+**任務**：在檔案頂部建立一個配置區段，包含可重用的常數。
+
+**實作建議：**
+- 抽取目前多處硬編碼的伺服器 API 基底 URL
+- 建立多個函式中出現的錯誤訊息常數
+- 考慮抽取多次使用的路由路徑與元素 ID
+
+**示範架構：**
+```javascript
+// 配置常數
+const API_BASE_URL = 'http://localhost:5000/api';
+const ROUTES = {
+  LOGIN: '/login',
+  DASHBOARD: '/dashboard'
+};
+```
+
+### 2. 建立統一的請求函式
+
+**任務**：建置一個可重用的 `sendRequest()` 函式，消除 `createAccount()` 與 `getAccount()` 之間的重複代碼。
+
+**需求：**
+- 支援 GET 與 POST 請求
+- 包含完善的錯誤處理
+- 支援不同的 URL 端點
+- 接受可選的請求主體資料
+
+**函式簽名建議：**
+```javascript
+async function sendRequest(endpoint, method = 'GET', data = null) {
+  // 你嘅實現寫喺度
+}
+```
+
+### 3. 加入專業程式碼文件說明
+
+**任務**：使用清楚且有助於理解邏輯「為什麼」的註解對代碼進行說明。
+
+**文件說明標準：**
+- 為函式加入說明目的、參數和回傳值的文件注釋
+- 對複雜邏輯或商業規則添加內聯註解
+- 使用區塊標題將相關函式組織在一起
+- 解釋任何不明顯的程式樣式或瀏覽器特有的應變措施
+
+**文件說明示範風格：**
+```javascript
+/**
+ * Authenticates user and redirects to dashboard
+ * @param {Event} event - Form submission event
+ * @returns {Promise<void>} - Resolves when login process completes
+ */
+async function login(event) {
+  // 防止預設表單提交，以便使用 JavaScript 處理
+  event.preventDefault();
+  
+  // 你的實作方式…
+}
+```
+
+## 成功標準
+
+您的重構代碼應展現以下專業開發實務：
+
+### 優異實作
+- ✅ **常數**：所有魔術字串與 URL 均已抽取為清楚命名的常數
+- ✅ **DRY 原則**：共用請求邏輯整合成可重用的 `sendRequest()` 函式
+- ✅ **文件說明**：函式包含明確的 JSDoc 注釋說明目的與參數
+- ✅ **組織架構**：利用區塊標題及一致的格式化對代碼進行合理分組
+- ✅ **錯誤處理**：利用新請求函式強化錯誤處理機制
+
+### 足夠實作
+- ✅ **常數**：大部分重複值已抽取，僅有少量硬編碼殘留
+- ✅ **因式分解**：基本的 `sendRequest()` 函式已建立，但可能未涵蓋所有邊界狀況
+- ✅ **註解**：主要函式已註解，但有些說明尚可更完整
+- ✅ **可讀性**：代碼整體組織良好，但仍有待改進之處
+
+### 需加強
+- ❌ **常數**：大量魔術字串與 URL 仍散佈於檔案中未抽取
+- ❌ **重複**：類似函式間仍有明顯重複代碼
+- ❌ **文件說明**：缺少或不足的註解，未能有效說明程式碼功能
+- ❌ **組織架構**：代碼缺乏明確結構與邏輯分組
+
+## 測試您的重構代碼
+
+重構完成後，請確認您的銀行應用程式仍能正常運作：
+
+1. **測試所有使用者流程**：註冊、登入、儀表板顯示及錯誤處理
+2. **驗證 API 呼叫**：確認 `sendRequest()` 可同時用於帳戶建立與查詢
+3. **檢查錯誤情境**：使用無效憑證及模擬網路錯誤測試
+4. **檢視主控台輸出**：確保重構過程未新增新的錯誤訊息
+
+## 提交指引
+
+提交您的重構後的 `app.js` 檔案，應包含：
+- 清楚的區段標題組織不同功能
+- 一致的代碼格式與縮排
+- 完整的 JSDoc 文件說明所有函式
+- 頂部附簡短註解說明您的重構思路
+
+**額外挑戰**：建立一個簡單的代碼文件（`CODE_STRUCTURE.md`），說明您的應用架構及各函式如何協同運作。
+
+## 與真實世界的連結
+
+此作業模擬專業開發者定期進行的代碼維護工作。在業界環境中：
+- **代碼審查**會像此作業一樣評估可讀性與可維護性
+- **技術債務**避免因未定期重構與文件產生
+- **團隊協作**仰賴清楚且具良好文件的代碼令新成員能快速理解
+- **Bug 修復**在有良好抽象與組織的代碼庫中更為容易
+
+您在本次練習中培養的技能──抽取常數、消除重複、撰寫清晰文件──是專業軟體開發的基礎。
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
 **免責聲明**：  
-本文件已使用人工智能翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。儘管我們致力於提供準確的翻譯，請注意自動翻譯可能包含錯誤或不準確之處。原始語言的文件應被視為具權威性的來源。對於重要資訊，建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或錯誤解釋概不負責。
\ No newline at end of file
+本文件係使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 翻譯而成。我們致力確保翻譯準確，但請注意，自動翻譯可能包含錯誤或不準確之處。原文文件應視為權威依據。對於重要資訊，建議諮詢專業人工翻譯。本公司對於因使用本翻譯而引致的任何誤解或誤譯概不負責。
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->
\ No newline at end of file
diff --git a/translations/hk/7-bank-project/4-state-management/README.md b/translations/hk/7-bank-project/4-state-management/README.md
index b09ba607..fea8c566 100644
--- a/translations/hk/7-bank-project/4-state-management/README.md
+++ b/translations/hk/7-bank-project/4-state-management/README.md
@@ -1,73 +1,242 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "b46acf79da8550d76445eed00b06c878",
-  "translation_date": "2025-10-03T12:50:45+00:00",
+  "original_hash": "b807b09df716dc48a2b750835bf8e933",
+  "translation_date": "2026-01-06T12:54:43+00:00",
   "source_file": "7-bank-project/4-state-management/README.md",
   "language_code": "hk"
 }
 -->
-# 建立銀行應用程式第4部分：狀態管理概念
+# 建立銀行應用程式 第4部分：狀態管理概念
 
-## 課前測驗
+## ⚡ 接下來5分鐘可完成的事項
 
-[課前測驗](https://ff-quizzes.netlify.app/web/quiz/47)
+**忙碌開發者的快速啟動路徑**
 
-### 簡介
+```mermaid
+flowchart LR
+    A[⚡ 5 分鐘] --> B[診斷狀態問題]
+    B --> C[建立中央狀態物件]
+    C --> D[加入 updateState 函數]
+    D --> E[看到即時改善]
+```
+- **第1分鐘**：測試目前的狀態問題 - 登入，重新整理頁面，觀察登出
+- **第2分鐘**：用 `let state = { account: null }` 替換 `let account = null`
+- **第3分鐘**：建立簡易的 `updateState()` 函式用於受控更新
+- **第4分鐘**：更新一個函式以使用新的模式
+- **第5分鐘**：測試更可預測且易於除錯的狀態管理
+
+**快速診斷測試**：
+```javascript
+// 之前：分散狀態
+let account = null; // 刷新後遺失！
+
+// 之後：集中狀態
+let state = Object.freeze({ account: null }); // 可控且可追蹤！
+```
+
+**為何這很重要**：5分鐘內，您將體驗從混亂的狀態管理轉變為可預測且易於除錯的模式。這是讓複雜應用程式易於維護的基礎。
+
+## 🗺️ 您透過狀態管理大師之路的學習旅程
+
+```mermaid
+journey
+    title 從分散狀態到專業架構
+    section 問題診斷
+      Identify state loss issues: 3: You
+      Understand scattered updates: 4: You
+      Recognize architecture needs: 6: You
+    section 集中控制
+      Create unified state object: 5: You
+      Implement controlled updates: 7: You
+      Add immutable patterns: 8: You
+    section 增加持久性
+      Implement localStorage: 6: You
+      Handle serialization: 7: You
+      Create session continuity: 9: You
+    section 平衡新鮮度
+      Address data staleness: 5: You
+      Build refresh systems: 8: You
+      Achieve optimal balance: 9: You
+```
+**您的學習目標**：本課結束時，您將建立一套專業等級的狀態管理系統，可處理持久化、資料鮮度及可預測的更新——這些模式正是生產系統中使用的。
+
+## 課前小測驗
+
+[課前小測驗](https://ff-quizzes.netlify.app/web/quiz/47)
+
+## 介紹
 
-隨著網頁應用程式的規模增大，追蹤所有數據流變得越來越困難。哪些程式碼獲取數據，哪些頁面使用數據，數據需要在何時何地更新……很容易導致程式碼混亂且難以維護。尤其是當需要在應用程式的不同頁面之間共享數據時，例如用戶數據。*狀態管理*的概念一直存在於各類程式中，但隨著網頁應用程式的複雜性不斷增加，狀態管理已成為開發過程中的關鍵點。
+狀態管理就像航行者號太空船上的導航系統——當一切運作順暢時，你幾乎感覺不到它的存在。但當事情出錯時，它就決定了你是能抵達星際空間，還是迷失在宇宙虛空中。在網頁開發中，狀態代表應用程式需要記住的一切：使用者登入狀態、表單資料、導覽歷史和臨時介面狀態。
 
-在這最後一部分，我們將重新審視我們建立的應用程式，重新思考如何管理狀態，以支持瀏覽器在任何時候刷新，並在用戶會話之間持續保存數據。
+隨著您的銀行應用程式從簡單的登入表單演進成更複雜的應用，您很可能已遇到一些常見挑戰。重新整理頁面時用戶意外登出。關閉瀏覽器所有進度消失。除錯時你得在多重函式中追蹤相同資料的多種寫入方式。
 
-### 前置條件
+這些並非程式編寫不佳的跡象——而是當應用達到某種複雜度門檻時，必然會出現的成長痛。每位開發者都會在應用從「概念驗證」進展到「可投入生產」時遇到這類挑戰。
 
-您需要完成本課程的網頁應用程式的[數據獲取](../3-data/README.md)部分。此外，您需要安裝 [Node.js](https://nodejs.org) 並[在本地運行伺服器 API](../api/README.md)，以便管理帳戶數據。
+在本課中，我們將實作集中式狀態管理系統，將您的銀行應用程式轉變為可靠且專業的產品。您將學會可預測地管理資料流，適當地持久化使用者會話，並創造現代網路應用所需的流暢用戶體驗。
 
-您可以通過在終端執行以下命令來測試伺服器是否正常運行：
+## 先決條件
+
+在深入狀態管理概念之前，請確保您的開發環境已正確設定，且銀行應用程式基礎已建立。本課程直接建立在本系列前幾部分的概念與程式碼之上。
+
+請確保您已備妥以下組件後再繼續：
+
+**必要設定：**
+- 完成[資料擷取課程](../3-data/README.md) - 您的應用程式應能成功載入並顯示帳戶資料
+- 在您的系統上安裝[Node.js](https://nodejs.org)以執行後端API
+- 本機啟動[伺服器API](../api/README.md)來處理帳戶資料操作
+
+**測試您的環境：**
+
+在終端機執行以下指令，以驗證API伺服器是否正常運作：
 
 ```sh
 curl http://localhost:5000/api
-# -> should return "Bank API v1.0.0" as a result
+# -> 應該返回 "Bank API v1.0.0" 作為結果
 ```
 
+**此指令功能：**
+- **送出** GET 請求至您本機的API伺服器
+- **測試**連線且驗證伺服器回應
+- **回傳**API版本資訊（如一切正常）
+
+## 🧠 狀態管理架構概述
+
+```mermaid
+mindmap
+  root((狀態管理))
+    Current Problems
+      Session Loss
+        頁面重新整理問題
+        瀏覽器關閉影響
+        變數重置問題
+      Scattered Updates
+        多重修改點
+        除錯挑戰
+        不可預測行為
+      Incomplete Cleanup
+        登出狀態問題
+        記憶體洩漏
+        安全性疑慮
+    Centralized Solutions
+      Unified State Object
+        單一真實來源
+        可預測結構
+        可擴充基礎
+      Controlled Updates
+        不可變模式
+        使用 Object.freeze
+        基於函數的更改
+      State Tracking
+        歷史管理
+        除錯可見性
+        變更稽核
+    Persistence Strategies
+      localStorage Integration
+        會話持續性
+        JSON 序列化
+        自動同步
+      Data Freshness
+        伺服器更新
+        過期資料處理
+        平衡優化
+      Storage Optimization
+        最小資料
+        效能重點
+        安全性考量
+```
+**核心原理**：專業的狀態管理在可預測性、持久化和效能之間取得平衡，打造從簡單互動到複雜應用流程皆可擴展的可靠用戶體驗。
+
 ---
 
-## 重新思考狀態管理
+## 診斷目前的狀態問題
 
-在[上一課](../3-data/README.md)中，我們在應用程式中引入了一個基本的狀態概念，即全局變數 `account`，它包含當前登錄用戶的銀行數據。然而，我們目前的實現存在一些缺陷。嘗試在儀表板頁面刷新瀏覽器。會發生什麼？
+就像福爾摩斯檢視案發現場，我們必須完全了解當前實作中到底發生了什麼，才能破解消失的使用者會話之謎。
 
-目前程式碼有三個問題：
+讓我們執行一個簡單實驗，揭露潛藏的狀態管理挑戰：
 
-- 狀態未持久化，瀏覽器刷新會將您帶回登錄頁面。
-- 有多個函數修改狀態。隨著應用程式的增長，這可能使追蹤更改變得困難，並且容易忘記更新某些部分。
-- 狀態未清理，因此當您點擊*登出*時，帳戶數據仍然存在，即使您已回到登錄頁面。
+**🧪 嘗試這個診斷測試：**
+1. 登入您的銀行應用並導航至儀表板
+2. 重新整理瀏覽器頁面
+3. 觀察您的登入狀態發生了什麼
 
-我們可以逐一更新程式碼以解決這些問題，但這會導致程式碼重複並使應用程式更加複雜且難以維護。或者，我們可以暫停幾分鐘，重新思考我們的策略。
+若您被導回登入畫面，您就遇到了經典的狀態持久化問題。這是因為我們目前的實作將使用者資料儲存在會在每次頁面載入時重置的 JavaScript 變數中。
 
-> 我們真正想要解決的問題是什麼？
+**目前的實作問題：**
 
-[狀態管理](https://en.wikipedia.org/wiki/State_management)的核心在於找到一個良好的方法來解決以下兩個特定問題：
+來自我們[前一課程](../3-data/README.md)中簡易的 `account` 變數造成三個重大問題，影響使用者體驗與程式碼可維護性：
 
-- 如何使應用程式中的數據流易於理解？
-- 如何確保狀態數據始終與用戶界面保持同步（反之亦然）？
+| 問題 | 技術原因 | 使用者影響 |
+|---------|--------|----------------|
+| **會話丟失** | 頁面重新整理清空 JavaScript 變數 | 使用者需頻繁重新認證 |
+| **更新分散** | 多個函式直接改寫狀態 | 除錯難度逐漸升高 |
+| **清理不完整** | 登出未清除所有狀態引用 | 潛在安全與隱私風險 |
 
-一旦解決了這些問題，您可能面臨的其他問題要麼已經解決，要麼變得更容易解決。有許多可能的方法可以解決這些問題，但我們將採用一種常見的解決方案，即**集中化數據及其更改方式**。數據流將如下所示：
+**架構挑戰：**
 
-![顯示 HTML、用戶操作和狀態之間數據流的示意圖](../../../../translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.hk.png)
+宛如鐵達尼號的隔艙設計看似堅固，卻在多艙同時淹水時崩潰，單獨修補這些問題無法解決根本架構缺陷。我們需要全面的狀態管理解決方案。
 
-> 我們在此不會涵蓋數據自動觸發視圖更新的部分，因為它涉及到更高級的[反應式編程](https://en.wikipedia.org/wiki/Reactive_programming)概念。如果您有興趣深入研究，這是一個不錯的後續主題。
+> 💡 **我們到底想達成什麼？**
 
-✅ 市面上有許多不同方法的狀態管理庫，[Redux](https://redux.js.org) 是一個流行的選擇。了解其使用的概念和模式通常是一個很好的方式，可以幫助您了解在大型網頁應用程式中可能面臨的問題以及如何解決。
+[狀態管理](https://en.wikipedia.org/wiki/State_management) 實際上是兩大基本問題的解決：
 
-### 任務
+1. **我的資料在哪？**：追蹤我們擁有什麼資訊及其來源
+2. **是否資訊一致？**：確保使用者所見即資料實際情況
+
+**我們的策略：**
+
+不再蛇行亂撞，而是建立 **集中式狀態管理** 系統。想像有一名非常有組織的專責人員主控所有重要事物：
+
+![Schema showing the data flows between the HTML, user actions and state](../../../../translated_images/data-flow.fa2354e0908fecc8.hk.png)
+
+```mermaid
+flowchart TD
+    A[用戶操作] --> B[事件處理器]
+    B --> C[更新狀態函數]
+    C --> D{狀態驗證}
+    D -->|有效| E[創建新狀態]
+    D -->|無效| F[錯誤處理]
+    E --> G[物件凍結]
+    G --> H[更新本地儲存]
+    H --> I[觸發介面更新]
+    I --> J[用戶看到變更]
+    F --> K[用戶看到錯誤]
+    
+    subgraph "狀態管理層"
+        C
+        E
+        G
+    end
+    
+    subgraph "持久層"
+        H
+        L[本地儲存]
+        H -.-> L
+    end
+```
+**理解此資料流：**
+- **集中管理**所有應用狀態於單一位置
+- **路由**所有狀態變更透過受控函式
+- **確保**介面與當前狀態同步
+- **提供**清晰且可預測的資料管理模式
+
+> 💡 **專業洞見**：本課專注於基礎概念。對於複雜應用，像是[Redux](https://redux.js.org)等函式庫提供了更進階的狀態管理功能。理解這些核心原則將有助您精通任何狀態管理庫。
+
+> ⚠️ **進階主題**：我們這裡不會介紹由狀態變更自動觸發的UI更新，此屬於[反應式編程](https://en.wikipedia.org/wiki/Reactive_programming)範疇。可視為學習之路的優秀後續課題！
+
+### 任務：集中狀態結構
+
+讓我們開始將分散的狀態管理轉換成集中系統。這第一步為接下來的所有改進奠定基礎。
+
+**步驟1：建立中央狀態物件**
 
-我們將從一些重構開始。替換 `account` 的聲明：
+取代簡單的 `account` 宣告：
 
 ```js
 let account = null;
 ```
 
-改為：
+改為有結構的狀態物件：
 
 ```js
 let state = {
@@ -75,31 +244,112 @@ let state = {
 };
 ```
 
-這個想法是將我們的應用程式數據*集中化*到一個單一的狀態對象中。目前狀態中只有 `account`，因此變化不大，但這為未來的擴展奠定了基礎。
+**為何這改動重要：**
+- **集中管理**所有應用資料於單一地點
+- **為未來擴充狀態屬性做好準備**
+- **建立狀態與其它變數間清晰界線**
+- **確立隨應用成長而擴展的設計模式**
+
+**步驟2：更新狀態存取模式**
+
+修改函式以使用新的狀態結構：
 
-我們還需要更新使用它的函數。在 `register()` 和 `login()` 函數中，將 `account = ...` 替換為 `state.account = ...`;
+**在 `register()` 與 `login()` 函式中**，將：
+```js
+account = ...
+```
 
-在 `updateDashboard()` 函數的頂部，添加以下行：
+改為：
+```js
+state.account = ...
+```
 
+**在 `updateDashboard()` 函式頂部**新增：
 ```js
 const account = state.account;
 ```
 
-這次重構本身並未帶來太多改進，但其目的是為接下來的更改奠定基礎。
+**這些更新達成：**
+- **維持既有功能同時改善結構**
+- **為更先進的狀態管理做準備**
+- **建立一致的狀態資料存取模式**
+- **奠定集中式狀態更新的基礎**
+
+> 💡 **注意**：此重構尚未立即解決問題，但為後續強力改進打造關鍵基礎！
+
+### 🎯 教學點檢：集中原則
+
+**暫停反思**：您剛實作出集中式狀態管理的基礎。這是關鍵架構決策。
+
+**自我評估：**
+- 您能說明為何集中狀態於單一物件比分散變數更好嗎？
+- 若忘記更新某函式改用 `state.account`，會發生什麼事？
+- 此模式如何為您的程式碼準備好先進功能？
 
-## 追蹤數據更改
+**實務連結**：您學到的集中模式正是現代框架如 Redux、Vuex 和 React Context 的架構基礎。您正在建構大型應用的同樣架構思維。
 
-現在我們已經設置了 `state` 對象來存儲數據，下一步是集中更新。目的是使追蹤任何更改及其發生時間變得更容易。
+**挑戰題**：若需新增使用者偏好（主題、語言）到應用狀態，您會把它們加在哪？如何擴展？
 
-為了避免對 `state` 對象進行更改，將其視為[*不可變*](https://en.wikipedia.org/wiki/Immutable_object)是一個良好的做法，這意味著它完全不能被修改。這也意味著如果您想更改其中的任何內容，必須創建一個新的狀態對象。通過這樣做，您可以防止潛在的[副作用](https://en.wikipedia.org/wiki/Side_effect_(computer_science))，並為應用程式的新功能（例如實現撤銷/重做）打開可能性，同時使調試更容易。例如，您可以記錄對狀態所做的每次更改，並保留更改的歷史記錄，以了解錯誤的來源。
+## 實作受控狀態更新
 
-在 JavaScript 中，您可以使用 [`Object.freeze()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze) 創建對象的不可變版本。如果嘗試更改不可變對象，將引發異常。
+狀態集中後，下一步是建立受控資料修改機制。這種作法確保狀態變更可預測且易於除錯。
 
-✅ 您知道*淺層*和*深層*不可變對象的區別嗎？您可以在[這裡](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze#What_is_shallow_freeze)閱讀相關內容。
+核心原理像空中交通管制：不允許多個函式獨立更改狀態，而是所有改動都經由單一、受控函式。此模式提供清晰監控變更時機和方式。
 
+**不可變狀態管理：**
+
+我們將視 `state` 物件為[*不可變物件*](https://en.wikipedia.org/wiki/Immutable_object)，意即永不直接修改它。每次變更都會建立一個新的狀態物件，內含更新後的資料。
+
+此策略初看起來似乎比直接修改效率低，但它在除錯、測試及維持應用可預測性方面優勢明顯。
+
+**不可變狀態管理的好處：**
+
+| 好處 | 說明 | 影響 |
+|---------|-------------|--------|
+| **可預測性** | 變更僅透過受控函式發生 | 降低除錯與測試難度 |
+| **歷史追蹤** | 每個狀態變更都建立新物件 | 支援復原/重做功能 |
+| **避免副作用** | 無意外修改 | 預防神祕錯誤 |
+| **效能優化** | 容易判斷狀態是否變更 | 支援高效介面更新 |
+
+**JavaScript的不可變性：`Object.freeze()`**
+
+JavaScript 提供 [`Object.freeze()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze) 防止物件被修改：
+
+```js
+const immutableState = Object.freeze({ account: userData });
+// 任何嘗試修改 immutableState 嘅行為都會引發錯誤
+```
+
+**解析此處發生的事：**
+- **防止**直接指派或刪除屬性
+- **若嘗試修改會拋出例外**
+- **確保**狀態變更必須走受控函式
+- **建立**狀態更新明確規範
+
+> 💡 **深入了解**：可參考[MDN文件](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze#What_is_shallow_freeze) 中淺層與深度不可變物件的差異。這對複雜狀態結構至關重要。
+
+```mermaid
+stateDiagram-v2
+    [*] --> StateV1: 初始狀態
+    StateV1 --> StateV2: updateState('account', newData)
+    StateV2 --> StateV3: updateState('account', anotherUpdate)
+    StateV3 --> StateV4: updateState('preferences', userSettings)
+    
+    note right of StateV1
+        Object.freeze()
+        不變性
+        可除錯
+    end note
+    
+    note right of StateV2
+        新對象被創建
+        保留之前狀態
+        可預測的變化
+    end note
+```
 ### 任務
 
-讓我們創建一個新的 `updateState()` 函數：
+讓我們建立新的 `updateState()` 函式：
 
 ```js
 function updateState(property, newData) {
@@ -110,9 +360,9 @@ function updateState(property, newData) {
 }
 ```
 
-在此函數中，我們創建了一個新的狀態對象，並使用[*展開運算符 (`...`)*](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Spread_in_object_literals)從之前的狀態中複製數據。然後，我們使用[方括號表示法](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties) `[property]` 覆蓋狀態對象的特定屬性。最後，我們使用 `Object.freeze()` 鎖定對象以防止修改。目前狀態中僅存儲 `account` 屬性，但使用此方法，您可以在狀態中添加任意多的屬性。
+此函式中，我們利用[*展開(...)*運算子](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Spread_in_object_literals)創建新的狀態物件，複製先前狀態資料，之後用[中括號符號](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties) `[property]` 覆寫特定屬性。最後用 `Object.freeze()` 鎖定物件防止修改。現在狀態中只有 `account` 屬性，但此設計容許您隨時新增多個狀態屬性。
 
-我們還需要更新 `state` 的初始化，以確保初始狀態也是不可變的：
+此外，我們同時更新 `state` 初始值，確保初始狀態也被凍結：
 
 ```js
 let state = Object.freeze({
@@ -120,21 +370,21 @@ let state = Object.freeze({
 });
 ```
 
-之後，更新 `register` 函數，將 `state.account = result;` 替換為：
+接著，在 `register` 函式中將 `state.account = result;` 改為：
 
 ```js
 updateState('account', result);
 ```
 
-對 `login` 函數進行相同的操作，將 `state.account = data;` 替換為：
+同理，在 `login` 函式中將 `state.account = data;` 改為：
 
 ```js
 updateState('account', data);
 ```
 
-現在我們可以趁機修復用戶點擊*登出*時帳戶數據未清除的問題。
+我們也趁此機會修正使用者點擊*登出*時帳戶資料未清除的問題。
 
-創建一個新的函數 `logout()`：
+建立新函式 `logout()`：
 
 ```js
 function logout() {
@@ -143,49 +393,123 @@ function logout() {
 }
 ```
 
-在 `updateDashboard()` 中，將重定向 `return navigate('/login');` 替換為 `return logout();`;
+在 `updateDashboard()` 中，將導向 `return navigate('/login');` 改為 `return logout()`；
 
-嘗試註冊新帳戶，登出並再次登錄，檢查是否一切正常。
+嘗試註冊新帳戶，登出再登入，確認一切功能正常。
 
-> 提示：您可以通過在 `updateState()` 的底部添加 `console.log(state)` 並打開瀏覽器的開發工具中的控制台來查看所有狀態更改。
+> 小提示：您可以在 `updateState()` 函式底部新增 `console.log(state)`，開啟瀏覽器開發者工具的控制台查看所有狀態變更。
 
-## 持久化狀態
+## 實作資料持久化
 
-大多數網頁應用程式需要持久化數據才能正常工作。所有關鍵數據通常存儲在數據庫中，並通過伺服器 API 訪問，例如我們的用戶帳戶數據。但有時，將某些數據存儲在瀏覽器中運行的客戶端應用程式中也是有益的，這可以改善用戶體驗或提高加載性能。
+先前發現的會話丟失問題需要持久化方案，讓使用者狀態在瀏覽器會話間得以保存。這使我們的應用從短暫體驗轉變為可靠且專業的工具。
 
-當您想在瀏覽器中持久化數據時，有幾個重要問題需要問自己：
+想像原子鐘即便斷電也能維持精準時間，因為它將關鍵狀態存放在非揮發性記憶。網頁應用同理，需要持久化存儲機制，以保存重要使用者資料穿越瀏覽器會話與頁面重整。
 
-- *數據是否敏感？* 您應避免在客戶端存儲任何敏感數據，例如用戶密碼。
-- *您需要保存這些數據多久？* 您是僅在當前會話中訪問這些數據，還是希望永久保存？
+**資料持久化的策略性問題：**
 
-根據您的需求，有多種方法可以在網頁應用程式中存儲信息。例如，您可以使用 URL 存儲搜索查詢，並使其可在用戶之間共享。您還可以使用[HTTP Cookie](https://developer.mozilla.org/docs/Web/HTTP/Cookies) 如果需要與伺服器共享數據，例如[身份驗證](https://en.wikipedia.org/wiki/Authentication)信息。
+在實作持久化前，請考慮以下關鍵因素：
 
-另一個選擇是使用瀏覽器提供的多種存儲數據的 API，其中有兩個特別值得注意：
+| 問題 | 銀行應用情境 | 決策影響 |
+|----------|-------------------|----------------|
+| **資料是否敏感？** | 帳戶餘額、交易歷史 | 選擇安全的儲存方式 |
+| **應該持續多久？** | 登入狀態 vs. 臨時介面設定偏好 | 選擇適當的儲存時間 |
+| **伺服器需要它嗎？** | 驗證令牌 vs. 介面設定 | 判斷共享需求 |
 
-- [`localStorage`](https://developer.mozilla.org/docs/Web/API/Window/localStorage)：一個[鍵值存儲](https://en.wikipedia.org/wiki/Key%E2%80%93value_database)，允許跨不同會話持久化特定於當前網站的數據。存儲在其中的數據永不過期。
-- [`sessionStorage`](https://developer.mozilla.org/docs/Web/API/Window/sessionStorage)：其工作方式與 `localStorage` 相同，但存儲在其中的數據在會話結束（瀏覽器關閉時）時會被清除。
+**瀏覽器儲存選項：**
 
-請注意，這兩個 API 只允許存儲[字符串](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)。如果您想存儲複雜對象，則需要使用 [`JSON.stringify()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify) 將其序列化為 [JSON](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON) 格式。
+現代瀏覽器提供多種儲存機制，每種皆為不同使用情境設計：
 
-✅ 如果您想創建一個不依賴伺服器的網頁應用程式，也可以使用 [`IndexedDB` API](https://developer.mozilla.org/docs/Web/API/IndexedDB_API) 在客戶端創建數據庫。這適用於高級用例或需要存儲大量數據的情況，因為它使用起來更為複雜。
+**主要儲存 API：**
 
-### 任務
+1. **[`localStorage`](https://developer.mozilla.org/docs/Web/API/Window/localStorage)**：持久的[鍵值儲存](https://en.wikipedia.org/wiki/Key%E2%80%93value_database)
+   - **持久**保存資料於瀏覽器會話間無限期  
+   - **可持續**瀏覽器重啟與電腦重開後依然存在
+   - **限制於**特定網站網域範圍
+   - **適合**用戶偏好設定及登入狀態
 
-我們希望用戶在明確點擊*登出*按鈕之前保持登錄狀態，因此我們將使用 `localStorage` 存儲帳戶數據。首先，定義一個用於存儲數據的鍵。
+2. **[`sessionStorage`](https://developer.mozilla.org/docs/Web/API/Window/sessionStorage)**：臨時會話儲存
+   - 在活動會話期間**功能與 localStorage 相同**
+   - 瀏覽器分頁關閉時**自動清除**
+   - **理想用於**不需持續的暫存資料
+
+3. **[HTTP Cookies](https://developer.mozilla.org/docs/Web/HTTP/Cookies)**：伺服器共享儲存
+   - 會**自動隨每次伺服器請求發送**
+   - **適合**[驗證](https://en.wikipedia.org/wiki/Authentication)令牌
+   - **大小有限制**且可能影響效能
+
+**資料序列化需求：**
+
+`localStorage` 與 `sessionStorage` 僅能儲存[字串](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)：
+
+```js
+// 將物件轉換為 JSON 字串以便儲存
+const accountData = { user: 'john', balance: 150 };
+localStorage.setItem('account', JSON.stringify(accountData));
+
+// 檢索時將 JSON 字串解析回物件
+const savedAccount = JSON.parse(localStorage.getItem('account'));
+```
+
+**了解序列化：**
+- 使用 [`JSON.stringify()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify) **將 JavaScript 物件轉換為 JSON 字串**
+- 使用 [`JSON.parse()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse) **從 JSON 解析回物件**
+- **自動處理**複雜的巢狀物件與陣列
+- **無法處理**函式、未定義值及循環參考
+
+> 💡 **進階選項**：針對複雜離線應用及大型資料集，考慮使用 [`IndexedDB` API](https://developer.mozilla.org/docs/Web/API/IndexedDB_API)。它提供完整的客戶端資料庫，但實作較為繁複。
+
+```mermaid
+quadrantChart
+    title 瀏覽器儲存選項
+    x-axis 低複雜度 --> 高複雜度
+    y-axis 短期 --> 長期
+    
+    quadrant-1 專業工具
+    quadrant-2 簡易持久性
+    quadrant-3 臨時儲存
+    quadrant-4 進階系統
+    
+    localStorage: [0.3, 0.8]
+    sessionStorage: [0.2, 0.2]
+    HTTP Cookies: [0.6, 0.7]
+    IndexedDB: [0.9, 0.9]
+    Memory Variables: [0.1, 0.1]
+```
+### 任務：實作 localStorage 持久性
+
+讓我們實作持久化儲存，讓使用者在未明確登出前持續保持登入。我們將使用 `localStorage` 於瀏覽器會話間儲存帳戶資料。
+
+**步驟 1：定義儲存設定**
 
 ```js
 const storageKey = 'savedAccount';
 ```
 
-然後在 `updateState()` 函數的末尾添加以下行：
+**此常數提供：**
+- **建立**一致的儲存資料識別標誌
+- **避免**儲存鍵名稱拼字錯誤
+- **方便**日後需更換儲存鍵時調整
+- **遵循**可維護程式碼的最佳實務
+
+**步驟 2：新增自動持久化**
+
+於 `updateState()` 函式結尾加入這行：
 
 ```js
 localStorage.setItem(storageKey, JSON.stringify(state.account));
 ```
 
-通過這樣做，用戶帳戶數據將被持久化並始終保持最新，因為我們之前已集中化了所有狀態更新。這是我們開始從之前的所有重構中受益的地方 🙂。
+**解析執行流程：**
+- **將**帳戶物件轉換為 JSON 字串存檔
+- **以**一致的儲存鍵保存資料
+- **每當狀態更新時自動執行**
+- **確保**儲存資料隨時與當前狀態保持同步
 
-由於數據已保存，我們還需要在應用程式加載時恢復它。由於我們將開始擁有更多初始化程式碼，因此創建一個新的 `init` 函數可能是一個好主意，該函數還包括之前在 `app.js` 底部的程式碼：
+> 💡 **架構優勢**：由於所有狀態更新都集中在 `updateState()`，加入持久化只需一行程式碼，展現良好架構設計的威力！
+
+**步驟 3：於應用載入還原狀態**
+
+建立初始化函數來還原儲存資料：
 
 ```js
 function init() {
@@ -194,7 +518,7 @@ function init() {
     updateState('account', JSON.parse(savedAccount));
   }
 
-  // Our previous initialization code
+  // 我們之前的初始化代碼
   window.onpopstate = () => updateRoute();
   updateRoute();
 }
@@ -202,17 +526,63 @@ function init() {
 init();
 ```
 
-在此，我們檢索保存的數據，如果有任何數據，我們會相應地更新狀態。重要的是在更新路由*之前*執行此操作，因為在頁面更新期間可能有程式碼依賴於狀態。
+**理解初始化流程：**
+- **從 localStorage 讀取**先前儲存的帳戶資料（如有）
+- **解析** JSON 字串回 JavaScript 物件
+- **用受控更新函式**更新狀態
+- **分頁載入時自動還原**使用者會話
+- **於路由更新前執行**，確保狀態可用
+
+**步驟 4：優化預設路由**
+
+更新預設路由以善用持久化：
+
+於 `updateRoute()`，替換：
+```js
+// 替換：return navigate('/login');
+return navigate('/dashboard');
+```
+
+**此改動理由：**
+- **有效利用**新持久化系統
+- **讓**儀表板能處理驗證檢查
+- **若無已保存會話，自動導向登入頁**
+- **打造更流暢的用戶體驗**
+
+**測試您的實作：**
+
+1. 登入您的銀行應用
+2. 重新整理瀏覽器頁面
+3. 確認仍保持登入且在儀表板頁面
+4. 關閉並重新開啟瀏覽器
+5. 回到應用驗證仍持續登入
+
+🎉 **成就解鎖**：您已成功實作持久狀態管理！您的應用現在表現如專業網頁應用。
+
+### 🎯 教學檢查：持久化架構
 
-我們還可以將*儀表板*頁設為應用程式的默認頁面，因為我們現在正在持久化帳戶數據。如果未找到數據，儀表板會負責重定向到*登錄*頁面。在 `updateRoute()` 中，將回退 `return navigate('/login');` 替換為 `return navigate('/dashboard');`。
+**架構理解**：您已實作出平衡使用者體驗與資料管理複雜度的進階持久層。
 
-現在登錄應用程式並嘗試刷新頁面。您應該停留在儀表板頁面。通過此更新，我們已解決所有初始問題...
+**掌握重點概念**：
+- **JSON 序列化**：將複雜物件轉為可儲存的字串
+- **自動同步**：狀態變更自動觸發儲存
+- **會話恢復**：應用可於中斷後復原用戶上下文
+- **集中管理持久化**：一個更新函式處理所有儲存
 
-## 刷新數據
+**產業連結**：此持久化模式為漸進式網頁應用（PWA）、離線優先應用及現代行動網頁體驗的基礎。您正在打造生產級能力。
 
-...但我們可能也創造了一個新問題。糟糕！
+**反思問題**：若需同一設備支持多用戶帳號，您會如何修改此系統？請考慮隱私與安全性。
 
-使用 `test` 帳戶進入儀表板，然後在終端運行以下命令以創建新交易：
+## 平衡持久化與資料新鮮度
+
+我們的持久系統成功維持使用者會話，卻帶來新挑戰：資料陳舊。當多使用者或應用修改同一伺服器資料時，當地快取資訊便會過時。
+
+此狀況如維京航海家同時依賴存有的星圖與當前星象觀測。星圖提供穩定性，但需即時觀測來應付變化。同理，我們的應用需要持久使用者狀態及最新伺服器資料兼顧。
+
+**🧪 發現資料新鮮度問題：**
+
+1. 使用 `test` 帳戶登入儀表板
+2. 開啟終端機執行下列指令模擬他方交易：
 
 ```sh
 curl --request POST \
@@ -221,15 +591,47 @@ curl --request POST \
      http://localhost:5000/api/accounts/test/transactions
 ```
 
-現在嘗試在瀏覽器中刷新儀表板頁面。會發生什麼？您是否看到新的交易？
-
-由於 `localStorage` 的狀態被無限期持久化，但這也意味著在您登出應用程式並再次登錄之前，它永遠不會更新！
-
-解決此問題的一種可能策略是每次加載儀表板時重新加載帳戶數據，以避免數據過時。
+3. 在瀏覽器刷新儀表板頁面
+4. 注意是否看到新的交易紀錄
+
+**此測試示範：**
+- **顯示**本地儲存可能變得「過時」
+- **模擬**真實世界資料於應用外部更新
+- **揭露**持久化與資料鮮度之間的衝突
+
+**資料陳舊挑戰：**
+
+| 問題 | 原因 | 使用者影響 |
+|---------|-------|-------------|
+| **資料陳舊** | localStorage 不會自動過期 | 使用者看到過時資訊 |
+| **伺服器更改** | 其他應用/用戶變更相同資料 | 各平台資料不同步 |
+| **快取與真實差異** | 本地快取與伺服器狀態不符 | 不佳用戶體驗與混淆 |
+
+**解決策略：**
+
+我們將實作「載入時刷新」方案，平衡持久化優點與資料新鮮需求。此方式維持流暢體驗同時確保資料正確。
+
+```mermaid
+sequenceDiagram
+    participant U as 用戶
+    participant A as 應用程式
+    participant L as 本地存儲
+    participant S as 伺服器
+    
+    U->>A: 打開應用程式
+    A->>L: 載入已保存狀態
+    L-->>A: 返回緩存數據
+    A->>U: 立即顯示界面
+    A->>S: 獲取最新數據
+    S-->>A: 返回當前數據
+    A->>L: 更新緩存
+    A->>U: 用最新數據更新界面
+```
+### 任務：實作資料刷新系統
 
-### 任務
+建立系統自動從伺服器抓取最新資料，同時維持持久狀態管理優點。
 
-創建一個新的函數 `updateAccountData`：
+**步驟 1：建立帳戶資料更新器**
 
 ```js
 async function updateAccountData() {
@@ -247,9 +649,15 @@ async function updateAccountData() {
 }
 ```
 
-此方法檢查我們當前是否已登錄，然後從伺服器重新加載帳戶數據。
+**此函式邏輯說明：**
+- **檢查**用戶是否登入（state.account 是否存在）
+- **無有效會話即導向登出**
+- **利用現有 `getAccount()` 函式從伺服器取得新資料**
+- **伺服器錯誤時優雅處理，登出無效會話**
+- **使用受控更新系統更新狀態為最新**
+- **觸發 `updateState()` 自動儲存 localStorage**
 
-創建另一個名為 `refresh` 的函數：
+**步驟 2：建立儀表板刷新處理器**
 
 ```js
 async function refresh() {
@@ -258,7 +666,15 @@ async function refresh() {
 }
 ```
 
-此函數更新帳戶數據，然後負責更新儀表板頁面的 HTML。這是我們需要在儀表板路由加載時調用的函數。使用以下程式碼更新路由定義：
+**刷新函式實現：**
+- **協調**資料刷新與介面更新流程
+- **等待**新資料載入後更新顯示
+- **確保**儀表板展現最即時資訊
+- **保持**資料管理與介面更新分離清晰
+
+**步驟 3：與路由系統整合**
+
+更新路由配置以自動觸發刷新：
 
 ```js
 const routes = {
@@ -267,28 +683,126 @@ const routes = {
 };
 ```
 
-現在嘗試刷新儀表板，它應顯示更新的帳戶數據。
+**整合方式說明：**
+- **每次儀表板路由載入時執行刷新**
+- **確保用戶瀏覽儀表板時看到最新資料**
+- **保留既有路由結構同時新增資料新鮮度**
+- **建立路由特定初始化一致模式**
+
+**測試您的資料刷新系統：**
+
+1. 登入您的銀行應用
+2. 執行之前的 curl 指令建立新交易
+3. 重新整理儀表板或離開再回來
+4. 確認新交易立刻出現
+
+🎉 **完美平衡**：您的應用成功結合持久狀態順暢體驗與最新伺服器資料準確性！
+
+## 📈 您的狀態管理精通時間軸
+
+```mermaid
+timeline
+    title 專業狀態管理旅程
+    
+    section 問題識別
+        State Issues Diagnosis
+            : 識別會話丟失問題
+            : 理解零散的更新問題
+            : 認識架構需求
+    
+    section 架構基礎
+        Centralized State Design
+            : 建立統一的狀態物件
+            : 實施受控的更新模式
+            : 制定不可變原則
+        
+        Predictable Updates
+            : 精通 Object.freeze() 用法
+            : 構建便於調試的系統
+            : 建立可擴展的模式
+    
+    section 持久化精通
+        localStorage Integration
+            : 處理 JSON 序列化
+            : 實現自動同步
+            : 創造會話連續性
+        
+        Data Freshness Balance
+            : 解決陳舊性挑戰
+            : 建立刷新機制
+            : 優化效能與準確性的平衡
+    
+    section 專業模式
+        Production-Ready Systems
+            : 實施錯誤處理
+            : 創造可維護的架構
+            : 遵循業界最佳實踐
+        
+        Advanced Capabilities
+            : 準備框架整合
+            : 準備應對複雜狀態需求
+            : 實時功能的基礎
+```
+**🎓 畢業里程碑**：您已使用類似 Redux、Vuex 等專業狀態庫的原理，成功建構完整狀態管理系統。這些模式可從簡易應用擴展至企業級應用。
 
----
+**🔄 下一階段能力：**
+- 準備掌握狀態管理框架（Redux、Zustand、Pinia）
+- 準備實作 WebSockets 實時功能
+- 有能力打造離線優先漸進式網頁應用（PWA）
+- 奠定狀態機與觀察者等進階模式的基礎
+
+## GitHub Copilot Agent 挑戰 🚀
+
+使用 Agent 模式完成以下挑戰：
+
+**描述：** 為銀行應用實作包含撤銷/重做功能的完整狀態管理系統。本挑戰將幫助您練習進階狀態管理概念，包括狀態歷史追蹤、不變式更新及介面同步。
+
+**提示：** 建立強化狀態管理系統，包含：1) 一個追蹤所有過去狀態的歷史陣列，2) 可回復前一狀態的撤銷與重做功能，3) 儀表板的撤銷/重做按鈕，4) 最多保存10個歷史狀態以防資源浪費，5) 使用者登出時清理歷史紀錄。確保撤銷/重做對帳戶餘額變更生效，並可持久於瀏覽器刷新後。
+
+更多資訊請見[agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode)。
+
+## 🚀 挑戰：儲存優化
+
+您已有效處理使用者會話、資料刷新與狀態管理。然而，請思考目前方法是否在儲存效率與功能間達到最佳平衡。
+
+如同棋手分辨必需子力與可犧牲兵卒，有效狀態管理需識別哪些資料必須持久保存，哪些應由伺服器保持即時更新。
+
+**優化分析：**
+
+評估您的 localStorage 實作並考慮以下策略問題：
+- 維持用戶認證需最少的資訊是什麼？
+- 哪些資料變動頻率高且本地快取效益低？
+- 如何優化儲存提升效能同時不損使用體驗？
+
+此類架構分析展現經驗豐富開發者同時考量功能與效率的能力。
+
+**實作策略：**
+- **鑑別**必須持久保存的核心資料（可能只需用戶身份標識）
+- **修改** localStorage 實作只存儲關鍵會話資料
+- **確保**儀表板訪問時總從伺服器載入最新資料
+- **測試**優化方案同時維持相同使用體驗
 
-## 🚀 挑戰
+**進階考量：**
+- **比較**保存完整帳戶資料與僅保存認證令牌的利弊
+- **紀錄**您的決策與原因供團隊未來參考
 
-現在我們每次加載儀表板時都會重新加載帳戶數據，您認為我們是否仍然需要持久化*所有帳戶*數據？
+此挑戰助您養成考慮用戶體驗與應用效率的專業開發者思維。請慢慢嘗試不同方案！
 
-嘗試一起合作更改 `localStorage` 中保存和加載的內容，以僅包含應用程式正常運行所需的絕對必要數據。
+## 講義結束測驗
 
-## 課後測驗
-[課後測驗](https://ff-quizzes.netlify.app/web/quiz/48)
+[講義結束測驗](https://ff-quizzes.netlify.app/web/quiz/48)
 
 ## 作業
 
-[實現「新增交易」對話框](assignment.md)
+[實作「新增交易」對話框](assignment.md)
 
-以下是完成作業後的範例結果：
+以下為完成作業後的示範結果：
 
-![截圖顯示範例「新增交易」對話框](../../../../translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.hk.png)
+![Screenshot showing an example "Add transaction" dialog](../../../../translated_images/dialog.93bba104afeb79f1.hk.png)
 
 ---
 
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
 **免責聲明**：  
-本文件已使用人工智能翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。儘管我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於重要信息，建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或錯誤解釋概不負責。
\ No newline at end of file
+本文件乃使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們盡力確保準確性，但請注意自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應視為權威版本。對於重要資訊，建議採用專業人工翻譯。我們對因使用本翻譯而產生的任何誤解或誤譯概不負責。
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->
\ No newline at end of file
diff --git a/translations/hk/7-bank-project/4-state-management/assignment.md b/translations/hk/7-bank-project/4-state-management/assignment.md
index c15ce842..9ec1688d 100644
--- a/translations/hk/7-bank-project/4-state-management/assignment.md
+++ b/translations/hk/7-bank-project/4-state-management/assignment.md
@@ -1,37 +1,164 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "f23a868536c07da991b1d4e773161e25",
-  "translation_date": "2025-08-24T00:15:11+00:00",
+  "original_hash": "50a7783473b39a2e0f133e271a102231",
+  "translation_date": "2026-01-06T12:57:07+00:00",
   "source_file": "7-bank-project/4-state-management/assignment.md",
   "language_code": "hk"
 }
 -->
-# 實現「新增交易」對話框
+# 實作「新增交易」對話框
 
-## 指引
+## 概述
 
-我們的銀行應用程式仍然缺少一個重要功能：輸入新交易的可能性。  
-運用你在前四節課中學到的所有知識，實現一個「新增交易」對話框：
+你的銀行應用程式現在已有穩固的狀態管理和資料持久化功能，但缺少一個真正銀行應用需要的重要功能：讓使用者新增自己的交易。在這個作業中，你將實作一個完整的「新增交易」對話框，並與你現有的狀態管理系統無縫整合。
 
-- 在儀表板頁面新增一個「新增交易」按鈕  
-- 可以選擇建立一個帶有 HTML 模板的新頁面，或者使用 JavaScript 來顯示/隱藏對話框的 HTML，而不離開儀表板頁面（你可以使用 [`hidden`](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/hidden) 屬性，或者 CSS 類別來實現）  
-- 確保你處理了[鍵盤和螢幕閱讀器的無障礙性](https://developer.paciellogroup.com/blog/2018/06/the-current-state-of-modal-dialog-accessibility/)  
-- 實現一個 HTML 表單來接收輸入數據  
-- 從表單數據創建 JSON 數據並發送到 API  
-- 使用新數據更新儀表板頁面  
+本作業結合了你在四堂銀行課程中學到的所有內容：HTML 模板、表單處理、API 整合和狀態管理。
 
-查看 [伺服器 API 規範](../api/README.md) 以了解需要調用的 API 以及預期的 JSON 格式。
+## 學習目標
 
-以下是完成作業後的範例結果：
+完成此作業後，你將能夠：
+- **建立** 使用者友善的對話框介面來輸入資料
+- **實作** 支援鍵盤和螢幕閱讀器的無障礙表單設計
+- **整合** 新功能至現有的狀態管理系統
+- **練習** API 通訊與錯誤處理
+- **應用** 現代網頁開發模式於實際功能
 
-![顯示「新增交易」對話框範例的截圖](../../../../7-bank-project/4-state-management/images/dialog.png)
+## 指示
+
+### 步驟 1：新增交易按鈕
+
+**建立** 一個「新增交易」按鈕於你的控制台頁面，使用者可以輕易找到並存取。
+
+**需求：**
+- **將** 按鈕放在控制台中合適的位置
+- **使用** 明確且行動導向的按鈕文字
+- **套用** 與現有介面設計一致的樣式
+- **確保** 按鈕可由鍵盤操作存取
+
+### 步驟 2：對話框實作
+
+從以下兩種方法中選擇一種來實作你的對話框：
+
+**選項 A：獨立頁面**
+- **建立** 新的 HTML 模板用於交易表單
+- **新增** 一個路由至你的路由系統
+- **實作** 導航至表單頁面與返回功能
+
+**選項 B：模態對話框（建議）**
+- **使用** JavaScript 於控制台內顯示/隱藏對話框，不離開控制台頁面
+- **使用** [`hidden` 屬性](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/hidden) 或 CSS 類別實作
+- **打造** 流暢的使用體驗，包含適當的焦點管理
+
+### 步驟 3：無障礙實作
+
+**確保** 對話框符合[模態對話框無障礙標準](https://developer.paciellogroup.com/blog/2018/06/the-current-state-of-modal-dialog-accessibility/)：
+
+**鍵盤導覽：**
+- **支援** 使用 Escape 鍵關閉對話框
+- **將** 焦點鎖定於對話框內開啟狀態
+- **關閉後** 將焦點回復至觸發按鈕
+
+**螢幕閱讀器支援：**
+- **添加** 適切的 ARIA 標籤與角色
+- **對** 對話框開啟/關閉做出螢幕閱讀器公告
+- **提供** 清楚的表單欄位標籤與錯誤訊息
+
+### 步驟 4：表單建立
+
+**設計** HTML 表單以收集交易資料：
+
+**必填欄位：**
+- **日期**：交易發生時間
+- **描述**：交易用途說明
+- **金額**：交易金額（正數為收入，負數為支出）
+
+**表單特色：**
+- **於送出前** 驗證使用者輸入
+- **提供** 明確的錯誤提示
+- **包含** 有助於輸入的 placeholder 及標籤
+- **樣式** 與你現有的設計一致
+
+### 步驟 5：API 整合
+
+**將** 你的表單與後端 API 連接：
+
+**實作步驟：**
+- **參考** [伺服器 API 規格](../api/README.md) 確認正確的端點與資料格式
+- **從表單輸入產生** JSON 資料
+- **利用適當的錯誤處理** 發送資料至 API
+- **向使用者顯示** 成功或失敗訊息
+- **優雅處理** 網路錯誤問題
+
+### 步驟 6：狀態管理整合
+
+**更新** 你的控制台以加入新交易：
+
+**整合需求：**
+- **新增交易成功後** 重新整理帳戶資料
+- **更新** 控制台顯示，不需重新載入頁面
+- **確保** 新交易即時出現
+- **維持** 整個流程中的狀態一致性
+
+## 技術規格
+
+**API 端點詳情：**
+參考 [伺服器 API 文件](../api/README.md) 了解：
+- 交易資料所需 JSON 格式
+- HTTP 方法與端點 URL
+- 預期回應格式
+- 錯誤回應處理
+
+**預期結果：**  
+完成作業後，你的銀行應用應具備完整且專業的「新增交易」功能：
+
+![顯示「新增交易」對話框範例的截圖](../../../../translated_images/dialog.93bba104afeb79f1.hk.png)
+
+## 測試你的實作
+
+**功能測試：**
+1. **確認** 「新增交易」按鈕明顯且可存取
+2. **測試** 對話框能正確開啟與關閉
+3. **確認** 表單驗證對所有必填欄位有效
+4. **檢查** 成功新增的交易能立即於控制台顯示
+5. **確保** 錯誤處理對無效資料及網路問題有效
+
+**無障礙測試：**
+1. **僅使用鍵盤** 執行整個操作流程
+2. **使用螢幕閱讀器測試** 確保適當公告
+3. **驗證** 焦點管理運作正常
+4. **檢查** 全部表單元件有適當標籤
 
 ## 評分標準
 
-| 評分標準 | 優秀                                                                                              | 合格                                                                                                                    | 需要改進                                     |
-| -------- | ------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------- | --------------------------------------------|
-|          | 完全按照課堂中學到的最佳實踐實現了新增交易功能。                                                  | 實現了新增交易功能，但未完全按照課堂中學到的最佳實踐，或者僅部分功能正常運作。                                           | 新增交易功能完全無法運作。                   |
+| 評分標準 | 優異 | 適當 | 需要改進 |
+| -------- | --------- | -------- | ----------------- |
+| **功能性** | 新增交易功能完美運作，使用體驗優秀，符合所有課程最佳實務 | 新增交易功能正常，可能未完全遵循部分最佳實務或有少許使用障礙 | 新增交易功能部分運作，或存在嚴重使用障礙 |
+| **程式碼品質** | 程式碼條理清晰，遵循既有設計模式，具備完善錯誤處理，且與現有狀態管理無縫整合 | 程式碼可運作，但可能有組織不佳或部分與現有程式不一致 | 程式碼結構問題嚴重，或無法良好整合既有系統 |
+| **無障礙** | 完整支援鍵盤導覽、螢幕閱讀器，符合 WCAG 指南，並具優良焦點管理 | 基本無障礙功能有實作，但可能缺少部分鍵盤導覽或螢幕閱讀器支援 | 幾乎無或未實作無障礙功能 |
+| **使用者體驗** | 介面直覺流暢，反饋清晰，互動順暢且具專業外觀 | 使用體驗良好，反饋或視覺設計有少許可改善之處 | 使用體驗差，介面混亂或缺乏反饋 |
+
+## 額外挑戰（選做）
+
+完成基本需求後，可考慮以下增強功能：
+
+**強化功能：**
+- **新增** 交易類別（餐飲、交通、娛樂等）
+- **實作** 即時反饋的輸入驗證
+- **為進階使用者建立** 鍵盤快捷鍵
+- **增加** 交易編輯與刪除功能
+
+**進階整合：**
+- **實作** 新增交易的復原功能
+- **新增** 由 CSV 檔案匯入大量交易功能
+- **建立** 交易搜尋與篩選功能
+- **實作** 資料匯出功能
+
+這些進階功能將幫助你練習更高階的網頁開發觀念，打造更完整的銀行應用程式！
+
+---
 
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
 **免責聲明**：  
-本文件已使用人工智能翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。儘管我們致力於提供準確的翻譯，請注意自動翻譯可能包含錯誤或不準確之處。原始語言的文件應被視為權威來源。對於重要資訊，建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或錯誤解釋概不負責。
\ No newline at end of file
+本文件由 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。儘管我們致力於確保準確性，但請注意自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於重要資訊，建議採用專業人工翻譯。我們不對因使用本翻譯而引起的任何誤解或誤釋負責。
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->
\ No newline at end of file
diff --git a/translations/hk/8-code-editor/1-using-a-code-editor/README.md b/translations/hk/8-code-editor/1-using-a-code-editor/README.md
index fc9feb27..8738308a 100644
--- a/translations/hk/8-code-editor/1-using-a-code-editor/README.md
+++ b/translations/hk/8-code-editor/1-using-a-code-editor/README.md
@@ -1,196 +1,639 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "f8d4b0284f3fc1de7eb65073d8338cca",
-  "translation_date": "2025-10-03T08:55:48+00:00",
+  "original_hash": "a9a3bcc037a447e2d8994d99e871cd9f",
+  "translation_date": "2026-01-06T12:23:51+00:00",
   "source_file": "8-code-editor/1-using-a-code-editor/README.md",
   "language_code": "hk"
 }
 -->
-***
-
-# 使用代碼編輯器：掌握 [VSCode.dev](https://vscode.dev)
-
-**歡迎！**  
-本課程將帶你從基礎到進階使用 [VSCode.dev](https://vscode.dev)——一個功能強大的基於網頁的代碼編輯器。你將學習如何自信地編輯代碼、管理項目、追蹤更改、安裝擴展以及像專業人士一樣進行協作——全部都可以直接在瀏覽器中完成，無需安裝。
-
-***
-
-## 學習目標
-
-完成本課程後，你將能夠：
-
-- 高效地在任何項目上使用代碼編輯器，隨時隨地
-- 使用內建的版本控制無縫追蹤工作
-- 通過編輯器自定義和擴展提升你的開發工作流程
-
-***
-
-## 先決條件
-
-開始之前，請**註冊一個免費的 [GitHub](https://github.com) 帳戶**，它可以幫助你管理代碼倉庫並與全球開發者協作。如果你還沒有帳戶，[點擊這裡創建一個](https://github.com/)。
-
-***
-
-## 為什麼使用基於網頁的代碼編輯器？
-
-像 VSCode.dev 這樣的**代碼編輯器**是你編寫、編輯和管理代碼的指揮中心。它擁有直觀的界面、豐富的功能，並且可以直接通過瀏覽器訪問，你可以：
-
-- 在任何設備上編輯項目
-- 避免安裝的麻煩
-- 即時協作和貢獻
-
-一旦熟悉了 VSCode.dev，你就能隨時隨地應對各種編碼任務。
-
-***
-
-## 開始使用 VSCode.dev
-
-打開 **[VSCode.dev](https://vscode.dev)**——無需安裝，無需下載。使用 GitHub 登錄可以解鎖完整功能，包括同步你的設置、擴展和倉庫。如果系統提示，請連接你的 GitHub 帳戶。
-
-加載後，你的工作區將如下所示：
-
-![Default VSCode.dev](../../../../8-code-editor/images/default-vscode-dev)
-
-VSCode.dev 的界面分為三個核心部分：
-
-- **活動欄：** 包括 🔎（搜索）、⚙️（設置）、文件、源代碼控制等圖標。
-- **側邊欄：** 根據選擇的活動欄圖標改變上下文（默認為 *Explorer*，顯示文件）。
-- **編輯器/代碼區域：** 右側最大部分——你實際編輯和查看代碼的地方。
+# 使用程式碼編輯器：精通 VSCode.dev
+
+記得《駭客任務》中尼歐必須連接到龐大的電腦終端來進入數碼世界嗎？現今的網頁開發工具則完全相反——強大功能，可隨時隨地使用。VSCode.dev 是一款基於瀏覽器的程式碼編輯器，將專業的開發工具帶到任何有網絡連接的裝置上。
+
+就像印刷機讓書籍普及到每個人，而不只是修道院的書吏一樣，VSCode.dev 讓編碼變得民主化。你可以在圖書館電腦、學校實驗室或任何有瀏覽器可用的地方工作。無需安裝，沒有「我需要特定設置」的限制。
+
+完成本課程後，你將會了解如何操作 VSCode.dev、直接在瀏覽器中打開 GitHub 倉庫，以及使用 Git 進行版本控制——這些都是專業開發者每日依賴的技能。
+
+## ⚡ 下一 5 分鐘你可以做什麼
+
+**忙碌開發者的快速入門路徑**
+
+```mermaid
+flowchart LR
+    A[⚡ 5 分鐘] --> B[訪問 vscode.dev]
+    B --> C[連接 GitHub 帳戶]
+    C --> D[打開任何儲存庫]
+    D --> E[即時開始編輯]
+```
+- **第 1 分鐘**：前往 [vscode.dev](https://vscode.dev) — 無需安裝
+- **第 2 分鐘**：使用 GitHub 登入以連接你的倉庫
+- **第 3 分鐘**：試試網址技巧：將任何倉庫的 `github.com` 改成 `vscode.dev/github`
+- **第 4 分鐘**：建立新檔案，觀看語法高亮自動啟用
+- **第 5 分鐘**：透過「原始碼控制」面板修改並提交變更
+
+**快速測試網址**：
+```
+# Transform this:
+github.com/microsoft/Web-Dev-For-Beginners
+
+# Into this:
+vscode.dev/github/microsoft/Web-Dev-For-Beginners
+```
+
+**為什麼這很重要**：5 分鐘內，你將體驗到隨時隨地使用專業工具編碼的自由。這是開發的未來——可及、強大又即時。
+
+## 🗺️ 你的雲端開發學習旅程
+
+```mermaid
+journey
+    title 從本地設置到雲端開發高手之路
+    section 了解平台
+      探索基於網頁的編輯：4: You
+      連接至 GitHub 生態系統：6: You
+      精通介面導航：7: You
+    section 檔案管理技巧
+      建立及組織檔案：5: You
+      使用語法高亮編輯：7: You
+      導覽專案結構：8: You
+    section 版本控制精通
+      了解 Git 整合：6: You
+      練習提交工作流程：8: You
+      掌握協作模式：9: You
+    section 專業自訂化
+      安裝強大擴充功能：7: You
+      設定開發環境：8: You
+      建構個人工作流程：9: You
+```
+**你的旅程目標**：完成本課後，你將掌握一個專業的雲端開發環境，能在任何裝置上工作，使用與大型科技公司開發者相同的工具進行編碼。
+
+## 你將學到什麼
+
+在一起學習後，你將能：
+
+- 像熟悉家一樣導航 VSCode.dev —— 不迷路地找到所需功能
+- 直接在瀏覽器中打開任意 GitHub 倉庫，立即開始編輯（非常神奇！）
+- 使用 Git 跟蹤變更，像專家一樣保存進度
+- 透過擴充功能強化編輯器，使編碼更快樂、更高效
+- 自信地建立及組織專案檔案
+
+## 你需要準備什麼
+
+需求很簡單：
+
+- 一個免費的 [GitHub 帳戶](https://github.com)（需要時我們會指導如何註冊）
+- 對網頁瀏覽器有基本認識
+- 《GitHub 基本概念》課程提供有用背景，但非必須
+
+> 💡 **GitHub 新手？** 註冊帳戶免費且僅需幾分鐘。就像圖書卡讓你能借閱全球書籍，GitHub 帳戶讓你接觸到網路上各種程式碼倉庫。
+
+## 🧠 雲端開發生態系統總覽
+
+```mermaid
+mindmap
+  root((VSCode.dev 精通))
+    Platform Benefits
+      Accessibility
+        裝置獨立
+        無需安裝
+        即時更新
+        通用存取
+      Integration
+        GitHub 連接
+        儲存庫同步
+        設定持久化
+        協作準備
+    Development Workflow
+      File Management
+        專案結構
+        語法高亮
+        多標籤編輯
+        自動儲存功能
+      Version Control
+        Git 整合
+        提交流程
+        分支管理
+        變更追蹤
+    Customization Power
+      Extensions Ecosystem
+        生產力工具
+        語言支援
+        主題選項
+        自訂快捷鍵
+      Environment Setup
+        個人偏好
+        工作區設定
+        工具整合
+        工作流程優化
+    Professional Skills
+      Industry Standards
+        版本控制
+        程式碼品質
+        協作
+        文件撰寫
+      Career Readiness
+        遠端工作
+        雲端開發
+        團隊專案
+        開源
+```
+**核心理念**：雲端開發環境代表了編碼的未來——提供專業級工具，可及、協作並且不受平台限制。
+
+## 為什麼 web-based 程式碼編輯器很重要
+
+在網際網路出現前，不同大學的科學家難以共享研究。1960年代，ARPANET 的出現連接了不同地點的電腦。基於網頁的程式碼編輯器遵循同一原則——無論身處何地或使用何種裝置，都能使用強大工具。
+
+程式碼編輯器就像你的開發工作空間，讓你撰寫、編輯並組織程式碼檔案。專業編輯器不同於簡單文字編輯器，提供語法高亮、錯誤偵測和專案管理功能。
+
+VSCode.dev 將這些功能帶入瀏覽器：
+
+**基於 Web 編輯的優勢：**
+
+| 功能 | 描述 | 實際好處 |
+|---------|-------------|----------|
+| **跨平台獨立** | 任何有瀏覽器的裝置均可執行 | 在不同電腦間無縫工作 |
+| **免安裝** | 透過網址訪問 | 避免軟體安裝限制 |
+| **自動更新** | 永遠使用最新版本 | 無需手動更新即可使用新功能 |
+| **倉庫整合** | 直接連接 GitHub | 不需本地檔案管理即可編輯程式碼 |
+
+**實務意義：**
+- 不同環境間工作連續性
+- 不受作業系統限制界面一致
+- 即時協作能力
+- 降低本地儲存需求
+
+## 探索 VSCode.dev
+
+正如瑪麗·居里實驗室內雖空間簡單卻配備先進設備，VSCode.dev 也將專業開發工具濃縮在瀏覽器介面中。這款 Web 應用提供與桌面程式碼編輯器相同核心功能。
+
+首先在瀏覽器中前往 [vscode.dev](https://vscode.dev)。介面無需下載或系統安裝——雲端運算原理的直接應用。
+
+### 連接你的 GitHub 帳戶
+
+如同亞歷山大·格雷厄姆·貝爾電話連接遠方，連結 GitHub 帳戶將 VSCode.dev 與你的程式碼倉庫橋接。當系統提示使用 GitHub 登入時，建議接受連接。
+
+**GitHub 整合提供：**
+- 在編輯器內直接存取你的倉庫
+- 跨裝置同步設定與擴充功能
+- 流暢的保存到 GitHub 工作流程
+- 個人化開發環境
+
+### 認識你的新工作區
+
+一切載入後，你將看到一個簡潔美觀的工作區，設計來幫助你專注於重要的事——你的程式碼！
+
+![Default VSCode.dev interface](../../../../translated_images/default-vscode-dev.5d06881d65c1b323.hk.png)
+
+**這是你的區域導覽：**
+- **活動欄**（左側條）：主導航含資源管理器 📁、搜尋 🔍、原始碼控制 🌿、擴充功能 🧩、設定 ⚙️
+- **側邊欄**（旁邊面板）：根據你選擇的功能顯示相關資訊
+- **編輯區域**（中間大空間）：魔法所在——你的主要寫碼區域
+
+**花點時間探索：**
+- 按一下活動欄圖示，看看各個功能
+- 注意側邊欄如何根據選擇更新資訊——相當酷吧？
+- 資源管理器 (📁) 可能是你主要使用的地方，好好熟悉它
+
+```mermaid
+flowchart TB
+    subgraph "VSCode.dev 介面架構"
+        A[活動列] --> B[檔案總管 📁]
+        A --> C[搜尋 🔍]
+        A --> D[原始碼管理 🌿]
+        A --> E[擴充功能 🧩]
+        A --> F[設定 ⚙️]
+        
+        B --> G[檔案樹]
+        C --> H[尋找與取代]
+        D --> I[Git 狀態]
+        E --> J[擴充功能市集]
+        F --> K[設定]
+        
+        L[側邊欄] --> M[內容面板]
+        N[編輯區域] --> O[程式碼檔案]
+        P[終端機/輸出] --> Q[命令列]
+    end
+```
+## 打開 GitHub 倉庫
 
-點擊圖標探索功能，但記得返回 _Explorer_ 保持位置。
+在網路出現前，研究者必須親赴圖書館查閱資料。GitHub 倉庫也類似，是遠端儲存的程式碼集合。VSCode.dev 省去了將倉庫下載到本地的傳統步驟即可編輯。
 
-***
+這項功能可以讓你即時訪問任何公開倉庫，進行查看、編輯或貢獻。以下是兩種打開倉庫的方法：
 
-## 打開 GitHub 倉庫
+### 方法一：點擊操作法
 
-### 方法一：通過編輯器
+當你剛開始用 VSCode.dev，想打開特定倉庫時，這是簡單且適合新手的方式：
 
-1. 打開 [VSCode.dev](https://vscode.dev)。點擊 **"Open Remote Repository"**。
+**操作流程：**
 
-   ![Open remote repository](../../../../8-code-editor/images/open-remote-repository)
+1. 如果還沒在，先前往 [vscode.dev](https://vscode.dev)
+2. 在歡迎頁尋找「Open Remote Repository」按鈕並點擊
 
-   或者使用 _命令面板_（Ctrl-Shift-P，Mac 上為 Cmd-Shift-P）。
+   ![Open remote repository](../../../../translated_images/open-remote-repository.bd9c2598b8949e7f.hk.png)
 
-   ![Palette Menu](../../../../translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.hk.png)
+3. 貼上任何 GitHub 倉庫網址（試試這個：`https://github.com/microsoft/Web-Dev-For-Beginners`）
+4. 按 Enter，見證魔法發生！
 
-   - 選擇該選項。
-   - 粘貼你的 GitHub 倉庫 URL（例如 `https://github.com/microsoft/Web-Dev-For-Beginners`），然後按 Enter。
+**進階技巧 - 指令面板快捷鍵：**
 
-如果成功，你將看到整個項目加載並準備好進行編輯！
+想感受成為編碼魔法師的感覺？試試這個鍵盤快捷鍵：Ctrl+Shift+P（Mac 上為 Cmd+Shift+P），開啟指令面板：
 
-***
+![Command Palette](../../../../translated_images/palette-menu.4946174e07f42622.hk.png)
 
-### 方法二：通過 URL 快速打開
+**指令面板就像你所有操作的搜尋引擎：**
+- 輸入「open remote」立刻找到開啟遠端倉庫功能
+- 記住你最近開啟過的倉庫（超方便！）
+- 習慣後會覺得速度快得驚人
+- 基本上就是 VSCode.dev 的「嘿 Siri，但用於編碼」
 
-將任何 GitHub 倉庫 URL 替換 `github.com` 為 `vscode.dev/github`，即可直接在 VSCode.dev 中打開。  
-例如：
+### 方法二：網址改寫技巧
 
-- GitHub: `https://github.com/microsoft/Web-Dev-For-Beginners`
-- VSCode.dev: `https://vscode.dev/github/microsoft/Web-Dev-For-Beginners`
+就像 HTTP 和 HTTPS 使用不同協議但域名結構相同，VSCode.dev 使用的網址模式也模擬 GitHub 的系統。任何 GitHub 倉庫網址都可以修改成直接用 VSCode.dev 打開。
 
-此功能能快速訪問任何項目。
+**網址轉換格式：**
 
-***
+| 倉庫類別 | GitHub 網址 | VSCode.dev 網址 |
+|----------------|---------------------|----------------|
+| **公開倉庫** | `github.com/microsoft/Web-Dev-For-Beginners` | `vscode.dev/github/microsoft/Web-Dev-For-Beginners` |
+| **個人專案** | `github.com/your-username/my-project` | `vscode.dev/github/your-username/my-project` |
+| **任何可訪問倉庫** | `github.com/their-username/awesome-repo` | `vscode.dev/github/their-username/awesome-repo` |
 
-## 編輯項目中的文件
+**使用方法：**
+- 將 `github.com` 替換成 `vscode.dev/github`
+- 其他 URL 部分保持不變
+- 適用於任何公開可訪問倉庫
+- 立刻進入編輯狀態
 
-倉庫打開後，你可以：
+> 💡 **改變人生的技巧**：將你最愛倉庫的 VSCode.dev 版加入書籤。我有「編輯個人作品集」跟「修正文檔」這類書籤，點開就直達編輯模式！
 
-### 1. **創建新文件**
-- 在 *Explorer* 側邊欄中，導航到你想要的文件夾或使用根目錄。
-- 點擊 _‘New file ...’_ 圖標。
-- 命名你的文件，按 **Enter**，文件會立即出現。
+**該用哪種方法？**
+- **介面法**：適合探索或忘記準確倉庫名稱時用
+- **網址技巧**：知道確切位置時快速上手
 
-![Create a new file](../../../../8-code-editor/images/create-new-file)
+### 🎯 教學檢視：雲端開發存取
 
-### 2. **編輯和保存文件**
+**停下來想想**：你剛學會兩種透過瀏覽器存取程式碼倉庫的方法，這代表了開發工作方式的根本改變。
 
-- 點擊 *Explorer* 中的文件以在代碼區域中打開。
-- 根據需要進行更改。
-- VSCode.dev 會自動保存你的更改，但你也可以按 Ctrl+S 手動保存。
+**快速自我測試：**
+- 你能說明為什麼 Web 編輯免除了傳統「開發環境設置」嗎？
+- 網址改寫技巧比本地 git 克隆有什麼好處？
+- 這種方法如何改變你對開源專案貢獻的可能性？
 
-![Edit a file](../../../../translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.hk.png)
+**現實連結**：GitHub、GitLab與Replit等大型公司打造的開發平台皆基於這些雲端優先原則。你正在學習全球專業開發團隊使用的工作流程。
 
-### 3. **使用版本控制追蹤和提交更改**
+**挑戰題**：雲端開發如何改變學校的程式設計教學？試想裝置需求、軟體管理與協作可能性。
 
-VSCode.dev 集成了 **Git** 版本控制！
+## 使用檔案與專案
 
-- 點擊 _'Source Control'_ 圖標查看所有更改。
-- `Changes` 文件夾中的文件顯示新增（綠色）和刪除（紅色）。  
-  ![View changes](../../../../translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.hk.png)
+現在你已經打開一個倉庫，開始建構吧！VSCode.dev 為你提供建立、編輯及組織程式碼檔案所需一切。把它想成你的數位工作坊——所有工具盡在你手旁。
 
-- 點擊文件旁的 `+` 準備提交更改。
-- 點擊撤銷圖標 **丟棄** 不需要的更改。
-- 輸入清晰的提交信息，然後點擊勾號提交並推送。
+讓我們深入介紹那些將佔你大部分編碼流程的日常任務。
 
-要返回 GitHub 倉庫，選擇左上角的漢堡菜單。
+### 建立新檔案
 
-![Stage & commit changes](../../../../8-code-editor/images/edit-vscode.dev)
+就像建築師辦公室整理藍圖一樣，VSCode.dev 中檔案建立有條理。系統支援所有標準網頁開發檔案類型。
 
-***
+**建立檔案流程：**
 
-## 使用擴展提升功能
+1. 在資源管理器側邊欄中導航到目標資料夾
+2. 將滑鼠移到資料夾名稱旁，會出現「新檔案」圖示（📄+）
+3. 輸入包含正確副檔名的檔名（如 `style.css`、`script.js`、`index.html`）
+4. 按 Enter 建立檔案
 
-擴展可以為 VSCode.dev 添加語言支持、主題、調試工具和生產力工具——讓你的編碼生活更輕鬆、更有趣。
+![Creating a new file](../../../../translated_images/create-new-file.2814e609c2af9aeb.hk.png)
 
-### 瀏覽和管理擴展
+**命名規範：**
+- 使用描述性名稱以表明檔案用途
+- 包含副檔名以啟用正確語法高亮
+- 專案中保持命名一致
+- 使用小寫字母及連字號，避免空格
 
-- 點擊活動欄上的 **Extensions 圖標**。
-- 在 _'Search Extensions in Marketplace'_ 框中搜索擴展。
+### 編輯與保存檔案
 
-  ![Extension details](../../../../8-code-editor/images/extension-details)
+真正的樂趣開始！VSCode.dev 編輯器充滿貼心功能，讓編碼體驗流暢直覺。就像有一位超棒的寫作助手，但專門為程式碼設計。
 
-  - **已安裝：** 所有你添加的擴展
-  - **熱門：** 行業最受歡迎的擴展
-  - **推薦：** 根據你的工作流程量身定制
+**你的編輯流程：**
 
-  ![View extensions](
+1. 點擊資源管理器中的任意檔案以在主區域打開
+2. 開始輸入，觀看 VSCode.dev 為你提供顏色標示、建議及錯誤提示
+3. 用 Ctrl+S（Windows/Linux）或 Cmd+S（Mac）保存工作——但它也會自動保存！
 
-  
+![Editing files in VSCode.dev](../../../../translated_images/edit-a-file.52c0ee665ef19f08.hk.png)
 
-***
+**編碼時有趣的事情：**
+- 程式碼會被漂亮地著色，閱讀方便
+- VSCode.dev 會根據你的輸入做自動補全（比自動更正還智能）
+- 在你保存前就能抓到錯字和錯誤
+- 可同時打開多個檔案標籤，像瀏覽器分頁一樣
+- 背景自動保存所有變更
 
-### 1. **安裝擴展**
+> ⚠️ **快速提示**：雖然自動保存可靠，但養成按 Ctrl+S 或 Cmd+S 的習慣不錯。這能立刻保存並觸發額外的錯誤檢查功能。
 
-- 在搜索框中輸入擴展名稱，點擊它，並在編輯器中查看詳細信息。
-- 點擊側邊欄或主代碼區域中的 **藍色安裝按鈕**。
+### 透過 Git 進行版本控制
 
-  ![Install extensions](../../../../8-code-editor/images/install-extension)
+就像考古學家詳細記錄挖掘層次，Git 跟蹤你程式碼的歷史變化。它保存專案歷程，必要時可回溯舊版本。VSCode.dev 整合了 Git 功能。
 
-### 2. **自定義擴展**
+**原始碼控制介面：**
 
-- 找到你已安裝的擴展。
-- 點擊 **齒輪圖標** → 選擇 _Extension Settings_，根據喜好微調行為。
+1. 透過活動欄中的 🌿 圖示打開原始碼控制面板
+2. 已修改檔案會出現在「Changes」區域
+3. 顏色標示變更類型：綠色代表新增，紅色代表刪除
+
+![Viewing changes in Source Control](../../../../translated_images/working-tree.c58eec08e6335c79.hk.png)
+
+**保存工作（提交工作流程）：**
+
+```mermaid
+flowchart TD
+    A[對檔案進行更改] --> B[在源代碼控制中查看更改]
+    B --> C[點擊 + 將更改加入暫存區]
+    C --> D[撰寫描述性提交訊息]
+    D --> E[點擊勾選標記提交]
+    E --> F[將更改推送到 GitHub]
+```
+```mermaid
+stateDiagram-v2
+    [*] --> Modified: 編輯檔案
+    Modified --> Staged: 按 + 來暫存
+    Staged --> Modified: 按 - 來取消暫存
+    Staged --> Committed: 新增訊息並提交
+    Committed --> [*]: 同步至 GitHub
+    
+    state Committed {
+        [*] --> LocalCommit
+        LocalCommit --> RemotePush: 自動同步
+    }
+```
+**步驟指引：**
+- 點擊檔案旁 "+" 圖示，將想要保存的檔案「暫存」起來
+- 仔細檢查你對所有已暫存更改是否滿意
+- 寫一段簡短的說明解釋你做了什麼（這就是你的「提交訊息」）
+- 點擊勾選按鈕將所有內容保存至 GitHub
+- 如果你改變主意，撤銷圖示允許你放棄更改
+
+**撰寫良好提交訊息（比你想像的容易！）：**
+- 只需描述你做了什麼，例如「新增聯絡表單」或「修正壞掉的導覽」
+- 保持簡短有力 – 想像成推文長度，而非論文
+- 開頭使用動作動詞如「新增」、「修正」、「更新」或「移除」
+- **良好範例**：「新增響應式導覽選單」、「修正行動版版面問題」、「更新色彩以改善可及性」
+
+> 💡 **快速導航提示**：使用左上角的漢堡選單 (☰) 快速返回你的 GitHub 倉庫，並查看你線上提交的更改。這就像你編輯環境與 GitHub 項目主頁之間的橋樑！
+
+## 透過擴充功能強化功能
+
+就像工匠的工作坊擁有各種專用工具一樣，VSCode.dev 也可以藉由擴充功能來客製化，增添特定的能力。這些由社群開發的外掛解決常見的開發需求，例如程式碼格式化、即時預覽和強化的 Git 整合。
+
+擴充功能市集提供成千上萬個由全球開發者創建的免費工具。每個擴充功能皆針對特定工作流程挑戰提供解決方案，讓你建立符合個人需求和偏好的專屬開發環境。
+
+```mermaid
+mindmap
+  root((擴充生態系統))
+    Essential Categories
+      Productivity
+        Live Server
+        Auto Rename Tag
+        Bracket Pair Colorizer
+        GitLens
+      Code Quality
+        Prettier
+        ESLint
+        Spell Checker
+        Error Lens
+      Language Support
+        HTML CSS Support
+        JavaScript ES6
+        Python Extension
+        Markdown Preview
+      Themes & UI
+        Dark+ Modern
+        Material Icon Theme
+        Peacock
+        Rainbow Brackets
+    Discovery Methods
+      Popular Rankings
+        Download Counts
+        User Ratings
+        Recent Updates
+        Community Reviews
+      Recommendations
+        Workspace Suggestions
+        Language-based
+        Workflow-specific
+        Team Standards
+```
+### 尋找適合你的擴充功能
+
+擴充功能市集結構清晰，所以你不會迷失，輕鬆找到所需。它設計用於幫助你探索特定工具，以及你甚至不知道存在的酷炫東西！
+
+**進入市集的方法：**
+
+1. 點擊活動列中的擴充功能圖示 (🧩)
+2. 瀏覽或搜尋特定項目
+3. 點擊任何看起來有趣的項目以了解更多
+
+![Extension marketplace interface](../../../../translated_images/extensions.eca0e0c7f59a10b5.hk.png)
+
+**你會看到的內容：**
+
+| 區塊 | 內容 | 為何有用 |
+|----------|---------|----------|
+| **已安裝** | 你已安裝的擴充功能 | 你的個人程式工具箱 |
+| **熱門** | 大眾最愛 | 多數開發者推薦的 |
+| **推薦** | 專案的智慧建議 | VSCode.dev 的貼心推薦 |
+
+**讓瀏覽更簡易的原因：**
+- 每個擴充功能會顯示評分、下載數及用戶評論
+- 有截圖和清晰的功能說明
+- 清楚標記相容性資訊
+- 類似擴充會被建議，方便比較選擇
+
+### 安裝擴充功能（超簡單！）
+
+為編輯器新增功能只需點擊按鈕。擴充功能幾秒鐘內完成安裝並立即生效—不需重新啟動，也不用等。
+
+**你需要做的步驟：**
+
+1. 搜尋你想要的功能（試試搜尋 "live server" 或 "prettier"）
+2. 點擊看起來不錯的擴充功能，查看詳情
+3. 閱讀功能說明並確認評分
+4. 按下藍色的「安裝」按鈕，搞定！
+
+![Installing extensions](../../../../8-code-editor/images/install-extension.gif)
+
+**幕後發生的事：**
+- 擴充功能會自動下載並完成設定
+- 新功能立刻在介面中出現
+- 立即開始運作（真的這麼快！）
+- 如果你已登入，擴充還會同步到所有裝置
+
+**建議初學時安裝的擴充功能：**
+- **Live Server**：你編碼時網站會即時更新（超神奇！）
+- **Prettier**：自動讓你的程式碼美觀且專業
+- **Auto Rename Tag**：改一個 HTML 標籤，對應的也會同步更新
+- **Bracket Pair Colorizer**：用顏色標記括號，避免搞混
+- **GitLens**：強化 Git 功能，提供豐富資訊
+
+### 自訂你的擴充功能
+
+大多數擴充功能都有設定可以調整，讓它們符合你的使用習慣。就像調整汽車座椅和後視鏡，每個人的偏好都不同！
+
+**調整擴充功能設定：**
+
+1. 在擴充功能面板找到已安裝的擴充
+2. 點選名稱旁邊的小齒輪圖示 (⚙️)
+3. 從下拉選單中選「擴充功能設定」
+4. 依照工作流程調整到自己喜歡的狀態
+
+![Customizing extension settings](../../../../translated_images/extension-settings.21c752ae4f4cdb78.hk.png)
+
+**常見調整項目：**
+- 程式碼格式設定（tab 或空白鍵、最大行長等）
+- 哪些鍵盤快速鍵觸發不同動作
+- 擴充作用的檔案類型
+- 開啟或關閉特定功能，保持界面簡潔
+
+### 管理你的擴充功能
+
+當你發現更多好用擴充，會希望保持擴充清單整齊且順暢運作。VSCode.dev 讓這一切管理起來非常方便。
+
+**你可以進行的操作：**
+
+| 操作 | 何時有用 | 小技巧 |
+|--------|---------|----------|
+| **停用** | 測試是否是擴充功能導致問題 | 如果會想再用，停用比刪除好 |
+| **解除安裝** | 完全移除不需要的擴充功能 | 保持環境乾淨且效率 |
+| **更新** | 獲取最新功能和錯誤修正 | 通常會自動，但值得確認 |
+
+**我的管理方式：**
+- 每隔幾個月檢視已安裝擴充，移除不再用的
+- 維持擴充最新版，確保功能與安全
+- 如果覺得速度變慢，暫時禁用擴充來測試
+- 大型更新時會閱讀更新說明，常有新功能！
+
+> ⚠️ **效能提示**：擴充功能很棒，但太多會拖慢速度。專注在真正提升你工作效率的，不用怕刪除從未使用過的。
+
+### 🎯 教學檢核：開發環境客製化
+
+**架構認知**：你已學會使用社群開發的擴充，打造專業開發環境。這就像企業團隊建立標準化工具鏈。
+
+**掌握的核心概念**：
+- **擴充發掘**：尋找解決特定開發需求的工具
+- **環境設定**：依個人或團隊偏好調整工具
+- **效能最佳化**：在功能與系統效能間取得平衡
+- **社群協作**：利用全球開發者社群的創作
+
+**業界連結**：擴充生態系是 VS Code、Chrome DevTools 及現代 IDE 等主要開發平台的動力。理解如何評估、安裝和設定擴充是專業開發流程必備技能。
+
+**反思問題**：你會如何為 10 人開發團隊設定標準化開發環境？請考慮一致性、效能和個人偏好。
+
+## 📈 你的雲端開發精熟時間軸
+
+```mermaid
+timeline
+    title 專業雲端開發之旅
+    
+    section 平台基礎
+        雲端開發理解
+            : 精通基於網頁的編輯概念
+            : 連接 GitHub 整合模式
+            : 操控專業介面
+    
+    section 工作流程精通
+        檔案與專案管理
+            : 建立有組織的專案結構
+            : 精通語法高亮的好處
+            : 處理多檔案編輯工作流程
+        
+        版本控制整合
+            : 理解 Git 視覺化
+            : 練習提交訊息標準
+            : 精通變更追蹤工作流程
+    
+    section 環境自訂
+        擴充生態系統
+            : 發掘生產力擴充功能
+            : 配置開發喜好設定
+            : 優化效能與功能
+    
+        專業設定
+            : 建立一致的工作流程
+            : 創建可重複使用的配置
+            : 制定團隊標準
+    
+    section 產業準備
+        雲端優先開發
+            : 精通遠端開發作法
+            : 理解協作工作流程
+            : 建立平台獨立技能
+        
+        專業實務
+            : 遵循產業標準
+            : 創建可維護的工作流程
+            : 準備團隊環境
+```
+**🎓 畢業里程碑**：你已成功掌握使用專業科技公司開發者相同工具和流程的雲端開發。這些技能代表軟體開發的未來。
+
+**🔄 下一階段能力**：
+- 準備探索進階的雲端開發平台（Codespaces、GitPod）
+- 能夠在分散式開發團隊中合作
+- 具備為全球開源專案貢獻的能力
+- 建立現代 DevOps 與持續整合流程的基礎
+
+## GitHub Copilot Agent 挑戰 🚀
+
+就像 NASA 太空任務的系統化方法，這挑戰要求你全面應用 VSCode.dev 技能完成完整工作流程。
+
+**目標：** 展示運用 VSCode.dev，在網頁開發工作流程的熟練度。
+
+**專案需求：** 使用 Agent 模式協助完成：
+1. 分叉現有倉庫或建立新倉庫
+2. 建立包含 HTML、CSS 及 JavaScript 檔案的功能性專案結構
+3. 安裝並設定三個增進開發效能的擴充功能
+4. 練習版本控管並撰寫描述性提交訊息
+5. 嘗試建立與修改功能分支
+6. 在 README.md 文件中紀錄流程與學習心得
+
+此練習將所有 VSCode.dev 概念統整為實務工作流程，可應用於未來開發專案。
+
+深入了解 [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode)。
 
-  ![Modify extension settings](../../../../8-code-editor/images/extension-settings)
+## 作業
 
-### 3. **管理擴展**
-你可以：
+是時候實際應用所學了！我準備了一個實作專案，讓你練習我們涵蓋的全部內容：[使用 VSCode.dev 建立履歷網站](./assignment.md)
 
-- **禁用：** 暫時關閉擴展但保留安裝
-- **卸載：** 如果不再需要，永久移除擴展
+此作業帶你從頭到尾用瀏覽器建構專業履歷網站。你會使用所有探索過的 VSCode.dev 功能，完成後不僅擁有美觀網站，也對新流程充滿信心。
 
-  找到擴展，點擊齒輪圖標，選擇 "Disable" 或 "Uninstall"，或者使用代碼區域中的藍色按鈕。
+## 持續探索並提升技能
 
-***
+你已打下堅實基礎，但還有更多精彩內容待發掘！以下是提升 VSCode.dev 技能的資源與建議：
 
-## 作業
+**官方文件推薦收藏：**
+- [VSCode Web Documentation](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) – 瀏覽器編輯的完整指南
+- [GitHub Codespaces](https://docs.github.com/en/codespaces) – 當你想要更強大的雲端力量時
 
-測試你的技能：[使用 vscode.dev 創建一個簡歷網站](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/8-code-editor/1-using-a-code-editor/assignment.md)
+**後續可試的酷功能：**
+- **鍵盤快捷鍵**：學習讓你成為編碼忍者的快速鍵組合
+- **工作區設定**：為不同專案類型設置不同環境
+- **多根目錄工作區**：同時操作多個倉庫（非常方便！）
+- **終端機整合**：直接在瀏覽器存取命令列工具
 
-***
+**練習建議：**
+- 投入開源專案，使用 VSCode.dev 貢獻程式碼—回饋社群的好方法！
+- 試用不同擴充找到你的完美設定
+- 建立常用網站類型的專案模板
+- 練習 Git 工作流程，如分支與合併—團隊合作中的關鍵技能
 
-## 深入探索和自學
+---
 
-- 通過 [VSCode Web 官方文檔](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) 深入了解。
-- 探索進階工作區功能、快捷鍵和設置。
+**你已精通瀏覽器開發！** 🎉 就像可攜式儀器讓科學家能在偏遠地點研究一樣，VSCode.dev 讓你從任何連網裝置進行專業編碼。
 
-***
+這些技能反映當前產業實務，很多專業開發者使用雲端開發環境以追求靈活與可及性。你已學會的工作流程，能從個人專案擴展至大型團隊協作。
 
-**現在你已準備好隨時隨地使用 VSCode.dev 進行編碼、創建和協作！**
+將這些技術運用到你的下一個開發專案吧！🚀
 
 ---
 
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
 **免責聲明**：  
-本文件已使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。儘管我們致力於提供準確的翻譯，請注意自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於關鍵資訊，建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或錯誤解釋概不負責。
\ No newline at end of file
+本文件乃透過 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。儘管我們致力於確保準確性，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件以其母語版本為權威依據。對於重要資訊，建議尋求專業人工翻譯。本公司對於因使用本翻譯而引起的任何誤解或誤釋不負任何責任。
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->
\ No newline at end of file
diff --git a/translations/hk/8-code-editor/1-using-a-code-editor/assignment.md b/translations/hk/8-code-editor/1-using-a-code-editor/assignment.md
index 1db6287d..0cf74ba8 100644
--- a/translations/hk/8-code-editor/1-using-a-code-editor/assignment.md
+++ b/translations/hk/8-code-editor/1-using-a-code-editor/assignment.md
@@ -1,263 +1,593 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "bd3aa6d2b879c30ea496c43aec1c49ed",
-  "translation_date": "2025-08-29T15:09:44+00:00",
+  "original_hash": "effe56ba51c38d7bdfad1ea38288666b",
+  "translation_date": "2026-01-06T12:26:51+00:00",
   "source_file": "8-code-editor/1-using-a-code-editor/assignment.md",
   "language_code": "hk"
 }
 -->
-# 使用 vscode.dev 建立履歷網站
+# 使用 VSCode.dev 建立履歷網站
 
-_當招聘人員要求你的履歷時，你能直接發送一個網址給他們，這是不是很酷？_ 😎
+建立一個專業的履歷網站，展示你的技能和經驗，以互動且現代的形式呈現，從而提升你的職業前景。與直接傳送傳統 PDF 不同，想像一下能向招聘者提供一個時尚、響應式的網站，既展示你的資格，也展現你的網頁開發能力。
 
-<!----
-TODO: 添加一張可選的圖片
-![使用代碼編輯器](../../../../translated_images/webdev101-vscode-dev.f53c14e8dad231ea09d9e07a2db4a01551d2dc6cdf21225038389e11156af023.hk.png)
-> 手繪筆記由 [作者名稱](https://example.com) 提供
----->
+這個實作作業讓你將所有 VSCode.dev 技能付諸實踐，同時建立對你的職涯真正有用的東西。你將體驗完整的網頁開發工作流程——從建立版本庫到部署——全部在瀏覽器中完成。
 
-<!---
-## 課前測驗
-[課前測驗](https://ff-quizzes.netlify.app/web/quiz/3)
----->
+完成此專案後，你將擁有一個專業的線上存在，能輕鬆與潛在雇主分享，隨著你的技能成長而更新，並根據個人品牌進行客製化。這正是展現真實世界網頁開發技能的實際專案。
 
-## 目標
+## 學習目標
 
-完成這個任務後，你將學會：
+完成這個作業後，你將能夠：
 
-- 建立一個網站來展示你的履歷
+- **使用 VSCode.dev 建立和管理完整的網頁開發專案**
+- **使用語意化 HTML 元素架構專業網站**
+- **利用現代 CSS 技術設計響應式版面**
+- **使用基本網頁技術實作互動功能**
+- **部署可分享 URL 的線上網站**
+- **在開發過程中展現版本控制最佳實務**
 
-### 先決條件
+## 先備條件
 
-1. 一個 GitHub 帳戶。如果你還沒有帳戶，請前往 [GitHub](https://github.com/) 註冊。
+開始此作業前請確保你已：
 
-## 步驟
+- 擁有 GitHub 帳戶（如尚無，請至 [github.com](https://github.com/) 註冊）
+- 完成 VSCode.dev 課程，熟悉介面導覽與基本操作
+- 具備基本 HTML 結構與 CSS 樣式概念
 
-**步驟 1：** 建立一個新的 GitHub 儲存庫，命名為 `my-resume`
+## 專案設置與版本庫建立
 
-**步驟 2：** 在你的儲存庫中建立一個 `index.html` 文件。我們需要在 github.com 上至少添加一個文件，因為空的儲存庫無法在 vscode.dev 中打開。
+讓我們從建立專案基礎開始。這個流程模擬真實開發時適當建立版本庫和規劃結構的作法。
 
-點擊 `creating a new file` 鏈接，輸入文件名稱 `index.html`，然後選擇 `Commit new file` 按鈕。
+### 第 1 步：建立你的 GitHub 版本庫
 
-![在 github.com 上建立新文件](../../../../translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.hk.png)
+建立專屬版本庫能確保你的專案從一開始就有良好組織與版本控管。
 
-**步驟 3：** 打開 [VSCode.dev](https://vscode.dev)，選擇 `Open Remote Repository` 按鈕。
+1. **前往** [GitHub.com](https://github.com) 並登入帳號
+2. **點擊** 右上角的綠色「New」按鈕或「+」圖示
+3. **命名**你的版本庫為 `my-resume`（或依個人喜好如 `john-smith-resume`）
+4. **加入**簡短描述：「專業履歷網站，使用 HTML 和 CSS 建立」
+5. **選擇**「Public」使履歷能讓潛在雇主存取
+6. **勾選**「Add a README file」以建立初始專案說明
+7. **點擊**「Create repository」完成設置
 
-複製你剛剛為履歷網站建立的儲存庫的網址，並將其粘貼到輸入框中：
+> 💡 **版本庫命名技巧**：使用清楚且專業的名稱來表明專案目的，有助於分享給雇主或作品集展示。
 
-_將 `your-username` 替換為你的 GitHub 用戶名_
+### 第 2 步：初始化專案結構
 
+因 VSCode.dev 需要有至少一個檔案才能打開版本庫，我們先在 GitHub 上直接建立主要 HTML 檔。
+
+1. **點擊**新版本庫中的「creating a new file」連結
+2. **輸入**檔案名稱為 `index.html`
+3. **加入**以下初始 HTML 結構：
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Your Name - Professional Resume</title>
+</head>
+<body>
+    <h1>Your Name</h1>
+    <p>Professional Resume Website</p>
+</body>
+</html>
 ```
-https://github.com/your-username/my-resume
-```
 
-✅ 如果成功，你將在瀏覽器中的文本編輯器中看到你的項目和 `index.html` 文件。
 
-![建立新文件](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.hk.png)
+4. **輸入**提交訊息：「Add initial HTML structure」
+5. **點擊**「Commit new file」儲存變更
+
+![在 GitHub 建立初始檔案](../../../../translated_images/new-file-github.com.c886796d800e8056.hk.png)
+
+**這初始設置達成的效果：**
+- **建立**正確的 HTML5 文件結構，使用語意標籤
+- **包含**視窗元標籤，以支援響應式設計
+- **設定**描述性頁面標題，顯示於瀏覽器分頁
+- **打下**專業內容組織的基礎
+
+## 在 VSCode.dev 工作
+
+確立版本庫基礎後，我們轉至 VSCode.dev 進行主要開發。此網頁編輯器具備專業網頁開發所需的各項工具。
+
+### 第 3 步：在 VSCode.dev 開啟專案
+
+1. **於新分頁開啟** [vscode.dev](https://vscode.dev)
+2. **點擊**歡迎畫面的「Open Remote Repository」
+3. **從 GitHub 複製**你的版本庫 URL 並貼上輸入框
+
+   格式：`https://github.com/your-username/my-resume`
+   
+   *將 `your-username` 替換成你的 GitHub 使用者名稱*
+
+4. **按下** Enter 載入專案
+
+✅ **成功指標**：你會看到專案檔案呈現在側邊欄中，且能在主要編輯區編輯 `index.html`。
+
+![專案載入 VSCode.dev](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7fe.hk.png)
+
+**介面中你將看到：**
+- **Explorer 側邊欄**：**顯示**版本庫檔案與資料夾結構
+- **編輯區**：**呈現**選取檔案內容供編輯
+- **活動列**：**提供**存取原始碼控制、擴充功能等
+- **狀態列**：**顯示**連線狀態與當前分支資訊
+
+### 第 4 步：建立你的履歷內容
 
-**步驟 4：** 打開 `index.html` 文件，將以下代碼粘貼到代碼區域並保存。
+用完整的履歷結構替換 `index.html` 中的佔位內容。此 HTML 提供專業資格展示的基礎。
 
 <details>
-    <summary><b>負責履歷網站內容的 HTML 代碼。</b></summary>
+<summary><b>完整 HTML 履歷結構</b></summary>
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="style.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
+    <title>Your Name - Professional Resume</title>
+</head>
+<body>
+    <header id="header">
+        <h1>Your Full Name</h1>
+        <hr>
+        <p class="role">Your Professional Title</p>
+        <hr>
+    </header>
     
-        <html>
-
-            <head>
-                <link href="style.css" rel="stylesheet">
-                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
-                <title>你的名字在這裡！</title>
-            </head>
-            <body>
-                <header id="header">
-                    <!-- 履歷標題，包含你的名字和職稱 -->
-                    <h1>你的名字在這裡！</h1>
-                    <hr>
-                    你的角色！
-                    <hr>
-                </header>
-                <main>
-                    <article id="mainLeft">
-                        <section>
-                            <h2>聯絡方式</h2>
-                            <!-- 聯絡信息，包括社交媒體 -->
-                            <p>
-                                <i class="fa fa-envelope" aria-hidden="true"></i>
-                                <a href="mailto:username@domain.top-level domain">在這裡填寫你的電子郵件</a>
-                            </p>
-                            <p>
-                                <i class="fab fa-github" aria-hidden="true"></i>
-                                <a href="github.com/yourGitHubUsername">在這裡填寫你的用戶名！</a>
-                            </p>
-                            <p>
-                                <i class="fab fa-linkedin" aria-hidden="true"></i>
-                                <a href="linkedin.com/yourLinkedInUsername">在這裡填寫你的用戶名！</a>
-                            </p>
-                        </section>
-                        <section>
-                            <h2>技能</h2>
-                            <!-- 你的技能 -->
-                            <ul>
-                                <li>技能 1！</li>
-                                <li>技能 2！</li>
-                                <li>技能 3！</li>
-                                <li>技能 4！</li>
-                            </ul>
-                        </section>
-                        <section>
-                            <h2>教育背景</h2>
-                            <!-- 你的教育背景 -->
-                            <h3>在這裡填寫你的課程！</h3>
-                            <p>
-                                在這裡填寫你的學校名稱！
-                            </p>
-                            <p>
-                                開始日期 - 結束日期
-                            </p>
-                        </section>            
-                    </article>
-                    <article id="mainRight">
-                        <section>
-                            <h2>關於我</h2>
-                            <!-- 關於你的簡介 -->
-                            <p>在這裡寫一段關於自己的簡介！</p>
-                        </section>
-                        <section>
-                            <h2>工作經驗</h2>
-                            <!-- 你的工作經驗 -->
-                            <h3>職位名稱</h3>
-                            <p>
-                                公司名稱在這裡 | 開始月份 – 結束月份
-                            </p>
-                            <ul>
-                                    <li>任務 1 - 描述你做了什麼！</li>
-                                    <li>任務 2 - 描述你做了什麼！</li>
-                                    <li>描述你的貢獻成果/影響</li>
-                                    
-                            </ul>
-                            <h3>職位名稱 2</h3>
-                            <p>
-                                公司名稱在這裡 | 開始月份 – 結束月份
-                            </p>
-                            <ul>
-                                    <li>任務 1 - 描述你做了什麼！</li>
-                                    <li>任務 2 - 描述你做了什麼！</li>
-                                    <li>描述你的貢獻成果/影響</li>
-                                    
-                            </ul>
-                        </section>
-                    </article>
-                </main>
-            </body>
-        </html>
+    <main>
+        <article id="mainLeft">
+            <section>
+                <h2>CONTACT</h2>
+                <p>
+                    <i class="fa fa-envelope" aria-hidden="true"></i>
+                    <a href="mailto:your.email@domain.com">your.email@domain.com</a>
+                </p>
+                <p>
+                    <i class="fab fa-github" aria-hidden="true"></i>
+                    <a href="https://github.com/your-username">github.com/your-username</a>
+                </p>
+                <p>
+                    <i class="fab fa-linkedin" aria-hidden="true"></i>
+                    <a href="https://linkedin.com/in/your-profile">linkedin.com/in/your-profile</a>
+                </p>
+            </section>
+            
+            <section>
+                <h2>SKILLS</h2>
+                <ul>
+                    <li>HTML5 & CSS3</li>
+                    <li>JavaScript (ES6+)</li>
+                    <li>Responsive Web Design</li>
+                    <li>Version Control (Git)</li>
+                    <li>Problem Solving</li>
+                </ul>
+            </section>
+            
+            <section>
+                <h2>EDUCATION</h2>
+                <h3>Your Degree or Certification</h3>
+                <p>Institution Name</p>
+                <p>Start Date - End Date</p>
+            </section>
+        </article>
+        
+        <article id="mainRight">
+            <section>
+                <h2>ABOUT</h2>
+                <p>Write a compelling summary that highlights your passion for web development, key achievements, and career goals. This section should give employers insight into your personality and professional approach.</p>
+            </section>
+            
+            <section>
+                <h2>WORK EXPERIENCE</h2>
+                <div class="job">
+                    <h3>Job Title</h3>
+                    <p class="company">Company Name | Start Date – End Date</p>
+                    <ul>
+                        <li>Describe a key accomplishment or responsibility</li>
+                        <li>Highlight specific skills or technologies used</li>
+                        <li>Quantify impact where possible (e.g., "Improved efficiency by 25%")</li>
+                    </ul>
+                </div>
+                
+                <div class="job">
+                    <h3>Previous Job Title</h3>
+                    <p class="company">Previous Company | Start Date – End Date</p>
+                    <ul>
+                        <li>Focus on transferable skills and achievements</li>
+                        <li>Demonstrate growth and learning progression</li>
+                        <li>Include any leadership or collaboration experiences</li>
+                    </ul>
+                </div>
+            </section>
+            
+            <section>
+                <h2>PROJECTS</h2>
+                <div class="project">
+                    <h3>Project Name</h3>
+                    <p>Brief description of what the project accomplishes and technologies used.</p>
+                    <a href="#" target="_blank">View Project</a>
+                </div>
+            </section>
+        </article>
+    </main>
+</body>
+</html>
+```
 </details>
 
-將你的履歷細節替換掉 HTML 代碼中的 _佔位文字_。
+**客製化指引：**
+- **用真實資訊**取代所有佔位文字
+- **根據經驗和職涯重點**調整區塊
+- **視需要**新增或刪減區段（如證照、志工、語言）
+- **加入**連結至你的實際個人資料與專案
+
+### 第 5 步：建立支援檔案
+
+專業網站需有組織的檔案架構。建立 CSS 樣式表與設定檔。
 
-**步驟 5：** 將滑鼠懸停在 My-Resume 資料夾上，點擊 `New File ...` 圖標，並在你的項目中建立兩個新文件：`style.css` 和 `codeswing.json` 文件。
+1. **將滑鼠移至** Explorer 側邊欄的專案資料夾名稱
+2. **點擊**出現的「新增檔案」圖示（📄+）
+3. **依序建立**下列檔案：
+   - `style.css`（樣式與版面）
+   - `codeswing.json`（預覽擴充功能設定）
 
-**步驟 6：** 打開 `style.css` 文件，將以下代碼粘貼進去並保存。
+**建立 CSS 檔案 (`style.css`):**
 
 <details>
-        <summary><b>用於格式化網站佈局的 CSS 代碼。</b></summary>
-            
-            body {
-                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-                font-size: 16px;
-                max-width: 960px;
-                margin: auto;
-            }
-            h1 {
-                font-size: 3em;
-                letter-spacing: .6em;
-                padding-top: 1em;
-                padding-bottom: 1em;
-            }
-
-            h2 {
-                font-size: 1.5em;
-                padding-bottom: 1em;
-            }
-
-            h3 {
-                font-size: 1em;
-                padding-bottom: 1em;
-            }
-            main { 
-                display: grid;
-                grid-template-columns: 40% 60%;
-                margin-top: 3em;
-            }
-            header {
-                text-align: center;
-                margin: auto 2em;
-            }
-
-            section {
-                margin: auto 1em 4em 2em;
-            }
-
-            i {
-                margin-right: .5em;
-            }
-
-            p {
-                margin: .2em auto
-            }
-
-            hr {
-                border: none;
-                background-color: lightgray;
-                height: 1px;
-            }
-
-            h1, h2, h3 {
-                font-weight: 100;
-                margin-bottom: 0;
-            }
-            #mainLeft {
-                border-right: 1px solid lightgray;
-            }
-            
+<summary><b>專業 CSS 樣式</b></summary>
+
+```css
+/* Modern Resume Styling */
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-size: 16px;
+    line-height: 1.6;
+    max-width: 960px;
+    margin: 0 auto;
+    padding: 20px;
+    color: #333;
+    background-color: #f9f9f9;
+}
+
+/* Header Styling */
+header {
+    text-align: center;
+    margin-bottom: 3em;
+    padding: 2em;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    border-radius: 10px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+h1 {
+    font-size: 3em;
+    letter-spacing: 0.1em;
+    margin-bottom: 0.2em;
+    font-weight: 300;
+}
+
+.role {
+    font-size: 1.3em;
+    font-weight: 300;
+    margin: 1em 0;
+}
+
+/* Main Content Layout */
+main {
+    display: grid;
+    grid-template-columns: 35% 65%;
+    gap: 3em;
+    margin-top: 3em;
+    background: white;
+    padding: 2em;
+    border-radius: 10px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+/* Typography */
+h2 {
+    font-size: 1.4em;
+    font-weight: 600;
+    margin-bottom: 1em;
+    color: #667eea;
+    border-bottom: 2px solid #667eea;
+    padding-bottom: 0.3em;
+}
+
+h3 {
+    font-size: 1.1em;
+    font-weight: 600;
+    margin-bottom: 0.5em;
+    color: #444;
+}
+
+/* Section Styling */
+section {
+    margin-bottom: 2.5em;
+}
+
+#mainLeft {
+    border-right: 1px solid #e0e0e0;
+    padding-right: 2em;
+}
+
+/* Contact Links */
+section a {
+    color: #667eea;
+    text-decoration: none;
+    transition: color 0.3s ease;
+}
+
+section a:hover {
+    color: #764ba2;
+    text-decoration: underline;
+}
+
+/* Icons */
+i {
+    margin-right: 0.8em;
+    width: 20px;
+    text-align: center;
+    color: #667eea;
+}
+
+/* Lists */
+ul {
+    list-style: none;
+    padding-left: 0;
+}
+
+li {
+    margin: 0.5em 0;
+    padding: 0.3em 0;
+    position: relative;
+}
+
+li:before {
+    content: "▸";
+    color: #667eea;
+    margin-right: 0.5em;
+}
+
+/* Work Experience */
+.job, .project {
+    margin-bottom: 2em;
+    padding-bottom: 1.5em;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.company {
+    font-style: italic;
+    color: #666;
+    margin-bottom: 0.5em;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    main {
+        grid-template-columns: 1fr;
+        gap: 2em;
+    }
+    
+    #mainLeft {
+        border-right: none;
+        border-bottom: 1px solid #e0e0e0;
+        padding-right: 0;
+        padding-bottom: 2em;
+    }
+    
+    h1 {
+        font-size: 2.2em;
+    }
+    
+    body {
+        padding: 10px;
+    }
+}
+
+/* Print Styles */
+@media print {
+    body {
+        background: white;
+        color: black;
+        font-size: 12pt;
+    }
+    
+    header {
+        background: none;
+        color: black;
+        box-shadow: none;
+    }
+    
+    main {
+        box-shadow: none;
+    }
+}
+```
 </details>
 
-**步驟 6：** 打開 `codeswing.json` 文件，將以下代碼粘貼進去並保存。
+**建立設定檔 (`codeswing.json`):**
 
-    {
+```json
+{
     "scripts": [],
     "styles": []
-    }
+}
+```
+
+
+**CSS 功能說明：**
+- **使用** CSS Grid 實現專業響應式版面
+- **採用**現代漸層色彩設計頁首
+- **包含**滑鼠懸停效果與平滑過渡
+- **支援**所有裝置大小的響應設計
+- **加入**列印友善樣式以利匯出 PDF
+
+### 第 6 步：安裝與設定擴充功能
+
+擴充功能提升開發體驗，提供即時預覽與工作流程工具。CodeSwing 擴充對網頁專案特別有用。
+
+**安裝 CodeSwing 擴充：**
+
+1. **點擊**活動列的擴充功能圖示（🧩）
+2. **在搜尋框**輸入「CodeSwing」
+3. **從結果中**選擇 CodeSwing 擴充
+4. **點擊**藍色「Install」安裝
+
+![安裝 CodeSwing 擴充](../../../../8-code-editor/images/install-extension.gif)
+
+**CodeSwing 功能：**
+- **啟用**編輯時即時預覽網站
+- **即時顯示**變更，無需手動重新整理
+- **支援**多種檔案類型（HTML、CSS、JavaScript）
+- **提供**整合式開發環境體驗
+
+**安裝後的即時效果：**
+安裝完成後，你會在編輯器看到履歷網站的即時預覽，方便你隨時檢視網站外觀。
 
-**步驟 7：** 安裝 `Codeswing 擴展`，以便在代碼區域中可視化履歷網站。
+![CodeSwing 即時預覽](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b5509.hk.png)
 
-點擊活動欄上的 _`Extensions`_ 圖標，輸入 Codeswing。點擊展開活動欄上的 _藍色安裝按鈕_ 或在選擇擴展以加載更多信息後，使用代碼區域中出現的安裝按鈕進行安裝。安裝擴展後，觀察你的代碼區域，查看項目變化 😃
+**強化介面說明：**
+- **分割檢視**：一側顯示程式碼，一側顯示即時預覽
+- **即時更新**：輸入時立即反映變更
+- **互動預覽**：可測試連結及互動元素
+- **手機模擬**：方便測試響應式設計
 
-![安裝擴展](../../../../8-code-editor/images/install-extension.gif)
+### 第 7 步：版本控制與發布
 
-安裝擴展後，你的屏幕上將顯示以下內容。
+履歷網站完成後，使用 Git 儲存工作並上線。
 
-![Codeswing 擴展運行效果](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.hk.png)
+**提交變更：**
 
-如果你對所做的更改感到滿意，將滑鼠懸停在 `Changes` 資料夾上，點擊 `+` 按鈕以暫存更改。
+1. **點擊**活動列的原始碼控制圖示（🌿）
+2. **檢視**「變更」區段的所有新增和修改檔案
+3. **點擊**每個檔案旁的「+」圖標暫存變更
+4. **輸入**描述性提交訊息，例如：
+   - 「Add complete resume website with responsive design」
+   - 「Implement professional styling and content structure」
+5. **點擊**勾選（✓）提交並推送修改
 
-輸入提交信息 _(描述你對項目所做的更改)_，並通過點擊 `check` 提交更改。完成項目後，選擇左上角的漢堡菜單圖標返回 GitHub 上的儲存庫。
+**有效提交訊息範例：**
+- 「新增專業履歷內容與樣式」
+- 「實作行動裝置相容之響應式設計」
+- 「更新聯絡資訊與專案連結」
 
-恭喜 🎉 你已經在幾個步驟內使用 vscode.dev 建立了你的履歷網站。
+> 💡 **專業技巧**：好的提交訊息有助於追蹤專案演進，也展現細心，這是雇主看重的特質。
 
-## 🚀 挑戰
+**存取已發布網站：**
+提交完畢後，透過左上選單（☰）回到 GitHub 版本庫。你的履歷網站已受版本控管，準備好部署分享。
 
-打開一個你有權限進行更改的遠端儲存庫，更新一些文件。接下來，嘗試建立一個包含更改的新分支並提交 Pull Request。
+## 結果與後續
 
-<!----
-## 課後測驗
-[課後測驗](https://ff-quizzes.netlify.app/web/quiz/4)
----->
+**恭喜！🎉** 你已成功利用 VSCode.dev 建立專業履歷網站。你的專案展示了：
 
-## 回顧與自學
+**展示的技術能力：**
+- **版本庫管理**：建立並組織完整專案架構
+- **網頁開發**：運用現代 HTML5 與 CSS3 建置響應式網站
+- **版本控制**：實施有效 Git 工作流程與有意義的提交
+- **工具熟練度**：有效利用 VSCode.dev 介面與擴充功能系統
+
+**達成的專業成果：**
+- **線上存在感**：可共享的 URL 展現資格
+- **現代格式**：互動式替代傳統 PDF 履歷
+- **技術證明**：具體展示你的網頁開發能力
+- **易於更新**：可持續改進及客製化的基礎
+
+### 部署選擇
+
+為讓雇主存取你的履歷，可考慮下列主機方案：
+
+**GitHub Pages（推薦）：**
+1. 前往 GitHub 版本庫設定
+2. 捲動至「Pages」區段
+3. 選擇「Deploy from a branch」，指定「main」分支
+4. 即可透過 `https://your-username.github.io/my-resume` 存取網站
+
+**其他平台選項：**
+- **Netlify**：自動部署，支援自訂域名
+- **Vercel**：快速部署，具現代化主機功能
+- **GitHub Codespaces**：內建預覽的開發環境
+
+### 功能增強建議
+
+持續提升技能，加入以下功能：
+
+**技術提升：**
+- **JavaScript 互動性**：新增平滑捲動或互動元件
+- **暗/亮主題切換**：實現主題切換及平滑過渡
+- **聯絡表單**：啟用潛在雇主直接聯繫
+- **SEO 優化**：加入 meta 標籤與結構化資料，提升搜尋能見度
+
+**內容增潤：**
+- **專案作品集**：連結 GitHub 倉庫與現場示範
+- **技能視覺化**：建立進度條或技能評分系統
+- **推薦語區**：新增同事或導師推薦
+- **部落格整合**：加入部落格，展現學習歷程
+
+## GitHub Copilot Agent 挑戰 🚀
+
+使用代理模式完成以下挑戰：
+
+**說明：** 強化你的履歷網站，加入展現專業網頁開發能力與現代設計原則的進階功能。
+
+**提示：** 在既有履歷網站基礎上，實作這些進階功能：
+1. 新增暗/亮主題切換並具平滑過渡效果
+2. 建立帶動畫進度條的互動技能區
+3. 實作具表單驗證的聯絡表單
+4. 加入帶懸停效果與模態視窗的專案作品集區
+5. 含有至少 3 篇學習歷程樣本文章的部落格區
+6. 使用適當 meta 標籤、結構化資料和效能優化提升 SEO
+7. 使用 GitHub Pages 或 Netlify 發布強化後網站
+8. 在 README.md 中記錄全部新功能與截圖
+
+你的強化網站應展現現代網頁開發的精通，包括響應式設計、JavaScript 互動性以及專業部署流程。
+
+## 挑戰延伸
+
+想進一步挑戰嗎？試試這些進階挑戰：
+
+**📱 手機優先重新設計：** 使用 CSS Grid 和 Flexbox 完全重建網站，符合手機優先設計原則
+
+**🔍 SEO 優化：** 實現全方位 SEO 改善，包括 meta 標籤、結構化資料與效能優化
+
+**🌐 多語系支援：** 新增國際化功能，支持多種語言
+
+**📊 分析整合：** 加入 Google Analytics，追蹤訪客互動並優化內容
+
+**🚀 效能優化：** 在所有分類取得完美 Lighthouse 分數
+
+## 複習與自我學習
+
+利用這些資源擴展知識：
+
+**VSCode.dev 進階功能：**
+- [VSCode.dev 文件](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) - 網頁編輯完整指南
+- [GitHub Codespaces](https://docs.github.com/en/codespaces) - 雲端開發環境
+
+**網頁開發最佳實踐：**
+- **響應式設計**：研習 CSS Grid 與 Flexbox 實現現代版面布局
+- **無障礙設計**：學習 WCAG 指南以實現包容性網頁設計
+- **效能**：使用 Lighthouse 等工具進行優化
+- **SEO**：了解搜尋引擎優化的基本原理
+
+**專業發展：**
+- **作品集建立**：創建更多項目以展示多樣化技能
+- **開源貢獻**：參與現有項目以獲得協作經驗
+- **社交網絡**：在開發者社群分享你的履歷網站以獲取反饋
+- **持續學習**：保持對網頁開發趨勢和技術的更新
+
+---
 
-閱讀更多關於 [VSCode.dev](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) 的內容以及它的其他功能。
+**你的下一步驟：** 與朋友、家人或導師分享你的履歷網站，聽取他們的反饋。利用他們的建議反覆修改和完善你的設計。記住，這個項目不只是履歷，而是展示你作為網頁開發者成長的證明！
 
 ---
 
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
 **免責聲明**：  
-本文件已使用人工智能翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於重要資訊，建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或錯誤解釋概不負責。
\ No newline at end of file
+本文件由AI翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。儘管我們致力於確保翻譯的準確性，但請注意自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於關鍵資訊，建議尋求專業人工翻譯。我們不對因使用本翻譯而產生的任何誤解或誤譯承擔責任。
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->
\ No newline at end of file
diff --git a/translations/hk/9-chat-project/README.md b/translations/hk/9-chat-project/README.md
index c546029f..58979801 100644
--- a/translations/hk/9-chat-project/README.md
+++ b/translations/hk/9-chat-project/README.md
@@ -1,35 +1,213 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "11cf36165c243947b6cd85b88cf6faa6",
-  "translation_date": "2025-09-01T16:49:57+00:00",
+  "original_hash": "2066c17078e9d18b5e309f31d8e8bc24",
+  "translation_date": "2026-01-06T12:09:46+00:00",
   "source_file": "9-chat-project/README.md",
   "language_code": "hk"
 }
 -->
-# 聊天項目
+# 使用 AI 建立聊天助理
 
-這個聊天項目展示了如何使用 GitHub Models 構建一個聊天助手。
+還記得《星際迷航》當船員會隨意跟飛船的電腦聊天，問它複雜的問題並得到深思熟慮的回覆嗎？在 1960 年代看似純科幻的東西，如今你可以利用你已經認識的網頁技術建構出來。
 
-以下是完成後的項目樣子：
+在本課程中，我們將使用 HTML、CSS、JavaScript 和一些後端整合技術創建一個 AI 聊天助理。你會發現你一直在學習的技能如何連接到強大的 AI 服務，這些服務能夠理解上下文並生成有意義的回答。
 
-![聊天應用](../../../translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.hk.png)
+想像 AI 就像擁有一座龐大的圖書館，不只可以找到資料，還能將它們綜合成符合你特定問題的連貫答案。你不用瀏覽成千上萬頁，只會獲得直接，有上下文關聯的回應。
 
-一些背景資訊，使用生成式 AI 構建聊天助手是一個學習 AI 的好方法。在這節課中，你將學會如何將生成式 AI 整合到網頁應用中，讓我們開始吧。
+這種整合是通過熟悉的網頁技術協同工作完成的。HTML 負責建立聊天界面，CSS 負責視覺設計，JavaScript 管理用戶互動，後端 API 將一切連接到 AI 服務。這就像管弦樂團不同部門合奏成一場交響樂。
 
-## 連接生成式 AI
+我們本質上是在建立一座橋樑，連結自然的人類溝通與機器處理。你將學習 AI 服務整合的技術實作，以及讓互動感覺直觀的設計模式。
 
-在後端，我們使用 GitHub Models。這是一個很棒的服務，可以免費使用 AI。前往它的 Playground，獲取與你選擇的後端語言對應的代碼。以下是 [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) 的樣子：
+到本課程結束時，AI 整合將不再是神秘過程，而像是你能駕馭的另一個 API。你會理解驅動 ChatGPT、Claude 等應用背後的基本模式，同時使用你一直在學習的網頁開發原理。
 
-![GitHub Models AI Playground](../../../translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.hk.png)
+## ⚡ 你接下來 5 分鐘能做到的事
 
-如我們所說，選擇 "Code" 標籤和你選擇的運行時環境。
+**忙碌開發者的快速入門路徑**
 
-![Playground 選擇](../../../translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.hk.png)
+```mermaid
+flowchart LR
+    A[⚡ 5 分鐘] --> B[取得 GitHub 代幣]
+    B --> C[測試 AI 遊樂場]
+    C --> D[複製 Python 代碼]
+    D --> E[查看 AI 回應]
+```
+- **1 分鐘**：造訪 [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) 並創建個人訪問令牌
+- **2 分鐘**：直接在 playground 介面測試 AI 互動
+- **3 分鐘**：點擊「Code」頁籤並複製 Python 程式碼片段
+- **4 分鐘**：使用你的令牌在本機執行程式碼：`GITHUB_TOKEN=your_token python test.py`
+- **5 分鐘**：觀看你的第一個 AI 回應從你的程式碼中產生
+
+**快速測試程式碼：**
+```python
+import os
+from openai import OpenAI
+
+client = OpenAI(
+    base_url="https://models.github.ai/inference",
+    api_key="your_token_here"
+)
+
+response = client.chat.completions.create(
+    messages=[{"role": "user", "content": "Hello AI!"}],
+    model="openai/gpt-4o-mini"
+)
+
+print(response.choices[0].message.content)
+```
+
+**為什麼這很重要**：在 5 分鐘內，你會體驗到程式化 AI 互動的魔力。這是驅動你所使用每個 AI 應用的基本建構塊。
+
+以下是你完成的專案外觀：
+
+![Chat app interface showing conversation between user and AI assistant](../../../translated_images/screenshot.0a1ee0d123df681b.hk.png)
+
+## 🗺️ 你的 AI 應用開發學習之旅
+
+```mermaid
+journey
+    title 從網頁開發到 AI 整合
+    section 理解 AI 基礎
+      發掘生成式 AI 概念: 4: You
+      探索 GitHub 模型平台: 6: You
+      精通 AI 參數與提示詞: 8: You
+    section 後端整合
+      建立 Python API 伺服器: 5: You
+      實作 AI 函式呼叫: 7: You
+      處理非同步操作: 8: You
+    section 前端開發
+      創建現代聊天介面: 6: You
+      精通即時互動: 8: You
+      建立響應式使用者體驗: 9: You
+    section 專業應用
+      部署完整的 AI 系統: 7: You
+      優化效能模式: 8: You
+      創建生產準備應用程式: 9: You
+```
+**你的旅程終點**：到了課程結尾，你將用相同技術和模式打造出完整的 AI 應用，支撐現代 AI 助理如 ChatGPT、Claude 和 Google Bard。
+
+## 了解 AI：從神秘到掌握
+
+在深入程式碼前，讓我們了解我們正在處理什麼。如果你曾用過 API，就知道基本模式：發送請求，接收回應。
+
+AI API 遵循類似結構，但它不是從資料庫檢索預存資料，而是根據大量文本學習的模式生成全新回應。想想看，這像圖書館目錄系統與知識淵博的圖書館員之間的差異，後者會綜合多個來源的信息。
+
+### 什麼是真正的「生成式 AI」？
+
+想像羅塞塔石碑讓學者透過已知與未知語言間的對應找出埃及象形文字的規律。AI 模型也像是這樣——他們在大量文字中尋找模式，理解語言運作，再用這些模式生成適合新問題的回應。
+
+**我用個簡單比喻說明：**
+- **傳統資料庫**：像是要你的出生證明——每次都給你完全相同的文件
+- **搜尋引擎**：像是請圖書館員找關於貓的書——他們告訴你有哪些書可用
+- **生成式 AI**：像是問一位懂貓的朋友——他會用自己的話告訴你有趣的事情，且依你的問題量身定制
+
+```mermaid
+graph LR
+    A[你的問題] --> B[人工智能模型]
+    B --> C[模式識別]
+    C --> D[內容生成]
+    D --> E[上下文回應]
+    
+    F[訓練數據<br/>書籍、文章、網絡] --> B
+```
+### AI 模型如何學習（簡單版）
 
-### 使用 Python
+AI 模型透過大量包含書籍、文章、對話的文本資料訓練。過程中學會辨識：
+- 書寫溝通中思路如何組織
+- 哪些詞經常一起出現
+- 對話通常是如何進行
+- 正式與非正式場合的語境差異
 
-在這個例子中，我們選擇 Python，這意味著我們會選擇以下代碼：
+**這很像考古學家解讀古代語言**：他們分析數千個樣本理解語法、詞彙與文化背景，最後能用學到的模式解讀新文本。
+
+### 為什麼用 GitHub Models？
+
+選用 GitHub Models 是因為實用——它讓我們能接觸企業級 AI，無需自己架設 AI 基礎設施（相信我，你現在不想搞那個！）。把它想像成使用氣象 API，不用自己到處設置氣象站來預測天氣。
+
+這基本上是「AI 即服務」，最棒的是開始免費，因此你可以無憂試驗。
+
+```mermaid
+graph LR
+    A[前端聊天介面] --> B[你的後端 API]
+    B --> C[GitHub 模型 API]
+    C --> D[人工智能模型處理]
+    D --> C
+    C --> B
+    B --> A
+```
+我們會用 GitHub Models 作為後端整合，提供專業級 AI 功能且開發者友善的介面。[GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) 是測試環境，你可以在那裡試用不同 AI 模型，了解它們的能力，然後才將其應用到程式碼中。
+
+## 🧠 AI 應用開發生態系統
+
+```mermaid
+mindmap
+  root((AI 開發))
+    Understanding AI
+      Generative Models
+        Pattern Recognition
+        Content Generation
+        Context Understanding
+        Response Synthesis
+      AI Parameters
+        Temperature Control
+        Token Limits
+        Top-p Filtering
+        System Prompts
+    Backend Architecture
+      API Integration
+        GitHub Models
+        Authentication
+        Request Handling
+        Error Management
+      Python Infrastructure
+        FastAPI Framework
+        Async Operations
+        Environment Security
+        CORS Configuration
+    Frontend Experience
+      Chat Interface
+        Real-time Updates
+        Message History
+        User Feedback
+        Loading States
+      Modern Web Tech
+        ES6 Classes
+        Async/Await
+        DOM Manipulation
+        Event Handling
+    Professional Patterns
+      Security Best Practices
+        Token Management
+        Input Validation
+        XSS Prevention
+        Error Boundaries
+      Production Readiness
+        Performance Optimization
+        Responsive Design
+        Accessibility
+        Testing Strategies
+```
+**核心原則**：AI 應用開發結合傳統網頁技能與 AI 服務整合，創建智能且自然、回應迅速的應用。
+
+![GitHub Models AI Playground interface with model selection and testing area](../../../translated_images/playground.d2b927122224ff8f.hk.png)
+
+**playground 特別實用的原因：**
+- **試用** 不同的 AI 模型，如 GPT-4o-mini、Claude 等（全部免費！）
+- **測試** 你的想法與提示詞，才開始寫程式碼
+- **取得** 你喜愛語言的即用程式碼片段
+- **調整** 創意程度與回應長度等設定，觀察輸出差異
+
+玩過一會兒後，點擊「Code」頁籤，選擇程式語言，即可取得你需要的實作程式碼。
+
+![Playground choice showing code generation options for different programming languages](../../../translated_images/playground-choice.1d23ba7d407f4758.hk.png)
+
+## 設定 Python 後端整合
+
+現在讓我們用 Python 實現 AI 整合。Python 簡單語法與強大函式庫非常適合 AI 應用。我們先拿 GitHub Models playground 上的程式碼開始，然後重構成可重用且生產等級的函式。
+
+### 理解基本實作
+
+當你從 playground 拿 Python 程式碼時，大致上會像下面這樣。別擔心，如果一開始看很多，我們逐段解析：
 
 ```python
 """Run this model in Python
@@ -39,8 +217,8 @@ CO_OP_TRANSLATOR_METADATA:
 import os
 from openai import OpenAI
 
-# To authenticate with the model you will need to generate a personal access token (PAT) in your GitHub settings. 
-# Create your PAT token by following instructions here: https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens
+# 要進行模型身份驗證，您需要在 GitHub 設定中生成個人訪問令牌 (PAT)。
+# 按照此處的指示創建您的 PAT 令牌：https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens
 client = OpenAI(
     base_url="https://models.github.ai/inference",
     api_key=os.environ["GITHUB_TOKEN"],
@@ -66,335 +244,2142 @@ response = client.chat.completions.create(
 print(response.choices[0].message.content)
 ```
 
-讓我們稍微清理一下這段代碼，使其可重用：
+**這段程式碼發生了什麼事：**
+- **載入** 需要的工具：`os` 讀取環境變數、`OpenAI` 跟 AI 對話
+- **設定** OpenAI 用戶端，指向 GitHub 的 AI 伺服器，不直接使用 OpenAI
+- **用 GitHub 專用令牌進行認證**（待會詳細解釋）
+- **規劃** 對話中不同「角色」——想像是在佈置戲劇場景
+- **發送** 請求到 AI，並設定些微調參數
+- **擷取** 回傳資料中的實際回答文字
+
+### 理解訊息角色：AI 對話框架
+
+AI 對話使用特定結構，有不同「角色」各司其職：
 
 ```python
-def call_llm(prompt: str, system_message: str):
-    response = client.chat.completions.create(
-        messages=[
-            {
-                "role": "system",
-                "content": system_message,
-            },
-            {
-                "role": "user",
-                "content": prompt,
-            }
-        ],
-        model="openai/gpt-4o-mini",
-        temperature=1,
-        max_tokens=4096,
-        top_p=1
-    )
+messages=[
+    {
+        "role": "system",
+        "content": "You are a helpful assistant who explains things simply."
+    },
+    {
+        "role": "user", 
+        "content": "What is machine learning?"
+    }
+]
+```
+
+**想像像導演排戲：**
+- **系統角色**：像演員的舞台指令——告訴 AI 怎麼表現，什麼個性和回應方式
+- **用戶角色**：真正使用你應用的人發送的問題或訊息
+- **助理角色**：AI 的回覆（你不會送這部分訊息，但它會留在對話紀錄中）
+
+**真實世界比喻**：想像你在派對介紹朋友：
+- **系統訊息**：「這是我朋友 Sarah，是一位擅長用簡單話解釋醫學的醫生」
+- **用戶訊息**：「你能解釋疫苗怎麼工作嗎？」
+- **助理回應**：Sarah 以友善醫生身份回答，不是律師或廚師
+
+### 理解 AI 參數：微調回應行為
+
+AI API 呼叫中的數值參數控制模型生成回應的方式。這些設定讓你調整 AI 行為以適應不同使用情境：
+
+#### 溫度 (0.0 到 2.0)：創意調節旋鈕
 
-    return response.choices[0].message.content
+**作用**：控制 AI 回應的創意度或可預測性。
+
+**想像像爵士樂手即興演奏程度：**
+- **溫度 = 0.1**：每次都演奏一模一樣旋律（高度可預測）
+- **溫度 = 0.7**：加點變化，但依舊還算合拍（平衡創意）
+- **溫度 = 1.5**：完全實驗性的爵士樂，充滿意外轉折（非常不可預測）
+
+```python
+# 非常可預測的回應（適合事實性問題）
+response = client.chat.completions.create(
+    messages=[{"role": "user", "content": "What is 2+2?"}],
+    temperature=0.1  # 幾乎總是會說「4」
+)
+
+# 有創意的回應（適合腦力激盪）
+response = client.chat.completions.create(
+    messages=[{"role": "user", "content": "Write a creative story opening"}],
+    temperature=1.2  # 會生成獨特、意想不到的故事
+)
 ```
 
-通過這個函數 `call_llm`，我們現在可以傳入一個提示和一個系統提示，函數最終會返回結果。
+#### 最多字數 (1 到 4096+): 回應長度控制器
 
-### 自定義 AI 助手
+**作用**：限制 AI 回應的最大長度。
 
-如果你想自定義 AI 助手的行為，可以像這樣填充系統提示：
+**把 tokens 視為單詞大約數**（英文約 1 token = 0.75 個字）：
+- **max_tokens=50**：簡短訊息（像簡訊）
+- **max_tokens=500**：挺全面的段落或兩段
+- **max_tokens=2000**：詳細說明帶範例
 
 ```python
-call_llm("Tell me about you", "You're Albert Einstein, you only know of things in the time you were alive")
+# 簡短、精煉的回答
+response = client.chat.completions.create(
+    messages=[{"role": "user", "content": "Explain JavaScript"}],
+    max_tokens=100  # 強制簡要說明
+)
+
+# 詳盡、全面的回答
+response = client.chat.completions.create(
+    messages=[{"role": "user", "content": "Explain JavaScript"}],
+    max_tokens=1500  # 允許詳細說明並附帶例子
+)
 ```
 
-## 通過 Web API 暴露
+#### Top_p (0.0 到 1.0)：焦點參數
 
-很好，我們已經完成了 AI 部分，現在來看看如何將其整合到 Web API 中。對於 Web API，我們選擇使用 Flask，但任何網絡框架都可以。以下是代碼：
+**作用**：控制 AI 專注於多可能回應選項中的焦點程度。
 
-### 使用 Python
+**想像 AI 字彙庫有很多詞，依可能性排序：**
+- **top_p=0.1**：只考慮最可能的前 10% 詞語（非常專注）
+- **top_p=0.9**：考慮前 90% 詞語（較富創意）
+- **top_p=1.0**：全盤考慮（最大多樣性）
+
+**例如**：你問「天空通常是……」
+- **低 top_p**：幾乎肯定會說「藍色」
+- **高 top_p**：可能會說「藍色」、「多雲」、「廣闊」、「變化多端」、「美麗」等
+
+### 組合應用：參數配置與使用場景
+
+```python
+# 用於提供事實性、一致性的答案（例如文件機械人）
+factual_params = {
+    "temperature": 0.2,
+    "max_tokens": 300,
+    "top_p": 0.3
+}
+
+# 用於創意寫作協助
+creative_params = {
+    "temperature": 1.1,
+    "max_tokens": 1000,
+    "top_p": 0.9
+}
+
+# 用於對話式、樂於助人的回應（平衡）
+conversational_params = {
+    "temperature": 0.7,
+    "max_tokens": 500,
+    "top_p": 0.8
+}
+```
+
+```mermaid
+quadrantChart
+    title AI 參數優化矩陣
+    x-axis 低創意 --> 高創意
+    y-axis 短回應 --> 長回應
+    
+    quadrant-1 創意內容
+    quadrant-2 詳細分析
+    quadrant-3 快速資訊
+    quadrant-4 對話式 AI
+    
+    Documentation Bot: [0.2, 0.3]
+    Customer Service: [0.4, 0.4]
+    General Assistant: [0.7, 0.5]
+    Creative Writer: [0.9, 0.9]
+    Brainstorming Tool: [0.8, 0.8]
+```
+**理解這些參數重要性**：不同應用需求不同答案型態。客服機器人應該一致且事實性強（低溫度），創意寫作助理則期待想像力豐富多變（高溫度）。懂得這些參數讓你掌控 AI 的個性與風格。
+```
+
+**Here's what's happening in this code:**
+- **We import** the tools we need: `os` for reading environment variables and `OpenAI` for talking to the AI
+- **We set up** the OpenAI client to point to GitHub's AI servers instead of OpenAI directly
+- **We authenticate** using a special GitHub token (more on that in a minute!)
+- **We structure** our conversation with different "roles" – think of it like setting the scene for a play
+- **We send** our request to the AI with some fine-tuning parameters
+- **We extract** the actual response text from all the data that comes back
+
+> 🔐 **Security Note**: Never hardcode API keys in your source code! Always use environment variables to store sensitive credentials like your `GITHUB_TOKEN`.
+
+### Creating a Reusable AI Function
+
+Let's refactor this code into a clean, reusable function that we can easily integrate into our web application:
+
+```python
+import asyncio
+from openai import AsyncOpenAI
+
+# Use AsyncOpenAI for better performance
+client = AsyncOpenAI(
+    base_url="https://models.github.ai/inference",
+    api_key=os.environ["GITHUB_TOKEN"],
+)
+
+async def call_llm_async(prompt: str, system_message: str = "You are a helpful assistant."):
+    """
+    Sends a prompt to the AI model asynchronously and returns the response.
+    
+    Args:
+        prompt: The user's question or message
+        system_message: Instructions that define the AI's behavior and personality
+    
+    Returns:
+        str: The AI's response to the prompt
+    """
+    try:
+        response = await client.chat.completions.create(
+            messages=[
+                {
+                    "role": "system",
+                    "content": system_message,
+                },
+                {
+                    "role": "user",
+                    "content": prompt,
+                }
+            ],
+            model="openai/gpt-4o-mini",
+            temperature=1,
+            max_tokens=4096,
+            top_p=1
+        )
+        return response.choices[0].message.content
+    except Exception as e:
+        logger.error(f"AI API error: {str(e)}")
+        return "I'm sorry, I'm having trouble processing your request right now."
+
+# Backward compatibility function for synchronous calls
+def call_llm(prompt: str, system_message: str = "You are a helpful assistant."):
+    """Synchronous wrapper for async AI calls."""
+    return asyncio.run(call_llm_async(prompt, system_message))
+```
+
+**理解這個改良後函式：**
+- **接受** 兩個參數：用戶提示與可選系統訊息
+- **提供** 預設系統訊息，設定一般助理行為
+- **使用** Python 型別提示，方便程式碼文檔
+- **包含** 詳細函式說明字串解釋用途與參數
+- **只回傳** 回應文字，方便用於 Web API
+- **維持** 相同模型參數確保回應一致
+
+### 系統提示的魔力：程式化 AI 個性
+
+如果參數控制 AI 如何思考，系統提示決定 AI 是誰。這是 AI 操作中最酷的部分——你本質上在給 AI 一個完整的個性、專業程度與溝通風格。
+
+**想像系統提示像是為不同角色選角**：不一定只有一種通用助理，你可以創造專家應對不同情境。需要耐心老師？創意腦力激盪夥伴？嚴謹商業顧問？改變系統提示就好！
+
+#### 為什麼系統提示這麼強大
+
+有趣的是：AI 模型被訓練於大量人們扮演不同角色與專業程度的對話。當你給 AI 指定角色，就像切換開關，啟動所有這些學習過的模式。
+
+**這就像 AI 的方法演技**：告訴演員「你是位智慧的老教授」，看看他如何自動調整姿態、用詞與舉止。AI 用語言模式做類似事情。
+
+#### 有效系統提示的構成藝術與科學
+
+**優秀系統提示的要素：**
+1. **角色/身分**：AI 是誰？
+2. **專業**：它懂什麼？
+3. **溝通風格**：怎麼說話？
+4. **具體指示**：應該重點關注什麼？
+
+```python
+# ❌ 模糊嘅系統提示
+"You are helpful."
+
+# ✅ 詳盡、有用嘅系統提示
+"You are Dr. Sarah Chen, a senior software engineer with 15 years of experience at major tech companies. You explain programming concepts using real-world analogies and always provide practical examples. You're patient with beginners and enthusiastic about helping them understand complex topics."
+```
+
+#### 系統提示範例與語境
+
+看看不同系統提示如何創建完全不同的 AI 個性：
+
+```python
+# 範例 1：有耐性的老師
+teacher_prompt = """
+You are an experienced programming instructor who has taught thousands of students. 
+You break down complex concepts into simple steps, use analogies from everyday life, 
+and always check if the student understands before moving on. You're encouraging 
+and never make students feel bad for not knowing something.
+"""
+
+# 範例 2：有創意的合作者
+creative_prompt = """
+You are a creative writing partner who loves brainstorming wild ideas. You're 
+enthusiastic, imaginative, and always build on the user's ideas rather than 
+replacing them. You ask thought-provoking questions to spark creativity and 
+offer unexpected perspectives that make stories more interesting.
+"""
+
+# 範例 3：策略性的商業顧問
+business_prompt = """
+You are a strategic business consultant with an MBA and 20 years of experience 
+helping startups scale. You think in frameworks, provide structured advice, 
+and always consider both short-term tactics and long-term strategy. You ask 
+probing questions to understand the full business context before giving advice.
+"""
+```
+
+#### 實際見識系統提示效果
+
+用不同系統提示問同一題，看看截然不同的回答：
+
+**問題**：「我該怎麼在網站應用中處理用戶身分驗證？」
+
+```python
+# 使用教師提示：
+teacher_response = call_llm(
+    "How do I handle user authentication in my web app?",
+    teacher_prompt
+)
+# 典型回應：「好問題！讓我們將身份驗證拆解成簡單步驟。
+# 想像它就像夜店保安檢查身份證……」
+
+# 使用商業提示：
+business_response = call_llm(
+    "How do I handle user authentication in my web app?", 
+    business_prompt
+)
+# 典型回應：「從策略角度來看，身份驗證對用戶
+# 信任與法規遵從至關重要。讓我從安全性、
+# 用戶體驗和可擴展性來概述一個框架……」
+```
+
+#### 進階系統提示技巧
+
+**1. 上下文設定**：給 AI 背景資訊
+```python
+system_prompt = """
+You are helping a junior developer who just started their first job at a startup. 
+They know basic HTML/CSS/JavaScript but are new to backend development and databases. 
+Be encouraging and explain things step-by-step without being condescending.
+"""
+```
+
+**2. 輸出格式設定**：告訴 AI 如何結構化回應  
+```python
+system_prompt = """
+You are a technical mentor. Always structure your responses as:
+1. Quick Answer (1-2 sentences)
+2. Detailed Explanation 
+3. Code Example
+4. Common Pitfalls to Avoid
+5. Next Steps for Learning
+"""
+```
+  
+**3. 限制條件設定**：定義 AI 不應該做的事  
+```python
+system_prompt = """
+You are a coding tutor focused on teaching best practices. Never write complete 
+solutions for the user - instead, guide them with hints and questions so they 
+learn by doing. Always explain the 'why' behind coding decisions.
+"""
+```
+  
+#### 為什麼這對你的聊天助理很重要  
+
+理解系統提示能讓你擁有強大能力，創造專門的 AI 助理：  
+- **客戶服務機器人**：有幫助、有耐心、熟悉政策  
+- **學習導師**：鼓勵式、一步步教學、檢查理解  
+- **創意夥伴**：富有想像力、在想法上發展、會問「如果怎樣呢？」  
+- **技術專家**：精確、詳細、注重安全  
+
+**關鍵洞察**：你不只是呼叫 AI API —— 你是在打造符合特定使用情境的客製化 AI 個性。這使得現代 AI 應用感覺更貼心、更實用，而非單調通用。  
+
+### 🎯 教學檢核：AI 個性設定編程  
+
+**暫停並反思**：你剛學會如何透過系統提示來設定 AI 個性。這是現代 AI 應用開發的基本能力。  
+
+**快速自我評估**：  
+- 你能說明系統提示如何不同於一般使用者訊息嗎？  
+- temperature 與 top_p 參數有什麼不同？  
+- 你會如何為特定使用情境（例如程式教學導師）建立系統提示？  
+
+**現實世界連結**：你學會的系統提示技巧被運用在每個主要 AI 應用中 —— 從 GitHub Copilot 的程式協助到 ChatGPT 的對話介面。你掌握了大型科技公司 AI 產品團隊使用的模式。  
+
+**挑戰問題**：你如何為不同使用者類型（初學者與專家）設計不同的 AI 個性？思考同一個 AI 模型如何透過提示工程來服務不同族群。  
+
+## 使用 FastAPI 打造 Web API：你的高效能 AI 交流中樞  
+
+現在來建立將前端與 AI 服務連接的後端。我們將使用 FastAPI，一個現代 Python 框架，非常適合建置 AI 應用的 API。  
+
+FastAPI 為這種專案提供多項優勢：內建非同步支援以處理多重請求、可自動生成 API 文件，並且性能優異。你的 FastAPI 伺服器擔任中介，接收前端請求、與 AI 服務溝通，並回傳格式化的回應。  
+
+### 為什麼選擇 FastAPI 用於 AI 應用？  
+
+你可能會想：「我不能直接從前端 JavaScript 呼叫 AI 嗎？」或「為什麼不用 Flask 或 Django？」好問題！  
+
+**FastAPI 適合我們的理由如下：**  
+- **預設非同步**：能同時處理多個 AI 請求，不卡死  
+- **自動文件**：訪問 `/docs`，免費獲得介面漂亮、可互動的 API 文件頁面  
+- **內建驗證**：及早捕捉錯誤，防患於未然  
+- **超快性能**：是 Python 框架中速度最快的之一  
+- **現代 Python**：使用最新、最棒的 Python 功能  
+
+**還有為什麼我們需要後端：**  
+
+**安全性**：你的 AI API 金鑰就像密碼 —— 如果放在前端 JavaScript，任何人查看網站原始碼都能偷用你的 AI 點數。後端能保護敏感憑證安全。  
+
+**流量限制與控管**：後端可以控制使用者請求頻率、實作身分驗證，並加上記錄追蹤使用狀況。  
+
+**資料處理**：你可能想要保存對話內容、過濾不當內容，或整合多個 AI 服務，這些邏輯都放在後端。  
+
+**架構類似客戶端－伺服器模式：**  
+- **前端**：使用者互動介面層  
+- **後端 API**：請求處理與路由層  
+- **AI 服務**：外部運算與回應產生  
+- **環境變數**：安全的設定與憑證儲存  
+
+### 理解請求－回應流程  
+
+讓我們追蹤使用者發訊息時發生的事：  
+
+```mermaid
+sequenceDiagram
+    participant User as 👤 使用者
+    participant Frontend as 🌐 前端
+    participant API as 🔧 FastAPI 伺服器
+    participant AI as 🤖 AI 服務
+    
+    User->>Frontend: 輸入 "Hello AI!"
+    Frontend->>API: POST /hello {"message": "Hello AI!"}
+    Note over API: 驗證請求<br/>加入系統提示
+    API->>AI: 傳送格式化請求
+    AI->>API: 回傳 AI 回應
+    Note over API: 處理回應<br/>記錄對話
+    API->>Frontend: {"response": "Hello! How can I help?"}
+    Frontend->>User: 顯示 AI 訊息
+```  
+**理解每個步驟：**  
+1. **使用者互動**：使用者在聊天介面輸入文字  
+2. **前端處理**：JavaScript 擷取輸入並格式化成 JSON  
+3. **API 驗證**：FastAPI 使用 Pydantic 模型自動驗證請求內容  
+4. **AI 整合**：後端加入上下文（系統提示）並呼叫 AI 服務  
+5. **回應處理**：API 收到 AI 回覆後可視需要修改並回傳  
+6. **前端呈現**：JavaScript 在聊天介面顯示回覆  
+
+### 理解 API 架構  
+
+```mermaid
+sequenceDiagram
+    participant Frontend
+    participant FastAPI
+    participant AI Function
+    participant GitHub Models
+    
+    Frontend->>FastAPI: POST /hello {"message": "Hello AI!"}
+    FastAPI->>AI Function: call_llm(message, system_prompt)
+    AI Function->>GitHub Models: API 請求
+    GitHub Models->>AI Function: AI 回應
+    AI Function->>FastAPI: 回應文字
+    FastAPI->>Frontend: {"response": "你好！我可以點幫你？"}
+```  
+```mermaid
+flowchart TD
+    A[用戶輸入] --> B[前端驗證]
+    B --> C[HTTP POST 請求]
+    C --> D[FastAPI 路由]
+    D --> E[Pydantic 驗證]
+    E --> F[AI 函數調用]
+    F --> G[GitHub 模型 API]
+    G --> H[回應處理]
+    H --> I[JSON 回應]
+    I --> J[前端更新]
+    
+    subgraph "安全層"
+        K[CORS 中介軟件]
+        L[環境變數]
+        M[錯誤處理]
+    end
+    
+    D --> K
+    F --> L
+    H --> M
+```  
+### 建立 FastAPI 應用  
+
+我們一步步打造 API。新建檔案 `api.py` 並加入以下 FastAPI 程式碼：  
 
 ```python
 # api.py
-from flask import Flask, request, jsonify
+from fastapi import FastAPI, HTTPException
+from fastapi.middleware.cors import CORSMiddleware
+from pydantic import BaseModel
 from llm import call_llm
-from flask_cors import CORS
+import logging
+
+# 配置日誌記錄
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+
+# 創建 FastAPI 應用程式
+app = FastAPI(
+    title="AI Chat API",
+    description="A high-performance API for AI-powered chat applications",
+    version="1.0.0"
+)
+
+# 配置 CORS
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],  # 為生產環境適當配置
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# 用於請求/回應驗證的 Pydantic 模型
+class ChatMessage(BaseModel):
+    message: str
+
+class ChatResponse(BaseModel):
+    response: str
+
+@app.get("/")
+async def root():
+    """Root endpoint providing API information."""
+    return {
+        "message": "Welcome to the AI Chat API",
+        "docs": "/docs",
+        "health": "/health"
+    }
+
+@app.get("/health")
+async def health_check():
+    """Health check endpoint."""
+    return {"status": "healthy", "service": "ai-chat-api"}
+
+@app.post("/hello", response_model=ChatResponse)
+async def chat_endpoint(chat_message: ChatMessage):
+    """Main chat endpoint that processes messages and returns AI responses."""
+    try:
+        # 擷取並驗證訊息
+        message = chat_message.message.strip()
+        if not message:
+            raise HTTPException(status_code=400, detail="Message cannot be empty")
+        
+        logger.info(f"Processing message: {message[:50]}...")
+        
+        # 呼叫 AI 服務（備註：call_llm 應該改成非同步以提升效能）
+        ai_response = await call_llm_async(message, "You are a helpful and friendly assistant.")
+        
+        logger.info("AI response generated successfully")
+        return ChatResponse(response=ai_response)
+        
+    except HTTPException:
+        raise
+    except Exception as e:
+        logger.error(f"Error processing chat message: {str(e)}")
+        raise HTTPException(status_code=500, detail="Internal server error")
+
+if __name__ == "__main__":
+    import uvicorn
+    uvicorn.run(app, host="0.0.0.0", port=5000, reload=True)
+```
+  
+**理解 FastAPI 實作細節：**  
+- **匯入** FastAPI 來使用現代網頁框架功能，Pydantic 用於資料驗證  
+- **建立** 自動 API 文件（伺服器運行後可透過 `/docs` 訪問）  
+- **啟用** CORS 中介軟體允許前端跨源請求  
+- **定義** Pydantic 模型，實作自動請求/回應驗證與文件生成  
+- **使用** 非同步端點來提升同時處理多請求的效能  
+- **實作** 適當的 HTTP 狀態碼與錯誤處理（HTTPException）  
+- **包含** 結構化日誌以利監控與除錯  
+- **提供** 健康檢查端點以監控服務狀態  
+
+**FastAPI 相較傳統框架的主要優點：**  
+- **自動驗證**：Pydantic 模型確保資料處理前的完整與正確  
+- **互動式文件**：訪問 `/docs` 獲得自動產生、可測試 API 文件  
+- **型別安全**：Python 型別提示減少執行時錯誤並提升程式碼品質  
+- **非同步支援**：同時處理多個 AI 請求不卡塞  
+- **效能優異**：顯著提升即時應用的請求處理速度  
+
+### 理解 CORS：網頁的守門員  
+
+CORS（跨來源資源共享）就像保全巡守大廈，檢查訪客是否被允許進入。讓我們了解為何重要，及其如何影響你的應用。  
+
+#### 什麼是 CORS 以及為何有它？  
+
+**問題所在**：想像任何網站都能不經允許替你向銀行網站發起請求，那會是安全大災難！瀏覽器透過「同源政策」防止這種狀況。  
+
+**同源政策**：瀏覽器只允許網頁向相同域名、埠號和協議的來源發出請求。  
+
+**現實比喻**：就像公寓大樓安全管理，預設只有住戶（同源）可進入。若要讓朋友（不同源）訪客，必須明確告訴保全允許。  
 
-app = Flask(__name__)
-CORS(app)   # *   example.com
+#### 你開發環境中的 CORS  
 
-@app.route("/", methods=["GET"])
-def index():
-    return "Welcome to this API. Call POST /hello with 'message': 'my message' as JSON payload"
+在開發時你的前端與後端跑在不同埠號：  
+- 前端：`http://localhost:3000`（或直接開啟本機 HTML，為 file://）  
+- 後端：`http://localhost:5000`  
 
+雖然同台電腦，但因埠號不同被視為「不同來源」！  
+
+```python
+from fastapi.middleware.cors import CORSMiddleware
+
+app = FastAPI(__name__)
+CORS(app)   # 這告訴瀏覽器：「其他來源可以安全地向此 API 發送請求」
+```
+  
+**CORS 設定實際作用：**  
+- **在 API 回應加上** 特殊 HTTP 標頭，告訴瀏覽器「這個跨來源請求是被允許的」  
+- **處理** 「預檢」請求（瀏覽器有時在正式發送請求前先確認權限）  
+- **避免** 瀏覽器主控台出現討厭的「被 CORS 政策阻擋」錯誤  
+
+#### CORS 安全：開發 vs 生產環境  
+
+```python
+# 🚨 開發：允許所有來源（方便但不安全）
+CORS(app)
+
+# ✅ 生產：只允許你指定的前端網域
+CORS(app, origins=["https://yourdomain.com", "https://www.yourdomain.com"])
+
+# 🔒 進階：不同環境使用不同來源
+if app.debug:  # 開發模式
+    CORS(app, origins=["http://localhost:3000", "http://127.0.0.1:3000"])
+else:  # 生產模式
+    CORS(app, origins=["https://yourdomain.com"])
+```
+  
+**重要點**：開發時使用 `CORS(app)` 像是把家門沒鎖 —— 方便但不安全。生產環境你要明確指定哪個網站能呼叫你的 API。  
+
+#### 常見的 CORS 情境與解決方案  
+
+| 情境 | 問題 | 解決方案 |  
+|----------|---------|----------|  
+| **本機開發** | 前端無法呼叫後端 | 在 FastAPI 加入 CORSMiddleware |  
+| **GitHub Pages + Heroku** | 部署後前端呼叫 API 失敗 | 把 GitHub Pages URL 加入 CORS 允許來源 |  
+| **自訂網域** | 生產環境產生 CORS 錯誤 | 更新 CORS 允許來源以符合網域 |  
+| **行動應用** | App 無法存取 Web API | 新增 App 網域或謹慎使用 `*` |  
+
+**專家小技巧**：你可以在瀏覽器開發者工具網路分頁檢查 CORS 標頭，找 `Access-Control-Allow-Origin` 回應標頭。  
+
+### 錯誤處理與驗證  
+
+注意我們的 API 還包含完整錯誤處理：  
+
+```python
+# 驗證我們是否收到訊息
+if not message:
+    return jsonify({"error": "Message field is required"}), 400
+```
+  
+**重要驗證原則：**  
+- **先檢查** 請求是否帶有必要欄位  
+- **以 JSON 格式** 回傳有意義的錯誤訊息  
+- **使用** 合適的 HTTP 狀態碼（400 表示錯誤請求）  
+- **提供** 明確反饋幫助前端除錯  
+
+## 設定與啟動你的後端  
+
+現在我們完成 AI 整合與 FastAPI 伺服器，開始運行整套環境。設定流程包含安裝 Python 相依套件、配置環境變數，以及啟動開發伺服器。  
+
+### Python 環境設定  
+
+來建立你的 Python 開發環境。虛擬環境就像曼哈頓計畫的分工策略 —— 每個專案都有自己的隔離空間和套件，避免不同專案間衝突。  
+
+```bash
+# 導航到你的後端目錄
+cd backend
+
+# 創建一個虛擬環境（就像為你的項目創建一個乾淨的空間）
+python -m venv venv
+
+# 啟動它（Linux/Mac）
+source ./venv/bin/activate
+
+# 在 Windows 上，使用：
+# venv\Scripts\activate
+
+# 安裝有用的東西
+pip install openai fastapi uvicorn python-dotenv
+```
+  
+**我們剛做了什麼：**  
+- **創建** 專屬的 Python 環境泡泡，可以放心安裝套件不影響其他系統  
+- **啟用** 這個環境，讓終端機知道接下來使用它  
+- **安裝** 重要套件：OpenAI（AI 魔法）、FastAPI（Web API）、Uvicorn（執行伺服器）、python-dotenv（安全載入祕密）  
+
+**重要套件解說：**  
+- **FastAPI**：現代且快速的網頁框架，自動產生 API 文件  
+- **Uvicorn**：超快的 ASGI 伺服器，跑 FastAPI 應用  
+- **OpenAI**：GitHub 模型及 OpenAI API 官方整合程式庫  
+- **python-dotenv**：從 .env 檔安全載入環境變數  
+
+### 環境變數設定：保護你的祕密  
+
+在啟動 API 前，談談網路開發最重要的觀念之一：如何真正保護你的祕密不外洩。環境變數就像保險庫，只有你的程式能查看。  
+
+#### 什麼是環境變數？  
+
+**把環境變數想成保險箱** —— 你把珍貴的東西放進去，只有你（和應用程式）有鑰匙能打開。不要把敏感資訊直接寫在程式碼裡（任何人都能看到），而是用環境妥善存放。  
+
+**差別在這裡：**  
+- **錯誤方式**：把密碼寫在便利貼貼在螢幕上  
+- **正確方式**：把密碼放進只有你能存取的密碼管理器  
+
+#### 為什麼環境變數重要  
+
+```python
+# 🚨 千祈唔好咁做 - API 金鑰對所有人可見
+client = OpenAI(
+    api_key="ghp_1234567890abcdef...",  # 任何人都可以偷走佢！
+    base_url="https://models.github.ai/inference"
+)
+
+# ✅ 咁做啱 - API 金鑰安全咁儲存
+client = OpenAI(
+    api_key=os.environ["GITHUB_TOKEN"],  # 得你嘅應用程式先可以訪問到佢
+    base_url="https://models.github.ai/inference"
+)
+```
+  
+**硬編碼祕密的後果：**  
+1. **版本控制洩漏**：任何有權限看你的 Git 倉庫者也能看到你的 API 金鑰  
+2. **公開倉庫風險**：若推送到 GitHub，金鑰暴露於全球網路  
+3. **團隊共享風險**：其他開發人員會用到你的個人 API 金鑰  
+4. **安全漏洞**：金鑰被盜用，可能讓人濫用你的 AI 點數  
+
+#### 建立環境檔 .env  
+
+在後端專案目錄新增 `.env` 檔，本地存放你的秘密：  
+
+```bash
+# .env 文件 - 絕對唔好提交到 Git
+GITHUB_TOKEN=your_github_personal_access_token_here
+FASTAPI_DEBUG=True
+ENVIRONMENT=development
+```
+  
+**認識 .env 檔：**  
+- 每行一條祕密，以 `KEY=value` 格式存放  
+- 等號兩側不能有空白  
+- 通常值不需要加引號  
+- 註解以 `#` 開頭  
+
+#### 建立 GitHub 個人存取令牌  
+
+你的 GitHub 令牌就像授權密碼，允許你的應用使用 GitHub 的 AI 服務：  
+
+**建立令牌步驟：**  
+1. 前往 GitHub 設定 → 開發者設定 → 個人存取令牌 → 傳統令牌  
+2. 點擊「產生新令牌（傳統）」  
+3. 設定有效期限（測試用 30 天，正式可更長）  
+4. 選擇完整權限範圍：勾選「repo」及其他需要的權限  
+5. 產生令牌並立即複製（之後無法再看！）  
+6. 貼到你的 `.env` 檔案裡  
+
+```bash
+# 你嘅 token 長咩樣嘅範例（呢個係偽造嘅！）
+GITHUB_TOKEN=ghp_1A2B3C4D5E6F7G8H9I0J1K2L3M4N5O6P7Q8R
+```
+  
+#### 在 Python 中載入環境變數  
+
+```python
+import os
+from dotenv import load_dotenv
+
+# 從 .env 檔案載入環境變數
+load_dotenv()
+
+# 現在你可以安全地存取它們
+api_key = os.environ.get("GITHUB_TOKEN")
+if not api_key:
+    raise ValueError("GITHUB_TOKEN not found in environment variables!")
+
+client = OpenAI(
+    api_key=api_key,
+    base_url="https://models.github.ai/inference"
+)
+```
+  
+**這段程式做了什麼：**  
+- 載入你的 `.env` 檔，讓環境變數在 Python 裡可用  
+- 檢查是否有帶必要的令牌（錯誤處理良好！）  
+- 缺少時拋出明確錯誤  
+- 安全使用令牌且不會曝露在程式碼裡  
+
+#### Git 安全：.gitignore 檔  
+
+你的 `.gitignore` 檔告訴 Git 哪些檔案不該追蹤或上傳：  
+
+```bash
+# .gitignore - 新增這些行
+.env
+*.env
+.env.local
+.env.production
+__pycache__/
+venv/
+.vscode/
+```
+  
+**這很關鍵**：加入 `.env` 到 `.gitignore` 後，Git 會忽略環境變數檔，避免你不小心把祕密上傳到 GitHub。  
+
+#### 不同環境，不同祕密  
+
+專業應用會針對不同環境使用不同 API 金鑰：  
+
+```bash
+# .env.development
+GITHUB_TOKEN=your_development_token
+DEBUG=True
+
+# .env.production
+GITHUB_TOKEN=your_production_token
+DEBUG=False
+```
+  
+**原因說明**：你不想讓開發時的測試影響生產環境 AI 使用額度，也希望在不同環境有不同安全控管。  
+
+### 啟動開發伺服器：讓你的 FastAPI 活起來  
+
+現在到了令人興奮的時刻——啟動你的 FastAPI 開發伺服器，見證你的 AI 整合活起來！FastAPI 使用 Uvicorn，一個極速的 ASGI 伺服器，專為非同步 Python 應用程式設計。
+
+#### 了解 FastAPI 伺服器啟動過程
+
+```bash
+# 方法 1：直接 Python 執行（包括自動重新載入）
+python api.py
+
+# 方法 2：直接使用 Uvicorn（更多控制）
+uvicorn api:app --host 0.0.0.0 --port 5000 --reload
+```
+
+當你執行這個指令時，背後會發生以下事情：
+
+**1. Python 載入你的 FastAPI 應用程式**：
+- 匯入所有必需的函式庫（FastAPI、Pydantic、OpenAI 等）
+- 從你的 `.env` 檔案載入環境變數
+- 建立 FastAPI 應用程式實例，並附帶自動文件功能
+
+**2. Uvicorn 設定 ASGI 伺服器**：
+- 綁定在 5000 埠口，具備非同步請求處理能力
+- 設置請求路由並自動驗證
+- 啟用熱重載，方便開發時監看檔案變更後重啟
+- 產生互動式 API 文件
+
+**3. 伺服器開始監聽**：
+- 你的終端機會顯示：`INFO: Uvicorn running on http://0.0.0.0:5000`
+- 伺服器可以處理多個並發的 AI 請求
+- 你的 API 可即時使用，且自動文件位於 `http://localhost:5000/docs`
+
+#### 當一切正常時你應該看到的畫面
+
+```bash
+$ python api.py
+INFO:     Will watch for changes in these directories: ['/your/project/path']
+INFO:     Uvicorn running on http://0.0.0.0:5000 (Press CTRL+C to quit)
+INFO:     Started reloader process [12345] using WatchFiles
+INFO:     Started server process [12346]
+INFO:     Waiting for application startup.
+INFO:     Application startup complete.
+```
+
+**了解 FastAPI 輸出訊息：**
+- **Will watch for changes**：開發模式下啟用自動重載
+- **Uvicorn running**：高效能 ASGI 伺服器正在運行
+- **Started reloader process**：檔案監視器啟動，用於自動重啟
+- **Application startup complete**：FastAPI 應用程式成功初始化
+- **Interactive docs available**：瀏覽 `/docs` 獲取自動產生的 API 文件
+
+#### 測試你的 FastAPI：多種強大方法
+
+FastAPI 提供多種方便測試 API 的方式，包括自動的互動文件：
+
+**方法 1：互動式 API 文件（推薦）**
+1. 開啟瀏覽器，前往 `http://localhost:5000/docs`
+2. 你會看到用 Swagger UI 呈現的所有 API 端點文件
+3. 點選 `/hello` → 按「Try it out」→ 輸入測試訊息 → 按「Execute」
+4. 立即在瀏覽器中看到格式化良好的回應結果
+
+**方法 2：基本瀏覽器測試**
+1. 開啟 `http://localhost:5000` 測試根路由
+2. 開啟 `http://localhost:5000/health` 檢查伺服器健康狀況
+3. 可確認你的 FastAPI 伺服器正常運行
+
+**方法 2：命令列測試（進階）**
+```bash
+# 用 curl 測試（如果有的話）
+curl -X POST http://localhost:5000/hello \
+  -H "Content-Type: application/json" \
+  -d '{"message": "Hello AI!"}'
+
+# 預期回應：
+# {"response": "你好！我是你的 AI 助手。今天有什麼可以幫到你？"}
+```
+
+**方法 3：Python 測試腳本**
+```python
+# test_api.py - 建立此檔案以測試你的 API
+import requests
+import json
+
+# 測試 API 端點
+url = "http://localhost:5000/hello"
+data = {"message": "Tell me a joke about programming"}
+
+response = requests.post(url, json=data)
+if response.status_code == 200:
+    result = response.json()
+    print("AI Response:", result['response'])
+else:
+    print("Error:", response.status_code, response.text)
+```
+
+#### 常見啟動問題排錯
+
+| 錯誤訊息 | 含意 | 解決方法 |
+|---------------|---------------|------------|
+| `ModuleNotFoundError: No module named 'fastapi'` | 未安裝 FastAPI | 在虛擬環境中執行 `pip install fastapi uvicorn` |
+| `ModuleNotFoundError: No module named 'uvicorn'` | 未安裝 ASGI 伺服器 | 在虛擬環境中執行 `pip install uvicorn` |
+| `KeyError: 'GITHUB_TOKEN'` | 找不到環境變數 | 檢查你的 `.env` 檔案及 `load_dotenv()` 呼叫 |
+| `Address already in use` | 5000 埠口被佔用 | 終止其他佔用 5000 埠口的程序或更換埠口 |
+| `ValidationError` | 請求資料與 Pydantic 模型不符 | 檢查請求格式是否符合預期結構 |
+| `HTTPException 422` | 請求無法處理 | 驗證失敗，請查閱 `/docs` 確認格式正確 |
+| `OpenAI API error` | AI 服務驗證失敗 | 確認你的 GitHub token 正確且擁有權限 |
+
+#### 開發最佳實踐
+
+**熱重載**：FastAPI 與 Uvicorn 支援在保存 Python 檔案後自動重載。這意味著你可以立刻修改與測試而無需手動重啟。
+
+```python
+# 明確啟用熱重載
+if __name__ == "__main__":
+    app.run(host="0.0.0.0", port=5000, debug=True)  # debug=True 啟用熱重載
+```
+
+**開發紀錄**：加入 logging 以便了解系統運作狀況：
+
+```python
+import logging
+
+# 設定日誌記錄
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
 
 @app.route("/hello", methods=["POST"])
 def hello():
-    # get message from request body  { "message": "do this taks for me" }
     data = request.get_json()
     message = data.get("message", "")
+    
+    logger.info(f"Received message: {message}")
+    
+    if not message:
+        logger.warning("Empty message received")
+        return jsonify({"error": "Message field is required"}), 400
+    
+    try:
+        response = call_llm(message, "You are a helpful and friendly assistant.")
+        logger.info(f"AI response generated successfully")
+        return jsonify({"response": response})
+    except Exception as e:
+        logger.error(f"AI API error: {str(e)}")
+        return jsonify({"error": "AI service temporarily unavailable"}), 500
+```
 
-    response = call_llm(message, "You are a helpful assistant.")
-    return jsonify({
-        "response": response
-    })
+**logging 的好處**：開發期間可清晰看見收到的請求內容、AI 的回應，以及錯誤發生的位置，大幅加快除錯速度。
 
-if __name__ == "__main__":
-    app.run(host="0.0.0.0", port=5000)
+### GitHub Codespaces 配置：輕鬆雲端開發
+
+GitHub Codespaces 就像一台強大開發電腦在雲端，可從任意瀏覽器存取。若你在 Codespaces 裡工作，還有一些額外設定要讓你的後端服務能讓前端訪問。
+
+#### 了解 Codespaces 網路環境
+
+本地開發環境中，一切在同一台電腦運行：
+- 後端：`http://localhost:5000`
+- 前端：`http://localhost:3000`（或 `file://`）
+
+Codespaces 在 GitHub 伺服器上執行，因此「localhost」意義不同。GitHub 會自動建立服務的公開 URL，但你必須正確配置。
+
+#### Codespaces 配置步驟
+
+**1. 啟動你的後端伺服器**：
+```bash
+cd backend
+python api.py
 ```
 
-在這裡，我們創建了一個 Flask API，並定義了默認路由 "/" 和 "/chat"。後者是為了讓前端傳遞問題給後端。
+你會看到熟悉的 FastAPI/Uvicorn 啟動訊息，但注意它運行在 Codespace 環境中。
 
-要整合 *llm.py*，我們需要做以下幾件事：
+**2. 設定埠口可見性**：
+- 在 VS Code 下方面板找到「Ports」分頁
+- 找到列表中的 5000 埠口
+- 右鍵點擊 5000 埠口
+- 選擇「Port Visibility」→「Public」
 
-- 導入 `call_llm` 函數：
+**為何要設為公開？** 預設 Codespace 埠口為私有（只有你自己可以訪問）。設為公開後，前端（瀏覽器執行）才能跟後端溝通。
 
-   ```python
-   from llm import call_llm
-   from flask import Flask, request
-   ```
+**3. 取得公開 URL**：
+設為公開後，你會看到類似的 URL：
+```
+https://your-codespace-name-5000.app.github.dev
+```
 
-- 從 "/chat" 路由調用它：
+**4. 更新前端設定**：
+```javascript
+// 在你的前端 app.js 中，更新 BASE_URL：
+this.BASE_URL = "https://your-codespace-name-5000.app.github.dev";
+```
 
-   ```python
-   @app.route("/hello", methods=["POST"])
-   def hello():
-      # get message from request body  { "message": "do this taks for me" }
-      data = request.get_json()
-      message = data.get("message", "")
+#### 了解 Codespace URL
 
-      response = call_llm(message, "You are a helpful assistant.")
-      return jsonify({
-         "response": response
-      })
-   ```
+Codespace URL 結構很有規律：
+```
+https://[codespace-name]-[port].app.github.dev
+```
 
-   在這裡，我們解析傳入的請求，從 JSON 主體中檢索 `message` 屬性。然後，我們通過以下調用來調用 LLM：
+**細節說明：**
+- `codespace-name`：你 Codespace 的唯一識別（通常會包含你的使用者名稱）
+- `port`：你服務運行的埠口號（我們 FastAPI 是 5000）
+- `app.github.dev`：GitHub Codespace 應用程式專用網域
 
-   ```python
-   response = call_llm(message, "You are a helpful assistant")
+#### 測試你的 Codespace 設定
 
-   # return the response as JSON
-   return jsonify({
-      "response": response 
-   })
-   ```
+**1. 直接測試後端**：
+在新分頁開啟你的公開 URL，你應該看到：
+```
+Welcome to the AI Chat API. Send POST requests to /hello with JSON payload containing 'message' field.
+```
 
-很好，現在我們已經完成了所需的部分。
+**2. 使用瀏覽器開發工具測試**：
+```javascript
+// 打開瀏覽器控制台並測試您的 API
+fetch('https://your-codespace-name-5000.app.github.dev/hello', {
+  method: 'POST',
+  headers: {'Content-Type': 'application/json'},
+  body: JSON.stringify({message: 'Hello from Codespaces!'})
+})
+.then(response => response.json())
+.then(data => console.log(data));
+```
 
-## 配置 Cors
+#### Codespaces 與本地開發比較
 
-我們需要提到的是，我們設置了類似 CORS（跨域資源共享）的東西。這意味著，由於我們的後端和前端將在不同的端口運行，我們需要允許前端調用後端。
+| 方面 | 本地開發 | GitHub Codespaces |
+|--------|-------------------|-------------------|
+| **設定時間** | 較長（需安裝 Python、依賴） | 即時（預先配置環境） |
+| **URL 訪問** | `http://localhost:5000` | `https://xyz-5000.app.github.dev` |
+| **埠口配置** | 自動 | 手動（需公開埠口） |
+| **檔案持久性** | 存在本機 | 存在 GitHub 儲存庫 |
+| **協作方式** | 難以共享環境 | 簡單共享 Codespace 連結 |
+| **依賴網際網路** | 只對 AI API 需要 | 全程需要 |
 
-### 使用 Python
+#### Codespace 開發小貼士
 
-在 *api.py* 中有一段代碼設置了這個功能：
+**在 Codespaces 使用環境變數**：
+你的 `.env` 檔案在 Codespaces 中同樣適用，但你也可以直接在 Codespace 中設定環境變數：
 
-```python
-from flask_cors import CORS
+```bash
+# 設定目前 session 的環境變數
+export GITHUB_TOKEN="your_token_here"
 
-app = Flask(__name__)
-CORS(app)   # *   example.com
+# 或者加入你的 .bashrc 以持久保存
+echo 'export GITHUB_TOKEN="your_token_here"' >> ~/.bashrc
 ```
 
-目前，它被設置為允許 "*"，即所有來源，這有點不安全，我們應該在進入生產環境時進行限制。
+**埠口管理**：
+- Codespaces 會自動偵測應用程式監聽的埠口
+- 可同時轉發多個埠口（對日後加入資料庫很方便）
+- 埠口只要 Codespace 運行中就一直可用
 
-## 運行你的項目
+**開發流程**：
+1. 在 VS Code 編寫程式碼
+2. FastAPI 自動重載（感謝 Uvicorn 重載模式）
+3. 透過公開 URL 立即測試變動
+4. 準備好就 commit 並推送
 
-要運行你的項目，你需要先啟動後端，然後啟動前端。
+> 💡 **專業提示**：開發時將你的 Codespace 後端 URL 加入書籤。由於 Codespace 名稱穩定，只要使用同一個 Codespace，URL 不會改變。
 
-### 使用 Python
+## 建立前端聊天介面：人類與 AI 的互動空間
 
-好的，我們有 *llm.py* 和 *api.py*，如何讓它們與後端一起工作呢？我們需要做兩件事：
+現在我們開始打造使用者介面——決定人們如何與你的 AI 助理互動的部分。如同原始 iPhone 的介面設計，我們聚焦讓複雜技術變得直觀且自然好用。
 
-- 安裝依賴項：
+### 了解現代前端架構
 
-   ```sh
-   cd backend
-   python -m venv venv
-   source ./venv/bin/activate
+我們的聊天介面會是所謂的「單頁應用程式」（SPA）。不再像舊式網站每次點擊載入新頁面，而是流暢且即時地更新：
 
-   pip install openai flask flask-cors openai
-   ```
+**舊網站**：像在翻閱實體書本——翻到完全不同的頁面  
+**我們的聊天應用**：像在用手機——一切自然流暢地更新
+
+```mermaid
+graph TD
+    A[用戶輸入訊息] --> B[JavaScript 捕捉輸入]
+    B --> C[驗證及格式化資料]
+    C --> D[發送至後端 API]
+    D --> E[顯示載入狀態]
+    E --> F[接收 AI 回覆]
+    F --> G[更新聊天介面]
+    G --> H[準備下一則訊息]
+```
+```mermaid
+classDiagram
+    class ChatApp {
+        +messages: HTMLElement
+        +form: HTMLElement
+        +input: HTMLElement
+        +sendButton: HTMLElement
+        +BASE_URL: string
+        +API_ENDPOINT: string
+        
+        +constructor()
+        +initializeEventListeners()
+        +handleSubmit(event)
+        +callAPI(message)
+        +appendMessage(text, role)
+        +escapeHtml(text)
+        +scrollToBottom()
+        +setLoading(isLoading)
+    }
+    
+    ChatApp --> DOM : 操作
+    ChatApp --> FastAPI : 發送請求
+```
+### 前端開發的三大支柱
 
-- 啟動 API：
+所有前端應用——從簡單網站到像 Discord 或 Slack 般複雜的軟體——都是建立在三種核心技術之上。把它們當成網頁上你看見並互動的一切基礎：
 
-   ```sh
-   python api.py
-   ```
+**HTML（結構）**：你的基石  
+- 決定哪些元素存在（按鈕、文字輸入框、容器）  
+- 給內容賦予意義（這是標題，這是表單，等等）  
+- 建立其他一切的基本結構  
+
+**CSS（呈現）**：你的室內設計師  
+- 讓一切變美（顏色、字型、版面配置）  
+- 處理不同螢幕大小（手機、筆電、平板）  
+- 製造平滑動畫與視覺回饋  
+
+**JavaScript（行為）**：你的大腦  
+- 回應使用者行為（點擊、輸入、捲動）  
+- 跟後端對話並更新頁面  
+- 讓一切變得互動與動態  
+
+**把它想成建築設計：**  
+- **HTML**：結構藍圖（定義空間與關係）  
+- **CSS**：美學與環境設計（視覺風格與使用者體驗）  
+- **JavaScript**：機械系統（功能與互動）
 
-   如果你在 Codespaces 中，請前往編輯器底部的 Ports，右鍵點擊它，選擇 "Port Visibility"，然後選擇 "Public"。
+### 為何現代 JavaScript 架構重要
 
-### 開發前端
+我們的聊天應用會使用你在專業應用中會見到的現代 JavaScript 模式。理解這些概念能幫助你成長為優秀開發者：
 
-現在我們的 API 已經運行起來了，讓我們為此創建一個前端。這是一個最低限度的前端，我們將逐步改進它。在 *frontend* 文件夾中，創建以下內容：
+**類別架構**：我們用類別組織程式碼，猶如為物件繪製藍圖  
+**Async/Await**：現代處理耗時操作（如 API 呼叫）的方法  
+**事件驅動程式設計**：應用回應使用者行為（點擊、按鍵），非持續輪詢  
+**DOM 操作**：根據使用者互動與 API 回應動態更新網頁內容
+
+### 專案結構設定
+
+創建一個前端資料夾及有組織的結構：
 
 ```text
-backend/
 frontend/
-index.html
-app.js
-styles.css
+├── index.html      # Main HTML structure
+├── app.js          # JavaScript functionality
+└── styles.css      # Visual styling
 ```
 
-讓我們從 **index.html** 開始：
+**理解架構：**  
+- **分離** 結構（HTML）、行為（JavaScript）與呈現（CSS）的關注點  
+- **維持** 一個簡單且易於瀏覽修改的檔案結構  
+- **遵循** 網頁開發組織性與可維護性最佳實踐
+
+### 建立 HTML 基礎：語義化結構與無障礙設計
+
+讓我們從 HTML 結構開始。現代網頁開發強調「語義化 HTML」——使用明確描述元素用途的 HTML 元素，而非僅外觀定義。這使你的應用對螢幕閱讀器、搜尋引擎等工具更友好。
+
+**為何語義化 HTML 重要**：想像你要用電話描述你的聊天應用。你會說「有個標題在上方，主區域呈現對話，底部有個表單輸入訊息。」語義化 HTML 就是用符合這樣自然描述的元素。
+
+建立 `index.html`，並使用這樣經心布局的標記：
 
 ```html
-<html>
-    <head>
-        <link rel="stylesheet" href="styles.css">
-    </head>
-    <body>
-      <form>
-        <textarea id="messages"></textarea>
-        <input id="input" type="text" />
-        <button type="submit" id="sendBtn">Send</button>  
-      </form>  
-      <script src="app.js" />
-    </body>
-</html>    
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Chat Assistant</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="chat-container">
+        <header class="chat-header">
+            <h1>AI Chat Assistant</h1>
+            <p>Ask me anything!</p>
+        </header>
+        
+        <main class="chat-messages" id="messages" role="log" aria-live="polite">
+            <!-- Messages will be dynamically added here -->
+        </main>
+        
+        <form class="chat-form" id="chatForm">
+            <div class="input-group">
+                <input 
+                    type="text" 
+                    id="messageInput" 
+                    placeholder="Type your message here..." 
+                    required
+                    aria-label="Chat message input"
+                >
+                <button type="submit" id="sendBtn" aria-label="Send message">
+                    Send
+                </button>
+            </div>
+        </form>
+    </div>
+    <script src="app.js"></script>
+</body>
+</html>
 ```
 
-以上是支持聊天窗口所需的最低限度，包含一個用於顯示消息的文本區域、一個輸入框用於輸入消息，以及一個按鈕用於將消息發送到後端。接下來讓我們看看 *app.js* 中的 JavaScript：
+**了解各 HTML 元素及其用途：**
+
+#### 文件結構
+- **`<!DOCTYPE html>`**：告訴瀏覽器這是現代 HTML5  
+- **`<html lang="en">`**：指定頁面語言，方便螢幕閱讀器與翻譯工具  
+- **`<meta charset="UTF-8">`**：確保國際語言字元正確編碼  
+- **`<meta name="viewport"...>`**：控制縮放與比例，使頁面具備行動裝置響應式設計  
+
+#### 語義元素
+- **`<header>`**：明確標示上方標題及描述區  
+- **`<main>`**：指定主要內容區（顯示對話）  
+- **`<form>`**：語義正確的使用者輸入表單，方便鍵盤導航
+
+#### 無障礙特性
+- **`role="log"`**：告知螢幕閱讀器此區域含時間序訊息記錄  
+- **`aria-live="polite"`**：溫和呈報新訊息，避免打斷讀者  
+- **`aria-label`**：為表單控制項提供描述性標籤  
+- **`required`**：瀏覽器驗證必須輸入訊息才能送出
+
+#### CSS 與 JavaScript 整合
+- **`class` 屬性**：用於 CSS 美化（如 `chat-container`、`input-group`）  
+- **`id` 屬性**：JavaScript 可定位並操作特定元素  
+- **腳本放置**：JavaScript 檔案於末尾載入，讓 HTML 可先加載完成  
+
+**此結構有效原因**：
+- **邏輯流程**：標頭 → 主要內容 → 輸入表單，符合自然閱讀順序  
+- **鍵盤可達性**：使用者可用 Tab 鍵遍歷所有互動元素  
+- **螢幕閱讀友善**：明確定位及描述，方便視障使用者  
+- **行動響應式**： viewport 標籤啟用響應式設計  
+- **漸進強化**：即使 CSS 或 JavaScript 載入失敗依然可用
+
+### 加入互動 JavaScript：現代網頁應用邏輯  
+
+現在讓我們編寫 JavaScript，使我們的聊天介面活起來。我們將使用您在專業網頁開發中會遇到的現代 JavaScript 樣式，包括 ES6 類別、async/await 和事件驅動程式設計。
+
+#### 了解現代 JavaScript 架構
+
+我們不會寫程序式程式碼（一連串按順序執行的函式），而是建立一個**基於類別的架構**。想像類別是一份用於創建物件的藍圖—就像建築師的藍圖可以用來建造多棟房子。
+
+**為什麼使用類別來開發網頁應用？**
+- **組織性**：將所有相關功能歸類在一起
+- **可重複使用**：可以在同一頁面上創造多個聊天實例
+- **維護性**：更容易除錯及修改特定功能
+- **專業標準**：此模式在 React、Vue 和 Angular 等框架中被廣泛使用
+
+建立 `app.js`，使用這份現代且結構良好的 JavaScript：
+
+```javascript
+// app.js - 現代聊天應用程式邏輯
+
+class ChatApp {
+    constructor() {
+        // 獲取我們需要操作的 DOM 元素參考
+        this.messages = document.getElementById("messages");
+        this.form = document.getElementById("chatForm");
+        this.input = document.getElementById("messageInput");
+        this.sendButton = document.getElementById("sendBtn");
+        
+        // 在此配置您的後端 URL
+        this.BASE_URL = "http://localhost:5000"; // 為您的環境更新此設定
+        this.API_ENDPOINT = `${this.BASE_URL}/hello`;
+        
+        // 在建立聊天應用程式時設定事件監聽器
+        this.initializeEventListeners();
+    }
+    
+    initializeEventListeners() {
+        // 監聽表單提交（當用戶點擊發送或按下 Enter）
+        this.form.addEventListener("submit", (e) => this.handleSubmit(e));
+        
+        // 也監聽輸入欄的 Enter 鍵（更佳使用者體驗）
+        this.input.addEventListener("keypress", (e) => {
+            if (e.key === "Enter" && !e.shiftKey) {
+                e.preventDefault();
+                this.handleSubmit(e);
+            }
+        });
+    }
+    
+    async handleSubmit(event) {
+        event.preventDefault(); // 防止表單刷新頁面
+        
+        const messageText = this.input.value.trim();
+        if (!messageText) return; // 不要發送空訊息
+        
+        // 提供使用者反饋，表示系統正在處理
+        this.setLoading(true);
+        
+        // 立即將用戶訊息加入聊天（樂觀 UI）
+        this.appendMessage(messageText, "user");
+        
+        // 清除輸入欄讓用戶輸入下一條訊息
+        this.input.value = '';
+        
+        try {
+            // 呼叫 AI API 並等待回應
+            const reply = await this.callAPI(messageText);
+            
+            // 將 AI 回應加入聊天
+            this.appendMessage(reply, "assistant");
+        } catch (error) {
+            console.error('API Error:', error);
+            this.appendMessage("Sorry, I'm having trouble connecting right now. Please try again.", "error");
+        } finally {
+            // 不論成功或失敗皆重新啟用介面
+            this.setLoading(false);
+        }
+    }
+    
+    async callAPI(message) {
+        const response = await fetch(this.API_ENDPOINT, {
+            method: "POST",
+            headers: { 
+                "Content-Type": "application/json" 
+            },
+            body: JSON.stringify({ message })
+        });
+        
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        
+        const data = await response.json();
+        return data.response;
+    }
+    
+    appendMessage(text, role) {
+        const messageElement = document.createElement("div");
+        messageElement.className = `message ${role}`;
+        messageElement.innerHTML = `
+            <div class="message-content">
+                <span class="message-text">${this.escapeHtml(text)}</span>
+                <span class="message-time">${new Date().toLocaleTimeString()}</span>
+            </div>
+        `;
+        
+        this.messages.appendChild(messageElement);
+        this.scrollToBottom();
+    }
+    
+    escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+    
+    scrollToBottom() {
+        this.messages.scrollTop = this.messages.scrollHeight;
+    }
+    
+    setLoading(isLoading) {
+        this.sendButton.disabled = isLoading;
+        this.input.disabled = isLoading;
+        this.sendButton.textContent = isLoading ? "Sending..." : "Send";
+    }
+}
 
-**app.js**
+// 在頁面載入時初始化聊天應用程式
+document.addEventListener("DOMContentLoaded", () => {
+    new ChatApp();
+});
+```
 
-```js
-// app.js
+#### 理解每個 JavaScript 概念
+
+**ES6 類別結構**：
+```javascript
+class ChatApp {
+    constructor() {
+        // 當你建立新的 ChatApp 實例時會執行這段程式
+        // 它就像你的聊天的「設定」功能
+    }
+    
+    methodName() {
+        // 方法是屬於類別的函式
+        // 它們可以使用「this」存取類別屬性
+    }
+}
+```
 
-(function(){
-  // 1. set up elements  
-  const messages = document.getElementById("messages");
-  const form = document.getElementById("form");
-  const input = document.getElementById("input");
+**Async/Await 範式**：
+```javascript
+// 舊方法（回調地獄）：
+fetch(url)
+  .then(response => response.json())
+  .then(data => console.log(data))
+  .catch(error => console.error(error));
+
+// 新方法（async/await）：
+try {
+    const response = await fetch(url);
+    const data = await response.json();
+    console.log(data);
+} catch (error) {
+    console.error(error);
+}
+```
 
-  const BASE_URL = "change this";
-  const API_ENDPOINT = `${BASE_URL}/hello`;
+**事件驅動程式設計**：
+我們不是持續檢查某件事是否發生，而是「監聽」事件：
+```javascript
+// 表單提交時，執行 handleSubmit
+this.form.addEventListener("submit", (e) => this.handleSubmit(e));
 
-  // 2. create a function that talks to our backend
-  async function callApi(text) {
-    const response = await fetch(API_ENDPOINT, {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ message: text })
-    });
-    let json = await response.json();
-    return json.response;
-  }
+// 按下 Enter 鍵時，同樣執行 handleSubmit
+this.input.addEventListener("keypress", (e) => { /* ... */ });
+```
 
-  // 3. add response to our textarea
-  function appendMessage(text, role) {
-    const el = document.createElement("div");
-    el.className = `message ${role}`;
-    el.innerHTML = text;
-    messages.appendChild(el);
-  }
+**DOM 操作**：
+```javascript
+// 建立新元素
+const messageElement = document.createElement("div");
 
-  // 4. listen to submit events
-  form.addEventListener("submit", async(e) => {
-    e.preventDefault();
-   // someone clicked the button in the form
-   
-   // get input
-   const text = input.value.trim();
+// 修改其屬性
+messageElement.className = "message user";
+messageElement.innerHTML = "Hello world!";
 
-   appendMessage(text, "user")
+// 加入頁面中
+this.messages.appendChild(messageElement);
+```
 
-   // reset it
-   input.value = '';
+#### 安全性與最佳實踐
 
-   const reply = await callApi(text);
+**XSS 防禦**：
+```javascript
+escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;  // 這會自動對 HTML 進行轉義
+    return div.innerHTML;
+}
+```
 
-   // add to messages
-   appendMessage(reply, "assistant");
+**重要原因**：若使用者輸入 `<script>alert('hack')</script>`，此函式確保它以純文字顯示而非執行程式碼。
 
-  })
-})();
+**錯誤處理**：
+```javascript
+try {
+    const reply = await this.callAPI(messageText);
+    this.appendMessage(reply, "assistant");
+} catch (error) {
+    // 顯示用戶友好的錯誤，而不是崩潰應用程式
+    this.appendMessage("Sorry, I'm having trouble...", "error");
+}
 ```
 
-讓我們逐段解析代碼：
+**使用者體驗考量**：
+- **樂觀 UI**：立即加入使用者訊息，不用等待伺服器回應
+- **載入狀態**：等待時停用按鈕並顯示「傳送中...」
+- **自動滾動**：保持最新訊息總是可見
+- **輸入驗證**：避免傳送空白訊息
+- **鍵盤捷徑**：Enter 鍵送出訊息（如同真正的聊天應用）
 
-- 1) 在這裡，我們獲取所有稍後會在代碼中引用的元素。
-- 2) 在這部分，我們創建了一個函數，使用內建的 `fetch` 方法來調用後端。
-- 3) `appendMessage` 幫助添加響應以及用戶輸入的消息。
-- 4) 在這裡，我們監聽提交事件，讀取輸入字段，將用戶的消息放入文本區域，調用 API，並將響應渲染到文本區域中。
+#### 了解應用程式流程
 
-接下來讓我們看看樣式設置，這裡你可以自由發揮，讓它看起來像你想要的樣子，但以下是一些建議：
+1. **頁面載入** → 觸發 `DOMContentLoaded` 事件 → 創建 `new ChatApp()`
+2. **建構子執行** → 取得 DOM 元素引用 → 設定事件監聽器
+3. **使用者輸入訊息** → 按 Enter 或點擊送出 → 執行 `handleSubmit`
+4. **handleSubmit** → 驗證輸入 → 顯示載入狀態 → 呼叫 API
+5. **API 回應** → 加入 AI 訊息至聊天視窗 → 重新啟用介面
+6. **準備下一則訊息** → 使用者可繼續對話
 
-**styles.css**
+此架構具備可擴充性——您可以輕鬆加入訊息編輯、檔案上傳或多會話執行緒等功能，而無需重寫核心結構。
+
+### 🎯 教學檢核點：現代前端架構
+
+**架構理解**：您已實作了一個完整的單頁應用，並使用了現代 JavaScript 範式，代表專業等級的前端開發。
+
+**掌握的關鍵概念**：
+- **ES6 類別架構**：組織良好且易維護的程式碼結構
+- **Async/Await 範式**：現代非同步程式設計
+- **事件驅動程式設計**：響應式使用者介面設計
+- **安全最佳實務**：XSS 防護與輸入驗證
+
+**產業連結**：您學到的模式（基於類別的架構、非同步操作、DOM 操作）是現代框架如 React、Vue 和 Angular 的基礎。您正在以與生產環境應用相同的設計思維搭建。
+
+**反思問題**：您會如何擴展這個聊天應用來處理多重會話或使用者認證？思考需要哪些架構上的變動，以及類別結構將如何演進。
+
+### 為您的聊天介面設計樣式
+
+現在讓我們用 CSS 創造一個現代且視覺吸引的聊天介面。良好的樣式讓您的應用看起來更專業，也提升用戶整體體驗。我們將使用 Flexbox、CSS Grid 及自訂屬性等現代 CSS 技術，打造響應式且易用的設計。
+
+建立 `styles.css`，內容包含完整的樣式：
+
+```css
+/* styles.css - Modern chat interface styling */
+
+:root {
+    --primary-color: #2563eb;
+    --secondary-color: #f1f5f9;
+    --user-color: #3b82f6;
+    --assistant-color: #6b7280;
+    --error-color: #ef4444;
+    --text-primary: #1e293b;
+    --text-secondary: #64748b;
+    --border-radius: 12px;
+    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+}
+
+.chat-container {
+    width: 100%;
+    max-width: 800px;
+    height: 600px;
+    background: white;
+    border-radius: var(--border-radius);
+    box-shadow: var(--shadow);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.chat-header {
+    background: var(--primary-color);
+    color: white;
+    padding: 20px;
+    text-align: center;
+}
+
+.chat-header h1 {
+    font-size: 1.5rem;
+    margin-bottom: 5px;
+}
+
+.chat-header p {
+    opacity: 0.9;
+    font-size: 0.9rem;
+}
+
+.chat-messages {
+    flex: 1;
+    padding: 20px;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    background: var(--secondary-color);
+}
 
-```
 .message {
-    background: #222;
-    box-shadow: 0 0 0 10px orange;
-    padding: 10px:
-    margin: 5px;
+    display: flex;
+    max-width: 80%;
+    animation: slideIn 0.3s ease-out;
 }
 
 .message.user {
-    background: blue;
+    align-self: flex-end;
+}
+
+.message.user .message-content {
+    background: var(--user-color);
+    color: white;
+    border-radius: var(--border-radius) var(--border-radius) 4px var(--border-radius);
 }
 
 .message.assistant {
-    background: grey;
-} 
+    align-self: flex-start;
+}
+
+.message.assistant .message-content {
+    background: white;
+    color: var(--text-primary);
+    border-radius: var(--border-radius) var(--border-radius) var(--border-radius) 4px;
+    border: 1px solid #e2e8f0;
+}
+
+.message.error .message-content {
+    background: var(--error-color);
+    color: white;
+    border-radius: var(--border-radius);
+}
+
+.message-content {
+    padding: 12px 16px;
+    box-shadow: var(--shadow);
+    position: relative;
+}
+
+.message-text {
+    display: block;
+    line-height: 1.5;
+    word-wrap: break-word;
+}
+
+.message-time {
+    display: block;
+    font-size: 0.75rem;
+    opacity: 0.7;
+    margin-top: 5px;
+}
+
+.chat-form {
+    padding: 20px;
+    border-top: 1px solid #e2e8f0;
+    background: white;
+}
+
+.input-group {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+}
+
+#messageInput {
+    flex: 1;
+    padding: 12px 16px;
+    border: 2px solid #e2e8f0;
+    border-radius: var(--border-radius);
+    font-size: 1rem;
+    outline: none;
+    transition: border-color 0.2s ease;
+}
+
+#messageInput:focus {
+    border-color: var(--primary-color);
+}
+
+#messageInput:disabled {
+    background: #f8fafc;
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+#sendBtn {
+    padding: 12px 24px;
+    background: var(--primary-color);
+    color: white;
+    border: none;
+    border-radius: var(--border-radius);
+    font-size: 1rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+    min-width: 80px;
+}
+
+#sendBtn:hover:not(:disabled) {
+    background: #1d4ed8;
+}
+
+#sendBtn:disabled {
+    background: #94a3b8;
+    cursor: not-allowed;
+}
+
+@keyframes slideIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* Responsive design for mobile devices */
+@media (max-width: 768px) {
+    body {
+        padding: 10px;
+    }
+    
+    .chat-container {
+        height: calc(100vh - 20px);
+        border-radius: 8px;
+    }
+    
+    .message {
+        max-width: 90%;
+    }
+    
+    .input-group {
+        flex-direction: column;
+        gap: 10px;
+    }
+    
+    #messageInput {
+        width: 100%;
+    }
+    
+    #sendBtn {
+        width: 100%;
+    }
+}
+
+/* Accessibility improvements */
+@media (prefers-reduced-motion: reduce) {
+    .message {
+        animation: none;
+    }
+    
+    * {
+        transition: none !important;
+    }
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+    .chat-container {
+        background: #1e293b;
+        color: #f1f5f9;
+    }
+    
+    .chat-messages {
+        background: #0f172a;
+    }
+    
+    .message.assistant .message-content {
+        background: #334155;
+        color: #f1f5f9;
+        border-color: #475569;
+    }
+    
+    .chat-form {
+        background: #1e293b;
+        border-color: #475569;
+    }
+    
+    #messageInput {
+        background: #334155;
+        color: #f1f5f9;
+        border-color: #475569;
+    }
+}
+```
+
+**理解 CSS 架構：**
+- **運用** CSS 自訂屬性（變數）以確保主題一致及方便維護
+- **採用** Flexbox 佈局，提供響應式設計及精準對齊
+- **包含** 平滑的訊息出現動畫，且不會讓人分心
+- **呈現** 使用者訊息、AI 回覆及錯誤狀態的視覺區分
+- **支援** 桌面與行動裝置上良好的響應式設計
+- **考慮** 減少動態偏好及合適的對比度以照顧無障礙需求
+- **提供** 根據系統偏好變換深色模式支援
+
+### 配置您的後端 URL
+
+最後一步是更新 JavaScript 中的 `BASE_URL`，使其對應您的後端伺服器：
+
+```javascript
+// 用於本地開發
+this.BASE_URL = "http://localhost:5000";
+
+// 用於 GitHub Codespaces（請替換為您的實際 URL）
+this.BASE_URL = "https://your-codespace-name-5000.app.github.dev";
 ```
 
-通過這三個類，你可以根據消息的來源（助手或用戶）來設置不同的樣式。如果你需要靈感，可以查看 `solution/frontend/styles.css` 文件夾。
+**決定您的後端 URL：**
+- **本機開發**：若前後端同時在本機執行，使用 `http://localhost:5000`
+- **Codespaces**：在 Ports 分頁中將 5000 埠口公開後，即可找到您的後端 URL
+- **正式上線**：部署於主機服務時，請換成您的實際網域
 
-### 更改 Base Url
+> 💡 **測試小技巧**：您可以直接在瀏覽器訪問根目錄 URL 測試後端。應該可以看到 FastAPI 伺服器的歡迎訊息。
 
-有一件事我們還沒有設置，那就是 `BASE_URL`，這在後端啟動之前是未知的。設置方法如下：
 
-- 如果你在本地運行 API，應設置為類似 `http://localhost:5000`。
-- 如果在 Codespaces 中運行，應設置為類似 "[name]app.github.dev"。
 
-## 作業
+## 測試與部署
 
-創建你自己的文件夾 *project*，內容如下：
+前後端元件都建置完成後，讓我們測試所有功能是否正常，並探索如何部署以分享您的聊天助理。
 
-```text
-project/
-  frontend/
-    index.html
-    app.js
-    styles.css
-  backend/
-    ...
+### 本機測試流程
+
+按照下列步驟測試完整應用：
+
+```mermaid
+graph TD
+    A[啟動後端伺服器] --> B[設定環境變數]
+    B --> C[測試 API 端點]
+    C --> D[在瀏覽器開啟前端]
+    D --> E[測試聊天功能]
+    E --> F[除錯任何問題]
+```
+**逐步測試過程：**
+
+1. **啟動後端伺服器**：
+   ```bash
+   cd backend
+   source venv/bin/activate  # 或者在 Windows 上使用 venv\Scripts\activate
+   python api.py
+   ```
+
+2. **驗證 API 正常運作**：
+   - 在瀏覽器開啟 `http://localhost:5000`
+   - 您應該會看到 FastAPI 伺服器的歡迎訊息
+
+3. **開啟前端**：
+   - 前往前端資料夾
+   - 在瀏覽器中打開 `index.html`
+   - 或使用 VS Code 的 Live Server 擴充套件，獲得更佳的開發體驗
+
+4. **測試聊天功能**：
+   - 在輸入欄輸入訊息
+   - 點擊「送出」或按 Enter 鍵
+   - 確認 AI 能正常回覆
+   - 檢查瀏覽器主控台有無 JavaScript 錯誤
+
+### 常見問題排解
+
+| 問題 | 症狀 | 解決方案 |
+|---------|----------|----------|
+| **CORS 錯誤** | 前端無法存取後端 | 確認 FastAPI 的 CORSMiddleware 已正確設定 |
+| **API 金鑰錯誤** | 回傳 401 未授權 | 檢查您的 `GITHUB_TOKEN` 環境變數 |
+| **連線拒絕** | 前端出現網路錯誤 | 確認後端 URL 正確且 FastAPI 伺服器正在執行 |
+| **無 AI 回應** | 空白回覆或錯誤反應 | 查看後端日誌是否有 API 配額或認證問題 |
+
+**一般除錯步驟：**
+- **檢查** 瀏覽器開發工具主控台是否有 JavaScript 錯誤
+- **確認** 網路分頁顯示 API 請求及回應成功
+- **檢視** 後端終端機輸出是否有 Python 錯誤或 API 問題
+- **確定** 環境變數正確載入且可被取得
+
+## 📈 您的 AI 應用開發掌握時程
+
+```mermaid
+timeline
+    title 完整的 AI 應用開發旅程
+    
+    section AI 基礎
+        了解生成式 AI
+            : 掌握模式識別概念
+            : 精通 AI 參數控制
+            : 學習提示工程技巧
+        
+        GitHub 模型整合
+            : 熟悉 AI 服務平台
+            : 安全處理身份驗證
+            : 優化模型參數
+    
+    section 後端開發
+        Python API 架構
+            : 建立 FastAPI 應用
+            : 實作異步操作
+            : 創建安全端點
+        
+        AI 服務整合
+            : 連接外部 AI API
+            : 處理速率限制
+            : 實作錯誤邊界
+    
+    section 前端精通
+        現代 JavaScript 模式
+            : 精通 ES6 類架構
+            : 實作 async/await 流程
+            : 建立響應式介面
+        
+        即時用戶體驗
+            : 創建動態聊天介面
+            : 處理加載狀態
+            : 優化用戶互動
+    
+    section 生產準備
+        安全與效能
+            : 實作安全令牌管理
+            : 防範 XSS 漏洞
+            : 優化 API 效能
+        
+        專業部署
+            : 建構可擴展架構
+            : 建立可維護代碼
+            : 撰寫開發文件
 ```
+**🎓 畢業里程碑**：您已順利打造完整的 AI 驅動應用，採用與現代 AI 助理相同的技術與架構模式。這些技能代表了傳統網頁開發與前沿 AI 整合的交匯點。
 
-複製上述指導中的內容，但可以根據你的喜好進行自定義。
+**🔄 進階能力**
+- 準備探索高階 AI 框架（LangChain、LangGraph）
+- 已具備打造多模態 AI 應用（文本、影像、語音）的能力
+- 能實作向量資料庫與檢索系統
+- 基礎已建立，準備進一步進行機器學習與 AI 模型微調
 
-## 解決方案
+## GitHub Copilot Agent 挑戰 🚀
 
-[解決方案](./solution/README.md)
+使用 Agent 模式完成以下挑戰：
 
-## 額外挑戰
+**描述**：強化聊天助理，加入對話紀錄與消息持久化功能。此挑戰將幫助您了解如何在聊天應用管理狀態，以及實作資料儲存以提升用戶體驗。
 
-嘗試更改 AI 助手的個性。
+**提示**：修改聊天應用，加入可跨會話持久化的對話歷史。新增功能將聊天訊息保存至本地儲存，載入頁面時顯示歷史紀錄，並設置「清除歷史」按鈕。同時實作輸入指示器和訊息時間戳，讓聊天體驗更真實。
 
-### 對於 Python
+在此處了解更多關於 [agent 模式](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode)。
 
-當你在 *api.py* 中調用 `call_llm` 時，可以將第二個參數更改為你想要的內容，例如：
+## 作業：打造您的個人 AI 助手
 
-```python
-call_llm(message, "You are Captain Picard")
+現在輪到您創建自己的 AI 助手實作。這不只是複製教學程式碼，是一個運用所學、建立符合您興趣與需求的專案機會。
+
+### 專案需求
+
+讓我們使用乾淨且有組織的結構來設定您的專案：
+
+```text
+my-ai-assistant/
+├── backend/
+│   ├── api.py          # Your FastAPI server
+│   ├── llm.py          # AI integration functions
+│   ├── .env            # Your secrets (keep this safe!)
+│   └── requirements.txt # Python dependencies
+├── frontend/
+│   ├── index.html      # Your chat interface
+│   ├── app.js          # The JavaScript magic
+│   └── styles.css      # Make it look amazing
+└── README.md           # Tell the world about your creation
 ```
 
-### 前端
+### 核心實作任務
+
+**後端開發：**
+- **以** 我們的 FastAPI 程式碼為基礎並加以個人化
+- **創建** 獨特的 AI 個性，或許是有幫助的烹飪助理、創意寫作夥伴，或讀書好朋友？
+- **新增** 完善的錯誤處理，確保應用遇錯不崩潰
+- **撰寫** 清楚的文件，幫助任何人理解您的 API 運作方式
+
+**前端開發：**
+- **打造** 一個直覺且親切的聊天介面
+- **撰寫** 乾淨且符合現代標準的 JavaScript，讓其他開發者也讚賞
+- **設計** 反映您 AI 個性的自訂風格，活潑又繽紛？或是乾淨簡約？任您決定！
+- **確保** 同時在手機與電腦上運作良好
+
+**個人化需求：**
+- **選擇** 獨特的 AI 助手名字與個性，或許反映您的興趣或想解決的問題
+- **自訂** 視覺設計以符合助理的風格
+- **撰寫** 吸引人的歡迎訊息，讓用戶想開始聊天
+- **測試** 您的助理，問不同類型問題，看它如何回應
+
+### 強化構想（選擇性）
+
+想要讓專案更有趣？探索以下創意：
+
+| 功能 | 描述 | 您將練習的技能 |
+|---------|-------------|------------------------|
+| **訊息歷史** | 頁面重新整理後仍記憶對話 | 使用 localStorage、JSON 處理 |
+| **輸入指示器** | 顯示「AI 正在輸入...」等待回應時 | CSS 動畫、非同步程式 |
+| **訊息時間戳** | 顯示每則訊息的傳送時間 | 日期時間格式化、用戶體驗設計 |
+| **匯出聊天** | 讓使用者下載對話紀錄 | 檔案處理、資料匯出 |
+| **主題切換** | 輕/暗模式切換 | CSS 變數、使用者偏好 |
+| **語音輸入** | 加入語音轉文字功能 | 網頁 API、無障礙功能 |
+
+### 測試與文件撰寫
+
+**品質保證：**
+- **測試** 各種輸入類型及邊界條件
+- **驗證** 響應式設計在不同尺寸螢幕的效果
+- **檢查** 無障礙性是否支持鍵盤導航和螢幕閱讀器
+- **驗證** HTML 和 CSS 是否符合標準規範
+
+**文件要求：**
+- **撰寫** README.md 解釋您的專案與運行方式
+- **包含** 操作中聊天介面的截圖
+- **說明** 您加入的獨特功能或自訂項目
+- **提供** 清楚的設定指引給其他開發者
+
+### 提交指南
 
-同時更改 CSS 和文本，對 *index.html* 和 *styles.css* 進行修改。
+**專案交付物：**
+1. 含所有原始碼的完整專案資料夾
+2. 含專案描述與設定說明的 README.md
+3. 展示聊天助理運作的截圖
+4. 簡短心得分享學到什麼與遇到的挑戰
 
-## 總結
+**評分標準：**
+- **功能性**：聊天助理是否如預期運作？
+- **程式碼品質**：程式碼是否組織良好、有註解且易維護？
+- **設計**：介面是否美觀且友善使用者？
+- **創意度**：您的實作有多獨特且具個人風格？
+- **文件**：設定指示是否清晰完整？
 
-太棒了，你已經從零開始學會了如何使用 AI 創建一個個人助手。我們使用了 GitHub Models，後端使用 Python，前端使用 HTML、CSS 和 JavaScript。
+> 💡 **成功秘訣**：先從基本需求做起，確保核心體驗完整，再逐步增加強化功能。
 
-## 使用 Codespaces 設置
+## 解答
 
-- 前往：[Web Dev For Beginners repo](https://github.com/microsoft/Web-Dev-For-Beginners)
-- 從模板創建（確保你已登錄 GitHub），在右上角：
+[Solution](./solution/README.md)
 
-    ![從模板創建](../../../translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.hk.png)
+## 額外挑戰
+
+準備好讓您的 AI 助手更上一層樓了嗎？試試以下進階挑戰，加深您對 AI 整合與網頁開發的理解。
+
+### 個性化設定
+
+真正的魔力來自於為您的 AI 助手賦予獨特個性。試著使用不同系統提示，創造專門助理：
+
+**專業助理範例：**
+```python
+call_llm(message, "You are a professional business consultant with 20 years of experience. Provide structured, actionable advice with specific steps and considerations.")
+```
+
+**創意寫作助理範例：**
+```python
+call_llm(message, "You are an enthusiastic creative writing coach. Help users develop their storytelling skills with imaginative prompts and constructive feedback.")
+```
 
-- 進入你的倉庫後，創建一個 Codespace：
+**技術導師範例：**
+```python
+call_llm(message, "You are a patient senior developer who explains complex programming concepts using simple analogies and practical examples.")
+```
 
-    ![創建 Codespace](../../../translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.hk.png)
+### 前端強化
+
+用這些視覺及功能改進，讓您的聊天介面更棒：
+
+**進階 CSS 功能：**
+- **實現** 流暢的訊息動畫與過渡效果
+- **加入** 自訂聊天泡泡設計，使用 CSS 形狀與漸層
+- **製作** 輸入指示器動畫，顯示 AI 「思考中」
+- **設計** 表情符號回應或訊息評分系統
+
+**JavaScript 強化功能：**
+- **加入** 鍵盤捷徑（Ctrl+Enter 送出，Escape 清除輸入）
+- **實作** 訊息搜尋與篩選功能
+- **創建** 對話匯出功能（下載成文字或 JSON）
+- **新增** 自動存檔至 localStorage，防止訊息遺失
+
+### 進階 AI 整合
 
-    這將啟動一個你可以使用的環境。
+**多種 AI 個性：**
+- **建立** 選單切換不同 AI 個性
+- **保存** 使用者偏好個性於 localStorage
+- **實作** 上下文切換功能，保持對話連貫
+
+**智慧回應功能：**
+- **加入** 對話上下文意識（AI 記得之前訊息）
+- **根據對話主題** 實作智能建議
+- **為常見問題** 創建快速回覆按鈕
+
+> 🎯 **學習目標**：這些額外挑戰幫助你理解用於生產應用程序的高級網頁開發模式和 AI 集成技術。
+
+## 總結與下一步
+
+恭喜！你已成功從零開始構建了一個完整的 AI 驅動聊天助理。這個專案讓你親手體驗了現代網頁開發技術和 AI 集成——這些技能在當今科技領域越來越具價值。
+
+### 你已達成的目標
+
+在整個課程中，你掌握了幾項關鍵技術和概念：
+
+**後端開發：**
+- **集成** GitHub Models API 以實現 AI 功能
+- **構建** 使用 Flask 的 RESTful API，並具備完善的錯誤處理
+- **實作** 使用環境變數的安全認證
+- **配置** CORS 以支持前後端跨來源請求
+
+**前端開發：**
+- **創建** 使用語義化 HTML 的響應式聊天介面
+- **實作** 具備 async/await 和類別架構的現代 JavaScript
+- **設計** 使用 CSS Grid、Flexbox 和動畫的吸引人介面
+- **新增** 無障礙功能與響應式設計原則
+
+**全端整合：**
+- **連接** 前端與後端透過 HTTP API 呼叫
+- **處理** 即時使用者互動與非同步數據流
+- **實作** 錯誤處理與用戶反饋
+- **測試** 從用戶輸入到 AI 回應的完整應用程序流程
+
+### 主要學習成果
+
+```mermaid
+mindmap
+  root((AI 聊天應用技能))
+    API Integration
+      Authentication
+      Error Handling
+      Async Programming
+    Web Development
+      HTML5 語意
+      現代 CSS
+      ES6+ JavaScript
+    User Experience
+      響應式設計
+      可及性
+      即時互動
+    AI Understanding
+      提示工程
+      模型參數
+      對話流程
+```  
+此專案讓你了解構建 AI 驅動應用的基本原理，這代表了網頁開發的未來。你現在懂得如何將 AI 能力整合到傳統網頁應用中，打造感覺智能且回應迅速的使用者體驗。
+
+### 專業應用
+
+你在本課程中所學的技能，可直接應用於現代軟體開發職涯：
+
+- 使用現代框架和 API 進行 **全端網頁開發**
+- 在網頁和行動應用中進行 **AI 集成**
+- 為微服務架構設計與開發 **API**
+- 著重無障礙和響應式設計的 **用戶介面開發**
+- 包括環境配置與部署的 **DevOps 實務**
+
+### 持續你的 AI 開發之路
+
+**下一階段學習：**
+- **探索** 更先進的 AI 模型與 API（GPT-4、Claude、Gemini）
+- **學習** 提示工程技巧以提升 AI 回應效果
+- **研究** 對話設計與聊天機器人用戶體驗原則
+- **調查** AI 安全、倫理與負責任的 AI 開發實務
+- **構建** 具備對話記憶和上下文感知的更複雜應用
+
+**進階專案點子：**
+- 多人聊天室與 AI 管理
+- AI 驅動的客服聊天機器人
+- 個人化學習的教育輔導助理
+- 具不同 AI 個性化的創意寫作夥伴
+- 為開發者打造的技術文件助理
+
+## 使用 GitHub Codespaces 開始
+
+想在雲端開發環境中嘗試這個專案嗎？GitHub Codespaces 提供完整的開發環境，直接在瀏覽器中運行，非常適合實驗 AI 應用，無需本地設置。
+
+### 設置你的開發環境
+
+**步驟 1：從範本建立**
+- **前往** [Web Dev For Beginners repository](https://github.com/microsoft/Web-Dev-For-Beginners)
+- **點擊** 右上角的「Use this template」（確保已登入 GitHub）
+
+![Create from template interface showing the green "Use this template" button](../../../translated_images/template.67ad477109d29a2b.hk.png)
+
+**步驟 2：啟動 Codespaces**
+- **打開** 剛建立的儲存庫
+- **點擊** 綠色「Code」按鈕，選擇「Codespaces」
+- **選擇** 「Create codespace on main」開始你的開發環境
+
+![Create codespace interface with options for launching cloud development environment](../../../translated_images/codespace.bcecbdf5d2747d3d.hk.png)
+
+**步驟 3：環境配置**
+你的 Codespace 載入後，即可使用：
+- **預裝** Python、Node.js 和所有必要開發工具
+- 帶有網頁開發擴充的 **VS Code 介面**
+- 用於執行後端與前端伺服器的 **終端機**
+- 用於測試應用的 **連接埠轉發**
+
+**Codespaces 提供：**
+- **免除** 本地環境設置與配置問題
+- **提供** 在不同裝置間一致的開發環境
+- **包含** 預配置的工具與網頁開發擴充
+- **提供** 與 GitHub 無縫整合的版本控制和協作
+
+> 🚀 **專家提示**：Codespaces 非常適合學習和原型設計 AI 應用，因其自動處理所有複雜環境配置，讓你專注於開發與學習，而非排除配置問題。
 
 ---
 
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
 **免責聲明**：  
-本文件已使用人工智能翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。原始語言的文件應被視為權威來源。對於重要信息，建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或錯誤解釋概不負責。
\ No newline at end of file
+本文件乃使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 翻譯所得。雖然我們力求準確，但請注意自動翻譯可能包含錯誤或不準確之處。原始文件之母語版本應視為權威來源。對於重要資訊，建議採用專業人工翻譯。我們對因使用此翻譯而產生之任何誤解或誤釋概不負責。
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->
\ No newline at end of file
diff --git a/translations/hk/9-chat-project/solution/backend/python/README.md b/translations/hk/9-chat-project/solution/backend/python/README.md
index 5aecbf1f..7dc6cbd2 100644
--- a/translations/hk/9-chat-project/solution/backend/python/README.md
+++ b/translations/hk/9-chat-project/solution/backend/python/README.md
@@ -1,13 +1,13 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "537f02a36d73db093cbb8b9b44867645",
-  "translation_date": "2025-09-01T15:46:21+00:00",
+  "original_hash": "0aaa930f076f2d83cc872ad157f8ffd3",
+  "translation_date": "2026-01-06T13:17:10+00:00",
   "source_file": "9-chat-project/solution/backend/python/README.md",
   "language_code": "hk"
 }
 -->
-# 執行程式碼
+# 運行代碼
 
 ## 設置
 
@@ -18,37 +18,47 @@ python -m venv venv
 source ./venv/bin/activate
 ```
 
-## 安裝依賴項
+## 安裝依賴
 
 ```sh
-pip install openai flask flask-cors 
+pip install openai fastapi uvicorn python-dotenv
 ```
 
-## 啟動 API
+## 運行 API
 
 ```sh
+# 方法 1：直接執行
 python api.py
+
+# 方法 2：使用 uvicorn
+uvicorn api:app --host 0.0.0.0 --port 5000 --reload
 ```
 
-## 啟動前端
+## 測試 API
+
+訪問互動式 API 文件：`http://localhost:5000/docs`
+
+## 運行前端
 
-確保你位於 frontend 資料夾內
+確保你在 frontend 資料夾內
 
-找到 *app.js*，將 `BASE_URL` 更改為你的後端 URL
+找到 *app.js*，將 `BASE_URL` 改為你的後端 URL
 
-執行
+運行它
 
 ```
 npx http-server -p 8000
 ```
 
-嘗試在聊天框中輸入訊息，你應該會看到回應（前提是你在 Codespace 中運行，或者已經設置了存取權杖）。
+試著在聊天中輸入訊息，你應該會看到回應（前提是你在 Codespace 中運行此程式或已設定存取權杖）。
 
-## 設置存取權杖（如果你不是在 Codespace 中運行）
+## 設置存取權杖（如果你不是在 Codespace 中執行）
 
-請參閱 [設置 PAT](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens)
+請參閱 [設定 PAT](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens)
 
 ---
 
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
 **免責聲明**：  
-本文件已使用人工智能翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。儘管我們致力於提供準確的翻譯，請注意自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於關鍵信息，建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或錯誤解釋概不負責。
\ No newline at end of file
+本文件由 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們力求準確，但請注意自動翻譯可能包含錯誤或不準確之處。原本文檔的母語版本應視為權威來源。對於重要資訊，建議使用專業人工翻譯。我們不負責因使用本翻譯而產生的任何誤解或錯誤詮釋。
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->
\ No newline at end of file
diff --git a/translations/hk/README.md b/translations/hk/README.md
index 12d1951a..6204fbd6 100644
--- a/translations/hk/README.md
+++ b/translations/hk/README.md
@@ -1,236 +1,262 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "caf2ca695e9d259153d24a5cf3e07ef5",
-  "translation_date": "2025-10-11T10:51:41+00:00",
+  "original_hash": "fea3a0fceb8ad86fd640c09cf63a2aac",
+  "translation_date": "2026-01-06T12:05:13+00:00",
   "source_file": "README.md",
   "language_code": "hk"
 }
 -->
-[![GitHub license](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)  
-[![GitHub contributors](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)  
-[![GitHub issues](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)  
-[![GitHub pull-requests](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)  
-[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)  
+# Web 開發初學者課程
 
-[![GitHub watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)  
-[![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)  
-[![GitHub stars](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)  
+透過微軟雲端推廣大使設計的 12 週完整課程，學習網頁開發的基本知識。24 堂課程深入探討 JavaScript、CSS 及 HTML，並透過製作玻璃容器生態缸、瀏覽器擴充功能及太空遊戲等實作專案進行學習。參與小測驗、討論和實際作業。以專案為本的教學方法，幫助你提升技能並優化知識吸收。立即開始你的程式設計旅程！
 
-[![](https://dcbadge.vercel.app/api/server/ByRwuEEgH4)](https://discord.gg/zxKYvhSnVp?WT.mc_id=academic-000002-leestott)  
+加入 Azure AI Foundry Discord 社群
 
-# 初學者網頁開發課程 - 一個完整的課程
+跟隨以下步驟開始使用這些資源：  
+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)
 
-透過 Microsoft Cloud Advocates 提供的 12 週完整課程，學習網頁開發的基礎知識。24 節課程涵蓋 JavaScript、CSS 和 HTML，並通過實際項目如生態瓶、瀏覽器擴展和太空遊戲進行學習。參與測驗、討論和實踐作業，提升技能並優化知識吸收。立即開始你的編程之旅吧！
+### 🌐 多語言支援
 
-加入 Azure AI Foundry Discord 社群  
+#### 透過 GitHub Action 支援（自動且持續更新）
 
-[![Microsoft Azure AI Foundry Discord](https://dcbadge.limes.pink/api/server/ByRwuEEgH4)](https://discord.com/invite/ByRwuEEgH4)  
+<!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->
+[阿拉伯語](../ar/README.md) | [孟加拉語](../bn/README.md) | [保加利亞語](../bg/README.md) | [緬甸語](../my/README.md) | [中文（簡體）](../zh/README.md) | [中文（繁體，香港）](./README.md) | [中文（繁體，澳門）](../mo/README.md) | [中文（繁體，臺灣）](../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) | [葡萄牙語（巴西）](../br/README.md) | [葡萄牙語（葡萄牙）](../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)
 
-按照以下步驟開始使用這些資源：  
-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)  
+> **想要本機複製倉庫？**
 
-### 🌐 多語言支援
+> 此倉庫包含 50 多種語言翻譯，會大幅增加下載大小。若想複製不含翻譯的倉庫，請使用 sparse checkout：  
+> ```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'
+> ```
+> 這樣可以更快速下載並取得完成課程所需的所有內容。  
+<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
 
-#### 通過 GitHub Action 支援（自動化且始終保持最新）
+**如果你希望支援更多翻譯語言，請見 [此處](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
 
-<!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->
-[阿拉伯語](../ar/README.md) | [孟加拉語](../bn/README.md) | [保加利亞語](../bg/README.md) | [緬甸語](../my/README.md) | [中文（簡體）](../zh/README.md) | [中文（繁體，香港）](./README.md) | [中文（繁體，澳門）](../mo/README.md) | [中文（繁體，台灣）](../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) | [韓語](../ko/README.md) | [立陶宛語](../lt/README.md) | [馬來語](../ms/README.md) | [馬拉地語](../mr/README.md) | [尼泊爾語](../ne/README.md) | [挪威語](../no/README.md) | [波斯語](../fa/README.md) | [波蘭語](../pl/README.md) | [葡萄牙語（巴西）](../br/README.md) | [葡萄牙語（葡萄牙）](../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) | [泰語](../th/README.md) | [土耳其語](../tr/README.md) | [烏克蘭語](../uk/README.md) | [烏爾都語](../ur/README.md) | [越南語](../vi/README.md)  
-<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
+#### 🧑‍🎓 _你是學生嗎？_
 
-**如果你希望支援其他語言，請參考 [這裡](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**  
+請參訪 [**學生中心頁面**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon)，你會找到初學者資源、學生包，以及取得免費證書兌換券的方式。這是你應該收藏並不時瀏覽的頁面，因為內容會每月更新。
 
-[![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)  
+### 📣 公告 - 新增 GitHub Copilot Agent 模式挑戰！
 
-#### 🧑‍🎓 _你是學生嗎？_
+新增了挑戰章節，大部分章節中可找到「GitHub Copilot Agent Challenge 🚀」。這是使用 GitHub Copilot 與 Agent 模式完成的新挑戰。若你還未用過 Agent 模式，它不僅可以產生文字，還能建立及編輯檔案、執行指令等功能。
 
-訪問 [**學生中心頁面**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon)，你可以找到初學者資源、學生包，甚至獲得免費證書的機會。這是你應該收藏並定期查看的頁面，因為我們每月都會更新內容。
+### 📣 公告 - _新增產生式 AI 專案_
 
-### 📣 公告 - _使用生成式 AI 構建的新項目_
+新增 AI 助理專案，詳情請參閱 [專案](./9-chat-project/README.md)
 
-新增了全新的 AI 助手項目，快來看看 [項目](./09-chat-project/README.md)  
+### 📣 公告 - _剛剛發布的 Generative 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/background.148a8d43afde5730.hk.png)
 
-![Background](../../translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.hk.png)  
+- 涵蓋從基礎到 RAG (Retrieval-Augmented Generation) 的課程  
+- 使用 GenAI 及我們的夥伴應用程式與歷史人物互動  
+- 有趣且引人入勝的故事情節，帶你穿越時空！
 
-- 課程涵蓋從基礎到 RAG 的所有內容。  
-- 使用 GenAI 和我們的配套應用程式與歷史人物互動。  
-- 有趣且引人入勝的故事情節，帶你穿越時空！  
+![character](../../translated_images/character.5c0dd8e067ffd693.hk.png)
 
-![character](../../translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.hk.png)  
+每堂課都包含作業、知識檢查及挑戰，引導你學習以下主題：  
+- 提示語設計與提示工程  
+- 文字及圖像應用程式產生  
+- 搜尋應用程式
 
-每節課都包括一個作業、一個知識檢查和一個挑戰，幫助你學習以下主題：  
-- 提示和提示工程  
-- 文本和圖像應用程式生成  
-- 搜索應用程式  
+造訪 [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)中的反饋！  
+## 🌱 入門指引
 
-**[學習者](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**，每節課開始前，先完成課前測驗，然後閱讀課程材料，完成各種活動，並通過課後測驗檢查你的理解。  
+> **老師們**，我們已在 [for-teachers.md](for-teachers.md) 提供了一些使用課程的建議。歡迎在我們的 [討論區](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) 提供反饋！
 
-為了提升學習體驗，與同學一起合作完成項目吧！我們鼓勵在[討論論壇](https://github.com/microsoft/Web-Dev-For-Beginners/discussions)中進行討論，我們的版主團隊將隨時為你解答問題。  
+**[學員](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**，每節課開始前先做「課前小測驗」，接著閱讀課程教材、完成各項活動，最後以「課後小測驗」檢核學習成果。
 
-為了進一步提升你的教育水平，我們強烈建議探索 [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) 獲取更多學習材料。  
+為提升學習體驗，請與同儕合作完成專案！我們鼓勵在 [討論區](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) 發問討論，管理員團隊會隨時為你解答。
 
-### 📋 設置你的學習環境
+若想進一步學習，我們強烈建議探索 [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) 以獲取更多教材。
 
-這個課程已經準備好開發環境！開始學習時，你可以選擇在 [Codespace](https://github.com/features/codespaces/)（_基於瀏覽器，無需安裝的環境_）中運行課程，或者在你的電腦上使用文本編輯器如 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 本地運行。  
+### 📋 設定您的環境
 
-#### 創建你的儲存庫
-為了方便保存你的學習進度，建議你創建一個此儲存庫的副本。你可以點擊頁面頂部的 **Use this template** 按鈕，這將在你的 GitHub 帳戶中創建一個包含課程副本的新儲存庫。  
+本課程已備好開發環境！開始時，您可以選擇在 [Codespace](https://github.com/features/codespaces/) （瀏覽器執行，無需安裝）中執行課程，或在您的電腦上使用文字編輯器，例如 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)。
 
-按照以下步驟：  
-1. **Fork 此儲存庫**：點擊頁面右上角的 "Fork" 按鈕。  
-2. **Clone 此儲存庫**：`git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`  
+#### 建立您的倉庫
+為方便儲存作品，建議您建立此倉庫的個人副本。可點擊頁面頂端的 **Use this template** 按鈕，這會在您的 GitHub 帳號中建立一個包含本課程的新的倉庫。
 
-#### 在 Codespace 中運行課程
+請依下列步驟操作：  
+1. **派生倉庫**：點擊本頁右上角的「Fork」按鈕。  
+2. **複製倉庫**：`git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
 
-在你創建的這個儲存庫副本中，點擊 **Code** 按鈕並選擇 **Open with Codespaces**。這將為你創建一個新的 Codespace 以供學習使用。  
+#### 在 Codespace 執行課程
 
-![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.hk.png)  
+在您剛建立的倉庫中，點擊 **Code** 按鈕並選擇 **Open with Codespaces**。系統會為您建立一個新的 Codespace 作業環境。
 
-#### 在本地電腦上運行課程
+![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955.hk.png)
 
-要在本地電腦上運行此課程，你需要一個文本編輯器、一個瀏覽器和一個命令行工具。我們的第一節課 [編程語言和工具介紹](../../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. 將你的儲存庫克隆到你的電腦。你可以通過點擊 **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。
 
-    [CodeSpace](./images/createcodespace.png)  
+1. 將您的倉庫複製到電腦。可點擊 **Code** 按鈕並複製網址：
 
-    然後，在 [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：  
+    [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：
 
     ```bash 
     git clone <your-repository-url>
     ```
-  
-2. 在 Visual Studio Code 中打開文件夾。你可以通過點擊 **File** > **Open Folder** 並選擇你剛剛克隆的文件夾來完成此操作。  
 
-> 推薦的 Visual Studio Code 擴展：  
+2. 在 Visual Studio Code 中打開資料夾。你可以點擊 **檔案** > **打開資料夾**，然後選擇你剛剛複製的資料夾。
+
+
+>  推薦的 Visual Studio Code 擴充功能：
 >
-> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - 在 Visual Studio Code 中預覽 HTML 頁面  
-> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - 幫助你更快地編寫代碼  
-
-## 📂 每節課包括：
-
-- 可選的手繪筆記  
-- 可選的補充視頻  
-- 課前熱身測驗  
-- 書面課程
-- 專案式課程，逐步指導如何建立專案
-- 知識檢測
-- 挑戰
+> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - 在 Visual Studio Code 中預覽 HTML 頁面
+> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - 協助你更快撰寫程式碼
+
+## 📂 每個課程包含：
+
+- 可選的手繪筆記
+- 可選的補充影片
+- 課前熱身小測驗
+- 書面課程內容
+- 對於專案導向課程，有逐步指引說明如何建構專案
+- 知識檢核
+- 挑戰題
 - 補充閱讀
 - 作業
-- [課後測驗](https://ff-quizzes.netlify.app/web/)
-
-> **關於測驗的注意事項**：所有測驗都包含在 Quiz-app 資料夾中，共有 48 個測驗，每個測驗包含三個問題。它們可以在[這裡](https://ff-quizzes.netlify.app/web/)找到，測驗應用程式可以在本地運行或部署到 Azure；請按照 `quiz-app` 資料夾中的指示操作。
-
-## 🗃️ 課程
-
-|     |                       專案名稱                       |                            教授概念                             | 學習目標                                                                                                                 |                                                         相關課程                                                          |         作者          |
-| :-: | :--------------------------------------------------: | :------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------- | :-----------------------------------------------------------------------------------------------------------------------: | :-------------------: |
-| 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，用於將元素繪製到螢幕                                                                       |                                [繪製到畫布](./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/) 使用，該測驗應用程式可在本機執行或部署到 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  |                        JavaScript 基礎                         |                         JavaScript 資料型態                          | JavaScript 資料型態的基礎                                                                                                 |                                       [資料型態](./2-js-basics/1-data-types/README.md)                                        |         Jasmine       |
+| 05  |                        JavaScript 基礎                         |                         函數與方法                          | 認識函數及方法以管理應用程式的邏輯流程                                                             |                              [函數與方法](./2-js-basics/2-functions-methods/README.md)                               | Jasmine 和 Christopher |
+| 06  |                        JavaScript 基礎                         |                        使用 JS 作決策                        | 學習如何在程式碼中創建條件判斷流程                                                           |                                 [決策製作](./2-js-basics/3-making-decisions/README.md)                                  |         Jasmine       |
+| 07  |                        JavaScript 基礎                         |                            陣列與迴圈                            | 使用 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 操作                  | 建置網路生態缸的拖放功能，專注於閉包及 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)          |                 網頁應用程式中的 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)"。
+雖然我們刻意避免引入 JavaScript 框架，以集中於成為網頁開發者前應先掌握的基本技能，完成此課程後，下一步可透過另一系列影片學習 Node.js：「[Node.js 初學者系列](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)」。
 
-> 請參閱我們的 [行為準則](CODE_OF_CONDUCT.md) 和 [貢獻指南](CONTRIBUTING.md)。我們歡迎您的建設性反饋！
+> 請參閱我們的 [行為守則](CODE_OF_CONDUCT.md) 和 [貢獻指南](CONTRIBUTING.md)。我們歡迎您的建設性回饋！
 
-## 🧭 離線存取
 
-您可以使用 [Docsify](https://docsify.js.org/#/) 離線運行此文件。Fork 此 repo，[安裝 Docsify](https://docsify.js.org/#/quickstart) 到您的本地機器，然後在此 repo 的根目錄中輸入 `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
+[![LangChain4j for Beginners](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners)
+[![LangChain.js for Beginners](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
+
+---
 
-我們的團隊還製作了其他課程！請查看：
+### Azure / Edge / MCP / Agents
+[![AZD for Beginners](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
+[![Edge AI for Beginners](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
+[![MCP for Beginners](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
+[![AI Agents for Beginners](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
 
-- [MCP 初學者課程](https://aka.ms/mcp-for-beginners)
-- [Edge AI 初學者課程](https://aka.ms/edgeai-for-beginners)
-- [AI Agents 初學者課程](https://aka.ms/ai-agents-beginners)
-- [生成式 AI 初學者課程 .NET](https://github.com/microsoft/Generative-AI-for-beginners-dotnet)
-- [使用 JavaScript 的生成式 AI](https://github.com/microsoft/generative-ai-with-javascript)
-- [使用 Java 的生成式 AI](https://github.com/microsoft/Generative-AI-for-beginners-java)
-- [AI 初學者課程](https://aka.ms/ai-beginners)
-- [資料科學初學者課程](https://aka.ms/datascience-beginners)
-- [機器學習初學者課程](https://aka.ms/ml-beginners)
-- [網絡安全初學者課程](https://github.com/microsoft/Security-101)
-- [網頁開發初學者課程](https://aka.ms/webdev-beginners)
-- [物聯網初學者課程](https://aka.ms/iot-beginners)
-- [XR 開發入門](https://github.com/microsoft/xr-development-for-beginners)  
-- [GitHub Copilot 高手指南：智能應用](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming)  
-- [GitHub Copilot 高手指南：C#/.NET 開發者](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers)  
-- [選擇你的 Copilot 冒險](https://github.com/microsoft/CopilotAdventures)  
+---
+ 
+### 創生式 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)
+[![Generative AI (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
+
+---
+ 
+### 核心學習
+[![ML for Beginners](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
+[![Data Science for Beginners](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
+[![AI for Beginners](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
+[![Cybersecurity for Beginners](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
+[![Web Dev for Beginners](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
+[![IoT for Beginners](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
+[![XR Development for Beginners](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
+
+---
+ 
+### Copilot 系列
+[![Copilot for AI Paired Programming](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
+[![Copilot for C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
+[![Copilot Adventure](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
+<!-- CO-OP TRANSLATOR OTHER COURSES END -->
 
-## 尋求幫助
+## 獲取協助
 
-如果你遇到困難或對建立 AI 應用有任何疑問，請加入：  
+如果您遇到困難或有任何關於構建 AI 應用的問題，請加入其他學習者和有經驗的開發者，一起討論 MCP。這是一個支持性社群，歡迎任何問題並自由分享知識。
 
-[![Azure AI Foundry Discord](https://img.shields.io/badge/Discord-Azure_AI_Foundry_Community_Discord-blue?style=for-the-badge&logo=discord&color=5865f2&logoColor=fff)](https://aka.ms/foundry/discord)  
+[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
 
-如果你有產品反饋或在開發過程中遇到錯誤，請訪問：  
+如果您有產品反饋或在構建過程中遇到錯誤，請訪問：
 
-[![Azure AI Foundry Developer Forum](https://img.shields.io/badge/GitHub-Azure_AI_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum)  
+[![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) 進行翻譯。雖然我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於關鍵資訊，建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或錯誤解釋概不負責。
\ No newline at end of file
+本文件由 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 所翻譯。雖然我們致力於提供準確的翻譯，但自動翻譯仍可能包含錯誤或不準確之處。原始語言文件應視為權威來源。對於重要資訊，建議尋求專業人工翻譯。我們對於因使用本翻譯而產生的任何誤解或誤譯概不負責。
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->
\ No newline at end of file
diff --git a/translations/hk/for-teachers.md b/translations/hk/for-teachers.md
index c4ff97b5..1043f2b9 100644
--- a/translations/hk/for-teachers.md
+++ b/translations/hk/for-teachers.md
@@ -42,10 +42,10 @@ CO_OP_TRANSLATOR_METADATA:
   - Moodle Cloud 對 Common Cartridge 的支持有限。建議使用上面的 Moodle 文件，該文件也可以上傳到 Canvas。
   - 導入後，請檢查模塊、截止日期和測驗設置，以匹配您的學期安排。
 
-![Moodle](../../translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.hk.png)
+![Moodle](../../translated_images/moodle.94eb93d714a50cb2.hk.png)
 > Moodle 課堂中的課程內容
 
-![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.hk.png)
+![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff.hk.png)
 > Canvas 課堂中的課程內容
 
 ### 直接使用資源庫（不使用 Classroom）
diff --git a/translations/ja/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/ja/1-getting-started-lessons/1-intro-to-programming-languages/README.md
index 3be1244b..f36cef3e 100644
--- a/translations/ja/1-getting-started-lessons/1-intro-to-programming-languages/README.md
+++ b/translations/ja/1-getting-started-lessons/1-intro-to-programming-languages/README.md
@@ -17,7 +17,7 @@ CO_OP_TRANSLATOR_METADATA:
 
 今日は、現代のウェブ開発を可能にするだけでなく、夢中にさせる素晴らしいツールを探求します。NetflixやSpotify、そしてお気に入りのインディーアプリスタジオの開発者が毎日使っているエディター、ブラウザ、ワークフローについて話します。そして、これがあなたを踊りたくさせる部分です：これらのプロ仕様の業界標準ツールのほとんどが完全に無料なんです！
 
-![Intro Programming](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.ja.png)
+![Intro Programming](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff.ja.png)
 > スケッチノート提供：[Tomomi Imura](https://twitter.com/girlie_mac)
 
 ```mermaid
diff --git a/translations/ja/1-getting-started-lessons/2-github-basics/README.md b/translations/ja/1-getting-started-lessons/2-github-basics/README.md
index 84699706..a999b879 100644
--- a/translations/ja/1-getting-started-lessons/2-github-basics/README.md
+++ b/translations/ja/1-getting-started-lessons/2-github-basics/README.md
@@ -17,7 +17,7 @@ CO_OP_TRANSLATOR_METADATA:
 
 一歩ずつ一緒に進んでいきましょう。急がず、プレッシャーもなしで、あなたと私、そしてこれからあなたの新しい親友になる本当にクールなツールたちと一緒に！
 
-![GitHubの紹介](../../../../translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.ja.png)
+![GitHubの紹介](../../../../translated_images/webdev101-github.8846d7971abef6f9.ja.png)
 > スケッチノート提供：[Tomomi Imura](https://twitter.com/girlie_mac)
 
 ```mermaid
@@ -593,7 +593,7 @@ flowchart TD
 
 ✅ '初心者向け'リポジトリを見つける良い方法は、[タグ 'good-first-issue' で検索すること](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/)です。
 
-![リポジトリをローカルにコピー](../../../../translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.ja.png)
+![リポジトリをローカルにコピー](../../../../translated_images/clone_repo.5085c48d666ead57.ja.png)
 
 コードをコピーする方法はいくつかあります。一つの方法は、HTTPS、SSH、またはGitHub CLI（コマンドラインインターフェース）を使用してリポジトリの内容を「クローン」することです。
 
diff --git a/translations/ja/1-getting-started-lessons/3-accessibility/README.md b/translations/ja/1-getting-started-lessons/3-accessibility/README.md
index c21f3c93..0be1815c 100644
--- a/translations/ja/1-getting-started-lessons/3-accessibility/README.md
+++ b/translations/ja/1-getting-started-lessons/3-accessibility/README.md
@@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA:
 -->
 # アクセシブルなウェブページの作成
 
-![アクセシビリティについて](../../../../translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.ja.png)
+![アクセシビリティについて](../../../../translated_images/webdev101-a11y.8ef3025c858d897a.ja.png)
 > スケッチノート: [Tomomi Imura](https://twitter.com/girlie_mac)
 
 ```mermaid
diff --git a/translations/ja/2-js-basics/1-data-types/README.md b/translations/ja/2-js-basics/1-data-types/README.md
index f2767f8f..c17a3268 100644
--- a/translations/ja/2-js-basics/1-data-types/README.md
+++ b/translations/ja/2-js-basics/1-data-types/README.md
@@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA:
 -->
 # JavaScriptの基本: データ型
 
-![JavaScript Basics - Data types](../../../../translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.ja.png)
+![JavaScript Basics - Data types](../../../../translated_images/webdev101-js-datatypes.4cc470179730702c.ja.png)
 > スケッチノート: [Tomomi Imura](https://twitter.com/girlie_mac)
 
 ```mermaid
diff --git a/translations/ja/2-js-basics/2-functions-methods/README.md b/translations/ja/2-js-basics/2-functions-methods/README.md
index 8ca65458..52b6e156 100644
--- a/translations/ja/2-js-basics/2-functions-methods/README.md
+++ b/translations/ja/2-js-basics/2-functions-methods/README.md
@@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA:
 -->
 # JavaScriptの基本: メソッドと関数
 
-![JavaScript Basics - Functions](../../../../translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.ja.png)
+![JavaScript Basics - Functions](../../../../translated_images/webdev101-js-functions.be049c4726e94f8b.ja.png)
 > スケッチノート: [Tomomi Imura](https://twitter.com/girlie_mac)
 
 ```mermaid
diff --git a/translations/ja/2-js-basics/3-making-decisions/README.md b/translations/ja/2-js-basics/3-making-decisions/README.md
index 94378984..58bf7585 100644
--- a/translations/ja/2-js-basics/3-making-decisions/README.md
+++ b/translations/ja/2-js-basics/3-making-decisions/README.md
@@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA:
 -->
 # JavaScriptの基本: 判断をする
 
-![JavaScript Basics - Making decisions](../../../../translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.ja.png)
+![JavaScript Basics - Making decisions](../../../../translated_images/webdev101-js-decisions.69e1b20f272dd1f0.ja.png)
 
 > スケッチノート: [Tomomi Imura](https://twitter.com/girlie_mac)
 
diff --git a/translations/ja/2-js-basics/4-arrays-loops/README.md b/translations/ja/2-js-basics/4-arrays-loops/README.md
index 434884d6..e974066d 100644
--- a/translations/ja/2-js-basics/4-arrays-loops/README.md
+++ b/translations/ja/2-js-basics/4-arrays-loops/README.md
@@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA:
 -->
 # JavaScriptの基本: 配列とループ
 
-![JavaScript Basics - Arrays](../../../../translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.ja.png)
+![JavaScript Basics - Arrays](../../../../translated_images/webdev101-js-arrays.439d7528b8a29455.ja.png)
 > スケッチノート: [Tomomi Imura](https://twitter.com/girlie_mac)
 
 ```mermaid
diff --git a/translations/ja/3-terrarium/1-intro-to-html/README.md b/translations/ja/3-terrarium/1-intro-to-html/README.md
index 81423d9c..2735475d 100644
--- a/translations/ja/3-terrarium/1-intro-to-html/README.md
+++ b/translations/ja/3-terrarium/1-intro-to-html/README.md
@@ -26,7 +26,7 @@ journey
       Build terrarium: 5: Student
 ```
 
-![HTML入門](../../../../translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.ja.png)
+![HTML入門](../../../../translated_images/webdev101-html.4389c2067af68e98.ja.png)
 > スケッチノート: [Tomomi Imura](https://twitter.com/girlie_mac)
 
 HTML（HyperText Markup Language）は、これまで訪れたすべてのウェブサイトの基盤です。HTMLはウェブページの骨格のようなもので、コンテンツの配置、構造、各部分の意味を定義します。後でCSSが色やレイアウトでHTMLを「装飾」し、JavaScriptがインタラクティブ性を加えることで「命を吹き込む」役割を果たしますが、HTMLはすべての基礎を提供します。
@@ -88,7 +88,7 @@ HTMLコードに取り掛かる前に、テラリウムプロジェクトの適
 4. エクスプローラペインで「新しいファイル」アイコンをクリック
 5. ファイル名を`index.html`にする
 
-![VS Codeエクスプローラで新しいファイル作成を表示](../../../../translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.ja.png)
+![VS Codeエクスプローラで新しいファイル作成を表示](../../../../translated_images/vs-code-index.e2986cf919471eb9.ja.png)
 
 **オプション2: ターミナルコマンドを使用する場合**
 ```bash
diff --git a/translations/ja/3-terrarium/2-intro-to-css/README.md b/translations/ja/3-terrarium/2-intro-to-css/README.md
index 0f6e0140..32d13446 100644
--- a/translations/ja/3-terrarium/2-intro-to-css/README.md
+++ b/translations/ja/3-terrarium/2-intro-to-css/README.md
@@ -30,7 +30,7 @@ journey
       Glass reflections: 5: Student
 ```
 
-![CSS入門](../../../../translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.ja.png)
+![CSS入門](../../../../translated_images/webdev101-css.3f7af5991bf53a20.ja.png)
 > スケッチノート: [Tomomi Imura](https://twitter.com/girlie_mac)
 
 HTMLで作ったテラリウムが少しシンプルすぎると感じませんでしたか？CSSを使えば、その基本的な構造を視覚的に魅力的なものに変えることができます。
@@ -205,7 +205,7 @@ body {
 
 ブラウザの開発者ツール（F12）を開き、Elementsタブに移動して`<h1>`要素を検査してください。`body`からフォントファミリーを継承していることがわかります:
 
-![継承されたフォント](../../../../translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.ja.png)
+![継承されたフォント](../../../../translated_images/1.cc07a5cbe114ad1d.ja.png)
 
 ✅ **実験タイム**: `<body>`に`color`、`line-height`、`text-align`などの他の継承可能なプロパティを設定してみてください。見出しや他の要素に何が起こるでしょうか？
 
@@ -562,7 +562,7 @@ Agentモードを使用して次のチャレンジを完了してください:
 
 ガラス表面に光が反射する様子をシミュレートする微妙なハイライトを作成します。このアプローチは、ルネサンスの画家ヤン・ファン・エイクが光と反射を使って描かれたガラスを三次元的に見せた方法に似ています。目指すべきものは以下の通りです:
 
-![完成したテラリウム](../../../../translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.ja.png)
+![完成したテラリウム](../../../../translated_images/terrarium-final.2f07047ffc597d0a.ja.png)
 
 **チャレンジ内容:**
 - **作成** ガラスの反射をシミュレートする微妙な白または明るい色の楕円形
diff --git a/translations/ja/3-terrarium/3-intro-to-DOM-and-closures/README.md b/translations/ja/3-terrarium/3-intro-to-DOM-and-closures/README.md
index 1997c7a7..f0d51c62 100644
--- a/translations/ja/3-terrarium/3-intro-to-DOM-and-closures/README.md
+++ b/translations/ja/3-terrarium/3-intro-to-DOM-and-closures/README.md
@@ -26,7 +26,7 @@ journey
       Complete terrarium: 5: Student
 ```
 
-![DOMとクロージャ](../../../../translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.ja.png)
+![DOMとクロージャ](../../../../translated_images/webdev101-js.10280393044d7eaa.ja.png)
 > スケッチノート: [Tomomi Imura](https://twitter.com/girlie_mac)
 
 ウェブ開発の最も魅力的な側面の一つへようこそ！インタラクティブな要素を作ることです。Document Object Model (DOM) は、HTMLとJavaScriptをつなぐ橋のようなもので、今日はこれを使ってテラリウムを動かします。ティム・バーナーズ＝リーが最初のウェブブラウザを作ったとき、彼は動的でインタラクティブなドキュメントを想像していました。そのビジョンを可能にするのがDOMです。
@@ -105,7 +105,7 @@ flowchart TD
     style Q fill:#ffebee
 ```
 
-![DOMツリーの表現](../../../../translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.ja.png)
+![DOMツリーの表現](../../../../translated_images/dom-tree.7daf0e763cbbba92.ja.png)
 
 > DOMとそれを参照するHTMLマークアップの表現。出典: [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
 
@@ -150,7 +150,7 @@ flowchart LR
 
 > 💡 **クロージャの理解**: クロージャはJavaScriptの重要なトピックであり、多くの開発者が理論的な側面を完全に理解する前に何年も使用します。今日は実践的な応用に焦点を当てます。インタラクティブな機能を構築する中で、自然にその仕組みが見えてくるでしょう。理解は実際の問題を解決する方法を見ることで深まります。
 
-![DOMツリーの表現](../../../../translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.ja.png)
+![DOMツリーの表現](../../../../translated_images/dom-tree.7daf0e763cbbba92.ja.png)
 
 > DOMとそれを参照するHTMLマークアップの表現。出典: [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
 
@@ -589,7 +589,7 @@ function stopElementDrag() {
 - **デバイス間の互換性**: デスクトップとモバイルで動作
 - **パフォーマンス意識**: メモリリークや冗長な計算なし
 
-![完成したテラリウム](../../../../translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.ja.png)
+![完成したテラリウム](../../../../translated_images/terrarium-final.0920f16e87c13a84.ja.png)
 
 ---
 
diff --git a/translations/ja/3-terrarium/README.md b/translations/ja/3-terrarium/README.md
index 449f4fd3..8f670daa 100644
--- a/translations/ja/3-terrarium/README.md
+++ b/translations/ja/3-terrarium/README.md
@@ -1,43 +1,30 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "7965cd2bc5dc92ad888dc4c6ab2ab70a",
-  "translation_date": "2025-08-23T22:23:43+00:00",
+  "original_hash": "bc5c5550f79d10add90ce419ee34abb3",
+  "translation_date": "2026-01-06T14:31:31+00:00",
   "source_file": "3-terrarium/README.md",
   "language_code": "ja"
 }
 -->
-# 私のテラリウム: HTML、CSS、そしてJavaScriptを使ったDOM操作を学ぶプロジェクト 🌵🌱
+## Terrarium をデプロイする
 
-小さなドラッグ＆ドロップのコード瞑想。少しのHTML、JS、CSSを使って、ウェブインターフェースを構築し、スタイルを設定し、さらに自分の選んだ複数のインタラクションを追加することができます。
+**Azure Static Web Apps** を使って、Terrarium をウェブにデプロイ（公開）できます。
 
-![my terrarium](../../../3-terrarium/images/screenshot_gray.png)
+1. このリポジトリをフォークします
 
-# レッスン
+2. このボタンを押します 👇  
 
-1. [HTMLの紹介](./1-intro-to-html/README.md)
-2. [CSSの紹介](./2-intro-to-css/README.md)
-3. [DOMとJSクロージャーの紹介](./3-intro-to-DOM-and-closures/README.md)
+[![Deploy to Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/#create/Microsoft.StaticApp)
 
-## クレジット
+3. セットアップウィザードに従ってアプリを作成します。  
+   - **App root** は `/solution` またはコードベースのルートに設定します。  
+   - このアプリには API がないため、API の設定はスキップできます。  
+   - Azure Static Web Apps がアプリをビルドおよび公開するために `.github` フォルダーが自動的に作成されます。
 
-♥️ を込めて [Jen Looper](https://www.twitter.com/jenlooper) によって執筆されました。
+---
 
-CSSで作成されたテラリウムは、Jakub Mandraのガラス瓶 [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY) にインスパイアされています。
-
-アートワークは [Jen Looper](http://jenlooper.com) によって手描きされ、Procreateの助けを借りて制作されました。
-
-## テラリウムをデプロイする
-
-Azure Static Web Appsを使用して、テラリウムをウェブ上にデプロイ（公開）することができます。
-
-1. このリポジトリをフォークする
-
-2. このボタンを押す
-
-[![Deploy to Azure button](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
-
-3. ウィザードを進めてアプリを作成します。アプリのルートを `/solution` またはコードベースのルートに設定することを忘れないでください。このアプリにはAPIがないので、APIの追加について心配する必要はありません。フォークしたリポジトリ内にGitHubフォルダが作成され、Azure Static Web Appsのビルドサービスがアプリをビルドし、新しいURLに公開するのを助けます。
-
-**免責事項**:  
-この文書は、AI翻訳サービス [Co-op Translator](https://github.com/Azure/co-op-translator) を使用して翻訳されています。正確性を追求しておりますが、自動翻訳には誤りや不正確な部分が含まれる可能性があります。元の言語で記載された文書が正式な情報源とみなされるべきです。重要な情報については、専門の人間による翻訳を推奨します。この翻訳の使用に起因する誤解や誤解釈について、当社は一切の責任を負いません。
\ No newline at end of file
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**免責事項**：  
+本書類はAI翻訳サービス「Co-op Translator」（https://github.com/Azure/co-op-translator）を使用して翻訳されました。正確性の向上に努めておりますが、自動翻訳には誤りや不正確な部分が含まれる可能性があります。原文が権威ある正式な資料とみなされます。重要な情報については、専門の人間による翻訳をお勧めします。本翻訳の使用に起因するいかなる誤解や誤訳についても、一切の責任を負いかねます。
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->
\ No newline at end of file
diff --git a/translations/ja/5-browser-extension/1-about-browsers/README.md b/translations/ja/5-browser-extension/1-about-browsers/README.md
index a267aecf..5d2ce1a2 100644
--- a/translations/ja/5-browser-extension/1-about-browsers/README.md
+++ b/translations/ja/5-browser-extension/1-about-browsers/README.md
@@ -26,7 +26,7 @@ journey
       Polish experience: 5: Student
 ```
 
-![ブラウザのスケッチノート](../../../../translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.ja.jpg)
+![ブラウザのスケッチノート](../../../../translated_images/browser.60317c9be8b7f84a.ja.jpg)
 > スケッチノート: [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob)
 
 ## 講義前クイズ
@@ -79,7 +79,7 @@ mindmap
 
 ✅ **少し歴史を振り返る**: 最初のブラウザは「WorldWideWeb」と呼ばれ、1990年にサー・ティモシー・バーナーズ＝リーによって作成されました。
 
-![初期のブラウザ](../../../../translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.ja.jpg)
+![初期のブラウザ](../../../../translated_images/earlybrowsers.d984b711cdf3a42d.ja.jpg)
 > 初期のブラウザのいくつか, via [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
 
 ### ブラウザがウェブコンテンツを処理する方法
@@ -198,7 +198,7 @@ quadrantChart
 
 拡張機能のインストールプロセスを理解することで、ユーザーが拡張機能をインストールする際の体験を予測できます。インストールプロセスは、モダンブラウザ間で標準化されていますが、インターフェースデザインに若干の違いがあります。
 
-![Edgeブラウザのスクリーンショット: edge://extensions ページと設定メニューが開いている](../../../../translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.ja.png)
+![Edgeブラウザのスクリーンショット: edge://extensions ページと設定メニューが開いている](../../../../translated_images/install-on-edge.d68781acaf0b3d3d.ja.png)
 
 > **重要**: 開発者モードをオンにし、自分の拡張機能をテストする際には他のストアからの拡張機能を許可してください。
 
@@ -313,10 +313,10 @@ project-root/
 ### 拡張機能ビューの概要
 
 **設定ビュー** - 初回ユーザー設定:
-![完成した拡張機能がブラウザで開かれ、地域名とAPIキーの入力フォームを表示しているスクリーンショット](../../../../translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.ja.png)
+![完成した拡張機能がブラウザで開かれ、地域名とAPIキーの入力フォームを表示しているスクリーンショット](../../../../translated_images/1.b6da8c1394b07491.ja.png)
 
 **結果ビュー** - カーボンフットプリントデータの表示:
-![完成した拡張機能がUS-NEISO地域のカーボン使用量と化石燃料割合の値を表示しているスクリーンショット](../../../../translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.ja.png)
+![完成した拡張機能がUS-NEISO地域のカーボン使用量と化石燃料割合の値を表示しているスクリーンショット](../../../../translated_images/2.1dae52ff08042246.ja.png)
 
 ### 設定フォームの構築
 
diff --git a/translations/ja/5-browser-extension/2-forms-browsers-local-storage/README.md b/translations/ja/5-browser-extension/2-forms-browsers-local-storage/README.md
index 93726329..9417bda8 100644
--- a/translations/ja/5-browser-extension/2-forms-browsers-local-storage/README.md
+++ b/translations/ja/5-browser-extension/2-forms-browsers-local-storage/README.md
@@ -268,7 +268,7 @@ stateDiagram-v2
     ClearStorage --> FirstTime: Back to setup
 ```
 
-![ローカルストレージペイン](../../../../translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.ja.png)
+![ローカルストレージペイン](../../../../translated_images/localstorage.472f8147b6a3f8d1.ja.png)
 
 > ⚠️ **セキュリティ上の考慮事項**: 実際のアプリケーションでは、LocalStorageにAPIキーを保存することはセキュリティリスクを伴います。JavaScriptがこのデータにアクセスできるためです。学習目的ではこの方法で問題ありませんが、実際のアプリケーションでは機密資格情報を安全なサーバー側ストレージに保存する必要があります。
 
diff --git a/translations/ja/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/ja/5-browser-extension/3-background-tasks-and-performance/README.md
index 8590818d..52307edd 100644
--- a/translations/ja/5-browser-extension/3-background-tasks-and-performance/README.md
+++ b/translations/ja/5-browser-extension/3-background-tasks-and-performance/README.md
@@ -126,7 +126,7 @@ Edgeで開発者ツールを開くには、右上の3つのドットをクリッ
 
 これを試してみましょう。ウェブサイト（Microsoft.comが適しています）を開き、「記録」ボタンをクリックします。次にページをリフレッシュして、プロファイラーが何が起きているかをキャプチャする様子を観察します。記録を停止すると、ブラウザがサイトを「スクリプト化」、「レンダリング」、「ペイント」する方法の詳細な内訳が表示されます。これは、ロケット打ち上げ中にミッションコントロールがすべてのシステムを監視する方法を思い出させます。リアルタイムで何が起きているか、いつ起きているかのデータを得ることができます。
 
-![Edgeプロファイラー](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.ja.png)
+![Edgeプロファイラー](../../../../translated_images/profiler.5a4a62479c5df01c.ja.png)
 
 ✅ [Microsoftのドキュメント](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon)には、さらに詳しい情報がたくさんあります。
 
@@ -136,11 +136,11 @@ Edgeで開発者ツールを開くには、右上の3つのドットをクリッ
 
 プロファイルタイムラインの一部を選択して、概要ペインでページのパフォーマンスのスナップショットを取得します:
 
-![Edgeプロファイラースナップショット](../../../../translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.ja.png)
+![Edgeプロファイラースナップショット](../../../../translated_images/snapshot.97750180ebcad737.ja.png)
 
 イベントログペインを確認して、15ms以上かかったイベントがあるかどうかを確認します:
 
-![Edgeイベントログ](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.ja.png)
+![Edgeイベントログ](../../../../translated_images/log.804026979f3707e0.ja.png)
 
 ✅ プロファイラーを使いこなしてください！このサイトで開発者ツールを開き、ボトルネックがあるかどうかを確認してください。最も遅く読み込まれるアセットは何ですか？最も速いものは？
 
diff --git a/translations/ja/6-space-game/2-drawing-to-canvas/README.md b/translations/ja/6-space-game/2-drawing-to-canvas/README.md
index 092dd5df..f1aaded2 100644
--- a/translations/ja/6-space-game/2-drawing-to-canvas/README.md
+++ b/translations/ja/6-space-game/2-drawing-to-canvas/README.md
@@ -108,7 +108,7 @@ quadrantChart
     UI Elements: [0.9, 0.1]
 ```
 
-![キャンバスのグリッド](../../../../translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.ja.png)
+![キャンバスのグリッド](../../../../translated_images/canvas_grid.5f209da785ded492.ja.png)
 > 画像提供: [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
 
 キャンバス要素に描画するには、キャンバスグラフィックの基礎を形成する同じ3ステップのプロセスに従います。このプロセスを数回行うと、自然に身につきます。
@@ -329,11 +329,11 @@ Canvas要素を含むウェブページを作成します。黒い画面 `1024*7
 
 - ヒーローの船
 
-   ![ヒーローの船](../../../../translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.ja.png)
+   ![ヒーローの船](../../../../translated_images/player.dd24c1afa8c71e9b.ja.png)
 
 - 5×5のモンスター
 
-   ![モンスターの船](../../../../translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.ja.png)
+   ![モンスターの船](../../../../translated_images/enemyShip.5df2a822c16650c2.ja.png)
 
 ### 開発を始めるための推奨ステップ
 
@@ -468,7 +468,7 @@ for (let x = START_X; x < STOP_X; x += ENEMY_SPACING) {
 
 完成した結果は以下のようになります:
 
-![黒い画面にヒーローと5*5のモンスター](../../../../translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.ja.png)
+![黒い画面にヒーローと5*5のモンスター](../../../../translated_images/partI-solution.36c53b48c9ffae2a.ja.png)
 
 ## 解答
 
diff --git a/translations/ja/6-space-game/5-keeping-score/README.md b/translations/ja/6-space-game/5-keeping-score/README.md
index 6412612f..7217039f 100644
--- a/translations/ja/6-space-game/5-keeping-score/README.md
+++ b/translations/ja/6-space-game/5-keeping-score/README.md
@@ -160,7 +160,7 @@ sequenceDiagram
 ```
 
 - **スコアリングシステム**: 敵の船を破壊するたびに100ポイントが与えられます（丸い数字はプレイヤーが頭の中で計算しやすいです）。スコアは画面左下に表示されます。
-- **ライフカウンター**: ヒーローは3つのライフでスタートします。これは初期のアーケードゲームが挑戦と遊びやすさのバランスを取るために確立した標準です。敵との衝突ごとにライフが1つ減ります。残りのライフは画面右下に船のアイコンで表示されます ![life image](../../../../translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.ja.png)。
+- **ライフカウンター**: ヒーローは3つのライフでスタートします。これは初期のアーケードゲームが挑戦と遊びやすさのバランスを取るために確立した標準です。敵との衝突ごとにライフが1つ減ります。残りのライフは画面右下に船のアイコンで表示されます ![life image](../../../../translated_images/life.6fb9f50d53ee0413.ja.png)。
 
 ## 作り始めましょう！
 
diff --git a/translations/ja/7-bank-project/1-template-route/README.md b/translations/ja/7-bank-project/1-template-route/README.md
index 0ed0b424..dfa6a824 100644
--- a/translations/ja/7-bank-project/1-template-route/README.md
+++ b/translations/ja/7-bank-project/1-template-route/README.md
@@ -635,7 +635,7 @@ sequenceDiagram
 
 `history.pushState`を使用するとブラウザのナビゲーション履歴に新しいエントリが作成されます。ブラウザの*戻るボタン*を押し続けると、次のような履歴が表示されるはずです:
 
-![ナビゲーション履歴のスクリーンショット](../../../../translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.ja.png)
+![ナビゲーション履歴のスクリーンショット](../../../../translated_images/history.7fdabbafa521e064.ja.png)
 
 戻るボタンを数回クリックしてみると、現在のURLが変更され履歴が更新されますが、同じテンプレートが表示され続けます。
 
diff --git a/translations/ja/7-bank-project/2-forms/README.md b/translations/ja/7-bank-project/2-forms/README.md
index 13c2b8a6..b904f4e3 100644
--- a/translations/ja/7-bank-project/2-forms/README.md
+++ b/translations/ja/7-bank-project/2-forms/README.md
@@ -295,7 +295,7 @@ graph TD
 2. ブラウザのアドレスバーの変化を観察
 3. ページがリロードされ、データがURLに表示されることに気づく
 
-![登録ボタンをクリックした後のブラウザのURL変化のスクリーンショット](../../../../translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.ja.png)
+![登録ボタンをクリックした後のブラウザのURL変化のスクリーンショット](../../../../translated_images/click-register.e89a30bf0d4bc9ca.ja.png)
 
 ### HTTPメソッドの比較
 
@@ -350,7 +350,7 @@ graph TD
 2. **「アカウント作成」ボタンをクリック**
 3. **ブラウザでサーバー応答を確認**
 
-![localhost:5000/api/accountsのアドレスでブラウザウィンドウが表示され、ユーザーデータを含むJSON文字列が表示される](../../../../translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.ja.png)
+![localhost:5000/api/accountsのアドレスでブラウザウィンドウが表示され、ユーザーデータを含むJSON文字列が表示される](../../../../translated_images/form-post.61de4ca1b964d91a.ja.png)
 
 **確認すべきこと:**
 - **ブラウザがAPIエンドポイントURLにリダイレクト**
@@ -565,7 +565,7 @@ async function register() {
 3. **「アカウント作成」をクリック**
 4. **コンソールメッセージとユーザーフィードバックを確認**
 
-![ブラウザコンソールにログメッセージが表示されているスクリーンショット](../../../../translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.ja.png)
+![ブラウザコンソールにログメッセージが表示されているスクリーンショット](../../../../translated_images/browser-console.efaf0b51aaaf6778.ja.png)
 
 **期待される結果:**
 - **送信ボタンにローディング状態**が表示される
@@ -740,7 +740,7 @@ input:focus:invalid {
 3. **ユーザー名フィールドに特殊文字を入力**
 4. **負の残高額を入力**
 
-![フォーム送信時にバリデーションエラーが表示されるスクリーンショット](../../../../translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.ja.png)
+![フォーム送信時にバリデーションエラーが表示されるスクリーンショット](../../../../translated_images/validation-error.8bd23e98d416c22f.ja.png)
 
 **観察されること:**
 - **ブラウザがネイティブのバリデーションメッセージを表示**
@@ -871,7 +871,7 @@ timeline
 
 以下は、CSSスタイルを追加した後のログインページの最終的な例です：
 
-![CSSスタイルを追加した後のログインページのスクリーンショット](../../../../translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.ja.png)
+![CSSスタイルを追加した後のログインページのスクリーンショット](../../../../translated_images/result.96ef01f607bf856a.ja.png)
 
 ## 講義後のクイズ
 
diff --git a/translations/ja/7-bank-project/3-data/README.md b/translations/ja/7-bank-project/3-data/README.md
index 9e770312..f3fb59f5 100644
--- a/translations/ja/7-bank-project/3-data/README.md
+++ b/translations/ja/7-bank-project/3-data/README.md
@@ -160,7 +160,7 @@ sequenceDiagram
     Browser->>User: Displays new page (flash/reload)
 ```
 
-![マルチページアプリケーションの更新ワークフロー](../../../../translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.ja.png)
+![マルチページアプリケーションの更新ワークフロー](../../../../translated_images/mpa.7f7375a1a2d4aa77.ja.png)
 
 **このアプローチがぎこちなく感じられた理由:**
 - クリックするたびにページ全体を再構築する必要があった
@@ -187,7 +187,7 @@ sequenceDiagram
     Browser->>User: Shows updated content (no reload)
 ```
 
-![シングルページアプリケーションの更新ワークフロー](../../../../translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.ja.png)
+![シングルページアプリケーションの更新ワークフロー](../../../../translated_images/spa.268ec73b41f992c2.ja.png)
 
 **SPAがより快適に感じられる理由:**
 - 実際に変更された部分だけが更新される（賢いですよね？）
@@ -510,7 +510,7 @@ if (data.error) {
 
 無効なアカウントでテストすると、ページ上に役立つエラーメッセージが表示されるようになります！
 
-![ログイン時に表示されるエラーメッセージのスクリーンショット](../../../../translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.ja.png)
+![ログイン時に表示されるエラーメッセージのスクリーンショット](../../../../translated_images/login-error.416fe019b36a6327.ja.png)
 
 #### ステップ4: アクセシビリティを考慮する
 
@@ -904,7 +904,7 @@ Agentモードを使用して以下のチャレンジを完了してください
 
 以下は、スタイリング後のダッシュボードの例のスクリーンショットです:
 
-![スタイリング後のダッシュボードの例のスクリーンショット](../../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.ja.png)
+![スタイリング後のダッシュボードの例のスクリーンショット](../../../../translated_images/screen2.123c82a831a1d14a.ja.png)
 
 これを完全に再現する必要はありません。インスピレーションとして使用し、自分のスタイルで仕上げてください！
 
diff --git a/translations/ja/7-bank-project/4-state-management/README.md b/translations/ja/7-bank-project/4-state-management/README.md
index 414c4809..7d9019db 100644
--- a/translations/ja/7-bank-project/4-state-management/README.md
+++ b/translations/ja/7-bank-project/4-state-management/README.md
@@ -190,7 +190,7 @@ mindmap
 
 無駄な努力をする代わりに、**集中型状態管理**システムを作成します。これは、すべての重要なものを整理する1人の非常に組織的な人がいるようなものです:
 
-![HTML、ユーザーアクション、状態間のデータフローを示すスキーマ](../../../../translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.ja.png)
+![HTML、ユーザーアクション、状態間のデータフローを示すスキーマ](../../../../translated_images/data-flow.fa2354e0908fecc8.ja.png)
 
 ```mermaid
 flowchart TD
diff --git a/translations/ja/7-bank-project/4-state-management/assignment.md b/translations/ja/7-bank-project/4-state-management/assignment.md
index 6f82da97..f5f3cc23 100644
--- a/translations/ja/7-bank-project/4-state-management/assignment.md
+++ b/translations/ja/7-bank-project/4-state-management/assignment.md
@@ -112,7 +112,7 @@ CO_OP_TRANSLATOR_METADATA:
 **期待される結果:**
 この課題を完了すると、銀行アプリには完全に機能する「取引追加」機能が備わり、プロフェッショナルな外観と動作を持つようになります：
 
-![「取引追加」ダイアログの例を示すスクリーンショット](../../../../translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.ja.png)
+![「取引追加」ダイアログの例を示すスクリーンショット](../../../../translated_images/dialog.93bba104afeb79f1.ja.png)
 
 ## 実装のテスト
 
diff --git a/translations/ja/8-code-editor/1-using-a-code-editor/README.md b/translations/ja/8-code-editor/1-using-a-code-editor/README.md
index 0289fbc3..076185e5 100644
--- a/translations/ja/8-code-editor/1-using-a-code-editor/README.md
+++ b/translations/ja/8-code-editor/1-using-a-code-editor/README.md
@@ -185,7 +185,7 @@ VSCode.devはこれらの機能をブラウザに提供します:
 
 すべてが読み込まれると、コードに集中できるように設計された美しくクリーンなワークスペースが表示されます。
 
-![デフォルトのVSCode.devインターフェース](../../../../translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.ja.png)
+![デフォルトのVSCode.devインターフェース](../../../../translated_images/default-vscode-dev.5d06881d65c1b323.ja.png)
 
 **ワークスペースのツアー:**
 - **アクティビティバー**（左側のストリップ）: エクスプローラー📁、検索🔍、ソースコントロール🌿、拡張機能🧩、設定⚙️などのメインナビゲーション
@@ -233,7 +233,7 @@ VSCode.devで新しく始める場合や特定のリポジトリを開きたい
 1. [vscode.dev](https://vscode.dev)にアクセス（まだアクセスしていない場合）
 2. ウェルカム画面で「Open Remote Repository」ボタンを探してクリック
 
-   ![リモートリポジトリを開く](../../../../translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.ja.png)
+   ![リモートリポジトリを開く](../../../../translated_images/open-remote-repository.bd9c2598b8949e7f.ja.png)
 
 3. 任意のGitHubリポジトリURLを貼り付け（例: `https://github.com/microsoft/Web-Dev-For-Beginners`）
 4. Enterキーを押して魔法を体験！
@@ -242,7 +242,7 @@ VSCode.devで新しく始める場合や特定のリポジトリを開きたい
 
 コーディングの魔法使いのように感じたいですか？このキーボードショートカットを試してください: Ctrl+Shift+P（MacではCmd+Shift+P）でコマンドパレットを開く:
 
-![コマンドパレット](../../../../translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.ja.png)
+![コマンドパレット](../../../../translated_images/palette-menu.4946174e07f42622.ja.png)
 
 **コマンドパレットは、できることすべての検索エンジンのようなものです:**
 - 「open remote」と入力するとリポジトリオープナーを見つけられます
@@ -304,7 +304,7 @@ HTTPとHTTPSが異なるプロトコルを使用しながら同じドメイン
 3. 適切な拡張子を含むファイル名を入力（例: `style.css`, `script.js`, `index.html`）
 4. Enterキーを押してファイルを作成
 
-![新しいファイルを作成](../../../../translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.ja.png)
+![新しいファイルを作成](../../../../translated_images/create-new-file.2814e609c2af9aeb.ja.png)
 
 **命名規則:**
 - ファイルの目的を示す説明的な名前を使用
@@ -322,7 +322,7 @@ HTTPとHTTPSが異なるプロトコルを使用しながら同じドメイン
 2. タイピングを開始すると、VSCode.devが色付け、提案、エラー検出で助けてくれます
 3. Ctrl+S（Windows/Linux）またはCmd+S（Mac）で作業を保存 - 自動保存もあります！
 
-![VSCode.devでファイルを編集](../../../../translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.ja.png)
+![VSCode.devでファイルを編集](../../../../translated_images/edit-a-file.52c0ee665ef19f08.ja.png)
 
 **コーディング中に起こる素晴らしいこと:**
 - コードが美しく色分けされ、読みやすくなる
@@ -395,7 +395,7 @@ mindmap
 2. 探索するか、特定のものを検索  
 3. 興味深いものをクリックして詳細を確認  
 
-![拡張機能マーケットプレイスのインターフェース](../../../../translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.ja.png)
+![拡張機能マーケットプレイスのインターフェース](../../../../translated_images/extensions.eca0e0c7f59a10b5.ja.png)
 
 **中にあるもの：**
 
@@ -448,7 +448,7 @@ mindmap
 3. ドロップダウンから「拡張機能設定」を選択  
 4. ワークフローに合うように調整  
 
-![拡張機能設定のカスタマイズ](../../../../translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.ja.png)
+![拡張機能設定のカスタマイズ](../../../../translated_images/extension-settings.21c752ae4f4cdb78.ja.png)
 
 **調整したい一般的な項目：**  
 - コードのフォーマット方法（タブ vs スペース、行の長さなど）  
diff --git a/translations/ja/8-code-editor/1-using-a-code-editor/assignment.md b/translations/ja/8-code-editor/1-using-a-code-editor/assignment.md
index 28442998..0af61837 100644
--- a/translations/ja/8-code-editor/1-using-a-code-editor/assignment.md
+++ b/translations/ja/8-code-editor/1-using-a-code-editor/assignment.md
@@ -78,7 +78,7 @@ VSCode.devではリポジトリを開くために少なくとも1つのファイ
 4. コミットメッセージを記入：「初期HTML構造を追加」
 5. 「Commit new file」をクリックして変更を保存
 
-![GitHubで初期ファイルを作成](../../../../translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.ja.png)
+![GitHubで初期ファイルを作成](../../../../translated_images/new-file-github.com.c886796d800e8056.ja.png)
 
 **この初期設定で達成されること：**
 - **HTML5ドキュメント構造**をセマンティック要素で確立
@@ -104,7 +104,7 @@ VSCode.devではリポジトリを開くために少なくとも1つのファイ
 
 ✅ **成功の指標**: Explorerサイドバーにプロジェクトファイルが表示され、メインエディタエリアで`index.html`が編集可能になります。
 
-![VSCode.devでプロジェクトを読み込む](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.ja.png)
+![VSCode.devでプロジェクトを読み込む](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7fe.ja.png)
 
 **インターフェースで見えるもの：**
 - **Explorerサイドバー**: リポジトリのファイルとフォルダ構造を表示
@@ -448,7 +448,7 @@ li:before {
 **インストール後の即時結果：**
 CodeSwingがインストールされると、履歴書ウェブサイトのライブプレビューがエディタに表示されます。これにより、変更を加えるたびにサイトの外観を正確に確認できます。
 
-![CodeSwing拡張機能によるライブプレビュー](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.ja.png)
+![CodeSwing拡張機能によるライブプレビュー](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b5509.ja.png)
 
 **強化されたインターフェースの理解：**
 - **分割ビュー**: コードとライブプレビューを並べて表示
diff --git a/translations/ja/9-chat-project/README.md b/translations/ja/9-chat-project/README.md
index 3c3f33a3..17584828 100644
--- a/translations/ja/9-chat-project/README.md
+++ b/translations/ja/9-chat-project/README.md
@@ -61,7 +61,7 @@ print(response.choices[0].message.content)
 
 完成したプロジェクトは以下のようになります:
 
-![ユーザーとAIアシスタントの会話を表示するチャットアプリのインターフェース](../../../translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.ja.png)
+![ユーザーとAIアシスタントの会話を表示するチャットアプリのインターフェース](../../../translated_images/screenshot.0a1ee0d123df681b.ja.png)
 
 ## 🗺️ AIアプリケーション開発の学習の旅
 
@@ -194,7 +194,7 @@ mindmap
 
 **基本原則**: AIアプリケーション開発は、従来のウェブ開発スキルとAIサービス統合を組み合わせ、自然で応答性の高いインテリジェントなアプリケーションを作成します。
 
-![GitHub Models AI Playgroundのインターフェース。モデル選択とテストエリアを表示](../../../translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.ja.png)
+![GitHub Models AI Playgroundのインターフェース。モデル選択とテストエリアを表示](../../../translated_images/playground.d2b927122224ff8f.ja.png)
 
 **Playgroundが非常に便利な理由:**
 - **試す**: GPT-4o-mini、Claudeなどの異なるAIモデルを無料で試せる
@@ -204,7 +204,7 @@ mindmap
 
 少し試してみたら、「Code」タブをクリックしてプログラミング言語を選択し、必要な実装コードを取得するだけです。
 
-![Playgroundの選択画面。異なるプログラミング言語のコード生成オプションを表示](../../../translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.ja.png)
+![Playgroundの選択画面。異なるプログラミング言語のコード生成オプションを表示](../../../translated_images/playground-choice.1d23ba7d407f4758.ja.png)
 
 ## Pythonバックエンド統合のセットアップ
 
@@ -2139,14 +2139,14 @@ mindmap
 - **[Web Dev For Beginnersリポジトリ](https://github.com/microsoft/Web-Dev-For-Beginners)**に移動  
 - **右上の「Use this template」**をクリック（GitHubにログインしていることを確認）  
 
-![テンプレート作成インターフェースで緑色の「Use this template」ボタンが表示されている](../../../translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.ja.png)
+![テンプレート作成インターフェースで緑色の「Use this template」ボタンが表示されている](../../../translated_images/template.67ad477109d29a2b.ja.png)
 
 **ステップ2: Codespacesを起動**
 - **新しく作成したリポジトリを開く**  
 - **緑色の「Code」ボタンをクリックし、「Codespaces」を選択**  
 - **「Create codespace on main」を選択して開発環境を開始**  
 
-![クラウド開発環境を起動するためのCodespaceインターフェース](../../../translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.ja.png)
+![クラウド開発環境を起動するためのCodespaceインターフェース](../../../translated_images/codespace.bcecbdf5d2747d3d.ja.png)
 
 **ステップ3: 環境設定**
 Codespaceが読み込まれると、以下にアクセスできます：
diff --git a/translations/ja/README.md b/translations/ja/README.md
index e55031f2..5febc737 100644
--- a/translations/ja/README.md
+++ b/translations/ja/README.md
@@ -1,221 +1,237 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "caff943951276a4459a687166f3dfae2",
-  "translation_date": "2025-12-19T10:27:04+00:00",
+  "original_hash": "fea3a0fceb8ad86fd640c09cf63a2aac",
+  "translation_date": "2026-01-06T14:29:42+00:00",
   "source_file": "README.md",
   "language_code": "ja"
 }
 -->
-[![GitHub license](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)  
-[![GitHub contributors](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)  
-[![GitHub issues](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)  
-[![GitHub pull-requests](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)  
-[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)  
+[![GitHub license](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
+[![GitHub contributors](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
+[![GitHub issues](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
+[![GitHub pull-requests](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
+[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
 
-[![GitHub watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)  
-[![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)  
-[![GitHub stars](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)  
+[![GitHub watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
+[![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
+[![GitHub stars](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
 
-[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)  
+[![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コミュニティに参加しましょう
+Azure AI Foundry Discordコミュニティに参加
 
-[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)  
+[![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/README.md) | [中国語 (繁体字, 香港)](../hk/README.md) | [中国語 (繁体字, マカオ)](../mo/README.md) | [中国語 (繁体字, 台湾)](../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) | [日本語](./README.md) | [韓国語](../ko/README.md) | [リトアニア語](../lt/README.md) | [マレー語](../ms/README.md) | [マラーティー語](../mr/README.md) | [ネパール語](../ne/README.md) | [ノルウェー語](../no/README.md) | [ペルシャ語 (ファルシー)](../fa/README.md) | [ポーランド語](../pl/README.md) | [ポルトガル語 (ブラジル)](../br/README.md) | [ポルトガル語 (ポルトガル)](../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) | [タイ語](../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/README.md) | [Chinese (Traditional, Hong Kong)](../hk/README.md) | [Chinese (Traditional, Macau)](../mo/README.md) | [Chinese (Traditional, Taiwan)](../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](./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)](../br/README.md) | [Portuguese (Portugal)](../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以上の言語翻訳が含まれており、ダウンロードサイズが大きくなります。翻訳なしでクローンするには、スパースチェックアウトを使用してください：
+> ```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'
+> ```
+> これにより、コースを完了するために必要なすべてが含まれ、より高速にダウンロードできます。
 <!-- 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)  
+[![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)
 
 #### 🧑‍🎓 _学生の皆さんへ_
 
-[**Student Hubページ**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon)を訪問して、初心者向けリソース、学生パック、さらには無料の認定証バウチャーを取得する方法を見つけてください。このページは毎月内容が更新されるので、ブックマークして定期的にチェックすることをお勧めします。
+[**Student Hubページ**](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アシスタントプロジェクトが追加されました。詳細は[プロジェクト](./09-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/background.148a8d43afde5730.ja.png)
 
-![Background](../../translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.ja.png)
+- 基礎からRAGまでをカバーするレッスン。
+- GenAIと連携アプリで歴史上の人物と対話。
+- 楽しく魅力的な物語形式でタイムトラベル体験！
 
-- 基礎からRAGまでをカバーするレッスン
-- GenAIと連携アプリを使用して歴史上の人物と対話
-- 楽しく魅力的なストーリーでタイムトラベル体験！
+![character](../../translated_images/character.5c0dd8e067ffd693.ja.png)
 
-![character](../../translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.ja.png)
 
-各レッスンには、完了すべき課題、知識チェック、チャレンジが含まれており、以下のトピックを学ぶのに役立ちます：
+各レッスンには課題、知識チェック、チャレンジが含まれており、以下のようなトピックを学びます：
 - プロンプトとプロンプトエンジニアリング
-- テキストと画像アプリの生成
+- テキストおよび画像のアプリ生成
 - 検索アプリ
 
-[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)でお待ちしています！
 
-**[学習者の皆さん](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**、各レッスンでは、事前クイズから始め、講義資料を読み、さまざまなアクティビティを完了し、事後クイズで理解を確認してください。
+## 🌱 はじめに
 
-学習体験を向上させるために、仲間と一緒にプロジェクトに取り組みましょう！ディスカッションは[ディスカッションフォーラム](https://github.com/microsoft/Web-Dev-For-Beginners/discussions)で奨励されており、モデレーターが質問に答えるために待機しています。
+> **先生方へ**、このカリキュラムの使い方について[いくつかの提案](for-teachers.md)を用意しています。ぜひ[ディスカッションフォーラム](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)でフィードバックをお寄せください！
 
-さらに学びを深めるために、[Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?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)で活発に行われており、モデレータチームが質問に対応します。
+
+さらに学習を進めるには[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アカウントに作成されます。
+#### リポジトリを作成しましょう
+作業を保存しやすくするため、リポジトリのコピーを自分のGitHubアカウントに作成することをお勧めします。ページ上部の**Use this template**ボタンをクリックすると、カリキュラムのコピーを含む新しいリポジトリが作成されます。
 
 以下の手順に従ってください：
-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でカリキュラムを実行する
 
-作成したリポジトリのコピーで、**Code** ボタンをクリックし、**Open with Codespaces** を選択します。これにより、作業用の新しいCodespaceが作成されます。
+作成したリポジトリのコピーで、**Code**ボタンをクリックし、**Open with Codespaces**を選択すると、新しいCodespaceが作成されます。
 
-![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.ja.png)
+![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955.ja.png)
 
-#### ローカルコンピュータでカリキュラムを実行する
+#### ご自身のコンピューターでカリキュラムを実行する
 
-ローカルコンピュータでこのカリキュラムを実行するには、テキストエディタ、ブラウザ、コマンドラインツールが必要です。最初のレッスン[プログラミング言語とツールの紹介](../../1-getting-started-lessons/1-intro-to-programming-languages)では、これらのツールのさまざまなオプションを案内し、最適なものを選択できるようにします。
+ローカルで実行するにはテキストエディタ、ブラウザー、コマンドラインツールが必要です。最初のレッスン[プログラミング言語とツールの紹介](../../1-getting-started-lessons/1-intro-to-programming-languages)では、それぞれのツールの選択肢を紹介し、最適なものを選べるようガイドします。
 
-私たちのおすすめは、[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)をエディタとして使用することです。これには、組み込みの[ターミナル](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)も含まれています。[こちら](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)からVisual Studio Codeをダウンロードできます。
+おすすめは[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)で、内蔵の[ターミナル](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)も利用可能です。Visual Studio Codeは[こちら](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)からダウンロードできます。
 
-1. リポジトリをコンピュータにクローンします。**Code** ボタンをクリックしてURLをコピーします：
 
-    [CodeSpace](./images/createcodespace.png)
+1. GitHub上のリポジトリをクローンしてください。**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)を開き、以下のコマンドを実行します。`<your-repository-url>` をコピーした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に置き換えてください。
 
     ```bash 
     git clone <your-repository-url>
     ```
 
-2. Visual Studio Codeでフォルダを開きます。**File** > **Open Folder** をクリックし、クローンしたフォルダを選択します。
+2. Visual Studio Codeでフォルダーを開きます。これは**ファイル** > **フォルダーを開く** をクリックし、先ほどクローンしたフォルダーを選択することで行えます。
 
-> 推奨される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) - コードを書くスピードを上げるための支援ツール
+> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - コーディングをより速くするための支援ツール
 
-## 📂 各レッスンには以下が含まれます：
+## 📂 各レッスンには以下が含まれます:
 
-- オプションのスケッチノート
-- オプションの補足動画
+- 任意のスケッチノート
+- 任意の補足ビデオ
 - レッスン前のウォームアップクイズ
-- 書かれたレッスン内容
-- プロジェクトベースのレッスンでは、プロジェクトを構築するためのステップバイステップガイド
+- 書面によるレッスン
+- プロジェクトベースのレッスンの場合は、プロジェクト開発のステップバイステップガイド
 - 知識チェック
 - チャレンジ
 - 補足読書
-- 課題
 - [レッスン後のクイズ](https://ff-quizzes.netlify.app/web/)
 
-> **クイズについての注意**: すべてのクイズはQuiz-appフォルダーに含まれており、3問ずつの合計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 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  |       [テラリウム](./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の呼び出し、ローカルストレージに変数を保存 | ローカルストレージに保存された変数を使用して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を使ったより高度なゲーム開発             | クラスとコンポジションを使用した継承と、ゲーム構築の準備としてのPub/Subパターンについて学ぶ              |                      [高度なゲーム開発の紹介](./6-space-game/1-introduction/README.md)                       |          Chris          |
-| 16  |           [スペースゲーム](./6-space-game/solution/README.md)           |                           キャンバスへの描画                            | 画面に要素を描画するために使用されるCanvas APIについて学ぶ                                                                       |                                [キャンバスへの描画](./6-space-game/2-drawing-to-canvas/README.md)                                |          Chris          |
-| 17  |           [スペースゲーム](./6-space-game/solution/README.md)           |                   画面上の要素の移動                    | カートesian座標と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回のクイズが各3問ずつあります。これらは[ここ](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入門](./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呼び出し、ローカルストレージへの変数保存           | 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による高度なゲーム開発                    | クラスとコンポジションによる継承、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 | [Browser/VScode Code](../../8-code-editor) | VScodeの使い方 | コードエディターの使い方を学ぶ | [VScodeコードエディターの使用](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
+| 26 | [AIアシスタント](./9-chat-project/README.md) | AIとの連携 | 独自のAIアシスタントの作成方法を学ぶ | [AIアシスタントプロジェクト](./9-chat-project/README.md) | Chris |
 
 ## 🏫 教育方針
 
-私たちのカリキュラムは、以下の2つの主要な教育方針に基づいて設計されています：
+私たちのカリキュラムは、以下の二つの重要な教育原則に基づいて設計されています：
 * プロジェクトベースの学習
 * 頻繁なクイズ
 
-このプログラムでは、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の基本を紹介するいくつかのスターターレッスンを作成し、"[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)"というビデオチュートリアルコレクションのビデオとペアリングしました。このコレクションの一部の著者は、このカリキュラムにも貢献しています。
+さらに、クラスの前に低難度のクイズを行うことで学習者の学習意図を高め、クラス後の別クイズで理解度のさらなる定着を図ります。このカリキュラムは柔軟かつ楽しく学べるよう設計されているため、一部だけでも全体でも受講可能です。プロジェクトは小さなものから始まり、12週間のサイクル終了時にはより複雑なものへと発展します。
 
-さらに、授業前の低リスクなクイズは、学生がトピックを学ぶ意図を設定し、授業後の2回目のクイズはさらなる定着を確保します。このカリキュラムは柔軟で楽しいように設計されており、全体または一部を受講することができます。プロジェクトは小さなものから始まり、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について学ぶことをお勧めします。別のビデオコレクション: "[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/#/)を使ってこのドキュメントをオフラインで実行できます。このリポジトリをフォークし、ローカルマシンに[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
 [![LangChain4j for Beginners](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners)
 [![LangChain.js for Beginners](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
+
 ---
 
-### Azure / Edge / MCP / エージェント
+### Azure / Edge / MCP / Agents
 [![AZD for Beginners](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
 [![Edge AI for Beginners](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
 [![MCP for Beginners](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
 [![AI Agents for Beginners](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
 
 ---
-
+ 
 ### 生成AIシリーズ
 [![Generative AI for Beginners](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
 [![Generative AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
@@ -223,8 +239,8 @@ JavaScriptフレームワークの導入を意図的に避け、フレームワ
 [![Generative AI (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
 
 ---
-
-### 基礎学習
+ 
+### コアラーニング
 [![ML for Beginners](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
 [![Data Science for Beginners](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
 [![AI for Beginners](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
@@ -234,7 +250,7 @@ JavaScriptフレームワークの導入を意図的に避け、フレームワ
 [![XR Development for Beginners](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
 
 ---
-
+ 
 ### Copilotシリーズ
 [![Copilot for AI Paired Programming](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
 [![Copilot for C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
@@ -243,11 +259,11 @@ JavaScriptフレームワークの導入を意図的に避け、フレームワ
 
 ## ヘルプを得る
 
-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)
 
@@ -258,6 +274,6 @@ AIアプリの構築で行き詰まったり、質問がある場合は、MCPに
 ---
 
 <!-- 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 -->
\ No newline at end of file
diff --git a/translations/ja/for-teachers.md b/translations/ja/for-teachers.md
index b10b87c3..6feaf894 100644
--- a/translations/ja/for-teachers.md
+++ b/translations/ja/for-teachers.md
@@ -42,10 +42,10 @@ CO_OP_TRANSLATOR_METADATA:
   - Moodle CloudはCommon Cartridgeのサポートが限定的です。上記のMoodleファイルを使用することを推奨します。このファイルはCanvasにもアップロード可能です。
   - インポート後、モジュール、締切日、クイズ設定を学期スケジュールに合わせて確認してください。
 
-![Moodle](../../translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.ja.png)
+![Moodle](../../translated_images/moodle.94eb93d714a50cb2.ja.png)
 > Moodle教室でのカリキュラム
 
-![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.ja.png)
+![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff.ja.png)
 > Canvasでのカリキュラム
 
 ### リポジトリを直接使用する場合（Classroomを使用しない場合）
diff --git a/translations/mo/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/mo/1-getting-started-lessons/1-intro-to-programming-languages/README.md
index 86f25122..14bae92d 100644
--- a/translations/mo/1-getting-started-lessons/1-intro-to-programming-languages/README.md
+++ b/translations/mo/1-getting-started-lessons/1-intro-to-programming-languages/README.md
@@ -17,7 +17,7 @@ CO_OP_TRANSLATOR_METADATA:
 
 今天，我們將探索那些讓現代網頁開發不僅僅是可能，而且令人上癮的不可思議工具。我說的是Netflix、Spotify以及你最喜歡的獨立應用程式工作室的開發者每天都在使用的編輯器、瀏覽器和工作流程。而最讓人開心的是：大多數這些專業級、行業標準的工具都是完全免費的！
 
-![程式設計簡介](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.mo.png)
+![程式設計簡介](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff.mo.png)
 > [Tomomi Imura](https://twitter.com/girlie_mac) 的手繪筆記
 
 ```mermaid
diff --git a/translations/mo/1-getting-started-lessons/2-github-basics/README.md b/translations/mo/1-getting-started-lessons/2-github-basics/README.md
index 150df536..4d10ecac 100644
--- a/translations/mo/1-getting-started-lessons/2-github-basics/README.md
+++ b/translations/mo/1-getting-started-lessons/2-github-basics/README.md
@@ -17,7 +17,7 @@ CO_OP_TRANSLATOR_METADATA:
 
 我們會一起踏上這段旅程，一步一步來。沒有匆忙，沒有壓力——只有你、我，以及一些即將成為你新好朋友的超酷工具！
 
-![GitHub 簡介](../../../../translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.mo.png)
+![GitHub 簡介](../../../../translated_images/webdev101-github.8846d7971abef6f9.mo.png)
 > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
 
 ```mermaid
@@ -604,7 +604,7 @@ flowchart TD
 
 ✅ 找到 "適合初學者" 的儲存庫的一個好方法是 [透過標籤 'good-first-issue' 進行搜尋](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/)。
 
-![本地複製儲存庫](../../../../translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.mo.png)
+![本地複製儲存庫](../../../../translated_images/clone_repo.5085c48d666ead57.mo.png)
 
 有幾種複製程式碼的方法。一種方法是使用 HTTPS、SSH 或 GitHub CLI（命令列介面）來 "克隆" 儲存庫的內容。
 
diff --git a/translations/mo/1-getting-started-lessons/3-accessibility/README.md b/translations/mo/1-getting-started-lessons/3-accessibility/README.md
index 8dfd720a..9e05b80f 100644
--- a/translations/mo/1-getting-started-lessons/3-accessibility/README.md
+++ b/translations/mo/1-getting-started-lessons/3-accessibility/README.md
@@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA:
 -->
 # 建立無障礙網頁
 
-![關於無障礙設計](../../../../translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.mo.png)
+![關於無障礙設計](../../../../translated_images/webdev101-a11y.8ef3025c858d897a.mo.png)
 > Sketchnote 作者：[Tomomi Imura](https://twitter.com/girlie_mac)
 
 ```mermaid
diff --git a/translations/mo/2-js-basics/1-data-types/README.md b/translations/mo/2-js-basics/1-data-types/README.md
index d169427d..242b7540 100644
--- a/translations/mo/2-js-basics/1-data-types/README.md
+++ b/translations/mo/2-js-basics/1-data-types/README.md
@@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA:
 -->
 # JavaScript 基礎：資料型別
 
-![JavaScript 基礎 - 資料型別](../../../../translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.mo.png)
+![JavaScript 基礎 - 資料型別](../../../../translated_images/webdev101-js-datatypes.4cc470179730702c.mo.png)
 > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
 
 ```mermaid
diff --git a/translations/mo/2-js-basics/2-functions-methods/README.md b/translations/mo/2-js-basics/2-functions-methods/README.md
index 1090ae3b..44b2f1f8 100644
--- a/translations/mo/2-js-basics/2-functions-methods/README.md
+++ b/translations/mo/2-js-basics/2-functions-methods/README.md
@@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA:
 -->
 # JavaScript 基礎：方法與函數
 
-![JavaScript 基礎 - 函數](../../../../translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.mo.png)
+![JavaScript 基礎 - 函數](../../../../translated_images/webdev101-js-functions.be049c4726e94f8b.mo.png)
 > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
 
 ```mermaid
diff --git a/translations/mo/2-js-basics/3-making-decisions/README.md b/translations/mo/2-js-basics/3-making-decisions/README.md
index 1df6874e..9cbc0297 100644
--- a/translations/mo/2-js-basics/3-making-decisions/README.md
+++ b/translations/mo/2-js-basics/3-making-decisions/README.md
@@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA:
 -->
 # JavaScript 基礎：做出決策
 
-![JavaScript 基礎 - 做出決策](../../../../translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.mo.png)
+![JavaScript 基礎 - 做出決策](../../../../translated_images/webdev101-js-decisions.69e1b20f272dd1f0.mo.png)
 
 > Sketchnote 作者：[Tomomi Imura](https://twitter.com/girlie_mac)
 
diff --git a/translations/mo/2-js-basics/4-arrays-loops/README.md b/translations/mo/2-js-basics/4-arrays-loops/README.md
index 3337e755..f355c578 100644
--- a/translations/mo/2-js-basics/4-arrays-loops/README.md
+++ b/translations/mo/2-js-basics/4-arrays-loops/README.md
@@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA:
 -->
 # JavaScript 基礎：陣列與迴圈
 
-![JavaScript 基礎 - 陣列](../../../../translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.mo.png)
+![JavaScript 基礎 - 陣列](../../../../translated_images/webdev101-js-arrays.439d7528b8a29455.mo.png)
 > Sketchnote 作者：[Tomomi Imura](https://twitter.com/girlie_mac)
 
 ```mermaid
diff --git a/translations/mo/3-terrarium/1-intro-to-html/README.md b/translations/mo/3-terrarium/1-intro-to-html/README.md
index dfba5ed2..070e804f 100644
--- a/translations/mo/3-terrarium/1-intro-to-html/README.md
+++ b/translations/mo/3-terrarium/1-intro-to-html/README.md
@@ -26,7 +26,7 @@ journey
       Build terrarium: 5: Student
 ```
 
-![HTML入門](../../../../translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.mo.png)
+![HTML入門](../../../../translated_images/webdev101-html.4389c2067af68e98.mo.png)
 > 手繪筆記由 [Tomomi Imura](https://twitter.com/girlie_mac) 提供
 
 HTML，即超文本標記語言，是您曾經瀏覽過的每個網站的基礎。可以將HTML想像成網頁的骨架——它定義了內容的位置、組織方式以及每個部分的意義。雖然CSS稍後會用顏色和佈局來“裝飾”您的HTML，JavaScript則會通過互動性使其“活起來”，但HTML提供了使其他一切成為可能的基本結構。
@@ -88,7 +88,7 @@ mindmap
 4. 在Explorer面板中，點擊“New File”圖標
 5. 將文件命名為`index.html`
 
-![VS Code Explorer顯示新文件創建](../../../../translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.mo.png)
+![VS Code Explorer顯示新文件創建](../../../../translated_images/vs-code-index.e2986cf919471eb9.mo.png)
 
 **選項2：使用終端命令**
 ```bash
diff --git a/translations/mo/3-terrarium/2-intro-to-css/README.md b/translations/mo/3-terrarium/2-intro-to-css/README.md
index bcaf3390..dd6e5225 100644
--- a/translations/mo/3-terrarium/2-intro-to-css/README.md
+++ b/translations/mo/3-terrarium/2-intro-to-css/README.md
@@ -30,7 +30,7 @@ journey
       Glass reflections: 5: Student
 ```
 
-![CSS入門](../../../../translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.mo.png)
+![CSS入門](../../../../translated_images/webdev101-css.3f7af5991bf53a20.mo.png)
 > 手繪筆記由 [Tomomi Imura](https://twitter.com/girlie_mac) 提供
 
 還記得你的HTML微型生態瓶看起來非常基本嗎？CSS就是用來將這個簡單的結構轉變成視覺上更吸引人的東西。
@@ -205,7 +205,7 @@ body {
 
 打開瀏覽器的開發者工具（F12），導航到“元素”選項卡，檢查你的`<h1>`元素。你會看到它繼承了`body`的字體：
 
-![繼承的字體](../../../../translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.mo.png)
+![繼承的字體](../../../../translated_images/1.cc07a5cbe114ad1d.mo.png)
 
 ✅ **實驗時間**：嘗試在`<body>`上設置其他可繼承屬性，例如`color`、`line-height`或`text-align`。你的標題和其他元素會發生什麼變化？
 
@@ -599,7 +599,7 @@ flowchart LR
 
 你將創建微妙的高光，模擬光線如何在玻璃表面反射。這種方法類似於文藝復興時期的畫家如 Jan van Eyck 如何使用光線和反射使繪製的玻璃看起來具有三維效果。以下是你的目標：
 
-![完成的玻璃瓶](../../../../translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.mo.png)
+![完成的玻璃瓶](../../../../translated_images/terrarium-final.2f07047ffc597d0a.mo.png)
 
 **你的挑戰：**
 - **創建** 微妙的白色或淺色橢圓形作為玻璃反射效果
diff --git a/translations/mo/3-terrarium/3-intro-to-DOM-and-closures/README.md b/translations/mo/3-terrarium/3-intro-to-DOM-and-closures/README.md
index 1f898c99..bbb9d761 100644
--- a/translations/mo/3-terrarium/3-intro-to-DOM-and-closures/README.md
+++ b/translations/mo/3-terrarium/3-intro-to-DOM-and-closures/README.md
@@ -26,7 +26,7 @@ journey
       Complete terrarium: 5: Student
 ```
 
-![DOM 和閉包](../../../../translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.mo.png)
+![DOM 和閉包](../../../../translated_images/webdev101-js.10280393044d7eaa.mo.png)
 > 手繪筆記由 [Tomomi Imura](https://twitter.com/girlie_mac) 提供
 
 歡迎來到網頁開發中最有趣的部分之一——讓網頁變得互動！文檔物件模型（DOM）就像是 HTML 和 JavaScript 之間的橋樑，今天我們將利用它讓你的微型生態瓶活起來。當 Tim Berners-Lee 創建第一個網頁瀏覽器時，他設想了一個可以動態和互動的網頁世界，而 DOM 使這一願景成為可能。
@@ -105,7 +105,7 @@ flowchart TD
     style Q fill:#ffebee
 ```
 
-![DOM 樹表示](../../../../translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.mo.png)
+![DOM 樹表示](../../../../translated_images/dom-tree.7daf0e763cbbba92.mo.png)
 
 > DOM 的表示及其引用的 HTML 標記。來源：[Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
 
@@ -150,7 +150,7 @@ flowchart LR
 
 > 💡 **理解閉包**：閉包是 JavaScript 中的重要主題，許多開發者在使用多年後才完全掌握其理論方面。今天，我們專注於實際應用——你將看到閉包在構建我們的互動功能時自然地出現。隨著你了解它如何解決實際問題，理解也會逐漸加深。
 
-![DOM 樹表示](../../../../translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.mo.png)
+![DOM 樹表示](../../../../translated_images/dom-tree.7daf0e763cbbba92.mo.png)
 
 > DOM 的表示及其引用的 HTML 標記。來源：[Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
 
@@ -598,7 +598,7 @@ function stopElementDrag() {
 - **跨設備支援**：適用於桌面和移動設備
 - **效能意識**：無記憶體洩漏或冗餘計算
 
-![完成的微型花園](../../../../translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.mo.png)
+![完成的微型花園](../../../../translated_images/terrarium-final.0920f16e87c13a84.mo.png)
 
 ---
 
diff --git a/translations/mo/3-terrarium/README.md b/translations/mo/3-terrarium/README.md
index c03e1996..4ba0e677 100644
--- a/translations/mo/3-terrarium/README.md
+++ b/translations/mo/3-terrarium/README.md
@@ -1,43 +1,30 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "7965cd2bc5dc92ad888dc4c6ab2ab70a",
-  "translation_date": "2025-08-25T21:04:10+00:00",
+  "original_hash": "bc5c5550f79d10add90ce419ee34abb3",
+  "translation_date": "2026-01-06T12:05:07+00:00",
   "source_file": "3-terrarium/README.md",
   "language_code": "mo"
 }
 -->
-# 我的微型植物園：學習 HTML、CSS 和使用 JavaScript 操控 DOM 的專案 🌵🌱
+## 部署你的 Terrarium
 
-一個小型的拖放式程式冥想。只需一些 HTML、JS 和 CSS，你就能建立一個網頁介面，為其設計樣式，甚至加入多種互動功能。
+你可以使用 **Azure Static Web Apps** 在網絡上部署或發佈你的 Terrarium。
 
-![我的微型植物園](../../../translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.mo.png)
+1. 分叉此倉庫
 
-# 課程
+2. 按下這個按鈕 👇  
 
-1. [HTML 入門](./1-intro-to-html/README.md)
-2. [CSS 入門](./2-intro-to-css/README.md)
-3. [DOM 和 JS 閉包入門](./3-intro-to-DOM-and-closures/README.md)
+[![Deploy to Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/#create/Microsoft.StaticApp)
 
-## 致謝
+3. 跟隨設置嚮導來創建你的應用。  
+   - 將 **App root** 設為 `/solution` 或你的代碼庫根目錄。  
+   - 此應用中沒有 API，因此可以跳過 API 配置。  
+   - 系統會自動創建一個 `.github` 文件夾，以協助 Azure Static Web Apps 建構及發佈你的應用。
 
-由 [Jen Looper](https://www.twitter.com/jenlooper) 用 ♥️ 撰寫。
-
-透過 CSS 創建的微型植物園靈感來自 Jakub Mandra 的玻璃罐 [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY)。
-
-藝術作品由 [Jen Looper](http://jenlooper.com) 使用 Procreate 手繪完成。
-
-## 部署你的微型植物園
-
-你可以使用 Azure 靜態網頁應用程式將你的微型植物園部署或發布到網路上。
-
-1. Fork 此倉庫
-
-2. 按下這個按鈕
-
-[![部署到 Azure 按鈕](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
-
-3. 按照向導步驟建立你的應用程式。請確保將應用程式根目錄設置為 `/solution` 或你的程式碼庫的根目錄。此應用程式中沒有 API，因此不需要擔心添加它。一個 GitHub 資料夾將會在你 Fork 的倉庫中建立，幫助 Azure 靜態網頁應用程式的建置服務，將你的應用程式建置並發布到一個新的 URL。
+---
 
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
 **免責聲明**：  
-本文件使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。應以原始語言的文件作為權威來源。對於關鍵資訊，建議尋求專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或誤釋不承擔責任。
\ No newline at end of file
+本文件由人工智能翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。儘管我們力求準確，但請注意，自動翻譯可能包含錯誤或不準確之處。原文以其本地語言版本為權威來源。對於重要資訊，建議使用專業人工翻譯。我們不對因使用本翻譯而產生的任何誤解或誤釋承擔責任。
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->
\ No newline at end of file
diff --git a/translations/mo/3-terrarium/solution/README.md b/translations/mo/3-terrarium/solution/README.md
index 26a2bed9..ccf898ed 100644
--- a/translations/mo/3-terrarium/solution/README.md
+++ b/translations/mo/3-terrarium/solution/README.md
@@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
 
 一個小型的拖放式程式冥想。只需一些 HTML、JS 和 CSS，你就可以建立一個網頁介面，設計它，並添加互動功能。
 
-![我的微型植物園](../../../../translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.mo.png)
+![我的微型植物園](../../../../translated_images/screenshot_gray.0c796099a1f9f25e.mo.png)
 
 ## 致謝
 
diff --git a/translations/mo/5-browser-extension/1-about-browsers/README.md b/translations/mo/5-browser-extension/1-about-browsers/README.md
index d502f312..42f24833 100644
--- a/translations/mo/5-browser-extension/1-about-browsers/README.md
+++ b/translations/mo/5-browser-extension/1-about-browsers/README.md
@@ -26,7 +26,7 @@ journey
       Polish experience: 5: Student
 ```
 
-![瀏覽器手繪筆記](../../../../translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.mo.jpg)
+![瀏覽器手繪筆記](../../../../translated_images/browser.60317c9be8b7f84a.mo.jpg)
 > 手繪筆記由 [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob) 提供
 
 ## 課前測驗
@@ -79,7 +79,7 @@ mindmap
 
 ✅ **一點歷史**：第一個瀏覽器名為 'WorldWideWeb'，由 Timothy Berners-Lee 爵士於 1990 年創建。
 
-![早期瀏覽器](../../../../translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.mo.jpg)
+![早期瀏覽器](../../../../translated_images/earlybrowsers.d984b711cdf3a42d.mo.jpg)
 > 一些早期的瀏覽器，圖片來源 [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
 
 ### 瀏覽器如何處理網頁內容
@@ -198,7 +198,7 @@ quadrantChart
 
 了解擴充功能的安裝過程有助於您預測用戶在安裝您的擴充功能時的體驗。安裝過程在現代瀏覽器中是標準化的，介面設計略有不同。
 
-![Edge 瀏覽器截圖，顯示打開的 edge://extensions 頁面和打開的設置菜單](../../../../translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.mo.png)
+![Edge 瀏覽器截圖，顯示打開的 edge://extensions 頁面和打開的設置菜單](../../../../translated_images/install-on-edge.d68781acaf0b3d3d.mo.png)
 
 > **重要**：在測試您自己的擴充功能時，請確保開啟開發者模式並允許來自其他商店的擴充功能。
 
@@ -313,10 +313,10 @@ project-root/
 ### 擴充功能視圖概述
 
 **設置視圖** - 初次使用者配置：
-![完成的擴充功能在瀏覽器中打開，顯示一個包含地區名稱和 API 密鑰輸入的表單。](../../../../translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.mo.png)
+![完成的擴充功能在瀏覽器中打開，顯示一個包含地區名稱和 API 密鑰輸入的表單。](../../../../translated_images/1.b6da8c1394b07491.mo.png)
 
 **結果視圖** - 顯示碳足跡數據：
-![完成的擴充功能顯示美國 US-NEISO 地區的碳使用量和化石燃料百分比值。](../../../../translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.mo.png)
+![完成的擴充功能顯示美國 US-NEISO 地區的碳使用量和化石燃料百分比值。](../../../../translated_images/2.1dae52ff08042246.mo.png)
 
 ### 建立配置表單
 
diff --git a/translations/mo/5-browser-extension/2-forms-browsers-local-storage/README.md b/translations/mo/5-browser-extension/2-forms-browsers-local-storage/README.md
index 9b0691f4..74aae439 100644
--- a/translations/mo/5-browser-extension/2-forms-browsers-local-storage/README.md
+++ b/translations/mo/5-browser-extension/2-forms-browsers-local-storage/README.md
@@ -268,7 +268,7 @@ stateDiagram-v2
     ClearStorage --> FirstTime: Back to setup
 ```
 
-![本地存儲面板](../../../../translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.mo.png)
+![本地存儲面板](../../../../translated_images/localstorage.472f8147b6a3f8d1.mo.png)
 
 > ⚠️ **安全考量**：在生產應用中，將 API 密鑰存儲在 LocalStorage 中存在安全風險，因為 JavaScript 可以訪問這些數據。作為學習用途，這種方法是可以的，但真正的應用應該使用安全的伺服器端存儲來保存敏感憑據。
 
diff --git a/translations/mo/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/mo/5-browser-extension/3-background-tasks-and-performance/README.md
index bed96078..46495d29 100644
--- a/translations/mo/5-browser-extension/3-background-tasks-and-performance/README.md
+++ b/translations/mo/5-browser-extension/3-background-tasks-and-performance/README.md
@@ -126,7 +126,7 @@ flowchart LR
 
 讓我們來試試看。打開一個網站（Microsoft.com 是個不錯的選擇），然後點擊「記錄」按鈕。現在刷新網頁，觀察分析器捕捉到的所有活動。停止記錄後，您將看到瀏覽器如何「腳本化」、「渲染」和「繪製」網站的詳細分解。這讓我想起了任務控制中心在火箭發射期間監控每個系統的方式——您可以獲得實時的數據，了解每件事情的發生時間和過程。
 
-![Edge profiler](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.mo.png)
+![Edge profiler](../../../../translated_images/profiler.5a4a62479c5df01c.mo.png)
 
 ✅ [Microsoft 文件](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) 有更多詳細資訊，供您深入了解。
 
@@ -136,11 +136,11 @@ flowchart LR
 
 通過選擇剖析時間線的一部分並查看摘要窗格，獲得網頁效能的快照：
 
-![Edge profiler snapshot](../../../../translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.mo.png)
+![Edge profiler snapshot](../../../../translated_images/snapshot.97750180ebcad737.mo.png)
 
 檢查事件日誌窗格，查看是否有任何事件超過 15 毫秒：
 
-![Edge event log](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.mo.png)
+![Edge event log](../../../../translated_images/log.804026979f3707e0.mo.png)
 
 ✅ 熟悉您的分析器！在此網站上打開開發者工具，看看是否有任何瓶頸。哪個資產加載最慢？最快？
 
diff --git a/translations/mo/5-browser-extension/README.md b/translations/mo/5-browser-extension/README.md
index 4397469f..c77dbd5c 100644
--- a/translations/mo/5-browser-extension/README.md
+++ b/translations/mo/5-browser-extension/README.md
@@ -23,7 +23,7 @@ CO_OP_TRANSLATOR_METADATA:
 
 ### 致謝
 
-![一個綠色的瀏覽器擴充功能](../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.mo.png)
+![一個綠色的瀏覽器擴充功能](../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.mo.png)
 
 ## 致謝
 
diff --git a/translations/mo/5-browser-extension/solution/README.md b/translations/mo/5-browser-extension/solution/README.md
index d9653725..79f27f73 100644
--- a/translations/mo/5-browser-extension/solution/README.md
+++ b/translations/mo/5-browser-extension/solution/README.md
@@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
 
 使用 tmrow 的 C02 Signal API 來追蹤電力使用情況，建立一個瀏覽器擴充功能，讓您可以在瀏覽器中即時提醒所在區域的電力使用負荷。透過這個擴充功能，您可以根據資訊來判斷是否進行某些活動。
 
-![擴充功能截圖](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.mo.png)
+![擴充功能截圖](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.mo.png)
 
 ## 快速開始
 
@@ -31,7 +31,7 @@ npm run build
 
 在 Edge 瀏覽器中安裝擴充功能，請使用瀏覽器右上角的「三點」選單找到擴充功能面板。從那裡選擇「載入未封裝」以載入新的擴充功能。在提示中打開「dist」資料夾，擴充功能就會載入。要使用此功能，您需要 CO2 Signal API 的 API 金鑰（[在此透過電子郵件獲取](https://www.co2signal.com/) - 在此頁面輸入您的電子郵件）以及對應於 [Electricity Map](https://www.electricitymap.org/map) 的區域代碼（例如，在波士頓，我使用「US-NEISO」）[區域代碼查詢](http://api.electricitymap.org/v3/zones)。
 
-![安裝擴充功能](../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.mo.png)
+![安裝擴充功能](../../../../translated_images/install-on-edge.78634f02842c4828.mo.png)
 
 一旦在擴充功能介面中輸入 API 金鑰和區域代碼，瀏覽器擴充功能欄中的彩色點應該會改變，反映您所在區域的能源使用情況，並提供指引，告訴您哪些高耗能活動適合進行。這個「點」系統的概念是受到 [Energy Lollipop 擴充功能](https://energylollipop.com/)（針對加州排放）的啟發。
 
diff --git a/translations/mo/5-browser-extension/solution/translation/README.fr.md b/translations/mo/5-browser-extension/solution/translation/README.fr.md
index a075e08f..18f00577 100644
--- a/translations/mo/5-browser-extension/solution/translation/README.fr.md
+++ b/translations/mo/5-browser-extension/solution/translation/README.fr.md
@@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
 
 使用 tmrow 的 C02 Signal API 來追蹤電力消耗，創建一個瀏覽器擴充套件，讓您可以直接在瀏覽器中獲得您所在地區的電力消耗提醒。使用這個即時擴充套件可以幫助您根據這些資訊對您的活動做出判斷。
 
-![擴充套件截圖](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.mo.png)
+![擴充套件截圖](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.mo.png)
 
 ## 開始
 
@@ -31,7 +31,7 @@ npm run build
 
 要在 Edge 上安裝，請使用瀏覽器右上角的「三點」選單找到擴充套件面板。從那裡選擇「載入未壓縮的擴充套件」以載入新的擴充套件。在提示中打開 'dist' 資料夾，擴充套件就會被載入。要使用此擴充套件，您需要一個 CO2 Signal API 的 API 金鑰（[在此處透過電子郵件獲取](https://www.co2signal.com/) - 在該頁面上的框中輸入您的電子郵件）以及對應於 [電力地圖](https://www.electricitymap.org/map) 的 [地區代碼](http://api.electricitymap.org/v3/zones)（例如，在波士頓，我使用 'US-NEISO'）。
 
-![安裝](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.mo.png)
+![安裝](../../../../../translated_images/install-on-edge.78634f02842c4828.mo.png)
 
 當 API 金鑰和地區代碼輸入到擴充套件介面後，瀏覽器擴充套件欄中的彩色點應該會改變，以反映您所在地區的能源消耗，並為您提供指標，幫助您判斷是否適合進行耗能活動。這個「點」系統的概念是受到 [Energy Lollipop 擴充套件](https://energylollipop.com/) 的啟發，用於加州的排放量指標。
 
diff --git a/translations/mo/5-browser-extension/solution/translation/README.hi.md b/translations/mo/5-browser-extension/solution/translation/README.hi.md
index dc53d0a9..72934ecd 100644
--- a/translations/mo/5-browser-extension/solution/translation/README.hi.md
+++ b/translations/mo/5-browser-extension/solution/translation/README.hi.md
@@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
 
 使用 tmrow 的 C02 Signal API 來追蹤電力使用情況，構建一個瀏覽器擴展，提醒您所在區域的電力使用是否繁重。使用此擴展可以幫助您根據這些信息來決定自己的活動。
 
-![擴展截圖](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.mo.png)
+![擴展截圖](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.mo.png)
 
 ## 開始
 
@@ -31,7 +31,7 @@ npm run build
 
 要在 Edge 上安裝，請使用瀏覽器右上角的“三點”菜單找到擴展面板。從那裡選擇“加載未打包的擴展”，然後在提示中打開“dist”文件夾，擴展就會加載。要使用它，您需要 CO2 Signal 的 API 密鑰（[通過電子郵件在此處獲取](https://www.co2signal.com/)——在該頁面的框中輸入您的電子郵件）以及 [您所在區域的代碼](http://api.electricitymap.org/v3/zones) [電力地圖](https://www.electricitymap.org/map)（例如，在波士頓，我使用“US-NEISO”）。
 
-![安裝](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.mo.png)
+![安裝](../../../../../translated_images/install-on-edge.78634f02842c4828.mo.png)
 
 一旦 API 密鑰和區域代碼輸入到擴展界面中，瀏覽器擴展欄中的彩色點應該會根據您所在區域的能源使用情況進行變化，並為您提供一個指標，告訴您哪些能源密集型活動適合您的操作。這個“點”系統的概念是我從加州排放的 [Energy Lollipop 擴展](https://energylollipop.com/) 中獲得的靈感。
 
diff --git a/translations/mo/5-browser-extension/solution/translation/README.it.md b/translations/mo/5-browser-extension/solution/translation/README.it.md
index 3c747148..27fae24a 100644
--- a/translations/mo/5-browser-extension/solution/translation/README.it.md
+++ b/translations/mo/5-browser-extension/solution/translation/README.it.md
@@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
 
 我們將使用 tmrow 的 Signal C02 API 來監控電力使用情況，並創建一個瀏覽器擴充功能，讓您可以直接在瀏覽器中獲得提醒，了解所在區域的電力使用情況。使用這個專門的擴充功能可以幫助您根據這些資訊評估自己的活動。
 
-![擴充功能截圖](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.mo.png)
+![擴充功能截圖](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.mo.png)
 
 ## 開始使用
 
@@ -31,7 +31,7 @@ npm run build
 
 要在 Edge 上安裝，請使用瀏覽器右上角的「三點」選單找到擴充功能面板。如果尚未啟用，請啟用開發者模式（左下角）。選擇「載入未壓縮的擴充功能」以載入新的擴充功能。在提示中打開 "dist" 資料夾，擴充功能就會被載入。要使用此擴充功能，您需要一個 CO2 Signal API 的 API 金鑰（可以[通過電子郵件在此處獲得](https://www.co2signal.com/) - 在該頁面上的框中輸入您的電子郵件）以及對應於[電力地圖](https://www.electricitymap.org/map)的[區域代碼](http://api.electricitymap.org/v3/zones)（例如，在波士頓是 "US-NEISO"）。
 
-![安裝](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.mo.png)
+![安裝](../../../../../translated_images/install-on-edge.78634f02842c4828.mo.png)
 
 當 API 金鑰和區域代碼輸入到擴充功能介面後，瀏覽器擴充功能欄中的彩色點應該會改變，以反映該區域的能源使用情況，並提供指引，告訴您哪些高耗能活動適合執行。這個「點」系統的概念是基於加州排放的 [Energy Lollipop 擴充功能](https://energylollipop.com/) 提供的。
 
diff --git a/translations/mo/5-browser-extension/solution/translation/README.ja.md b/translations/mo/5-browser-extension/solution/translation/README.ja.md
index 9b2ebe1f..2081a5e2 100644
--- a/translations/mo/5-browser-extension/solution/translation/README.ja.md
+++ b/translations/mo/5-browser-extension/solution/translation/README.ja.md
@@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
 
 使用 tmrow 的 C02 Signal API 來追蹤電力使用情況，並在瀏覽器中顯示您所在地區的電力使用量作為提醒。透過這個瀏覽器擴充功能，您可以根據這些資訊來判斷自己的行動。
 
-![extension screenshot](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.mo.png)
+![extension screenshot](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.mo.png)
 
 ## 開始使用
 
@@ -31,7 +31,7 @@ npm run build
 
 若要安裝到 Edge，請在瀏覽器右上角的「三點」選單中找到「擴充功能」面板。從那裡選擇「Load Unpacked」，然後載入新的擴充功能。在提示中打開「dist」資料夾，擴充功能就會被載入。要使用此功能，您需要 CO2 Signal API 的 API 金鑰 ([在這裡透過電子郵件獲取](https://www.co2signal.com/) - 在該頁面的框中輸入您的電子郵件)，以及 [Electricity Map](https://www.electricitymap.org/map) 對應的 [您所在地區的代碼](http://api.electricitymap.org/v3/zones)（例如，在波士頓，使用 'US-NEISO'）。
 
-![installing](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.mo.png)
+![installing](../../../../../translated_images/install-on-edge.78634f02842c4828.mo.png)
 
 在擴充介面中輸入 API 金鑰和地區代碼後，瀏覽器擴充工具列中的彩色圓點會隨之變化，反映您所在地區的能源使用情況，並提示您進行哪些活動是適合的。這個「圓點」系統的概念靈感來自於加州排放量的 [Energy Lollipop 擴充功能](https://energylollipop.com/)。
 
diff --git a/translations/mo/5-browser-extension/solution/translation/README.ms.md b/translations/mo/5-browser-extension/solution/translation/README.ms.md
index b9491dd2..72ea9cdf 100644
--- a/translations/mo/5-browser-extension/solution/translation/README.ms.md
+++ b/translations/mo/5-browser-extension/solution/translation/README.ms.md
@@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
 
 使用 tmrow 的 CO2 Signal API 來監測電力使用情況，建立一個瀏覽器擴充功能，讓您能在瀏覽器中收到關於您所在區域電力使用情況的提醒。使用這個擴充功能可以幫助您根據這些資訊來調整您的活動。
 
-![瀏覽器擴充功能截圖](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.mo.png)
+![瀏覽器擴充功能截圖](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.mo.png)
 
 ## 從這裡開始
 
@@ -31,7 +31,7 @@ npm run build
 
 要在 Edge 瀏覽器中安裝，請使用瀏覽器右上角的「三點」選單找到擴充功能面板。從那裡選擇「載入未封裝」以載入新的擴充功能。根據提示打開 'dist' 資料夾，擴充功能就會被載入。要使用它，您需要一個 CO2 Signal API 的 API 金鑰（[在這裡透過電子郵件獲取](https://www.co2signal.com/) - 在頁面上的框中輸入您的電子郵件）以及 [您的區域代碼](http://api.electricitymap.org/v3/zones)，該代碼與 [電力地圖](https://www.electricitymap.org/map) 相符（例如，在波士頓，我使用 'US-NEISO'）。
 
-![正在下載](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.mo.png)
+![正在下載](../../../../../translated_images/install-on-edge.78634f02842c4828.mo.png)
 
 當您將 API 金鑰和區域代碼輸入到擴充功能介面後，瀏覽器擴充功能列上的彩色點將會改變，以反映您所在區域的能源使用情況，並提供您適合進行的活動建議。這個「點」系統的概念是受到 [Energy Lollipop 瀏覽器擴充功能](https://energylollipop.com/) 的啟發，該擴充功能專為加州的排放量設計。
 
diff --git a/translations/mo/5-browser-extension/start/README.md b/translations/mo/5-browser-extension/start/README.md
index fe665e92..58b85624 100644
--- a/translations/mo/5-browser-extension/start/README.md
+++ b/translations/mo/5-browser-extension/start/README.md
@@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
 
 使用 tmrow 的 C02 Signal API 來追蹤電力使用情況，建立一個瀏覽器擴充功能，讓您可以在瀏覽器中即時提醒所在區域的電力使用負荷。透過這個擴充功能，您可以根據資訊來判斷是否進行某些活動。
 
-![擴充功能截圖](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.mo.png)
+![擴充功能截圖](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.mo.png)
 
 ## 開始使用
 
@@ -31,7 +31,7 @@ npm run build
 
 在 Edge 瀏覽器中安裝擴充功能，使用瀏覽器右上角的「三點」選單找到擴充功能面板。從那裡選擇「載入未封裝」以載入新的擴充功能。在提示中打開「dist」資料夾，擴充功能就會載入。要使用此功能，您需要 CO2 Signal API 的 API 金鑰（[在此處透過電子郵件獲取](https://www.co2signal.com/) - 在該頁面輸入您的電子郵件）以及對應 [Electricity Map](https://www.electricitymap.org/map) 的區域代碼（例如，在波士頓，我使用 'US-NEISO'，可在 [此處](http://api.electricitymap.org/v3/zones) 找到）。
 
-![安裝擴充功能](../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.mo.png)
+![安裝擴充功能](../../../../translated_images/install-on-edge.78634f02842c4828.mo.png)
 
 一旦在擴充功能介面中輸入 API 金鑰和區域代碼，瀏覽器擴充功能欄中的彩色點應會改變，反映您所在區域的能源使用情況，並提供指引，告訴您哪些高耗能活動適合進行。這個「點」系統的概念來自 [Energy Lollipop 擴充功能](https://energylollipop.com/)，該擴充功能專注於加州的排放情況。
 
diff --git a/translations/mo/6-space-game/2-drawing-to-canvas/README.md b/translations/mo/6-space-game/2-drawing-to-canvas/README.md
index 53ebbbba..87acaa87 100644
--- a/translations/mo/6-space-game/2-drawing-to-canvas/README.md
+++ b/translations/mo/6-space-game/2-drawing-to-canvas/README.md
@@ -108,7 +108,7 @@ quadrantChart
     UI Elements: [0.9, 0.1]
 ```
 
-![Canvas 的網格](../../../../translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.mo.png)
+![Canvas 的網格](../../../../translated_images/canvas_grid.5f209da785ded492.mo.png)
 > 圖片來源：[MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
 
 要在 Canvas 元素上繪圖，你需要遵循三個步驟，這是所有 Canvas 圖形的基礎。一旦你多次完成這些步驟，它就會變得非常自然：
@@ -329,11 +329,11 @@ flowchart TD
 
 - 英雄飛船
 
-   ![英雄飛船](../../../../translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.mo.png)
+   ![英雄飛船](../../../../translated_images/player.dd24c1afa8c71e9b.mo.png)
 
 - 5×5 怪物
 
-   ![怪物飛船](../../../../translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.mo.png)
+   ![怪物飛船](../../../../translated_images/enemyShip.5df2a822c16650c2.mo.png)
 
 ### 建議的開發步驟
 
@@ -470,7 +470,7 @@ for (let x = START_X; x < STOP_X; x += ENEMY_SPACING) {
 
 完成的結果應該看起來像這樣：
 
-![黑色螢幕上有一個英雄和5*5的怪物](../../../../translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.mo.png)
+![黑色螢幕上有一個英雄和5*5的怪物](../../../../translated_images/partI-solution.36c53b48c9ffae2a.mo.png)
 
 ## 解決方案
 
diff --git a/translations/mo/6-space-game/5-keeping-score/README.md b/translations/mo/6-space-game/5-keeping-score/README.md
index 551e282a..26f8d0b2 100644
--- a/translations/mo/6-space-game/5-keeping-score/README.md
+++ b/translations/mo/6-space-game/5-keeping-score/README.md
@@ -160,7 +160,7 @@ sequenceDiagram
 ```
 
 - **得分系統**：每摧毀一艘敵方飛船可獲得 100 分（整數更容易讓玩家心算）。得分顯示在左下角。
-- **生命計數器**：你的英雄從三條生命開始——這是早期街機遊戲為了平衡挑戰與可玩性而設立的標準。每次與敵人碰撞會損失一條生命。我們將使用飛船圖標在右下角顯示剩餘生命 ![life image](../../../../translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.mo.png)。
+- **生命計數器**：你的英雄從三條生命開始——這是早期街機遊戲為了平衡挑戰與可玩性而設立的標準。每次與敵人碰撞會損失一條生命。我們將使用飛船圖標在右下角顯示剩餘生命 ![life image](../../../../translated_images/life.6fb9f50d53ee0413.mo.png)。
 
 ## 開始建造！
 
diff --git a/translations/mo/7-bank-project/1-template-route/README.md b/translations/mo/7-bank-project/1-template-route/README.md
index 1bacc386..4c5f130d 100644
--- a/translations/mo/7-bank-project/1-template-route/README.md
+++ b/translations/mo/7-bank-project/1-template-route/README.md
@@ -652,7 +652,7 @@ sequenceDiagram
 
 使用 `history.pushState` 創建瀏覽器導航歷史中的新條目。您可以通過按住瀏覽器的*後退按鈕*來檢查，它應顯示如下內容：
 
-![導航歷史截圖](../../../../translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.mo.png)
+![導航歷史截圖](../../../../translated_images/history.7fdabbafa521e064.mo.png)
 
 如果您嘗試多次點擊後退按鈕，您會看到當前 URL 發生了變化，歷史記錄已更新，但顯示的模板保持不變。
 
diff --git a/translations/mo/7-bank-project/2-forms/README.md b/translations/mo/7-bank-project/2-forms/README.md
index 1a83e0a8..d560f2db 100644
--- a/translations/mo/7-bank-project/2-forms/README.md
+++ b/translations/mo/7-bank-project/2-forms/README.md
@@ -295,7 +295,7 @@ graph TD
 2. 觀察瀏覽器地址欄的變化
 3. 注意頁面如何重新加載以及數據如何出現在URL中
 
-![點擊註冊按鈕後瀏覽器URL變化的截圖](../../../../translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.mo.png)
+![點擊註冊按鈕後瀏覽器URL變化的截圖](../../../../translated_images/click-register.e89a30bf0d4bc9ca.mo.png)
 
 ### HTTP方法比較
 
@@ -350,7 +350,7 @@ graph TD
 2. **點擊**"創建帳戶"按鈕
 3. **觀察**瀏覽器中的伺服器響應
 
-![瀏覽器窗口顯示地址localhost:5000/api/accounts，並顯示包含用戶數據的JSON字符串](../../../../translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.mo.png)
+![瀏覽器窗口顯示地址localhost:5000/api/accounts，並顯示包含用戶數據的JSON字符串](../../../../translated_images/form-post.61de4ca1b964d91a.mo.png)
 
 **你應該看到：**
 - **瀏覽器重定向**到API端點URL
@@ -615,7 +615,7 @@ async function register() {
 3. **點擊**「建立帳戶」
 4. **觀察**主控台訊息和使用者回饋
 
-![顯示瀏覽器主控台中日誌訊息的截圖](../../../../translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.mo.png)
+![顯示瀏覽器主控台中日誌訊息的截圖](../../../../translated_images/browser-console.efaf0b51aaaf6778.mo.png)
 
 **您應該看到：**
 - **加載狀態**出現在提交按鈕上
@@ -790,7 +790,7 @@ input:focus:invalid {
 3. **嘗試**在使用者名稱欄位中輸入特殊字元
 4. **輸入**負餘額金額
 
-![顯示嘗試提交表單時的驗證錯誤截圖](../../../../translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.mo.png)
+![顯示嘗試提交表單時的驗證錯誤截圖](../../../../translated_images/validation-error.8bd23e98d416c22f.mo.png)
 
 **您將觀察到：**
 - **瀏覽器顯示**原生驗證訊息
@@ -950,7 +950,7 @@ timeline
 
 以下是添加一些 CSS 樣式後，最終登入頁面的範例：
 
-![添加 CSS 樣式後的登入頁面截圖](../../../../translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.mo.png)
+![添加 CSS 樣式後的登入頁面截圖](../../../../translated_images/result.96ef01f607bf856a.mo.png)
 
 ## 課後測驗
 
diff --git a/translations/mo/7-bank-project/3-data/README.md b/translations/mo/7-bank-project/3-data/README.md
index fd44148e..830feee2 100644
--- a/translations/mo/7-bank-project/3-data/README.md
+++ b/translations/mo/7-bank-project/3-data/README.md
@@ -160,7 +160,7 @@ sequenceDiagram
     Browser->>User: Displays new page (flash/reload)
 ```
 
-![多頁應用程式的更新工作流程](../../../../translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.mo.png)
+![多頁應用程式的更新工作流程](../../../../translated_images/mpa.7f7375a1a2d4aa77.mo.png)
 
 **為什麼這種方法感覺很笨重：**
 - 每次點擊都意味著完全重建整個頁面
@@ -187,7 +187,7 @@ sequenceDiagram
     Browser->>User: Shows updated content (no reload)
 ```
 
-![單頁應用程式的更新工作流程](../../../../translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.mo.png)
+![單頁應用程式的更新工作流程](../../../../translated_images/spa.268ec73b41f992c2.mo.png)
 
 **為什麼 SPA 感覺更好：**
 - 只有實際更改的部分會被更新（聰明吧？）
@@ -523,7 +523,7 @@ if (data.error) {
 
 現在，當你使用無效帳號進行測試時，會在頁面上看到有用的錯誤訊息！
 
-![顯示登入錯誤訊息的截圖](../../../../translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.mo.png)
+![顯示登入錯誤訊息的截圖](../../../../translated_images/login-error.416fe019b36a6327.mo.png)
 
 #### 步驟 4：注重無障礙設計
 
@@ -961,7 +961,7 @@ timeline
 
 以下是一個精美儀表板的示例：
 
-![儀表板樣例結果的截圖](../../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.mo.png)
+![儀表板樣例結果的截圖](../../../../translated_images/screen2.123c82a831a1d14a.mo.png)
 
 不必完全匹配此設計——將其作為靈感，創造屬於你的風格！
 
diff --git a/translations/mo/7-bank-project/4-state-management/README.md b/translations/mo/7-bank-project/4-state-management/README.md
index 83a45329..22c84092 100644
--- a/translations/mo/7-bank-project/4-state-management/README.md
+++ b/translations/mo/7-bank-project/4-state-management/README.md
@@ -190,7 +190,7 @@ mindmap
 
 與其徒勞無功地追逐問題，我們將創建一個**集中式狀態管理**系統。可以將其想像成一個非常有條理的人，負責所有重要的事情：
 
-![顯示HTML、用戶操作和狀態之間數據流的架構圖](../../../../translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.mo.png)
+![顯示HTML、用戶操作和狀態之間數據流的架構圖](../../../../translated_images/data-flow.fa2354e0908fecc8.mo.png)
 
 ```mermaid
 flowchart TD
@@ -804,7 +804,7 @@ timeline
 
 以下是完成作業後的示例結果：
 
-![顯示示例“添加交易”對話框的截圖](../../../../translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.mo.png)
+![顯示示例“添加交易”對話框的截圖](../../../../translated_images/dialog.93bba104afeb79f1.mo.png)
 
 ---
 
diff --git a/translations/mo/7-bank-project/4-state-management/assignment.md b/translations/mo/7-bank-project/4-state-management/assignment.md
index f9efff30..c549fd4f 100644
--- a/translations/mo/7-bank-project/4-state-management/assignment.md
+++ b/translations/mo/7-bank-project/4-state-management/assignment.md
@@ -112,7 +112,7 @@ CO_OP_TRANSLATOR_METADATA:
 **預期結果：**
 完成這項作業後，您的銀行應用程式應具備一個功能完善的「新增交易」功能，並且外觀和行為都達到專業水準：
 
-![顯示範例「新增交易」對話框的截圖](../../../../translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.mo.png)
+![顯示範例「新增交易」對話框的截圖](../../../../translated_images/dialog.93bba104afeb79f1.mo.png)
 
 ## 測試您的實現
 
diff --git a/translations/mo/7-bank-project/README.md b/translations/mo/7-bank-project/README.md
index 12c234ac..afa50ea4 100644
--- a/translations/mo/7-bank-project/README.md
+++ b/translations/mo/7-bank-project/README.md
@@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
 
 在這個專案中，你將學習如何建立一個虛構的銀行。這些課程包含了如何設計網頁應用程式的佈局和路由、建立表單、管理狀態，以及從 API 獲取銀行數據的教學。
 
-| ![Screen1](../../../translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.mo.png) | ![Screen2](../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.mo.png) |
+| ![Screen1](../../../translated_images/screen1.baccbba0f1f93364.mo.png) | ![Screen2](../../../translated_images/screen2.123c82a831a1d14a.mo.png) |
 |--------------------------------|--------------------------------|
 
 ## 課程
diff --git a/translations/mo/8-code-editor/1-using-a-code-editor/README.md b/translations/mo/8-code-editor/1-using-a-code-editor/README.md
index 86017cdb..a018a8f8 100644
--- a/translations/mo/8-code-editor/1-using-a-code-editor/README.md
+++ b/translations/mo/8-code-editor/1-using-a-code-editor/README.md
@@ -185,7 +185,7 @@ VSCode.dev 將這些功能帶到你的瀏覽器中：
 
 一切加載完成後，你會看到一個設計簡潔的工作空間，旨在讓你專注於重要的事情——你的程式碼！
 
-![VSCode.dev 預設界面](../../../../translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.mo.png)
+![VSCode.dev 預設界面](../../../../translated_images/default-vscode-dev.5d06881d65c1b323.mo.png)
 
 **以下是你的工作空間導覽：**
 - **活動欄**（左側的那條）：你的主要導航，包括 Explorer 📁、Search 🔍、Source Control 🌿、Extensions 🧩 和 Settings ⚙️
@@ -233,7 +233,7 @@ flowchart TB
 1. 如果你還未進入，請前往 [vscode.dev](https://vscode.dev)
 2. 在歡迎界面上找到「Open Remote Repository」按鈕並點擊
 
-   ![打開遠端儲存庫](../../../../translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.mo.png)
+   ![打開遠端儲存庫](../../../../translated_images/open-remote-repository.bd9c2598b8949e7f.mo.png)
 
 3. 貼上任何 GitHub 儲存庫 URL（試試這個：`https://github.com/microsoft/Web-Dev-For-Beginners`）
 4. 按下 Enter，見證奇蹟！
@@ -242,7 +242,7 @@ flowchart TB
 
 想感受像程式碼巫師一樣的感覺嗎？試試這個鍵盤快捷鍵：Ctrl+Shift+P（Mac 上為 Cmd+Shift+P）打開命令面板：
 
-![命令面板](../../../../translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.mo.png)
+![命令面板](../../../../translated_images/palette-menu.4946174e07f42622.mo.png)
 
 **命令面板就像一個搜索引擎，能找到你能做的一切：**
 - 輸入「open remote」，它會幫你找到儲存庫打開器
@@ -304,7 +304,7 @@ flowchart TB
 3. 輸入檔案名，包括適當的副檔名（例如 `style.css`、`script.js`、`index.html`）
 4. 按下 Enter 創建檔案
 
-![創建新檔案](../../../../translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.mo.png)
+![創建新檔案](../../../../translated_images/create-new-file.2814e609c2af9aeb.mo.png)
 
 **命名規則：**
 - 使用描述性名稱來指示檔案用途
@@ -322,7 +322,7 @@ flowchart TB
 2. 開始輸入，觀察 VSCode.dev 如何用顏色、建議和錯誤檢測幫助你
 3. 使用 Ctrl+S（Windows/Linux）或 Cmd+S（Mac）保存你的工作——雖然它也會自動保存！
 
-![在 VSCode.dev 中編輯檔案](../../../../translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.mo.png)
+![在 VSCode.dev 中編輯檔案](../../../../translated_images/edit-a-file.52c0ee665ef19f08.mo.png)
 
 **編碼時發生的酷炫事情：**
 - 你的程式碼會被美麗地著色，便於閱讀
@@ -343,7 +343,7 @@ flowchart TB
 2. 修改過的檔案會出現在「更改」部分
 3. 顏色編碼指示更改類型：綠色表示新增，紅色表示刪除
 
-![在原始碼控制中查看更改](../../../../translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.mo.png)
+![在原始碼控制中查看更改](../../../../translated_images/working-tree.c58eec08e6335c79.mo.png)
 
 **保存你的工作（提交工作流程）：**
 
@@ -437,7 +437,7 @@ mindmap
 2. 隨意瀏覽或搜索特定內容  
 3. 點擊任何看起來有趣的項目以了解更多資訊  
 
-![擴展市場介面](../../../../translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.mo.png)  
+![擴展市場介面](../../../../translated_images/extensions.eca0e0c7f59a10b5.mo.png)  
 
 **你會在裡面看到什麼：**  
 
@@ -488,7 +488,7 @@ mindmap
 3. 從下拉選單中選擇 "擴展設定"  
 4. 調整設定，直到符合你的工作流程需求  
 
-![自訂擴展設定](../../../../translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.mo.png)  
+![自訂擴展設定](../../../../translated_images/extension-settings.21c752ae4f4cdb78.mo.png)  
 
 **你可能想調整的常見設定：**  
 - 程式碼的格式化方式（例如使用 Tab 還是空格、行長度等）  
diff --git a/translations/mo/8-code-editor/1-using-a-code-editor/assignment.md b/translations/mo/8-code-editor/1-using-a-code-editor/assignment.md
index 104022cb..e923d2a8 100644
--- a/translations/mo/8-code-editor/1-using-a-code-editor/assignment.md
+++ b/translations/mo/8-code-editor/1-using-a-code-editor/assignment.md
@@ -78,7 +78,7 @@ CO_OP_TRANSLATOR_METADATA:
 4. **撰寫**提交訊息：「添加初始 HTML 結構」
 5. **點擊**「Commit new file」保存更改
 
-![在 GitHub 上建立初始檔案](../../../../translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.mo.png)
+![在 GitHub 上建立初始檔案](../../../../translated_images/new-file-github.com.c886796d800e8056.mo.png)
 
 **以下是此初始設置的作用：**
 - **建立**具有語義元素的正確 HTML5 文件結構
@@ -104,7 +104,7 @@ CO_OP_TRANSLATOR_METADATA:
 
 ✅ **成功指標**：您應該能在 Explorer 側邊欄中看到您的專案檔案，並在主編輯區域中編輯 `index.html`。
 
-![在 VSCode.dev 中載入專案](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.mo.png)
+![在 VSCode.dev 中載入專案](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7fe.mo.png)
 
 **您在介面中會看到：**
 - **Explorer 側邊欄**：**顯示**您的儲存庫檔案和文件結構
@@ -448,7 +448,7 @@ li:before {
 **安裝後的即時效果：**
 安裝 CodeSwing 後，您將看到履歷網站的即時預覽出現在編輯器中。這讓您能夠在進行更改時即時查看網站的外觀。
 
-![CodeSwing 擴展顯示即時預覽](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.mo.png)
+![CodeSwing 擴展顯示即時預覽](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b5509.mo.png)
 
 **理解增強的介面：**
 - **分屏視圖**：**顯示**一側的程式碼和另一側的即時預覽
diff --git a/translations/mo/9-chat-project/README.md b/translations/mo/9-chat-project/README.md
index 17830cb4..904359d5 100644
--- a/translations/mo/9-chat-project/README.md
+++ b/translations/mo/9-chat-project/README.md
@@ -61,7 +61,7 @@ print(response.choices[0].message.content)
 
 以下是完成的專案外觀：
 
-![聊天應用程式介面顯示用戶與 AI 助手之間的對話](../../../translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.mo.png)
+![聊天應用程式介面顯示用戶與 AI 助手之間的對話](../../../translated_images/screenshot.0a1ee0d123df681b.mo.png)
 
 ## 🗺️ AI應用程式開發的學習旅程
 
@@ -194,7 +194,7 @@ mindmap
 
 **核心原則**：AI應用程式開發結合了傳統的網頁開發技能與AI服務整合，創造出智能化且對用戶自然且反應迅速的應用程式。
 
-![GitHub Models AI Playground介面，顯示模型選擇和測試區域](../../../translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.mo.png)
+![GitHub Models AI Playground介面，顯示模型選擇和測試區域](../../../translated_images/playground.d2b927122224ff8f.mo.png)
 
 **Playground的實用之處：**
 - **嘗試**不同的AI模型，例如GPT-4o-mini、Claude等（全部免費！）
@@ -204,7 +204,7 @@ mindmap
 
 玩了一會兒後，只需點擊 "Code" 標籤，選擇你的程式語言，即可獲得所需的實現程式碼。
 
-![Playground選擇顯示不同程式語言的程式碼生成選項](../../../translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.mo.png)
+![Playground選擇顯示不同程式語言的程式碼生成選項](../../../translated_images/playground-choice.1d23ba7d407f4758.mo.png)
 
 ## 設置 Python 後端整合
 
@@ -2364,14 +2364,14 @@ mindmap
 - **導航**到 [Web Dev For Beginners repository](https://github.com/microsoft/Web-Dev-For-Beginners)  
 - **點擊**右上角的 "Use this template"（確保你已登錄 GitHub）  
 
-![顯示綠色 "Use this template" 按鈕的模板創建界面](../../../translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.mo.png)  
+![顯示綠色 "Use this template" 按鈕的模板創建界面](../../../translated_images/template.67ad477109d29a2b.mo.png)  
 
 **步驟 2：啟動 Codespaces**  
 - **打開**你新創建的倉庫  
 - **點擊**綠色的 "Code" 按鈕並選擇 "Codespaces"  
 - **選擇** "Create codespace on main" 以啟動你的開發環境  
 
-![顯示啟動雲端開發環境選項的 Codespace 創建界面](../../../translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.mo.png)  
+![顯示啟動雲端開發環境選項的 Codespace 創建界面](../../../translated_images/codespace.bcecbdf5d2747d3d.mo.png)  
 
 **步驟 3：環境配置**  
 當你的 Codespace 加載完成後，你將擁有以下功能：  
diff --git a/translations/mo/README.md b/translations/mo/README.md
index aeb5711a..b79c1b50 100644
--- a/translations/mo/README.md
+++ b/translations/mo/README.md
@@ -1,255 +1,277 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "63e29f5a308b533df9d70336bbb2e2b8",
-  "translation_date": "2025-11-25T17:32:39+00:00",
+  "original_hash": "fea3a0fceb8ad86fd640c09cf63a2aac",
+  "translation_date": "2026-01-06T12:03:31+00:00",
   "source_file": "README.md",
   "language_code": "mo"
 }
 -->
-[![GitHub license](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)  
-[![GitHub contributors](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)  
-[![GitHub issues](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)  
-[![GitHub pull-requests](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)  
-[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)  
+[![GitHub license](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
+[![GitHub contributors](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
+[![GitHub issues](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
+[![GitHub pull-requests](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
+[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
 
-[![GitHub watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)  
-[![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)  
-[![GitHub stars](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)  
+[![GitHub watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
+[![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
+[![GitHub stars](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
 
-[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)  
+[![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 社群  
+加入 Azure AI Foundry Discord 社群
 
-[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)  
+[![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 動作支援（自動且持續更新）
 
-[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh/README.md) | [Chinese (Traditional, Hong Kong)](../hk/README.md) | [Chinese (Traditional, Macau)](./README.md) | [Chinese (Traditional, Taiwan)](../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) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../br/README.md) | [Portuguese (Portugal)](../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) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md)  
+<!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->
+[阿拉伯語](../ar/README.md) | [孟加拉語](../bn/README.md) | [保加利亞語](../bg/README.md) | [緬甸語 (Myanmar)](../my/README.md) | [中文 (簡體)](../zh/README.md) | [中文 (繁體，香港)](../hk/README.md) | [中文 (繁體，澳門)](./README.md) | [中文 (繁體，台灣)](../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) | [波斯語 (Farsi)](../fa/README.md) | [波蘭語](../pl/README.md) | [葡萄牙語 (巴西)](../br/README.md) | [葡萄牙語 (葡萄牙)](../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)
 
-**如果你希望支援更多語言，請參考 [這裡](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)  
+> 此儲存庫包含 50 多種語言翻譯，會顯著增加下載大小。若想不包含翻譯克隆，請使用稀疏檢出：
+> ```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'
+> ```
+> 這讓你可以更快速下載，並取得完成課程所需的所有內容。
+<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
 
-#### 🧑‍🎓 _你是學生嗎？_  
+**若您希望支持其他翻譯語言，請參閱此 [列表](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
 
-造訪 [**學生中心頁面**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon)，你可以找到初學者資源、學生套件，甚至有機會獲得免費證書兌換券。這是你應該收藏並定期查看的頁面，因為我們每月都會更新內容。  
+[![在 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)
 
-### 📣 公告 - 新的 GitHub Copilot Agent 模式挑戰等你完成！  
+#### 🧑‍🎓 _你是學生嗎？_
 
-新增挑戰，請在大多數章節中尋找 "GitHub Copilot Agent Challenge 🚀"。這是一個使用 GitHub Copilot 和 Agent 模式完成的新挑戰。如果你還沒使用過 Agent 模式，它不僅能生成文字，還能創建和編輯檔案、執行指令等。  
+造訪 [**學生中心頁面**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon)，你會找到初學者資源、學生包，甚至可獲取免費證書兌換券。這是想收藏並不時查看的頁面，因為我們每月都會更換內容。
 
-### 📣 公告 - _使用生成式 AI 建立新專案_  
+### 📣 公告 - 新增 GitHub Copilot Agent 模式挑戰！
 
-新增 AI 助理專案，查看 [專案](./09-chat-project/README.md)  
+新增挑戰，請在大多數章節尋找 "GitHub Copilot Agent Challenge 🚀"。這是使用 GitHub Copilot 及 Agent 模式來完成的新挑戰。如果你以前沒用過 Agent 模式，它不僅能生成文字，還能建立和編輯檔案、執行命令等。
 
-### 📣 公告 - _新的生成式 AI 課程_  
+### 📣 公告 - _使用生成式 AI 建構的新專案_
 
-我們剛剛發布了新的 JavaScript 生成式 AI 課程！  
+新增 AI 助理專案，快來看看 [專案](./9-chat-project/README.md)
 
-造訪 [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) 開始學習！  
+### 📣 公告 - _針對 JavaScript 的全新生成式 AI 課程_
 
-![Background](../../translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.mo.png)  
+別錯過我們的生成式 AI 新課程！
 
-- 課程涵蓋從基礎到 RAG 的所有內容。  
-- 使用 GenAI 和我們的伴侶應用程式與歷史人物互動。  
-- 有趣且引人入勝的敘事，你將進行時光旅行！  
+造訪 [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) 開始學習！
 
-![character](../../translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.mo.png)  
+![Background](../../translated_images/background.148a8d43afde5730.mo.png)
 
-每節課都包含一個作業、一個知識檢查和一個挑戰，幫助你學習以下主題：  
-- 提示和提示工程  
-- 文字和圖片應用程式生成  
-- 搜索應用程式  
+- 課程涵蓋從基礎到 RAG。
+- 使用 GenAI 及配套應用與歷史人物互動。
+- 趣味且引人入勝的故事，讓你時光旅行！
 
-造訪 [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) 開始學習！  
+![character](../../translated_images/character.5c0dd8e067ffd693.mo.png)
 
-## 🌱 開始學習  
 
-> **教師們**，我們已經 [提供了一些建議](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/genai-js-course](../../[https:/aka.ms/genai-js-course) 開始學習！
 
-為了提升學習體驗，與同儕一起合作完成專案吧！我們鼓勵在 [討論論壇](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) 中進行討論，我們的版主團隊將隨時回答你的問題。  
 
-為了進一步學習，我們強烈建議探索 [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) 以獲取更多學習資源。  
 
-### 📋 設置你的環境  
+## 🌱 入門指南
 
-這份課程已經準備好開發環境！開始時，你可以選擇在 [Codespace](https://github.com/features/codespaces/)（_基於瀏覽器，無需安裝的環境_）中運行課程，或者在你的電腦上使用如 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 的文字編輯器。  
+> **教師們**，我們提供了 [使用此課程的建議](for-teachers.md)。歡迎您在 [討論區](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) 提出意見！
 
-#### 建立你的儲存庫  
-為了方便保存你的學習進度，建議你建立這份儲存庫的副本。你可以點擊頁面頂部的 **Use this template** 按鈕，這將在你的 GitHub 帳戶中建立一個包含課程副本的新儲存庫。  
+**[學習者](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**，每節課從課前測驗開始，接著閱讀教材，完成各項活動，並透過課後測驗檢視理解程度。
 
-按照以下步驟：  
-1. **Fork 此儲存庫**：點擊頁面右上角的 "Fork" 按鈕。  
-2. **Clone 此儲存庫**：`git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`  
+為提升學習體驗，建議與同儕一同合作專案！歡迎於我們的 [討論區](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) 參與討論，我們的版主團隊會協助回答問題。
 
-#### 在 Codespace 中運行課程  
+為進一步學習，我們強烈推薦探索 [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) 提供的更多教材。
 
-在你建立的儲存庫副本中，點擊 **Code** 按鈕並選擇 **Open with Codespaces**。這將為你創建一個新的 Codespace 以供學習使用。  
+### 📋 環境設置
 
-![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.mo.png)  
+本課程已備妥開發環境！你可以選擇在 [Codespace](https://github.com/features/codespaces/)（瀏覽器即用、無需安裝環境）中執行課程，或在電腦本機使用像 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 的文字編輯器。
 
-#### 在本地電腦上運行課程  
+#### 建立你的儲存庫
+為方便儲存你的作業，建議建立此儲存庫的個人副本。可點擊頁面頂端的 **Use this template** 按鈕，在你的 GitHub 帳號中建立此課程副本。
 
-要在本地電腦上運行課程，你需要一個文字編輯器、一個瀏覽器和一個命令行工具。我們的第一節課 [程式語言與工具介紹](../../1-getting-started-lessons/1-intro-to-programming-languages) 將引導你了解各種工具選項，幫助你選擇最適合你的工具。  
+請依以下步驟操作：
+1. **分支儲存庫**：點擊本頁右上角的「Fork」按鈕。
+2. **克隆儲存庫**：   `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
 
-我們推薦使用 [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。  
+#### 在 Codespace 執行課程
 
-1. 將你的儲存庫克隆到電腦上。你可以點擊 **Code** 按鈕並複製 URL：  
+在你建立的儲存庫副本中，點擊 **Code** 按鈕並選擇 **Open with Codespaces**。這將為你建立一個新的 Codespace 工作區。
 
-    [CodeSpace](./images/createcodespace.png)  
+![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955.mo.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：  
+#### 在本機電腦執行課程
+
+要在電腦本機執行此課程，你需要文字編輯器、瀏覽器與命令列工具。我們的第一堂課，[程式語言與工具入門](../../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. 將你的儲存庫克隆到電腦。點擊 **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：
 
     ```bash 
     git clone <your-repository-url>
     ```
-  
-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) - 幫助你更快撰寫程式碼
+2. 在 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) - 協助你更快撰寫程式碼
 
-## 📂 每堂課包括：
+## 📂 每課包括：
 
-- 可選的手繪筆記
-- 可選的補充影片
-- 課前熱身測驗
+- 選擇性速寫筆記
+- 選擇性補充影片
+- 課前熱身小測驗
 - 書面課程
-- 對於專案型課程，提供逐步指導如何完成專案
-- 知識檢查
+- 對專案基礎的課程，包含建立專案步驟指南
+- 知識檢測
 - 挑戰
-- 補充閱讀
+- 補充閱讀資料
 - 作業
 - [課後測驗](https://ff-quizzes.netlify.app/web/)
 
-> **關於測驗的說明**：所有測驗都包含在 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 遊戲開發             | 學習使用類別與組合的繼承，以及 Pub/Sub 模式，為開發遊戲做準備              |                      [進階遊戲開發簡介](./6-space-game/1-introduction/README.md)                       |          Chris          |
-| 16  |           [太空遊戲](./6-space-game/solution/README.md)           |                           繪製到畫布                            | 學習使用 Canvas API，將元素繪製到螢幕上                                                                       |                                [繪製到畫布](./6-space-game/2-drawing-to-canvas/README.md)                                |          Chris          |
-| 17  |           [太空遊戲](./6-space-game/solution/README.md)           |                   在螢幕上移動元素                    | 探索如何使用笛卡爾座標與 Canvas API 讓元素移動                                            |                           [移動元素](./6-space-game/3-moving-elements-around/README.md)                           |          Chris          |
-| 18  |           [太空遊戲](./6-space-game/solution/README.md)           |                          碰撞檢測                           | 使用按鍵讓元素碰撞並相互反應，並提供冷卻功能以確保遊戲效能    |                              [碰撞檢測](./6-space-game/4-collision-detection/README.md)                              |          Chris          |
-| 19  |           [太空遊戲](./6-space-game/solution/README.md)           |                             計分                              | 根據遊戲的狀態與效能進行數學計算                                                                |                                    [計分](./6-space-game/5-keeping-score/README.md)                                    |          Chris          |
-| 20  |           [太空遊戲](./6-space-game/solution/README.md)           |                     結束與重啟遊戲                     | 學習如何結束與重啟遊戲，包括清理資產與重置變數值                              |                                [結束條件](./6-space-game/6-end-condition/README.md)                                 |          Chris          |
-| 21  |         [銀行應用程式](./7-bank-project/solution/README.md)          |                 網頁應用程式中的 HTML 模板與路由                 | 學習如何使用路由與 HTML 模板搭建多頁網站的架構                             |                            [HTML 模板與路由](./7-bank-project/1-template-route/README.md)                             |          Yohan          |
-| 22  |         [銀行應用程式](./7-bank-project/solution/README.md)          |                  建立登入與註冊表單                   | 學習如何建立表單與處理驗證流程                                                                          |                                           [表單](./7-bank-project/2-forms/README.md)                                           |          Yohan          |
-| 23  |         [銀行應用程式](./7-bank-project/solution/README.md)          |                   獲取與使用資料的方法                   | 學習資料如何在應用程式中流動、獲取、存儲與處理                                                 |                                            [資料](./7-bank-project/3-data/README.md)                                            |          Yohan          |
-| 24  |         [銀行應用程式](./7-bank-project/solution/README.md)          |                      狀態管理概念                      | 學習應用程式如何保留狀態以及如何以程式方式管理它                                                              |                                [狀態管理](./7-bank-project/4-state-management/README.md)                                |          Yohan          |
-| 25 | [瀏覽器/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  |       [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  |          [Typing Game](./4-typing-game/solution/README.md)          |                          建造打字遊戲                           | 了解如何使用鍵盤事件驅動 JavaScript 應用邏輯                                                                                |                                [事件驅動程式設計](./4-typing-game/typing-game/README.md)                                |       Christopher     |
+| 12  | [Green Browser Extension](./5-browser-extension/solution/README.md) |                         瀏覽器運作                             | 了解瀏覽器運作原理、歷史，並建立瀏覽器擴充功能的初步結構                                                                   |                               [瀏覽器介紹](./5-browser-extension/1-about-browsers/README.md)                                |           Jen         |
+| 13  | [Green Browser Extension](./5-browser-extension/solution/README.md) | 建立表單、呼叫 API 與本地儲存變數                              | 使用 JavaScript 為瀏覽器擴充功能實作呼叫 API，並使用本地儲存變數                                                             |                [API、表單與本地儲存](./5-browser-extension/2-forms-browsers-local-storage/README.md)                      |           Jen         |
+| 14  | [Green Browser Extension](./5-browser-extension/solution/README.md) |          瀏覽器背景程序、網頁效能                              | 使用瀏覽器背景程序管理擴充功能圖示；學習網頁效能及優化                                                                      |             [背景任務與效能](./5-browser-extension/3-background-tasks-and-performance/README.md)                         |           Jen         |
+| 15  |           [Space Game](./6-space-game/solution/README.md)           |             進階 JavaScript 遊戲開發                          | 了解繼承(類別與組合)以及發布/訂閱模式，用以準備構建遊戲                                                                      |                      [進階遊戲開發簡介](./6-space-game/1-introduction/README.md)                                         |          Chris        |
+| 16  |           [Space Game](./6-space-game/solution/README.md)           |                           Canvas 繪圖                           | 認識用於繪製螢幕元素的 Canvas API                                                                                            |                                [Canvas 繪圖](./6-space-game/2-drawing-to-canvas/README.md)                                |          Chris        |
+| 17  |           [Space Game](./6-space-game/solution/README.md)           |                   螢幕元素移動                                 | 探索如何使用直角坐標與 Canvas API 使元素產生動作                                                                            |                           [移動螢幕元素](./6-space-game/3-moving-elements-around/README.md)                           |          Chris        |
+| 18  |           [Space Game](./6-space-game/solution/README.md)           |                          碰撞偵測                              | 讓元素碰撞並互動，使用按鍵觸發並提供冷卻功能以確保遊戲效能                                                                  |                              [碰撞偵測](./6-space-game/4-collision-detection/README.md)                              |          Chris        |
+| 19  |           [Space Game](./6-space-game/solution/README.md)           |                             計分                                  | 根據遊戲狀態與表現執行數學運算                                                                                                |                                    [計分](./6-space-game/5-keeping-score/README.md)                                    |          Chris        |
+| 20  |           [Space Game](./6-space-game/solution/README.md)           |                      遊戲結束與重新開始                        | 了解遊戲結束與重新開始的流程，包括清理資源與重設變數                                                                          |                                [結束條件](./6-space-game/6-end-condition/README.md)                                  |          Chris        |
+| 21  |         [Banking App](./7-bank-project/solution/README.md)          |                 HTML 範本與網頁路由                             | 學習透過路由與 HTML 範本建立多頁網站架構                                                                                      |                            [HTML 範本與路由](./7-bank-project/1-template-route/README.md)                              |          Yohan        |
+| 22  |         [Banking App](./7-bank-project/solution/README.md)          |                  建立登入與註冊表單                            | 了解建構表單及驗證流程                                                                                                        |                                           [表單](./7-bank-project/2-forms/README.md)                                |          Yohan        |
+| 23  |         [Banking App](./7-bank-project/solution/README.md)          |                   取得與使用資料的方法                         | 瞭解資料在應用中的流動方式，如何取得、儲存及處置                                                                             |                                            [資料](./7-bank-project/3-data/README.md)                               |          Yohan        |
+| 24  |         [Banking App](./7-bank-project/solution/README.md)          |                      狀態管理概念                             | 學習程式化管理應用保持狀態的方法                                                                                              |                                [狀態管理](./7-bank-project/4-state-management/README.md)                            |          Yohan        |
+| 25 | [Browser/VScode Code](../../8-code-editor) | 使用 VScode | 瞭解如何使用程式碼編輯器 | [使用 VScode 程式碼編輯器](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
+| 26 | [AI Assistants](./9-chat-project/README.md) | 使用 AI | 學習如何建立自己的 AI 助手 | [AI 助手專案](./9-chat-project/README.md) | Chris |
 
 ## 🏫 教學法
 
-我們的課程設計基於兩個關鍵教學原則：
+我們的課程設計遵循兩個主要教學原則：
 * 專案導向學習
 * 頻繁測驗
 
-本課程教授 JavaScript、HTML 和 CSS 的基礎知識，以及當今網頁開發者使用的最新工具與技術。學生將有機會透過建立打字遊戲、虛擬生態瓶、環保瀏覽器擴展、太空侵略者風格遊戲以及商業銀行應用程式來獲得實作經驗。完成課程後，學生將對網頁開發有扎實的理解。
+本計畫教授 JavaScript、HTML 及 CSS 的基礎，以及當代網頁開發者使用的最新工具與技術。學生將有機會實作打字遊戲、虛擬生態瓶、環保瀏覽器擴充功能、太空侵略者風格遊戲以及企業銀行應用。結束系列課程後，學生將擁有紮實的網頁開發知識。
 
-> 🎓 你可以在 Microsoft Learn 上以 [學習路徑](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) 的形式學習本課程的前幾堂課！
+> 🎓 你可以在 Microsoft Learn 上以 [學習路徑](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) 方式學習本課程的前幾堂課！
 
-透過確保內容與專案相符，學習過程對學生來說更具吸引力，並能增強概念的記憶。我們還撰寫了幾個 JavaScript 基礎的入門課程來介紹概念，並搭配 "[JavaScript 初學者系列](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" 的影片教學，其中一些作者也參與了本課程的編寫。
+透過確保內容與專案對應，學習過程更具吸引力且能有效提升概念記憶。我們也撰寫了數個 JavaScript 基礎入門課程搭配 "[JavaScript 初學者系列](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" 影片，其中部分作者參與編寫本課程。
 
-此外，課前的低壓力測驗能讓學生專注於學習主題，而課後的第二次測驗則能進一步鞏固記憶。本課程設計靈活有趣，可以整體學習或部分學習。專案從簡單開始，並在 12 週的課程結束時逐漸變得複雜。
+此外，上課前的低壓測驗設立學習主題意向，課後測驗則協助加強記憶。課程設計富彈性且有趣，可以全部或部分進修。專案由簡入繁，12 週課程結束時達到高複雜度水準。
 
-我們有意避免介紹 JavaScript 框架，以專注於成為網頁開發者所需的基本技能，完成本課程後，下一步可以透過另一系列影片學習 Node.js："[Node.js 初學者系列](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)"。
+我們有意避免引介 JavaScript 框架，專注培養成為網頁開發者所需的基礎技能。完成本課程後，建議可通過另一系列影片學習 Node.js：[Node.js 初學者系列](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)。
 
-> 請參閱我們的 [行為準則](CODE_OF_CONDUCT.md) 和 [貢獻指南](CONTRIBUTING.md)。我們歡迎你的建設性反饋！
+> 請參閱我們的 [行為準則](CODE_OF_CONDUCT.md) 與 [貢獻指南](CONTRIBUTING.md)。我們歡迎您的建設性回饋！
 
 ## 🧭 離線存取
 
-你可以使用 [Docsify](https://docsify.js.org/#/) 離線運行此文件。Fork 此 repo，並在本地機器上 [安裝 Docsify](https://docsify.js.org/#/quickstart)，然後在此 repo 的根目錄中輸入 `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
+[![LangChain4j for Beginners](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners)
+[![LangChain.js for Beginners](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
+
+---
 
 ### Azure / Edge / MCP / Agents
 [![AZD for Beginners](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
-[![Edge AI 初學者課程](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)  
-[![MCP 初學者課程](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)  
-[![AI Agents 初學者課程](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)  
+[![Edge AI for Beginners](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
+[![MCP for Beginners](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
+[![AI Agents for Beginners](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
 
 ---
 
-### 生成式 AI 系列  
-[![生成式 AI 初學者課程](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)  
-[![生成式 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)  
-[![生成式 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)  
-[![生成式 AI (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)  
+### Generative AI Series
+[![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)
+[![Generative AI (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
 
 ---
 
-### 核心學習  
-[![機器學習初學者課程](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)  
-[![數據科學初學者課程](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)  
-[![人工智能初學者課程](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)  
-[![網絡安全初學者課程](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)  
-[![網頁開發初學者課程](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)  
-[![物聯網初學者課程](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)  
-[![XR 開發初學者課程](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)  
+### Core Learning
+[![ML for Beginners](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
+[![Data Science for Beginners](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
+[![AI for Beginners](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
+[![Cybersecurity for Beginners](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
+[![Web Dev for Beginners](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
+[![IoT for Beginners](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
+[![XR Development for Beginners](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
 
 ---
 
-### Copilot 系列  
-[![Copilot AI 配對編程](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)  
-[![Copilot C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)  
-[![Copilot 冒險](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)  
+### Copilot Series
+[![Copilot for AI Paired Programming](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
+[![Copilot for C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
+[![Copilot Adventure](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
+<!-- CO-OP TRANSLATOR OTHER COURSES END -->
 
-## 尋求幫助  
+## 獲得協助
 
-如果您在建立 AI 應用程式時遇到困難或有任何疑問，歡迎加入學習者和有經驗的開發者的討論。這是一個支持性的社群，問題受到歡迎，知識自由分享。  
+如果你遇到困難或對建立 AI 應用程式有任何問題，歡迎加入其他學習者及有經驗嘅開發者嘅討論，傾下 MCP。呢個社群十分支持，歡迎發問，並且自由分享知識。
 
-[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)  
+[![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)  
+[![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) 翻譯。我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。應以原文文件作為權威來源。對於關鍵資訊，建議尋求專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或誤釋不承擔責任。
+**免責聲明**：
+本文件係使用人工智能翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 所翻譯。雖然我哋致力於確保翻譯準確，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件嘅本地語言版本應視為權威來源。對於重要資訊，建議採用專業人類翻譯。我哋不對因使用本翻譯所引致嘅任何誤解或誤讀承擔責任。
 <!-- CO-OP TRANSLATOR DISCLAIMER END -->
\ No newline at end of file
diff --git a/translations/mo/for-teachers.md b/translations/mo/for-teachers.md
index 98dbd738..54ff3bda 100644
--- a/translations/mo/for-teachers.md
+++ b/translations/mo/for-teachers.md
@@ -42,10 +42,10 @@ CO_OP_TRANSLATOR_METADATA:
   - Moodle Cloud 對 Common Cartridge 的支持有限。建議使用上述 Moodle 文件，該文件也可上傳至 Canvas。
   - 導入後，請檢查模組、截止日期和測驗設置，以符合您的學期安排。
 
-![Moodle](../../translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.mo.png)
+![Moodle](../../translated_images/moodle.94eb93d714a50cb2.mo.png)
 > Moodle 課堂中的課程內容
 
-![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.mo.png)
+![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff.mo.png)
 > Canvas 課堂中的課程內容
 
 ### 直接使用倉庫（不使用 Classroom）
diff --git a/translations/tw/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/tw/1-getting-started-lessons/1-intro-to-programming-languages/README.md
index 01dffbba..fa8849f0 100644
--- a/translations/tw/1-getting-started-lessons/1-intro-to-programming-languages/README.md
+++ b/translations/tw/1-getting-started-lessons/1-intro-to-programming-languages/README.md
@@ -1,64 +1,247 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "2581528206a2a01c3a0b9c88e039b7bc",
-  "translation_date": "2025-10-03T08:59:56+00:00",
+  "original_hash": "d45ddcc54eb9232a76d08328b09d792e",
+  "translation_date": "2026-01-06T14:23:14+00:00",
   "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md",
   "language_code": "tw"
 }
 -->
-# 程式語言與工具入門
+# 程式語言與現代開發者工具介紹
+ 
+嗨，未來的開發者！👋 可以跟你說一件每天都讓我熱血沸騰的事情嗎？你將會發現程式設計不只是關於電腦，而是擁有真正超能力，把你最狂野的想法變成現實！
+
+你知道那種使用你最喜歡的應用程式，畫面跟操作都剛剛好的時刻嗎？當你點一下按鈕，發生了某種完全神奇的事情，讓你忍不住想說「哇，他們到底是怎麼做到的？」那就是跟你一樣的人，可能凌晨兩點坐在他們最愛的咖啡店，喝著第三杯濃縮咖啡，寫下那段創造魔法的程式碼。而且，這裡要讓你大吃一驚的是：課程結束時，你不只會理解他們怎麼做到的，還會迫不及待想自己試試看！
+
+我完全理解現在如果覺得程式設計有點可怕。剛開始學時，我真的以為必須是數學天才，或者從五歲就開始寫程式。但真正改變我想法的是：程式設計就像學習用新語言聊天。你先學「你好」和「謝謝」，接著學會點咖啡，然後突然就能討論哲學了！不過這次，對象是電腦，老實說，它們是你見過最有耐心的聊天夥伴—從不批評你的錯誤，還總是樂於再試一次！
+
+今天，我們要探討一些令人驚嘆的工具，讓現代網頁開發不僅可能且讓人上癮。我說的正是Netflix、Spotify以及你最愛的獨立應用工作室每天使用的編輯器、瀏覽器和工作流程。這裡最酷的部分是：大多數這些專業級、業界標準的工具完全免費！
+
+![Intro Programming](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff.tw.png)
+> 筆記圖由 [Tomomi Imura](https://twitter.com/girlie_mac) 製作
+
+```mermaid
+journey
+    title 你今天的程式設計旅程
+    section 發現
+      什麼是程式設計: 5: You
+      程式語言: 4: You
+      工具概覽: 5: You
+    section 探索
+      程式碼編輯器: 4: You
+      瀏覽器與開發工具: 5: You
+      命令列: 3: You
+    section 練習
+      語言偵探: 4: You
+      工具探索: 5: You
+      社群連結: 5: You
+```
+## 讓我們看看你已經知道什麼！
+
+在進入精彩的內容前，我很好奇—你對這個程式設計世界已經知道什麼呢？而且聽我說，如果你看到這些問題覺得「我完全不懂」，這不只沒問題，還非常完美！這代表你就在正確的地方。把這個測驗當作運動前的暖身而已—我們只是在熱身大腦肌肉！
+
+[參加課前測驗](https://forms.office.com/r/dru4TE0U9n?origin=lprLink)
+
+
+## 我們即將一起展開的冒險
+
+好啦，我真的超興奮要跟你一起探索今天的內容！說真的，我真希望能看到你的表情，當某些概念突然明白時，那種感覺。以下是我們一起踏上的精彩旅程：
+
+- **甚麼是程式設計（以及為什麼它超酷！）**— 我們會發現程式碼其實就是看不見的魔法，驅動你周圍的一切，從某個鬧鐘突然知道是週一早晨，到推薦你最完美的Netflix節目演算法
+- **程式語言及其令人驚豔的個性**— 想像你參加一場派對，每個人都有截然不同的超能力和解決問題的方法。這就是程式語言世界的樣子，你會愛上認識它們！
+- **促成數位魔法的基本建構塊**— 把這些當作終極創意樂高組合。當你理解這些積木怎麼拼合，就會發現你真的能打造出任何你想像得到的東西
+- **專業工具讓你感覺像拿到魔法師的魔杖**— 我不是在誇張，這些工具真的會讓你感覺擁有超能力，而最棒的是，它們就是專業人士每天使用的！
+
+> 💡 **重點是**：別想著今天要全部記住！現在我只想讓你感受到這個領域的無限可能。細節會隨著我們一起練習自然吸收—這才是真正的學習！
+
+> 你也可以在 [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon) 上學習這堂課！
+
+## 那麼，什麼是程式設計？
 
-本課程涵蓋程式語言的基礎知識。這裡討論的主題適用於大多數現代程式語言。在「工具介紹」部分，您將學習一些對開發者有幫助的實用軟體。
+好，讓我們來解決這個百萬美元問題：到底什麼是程式設計？
 
-![程式語言入門](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.tw.png)
-> Sketchnote 作者：[Tomomi Imura](https://twitter.com/girlie_mac)
+我來說一個徹底改變我想法的故事。上週，我試著教媽媽如何使用我們的新智慧電視遙控器。結果我發現自己一直說：「按紅色按鈕，不是大紅色，是左邊小紅色…不，不，是你的另一個左邊…好，現在按住兩秒，不是一秒，也不是三秒…」聽過這種情況嗎？😅
 
-## 課前測驗
-[課前測驗](https://forms.office.com/r/dru4TE0U9n?origin=lprLink)
+這就是程式設計！它是給出超級詳盡、逐步指令的藝術，目標是讓一個非常強大卻需要每個步驟都表達清楚的對象理解。可不同的是，你不是跟媽媽講（媽媽還能問「哪個紅色按鈕？！」），而是跟電腦講（它完全照你說的做，哪怕你說得不完全是你想表達的意思）。
 
-## 簡介
+當我第一次了解這件事時讓我驚訝的是：電腦其實在本質上相當簡單。它們真的只懂兩個東西—1和0，基本上就是「是」和「否」或「開」和「關」。就這樣！但神奇就在這裡—我們不用像電影《駭客任務》那樣，一直講1和0。這時候，**程式語言**跳出來救場。它們就像全世界最棒的翻譯員，能把你人類思考過程的語言完美轉換成電腦懂的語言。
 
-在本課程中，我們將討論：
+更讓我每天早上起床還雞皮疙瘩的是：你生活中所有的數位東西，都是從跟你一樣的人開始的，那些人可能穿著睡衣、手握咖啡，坐在電腦前敲程式碼。那個讓你看起來完美無瑕的Instagram濾鏡？有人寫的。讓你找到新歌的推薦演算法？也是有人寫的。幫助你跟朋友分帳的應用程式？沒錯，就是有人想著「太麻煩了，我肯定能改變它」，然後就真的做到了！
 
-- 什麼是程式設計？
-- 程式語言的類型
-- 程式的基本元素
-- 專業開發者的實用軟體與工具
+當你學會程式設計，你不只是學到一項新技能—你成為一群不可思議的問題解決者社群一部份，他們每天都在想：「如果我能打造一個讓別人日子更好一點的東西該多好？」說真的，有比這更酷的事嗎？
 
-> 您可以在 [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon) 上學習本課程！
+✅ **趣味知識獵人**：有空的時候，試著查查世界上第一位電腦程式設計師是誰？給你個提示：可能不是你期待的那個人！這個人的故事非常吸引人，也說明程式設計一直是關於創意解決問題和跳脫框架的思考。
 
-## 什麼是程式設計？
+### 🧠 **檢查時間：你感覺如何？**
 
-程式設計（也稱為編碼）是為設備（如電腦或移動設備）編寫指令的過程。我們使用程式語言來編寫這些指令，設備會解讀這些指令。這些指令集可能有不同的名稱，例如 *程式*、*電腦程式*、*應用程式（app）* 和 *執行檔* 等。
+**花點時間反思：**
+- 「對電腦下指令」這個想法，你現在懂了嗎？
+- 你能想到哪些日常任務可以用程式自動化嗎？
+- 有哪些問題讓你對整個程式設計有更多好奇？
+
+> **記住**：現在如果有些概念還模糊，是完全正常的。學程式就像學語言—大腦需要時間建構神經連結，你做得非常棒！
+
+## 程式語言就像不同的魔法風格
+
+好，這聽起來有點怪，但請跟我一起想—程式語言很像不同種類的音樂。想想看：你有爵士，柔和且即興；搖滾，強而有力且直接；古典，優雅且結構完整；還有嘻哈，創意且表達力強。每種風格都有它的氛圍和熱情粉絲社群，並且適合不同心情與場合。
+
+程式語言也是如此！你不會用同一種語言去寫一款有趣的手機遊戲，又用它來處理大量氣候資料，就像你不會在瑜珈課放死亡金屬音樂一樣（嗯，大多數瑜珈課啦😄）。
+
+但每次想到這點，我都覺得超神奇：這些語言就像世界上最有耐心且聰明的翻譯官坐在你旁邊。你可以用自然的人類思維表達想法，它們負責處理複雜的轉換，把它變成電腦聽得懂的1和0。就像有個朋友，兩種語言都流利—「人類創意」與「電腦邏輯」—而且永遠不會累、永遠不需要咖啡休息，也不會因為你問同個問題兩次而生氣！
+
+### 受歡迎的程式語言及用途
+
+```mermaid
+mindmap
+  root((程式語言))
+    網頁開發
+      JavaScript
+        前端魔法
+        互動式網站
+      TypeScript
+        JavaScript + 類型
+        企業應用
+    資料與人工智慧
+      Python
+        資料科學
+        機器學習
+        自動化
+      R
+        統計學
+        研究
+    行動應用
+      Java
+        安卓
+        企業
+      Swift
+        iOS
+        蘋果生態系
+      Kotlin
+        現代安卓
+        跨平台
+    系統與效能
+      C++
+        遊戲
+        高效能關鍵
+      Rust
+        記憶體安全
+        系統程式設計
+      Go
+        雲端服務
+        可擴充後端
+```
+| 語言 | 最適合 | 為什麼受歡迎 |
+|----------|----------|------------------|
+| **JavaScript** | 網頁開發、使用者介面 | 在瀏覽器中執行，推動互動式網站 |
+| **Python** | 資料科學、自動化、人工智慧 | 易讀易學，強大函式庫支援 |
+| **Java** | 企業應用、Android 應用程式 | 跨平台，適合大型系統 |
+| **C#** | Windows 應用、遊戲開發 | 微軟生態系強大支援 |
+| **Go** | 雲端服務、後端系統 | 快速簡潔，專為現代運算設計 |
+
+### 高階語言 vs 低階語言
+
+說真的，這一點剛開始學時讓我一度崩潰，所以我想分享一個讓我終於理解的比喻—希望你也覺得有用！
+
+想像你去了一個不會說當地語言的國家，急著找最近的廁所（我們都經歷過吧😅）：
+
+- **低階程式設計**就像你學會當地方言，能用文化引喻、當地俚語和只有本地人懂的暗號跟街角賣水果的老太太聊天。超厲害且效率超高...如果你真精通的話！但要是你只是想找廁所，可能會覺得超困難。
+
+- **高階程式設計**就像你有個超棒的當地朋友懂你。你只要用簡單英文說「我需要找廁所」，然後他幫你用當地語言翻譯，還給你清楚的指引，簡單又明瞭。
+
+用程式語言來說：
+- **低階語言**（像是組合語言或 C 語言）可以讓你跟電腦硬體非常細節化溝通，但你必須像機器一樣思考，那是個巨大的心智轉換！
+- **高階語言**（像 JavaScript、Python 或 C#）讓你用人類思維講話，背後處理所有機器語言轉換。而且它們的社群非常歡迎新手，大家都記得自己剛開始時的感受，且真心想幫忙！
+
+猜猜我會建議你從哪邊開始？😉 高階語言就像有輔助輪的腳踏車，雖然你有時會想砍掉它，但其實它讓整個過程更愉快！
+
+```mermaid
+flowchart TB
+    A["👤 人類思考：<br/>'我想計算費氏數列'"] --> B{選擇語言層級}
+    
+    B -->|高層| C["🌟 JavaScript/Python<br/>易讀易寫"]
+    B -->|低層| D["⚙️ 組合語言/C<br/>直接硬體控制"]
+    
+    C --> E["📝 編寫：fibonacci(10)"]
+    D --> F["📝 編寫：mov r0,#00<br/>sub r0,r0,#01"]
+    
+    E --> G["🤖 電腦理解：<br/>翻譯器處理複雜性"]
+    F --> G
+    
+    G --> H["💻 相同結果：<br/>0, 1, 1, 2, 3, 5, 8, 13..."]
+    
+    style C fill:#e1f5fe
+    style D fill:#fff3e0
+    style H fill:#e8f5e8
+```
+### 讓我向你展示為什麼高階語言更友善
 
-*程式* 可以是任何用程式碼編寫的東西；網站、遊戲和手機應用程式都是程式。雖然可以在不編寫程式碼的情況下創建程式，但底層邏輯仍然需要設備解讀，而這些邏輯通常是用程式碼編寫的。一個正在 *執行* 或 *運行* 程式碼的程式正在執行指令。您正在使用的設備正在運行一個程式，將這篇課程顯示在您的螢幕上。
+好，我要給你看一個完美展示我為什麼愛上高階語言的範例，但首先—請答應我，不要看到第一個程式碼例子就慌張！它故意看起來很嚇人，這就是我要說的重點！
 
-✅ 做一些研究：誰被認為是世界上第一位電腦程式設計師？
+我們將看兩種完全不同風格的程式碼，完成同一個任務：產生費波那契數列—一個美麗的數學模式，每個數字是前兩個數字相加：0, 1, 1, 2, 3, 5, 8, 13...（趣味小知識：你大自然會到處看到這個模式—向日葵籽的螺旋、松果的形狀，甚至星系的形成！）
 
-## 程式語言
+準備好看差異了嗎？走吧！
 
-程式語言使開發者能夠為設備編寫指令。設備只能理解二進制（1 和 0），而對於 *大多數* 開發者來說，這並不是一種高效的溝通方式。程式語言是人類與電腦之間溝通的工具。
+**高階語言（JavaScript）—人類友善版：**
 
-程式語言有不同的格式，可能用於不同的目的。例如，JavaScript 主要用於網頁應用程式，而 Bash 主要用於操作系統。
+```javascript
+// 第一步：基本費波那契設置
+const fibonacciCount = 10;
+let current = 0;
+let next = 1;
 
-*低階語言* 通常比 *高階語言* 需要更少的步驟來讓設備解讀指令。然而，高階語言因其可讀性和支援性而受到歡迎。JavaScript 被認為是一種高階語言。
+console.log('Fibonacci sequence:');
+```
 
-以下程式碼展示了使用 JavaScript 的高階語言與使用 ARM 組合語言的低階語言之間的差異。
+**這段程式碼做了什麼：**
+- **宣告**一個常數，指定要產生多少個費波那契數
+- **初始化**兩個變數，追蹤數列中目前和下一個數字
+- **設定**起始值（0 和 1），定義費波那契模式
+- **顯示**標題訊息，說明輸出內容
 
 ```javascript
-let number = 10
-let n1 = 0, n2 = 1, nextTerm;
-
-for (let i = 1; i <= number; i++) {
-    console.log(n1);
-    nextTerm = n1 + n2;
-    n1 = n2;
-    n2 = nextTerm;
+// 步驟 2：使用迴圈產生序列
+for (let i = 0; i < fibonacciCount; i++) {
+  console.log(`Position ${i + 1}: ${current}`);
+  
+  // 計算序列中的下一個數字
+  const sum = current + next;
+  current = next;
+  next = sum;
 }
 ```
 
-```c
+**解析這裡發生的事：**
+- **用 `for` 迴圈**依序走訪數列各位置
+- **顯示**每個數字及其位置，使用模板字串格式化
+- **計算**下一個費波那契數字，將目前與下一個相加
+- **更新**追蹤變數，移動到下一次迭代
+
+```javascript
+// 第三步：現代函式式方法
+const generateFibonacci = (count) => {
+  const sequence = [0, 1];
+  
+  for (let i = 2; i < count; i++) {
+    sequence[i] = sequence[i - 1] + sequence[i - 2];
+  }
+  
+  return sequence;
+};
+
+// 使用範例
+const fibSequence = generateFibonacci(10);
+console.log(fibSequence);
+```
+
+**這上面程式碼，我們：**
+- **使用**現代箭頭函式語法，創建可重複使用的函式
+- **建立**陣列來存完整數列，而不是一個個顯示
+- **用**陣列索引計算每個新數字
+- **回傳**完整數列，方便程式其他部分使用
+
+**低階語言（ARM 組合語言）—電腦友善版：**
+
+```assembly
  area ascen,code,readonly
  entry
  code32
@@ -83,137 +266,601 @@ back add r0,r1
  end
 ```
 
-相信或不相信，*它們都在做同樣的事情*：列印前 10 個斐波那契數列。
+注意 JavaScript 版幾乎像英文指令，而組合語言版是直接控制電腦處理器的神秘指令。兩者完成同樣任務，但高階語言對人而言更容易理解、撰寫與維護。
 
-✅ 斐波那契數列 [定義](https://en.wikipedia.org/wiki/Fibonacci_number) 為一組數字，其中每個數字是前兩個數字的總和，從 0 和 1 開始。前 10 個斐波那契數列的數字是 0, 1, 1, 2, 3, 5, 8, 13, 21 和 34。
+**你會注意到的關鍵差異：**
+- **可讀性**：JavaScript 使用像 `fibonacciCount` 這樣描述性的名稱，而組合語言用像 `r0`、`r1` 的代號
+- **註解**：高階語言鼓勵撰寫說明性註解，使程式碼具備自我說明能力
+- **結構**：JavaScript 的邏輯流程符合人類逐步思考問題的方式
+- **維護**：針對不同需求更新 JavaScript 版本簡單明瞭
 
-## 程式的基本元素
+✅ **關於費波那契數列**：這個絕美的數字模式（每個數字等於之前兩個數字的和：0、1、1、2、3、5、8...）在自然界中隨處可見！你會發現在向日葵的螺旋花序、松果的排列、鸚鵡螺的殼形曲線，甚至是樹枝的生長方式中都有它。數學與程式碼怎麼能幫助我們理解並重現大自然用於創造美麗的模式，實在令人讚嘆！
 
-程式中的單一指令稱為 *語句*，通常會有一個字符或行間距來標記指令的結束或 *終止*。程式如何終止因語言而異。
 
-程式中的語句可能依賴於使用者或其他地方提供的數據來執行指令。數據可以改變程式的行為，因此程式語言提供了一種方法來暫時存儲數據，以便稍後使用。這些被稱為 *變數*。變數是指令，指示設備將數據存儲在其記憶體中。程式中的變數類似於代數中的變數，它們有唯一的名稱，其值可能隨時間改變。
+## 造就魔法的基礎構件
 
-有些語句可能不會被設備執行。這通常是由開發者設計的，或者是意外錯誤導致的。這種對應用程式的控制使其更具穩定性和可維護性。通常，這些控制變化發生在滿足某些條件時。現代程式設計中常用的一種語句是 `if..else` 語句。
+好了，現在你已經看過程式語言的實際運作，讓我們來拆解組成每一個程式的基本單元。把它們想像成你最愛食譜中必不可少的材料 — 一旦理解每個材料的作用，你就能閱讀與撰寫幾乎任何語言的程式碼！
 
-✅ 您將在後續課程中學習更多關於這類語句的知識。
+這有點像是在學習程式設計的文法。還記得你小時候學名詞、動詞以及如何組句子嗎？程式設計有自己的語法，老實說，它比英語文法更合邏輯也更寬容！😄
 
-## 工具介紹
+### 陳述句：逐步指令
 
-[![工具介紹](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "工具介紹")
+先從**陳述句**開始 — 它們就像你與電腦之間交流的句子。每條陳述句告訴電腦做一件特定的事，就像給方向：「這裡左轉」、「紅燈停」，「停到那個車位」。
 
-> 🎥 點擊上方圖片觀看工具介紹影片
+我喜歡陳述句之處在於它通常非常易讀。看這個：
 
-在本節中，您將學習一些在開始專業開發旅程時可能非常有用的軟體。
+```javascript
+// 執行單一動作的基本敘述
+const userName = "Alex";                    
+console.log("Hello, world!");              
+const sum = 5 + 3;                         
+```
 
-**開發環境** 是開發者在編寫軟體時經常使用的一組獨特工具和功能。其中一些工具已根據開發者的特定需求進行了自訂，並可能隨著開發者的工作重點、個人項目或使用不同程式語言而改變。開發環境如同使用它的開發者一樣獨特。
+**這段程式碼做了什麼：**
+- **宣告**一個以儲存使用者姓名的常數變數
+- **顯示**一條問候訊息到主控台輸出
+- **計算**並儲存一個數學運算結果
 
-### 編輯器
+```javascript
+// 與網頁互動的語句
+document.title = "My Awesome Website";      
+document.body.style.backgroundColor = "lightblue";
+```
 
-編輯器是軟體開發中最重要的工具之一。編輯器是您編寫程式碼的地方，有時也是您運行程式碼的地方。
+**逐步來看，發生了什麼：**
+- **修改**網頁標題（瀏覽器分頁上顯示）
+- **變更**整個網頁主體的背景顏色
 
-開發者依賴編輯器的其他原因包括：
+### 變數：程式的記憶系統
 
-- *除錯* 幫助逐行檢查程式碼，找出錯誤和問題。一些編輯器具有除錯功能；它們可以根據特定程式語言進行自訂和添加。
-- *語法高亮* 為程式碼添加顏色和文本格式，使其更易於閱讀。大多數編輯器允許自訂語法高亮。
-- *擴展與整合* 是專為開發者設計的工具，這些工具並未內建於基礎編輯器中。例如，許多開發者會為程式碼撰寫文檔以解釋其工作原理。他們可能會安裝拼寫檢查擴展來幫助檢查文檔中的拼寫錯誤。大多數擴展是針對特定編輯器使用的，大多數編輯器都提供搜索可用擴展的方法。
-- *自訂化* 使開發者能夠創建符合其需求的獨特開發環境。大多數編輯器都非常可自訂，並且可能允許開發者創建自訂擴展。
+好啦，**變數**老實說是我最喜歡教的概念之一，因為它們很像你每天都用到的東西！
 
-#### 常用編輯器及網頁開發擴展
+想想你手機的聯絡人列表。你不會背起每個電話號碼，而是儲存「媽媽」、「摯友」，或「凌晨兩點還送餐的披薩店」，讓手機幫你記住真正的號碼。變數也是如此！它們像有標籤的容器，你的程式可以塞進資訊，並用有意義的名稱隨時取出。
 
-- [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)
-  - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
-  - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare)
-  - [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
-- [Atom](https://atom.io/)
-  - [spell-check](https://atom.io/packages/spell-check)
-  - [teletype](https://atom.io/packages/teletype)
-  - [atom-beautify](https://atom.io/packages/atom-beautify)
-  
-- [Sublimetext](https://www.sublimetext.com/)
-  - [emmet](https://emmet.io/)
-  - [SublimeLinter](http://www.sublimelinter.com/en/stable/)
+更酷的是：變數可以隨程式運行改變（這就是「變數」名稱的由來 — 你懂的！）。就像你發現更好吃的披薩店會更新聯絡資訊一樣，變數也能隨程式學習新資訊或情況改變而更新！
+
+讓我示範它有多簡單美妙：
+
+```javascript
+// 第一步：建立基本變數
+const siteName = "Weather Dashboard";        
+let currentWeather = "sunny";               
+let temperature = 75;                       
+let isRaining = false;                      
+```
+
+**理解這些概念：**
+- **儲存**不變的值於 `const` 變數（例如網站名稱）
+- **使用** `let` 來存放會變動的值
+- **指派**不同資料型別：字串（文字）、數字、布林值（true/false）
+- **選擇**具描述性的名稱解釋變數內容
 
-### 瀏覽器
+```javascript
+// 第2步：使用物件來群組相關資料
+const weatherData = {                       
+  location: "San Francisco",
+  humidity: 65,
+  windSpeed: 12
+};
+```
 
-另一個重要工具是瀏覽器。網頁開發者依賴瀏覽器來查看其程式碼在網頁上的運行效果。瀏覽器還用於顯示編輯器中編寫的網頁的視覺元素，例如 HTML。
+**以上我們：**
+- **建立**一個物件來整理相關的天氣資訊
+- **把多個資料彙整**到一個變數名稱下
+- **用**鍵值組清楚標記每一筆資料
 
-許多瀏覽器都配備了 *開發者工具*（DevTools），其中包含一組有用的功能和信息，幫助開發者收集和捕獲有關其應用程式的重要信息。例如：如果網頁出現錯誤，有時知道錯誤發生的時間會很有幫助。瀏覽器中的開發者工具可以配置為捕獲這些信息。
+```javascript
+// 步驟 3：使用及更新變數
+console.log(`${siteName}: Today is ${currentWeather} and ${temperature}°F`);
+console.log(`Wind speed: ${weatherData.windSpeed} mph`);
 
-#### 常用瀏覽器及開發者工具
+// 更新可變動的變數
+currentWeather = "cloudy";                  
+temperature = 68;                          
+```
 
-- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)
-- [Chrome](https://developers.google.com/web/tools/chrome-devtools/)
-- [Firefox](https://developer.mozilla.org/docs/Tools)
+**來看每個部分：**
+- **使用**模板字面量和 `${}` 語法顯示資訊
+- **用**點記法存取物件屬性（`weatherData.windSpeed`）
+- **更新**以 `let` 宣告的變數反映變化狀況
+- **結合**多個變數產生有意義的訊息
 
-### 命令列工具
+```javascript
+// 第4步：現代解構賦值使代碼更清晰
+const { location, humidity } = weatherData; 
+console.log(`${location} humidity: ${humidity}%`);
+```
 
-一些開發者更喜歡使用較少圖形化的界面來完成日常任務，並依賴命令列來實現這一點。編寫程式碼需要大量的打字工作，一些開發者更喜歡不打斷鍵盤上的工作流程。他們會使用鍵盤快捷鍵在桌面窗口之間切換、處理不同文件以及使用工具。大多數任務可以用滑鼠完成，但使用命令列的一個好處是可以在不需要滑鼠和鍵盤切換的情況下完成許多工作。命令列的另一個好處是它們是可配置的，您可以保存自訂配置，稍後更改並導入到其他開發機器。由於開發環境對每個開發者來說都是獨特的，有些人會避免使用命令列，有些人完全依賴它，有些人則喜歡兩者混合使用。
+**你需要知道：**
+- **透過解構賦值**擷取物件中特定屬性
+- **自動建立**與物件鍵同名的新變數
+- **簡化**程式碼，避免重复的點記法
 
-### 常用命令列選項
+### 控制流程：教你的程式思考
 
-命令列選項會根據您使用的操作系統而有所不同。
+好了，這裡是程式設計最令人驚嘆的部分！**控制流程**基本上是在教你的程式如何做聰明的判斷，就像你每天不假思索地做的事情一樣。
 
-*💻 = 操作系統預裝。*
+想像一下：今天早上你可能過程是「如果下雨，我會帶傘；如果冷，我會穿外套；如果要遲到了，我會跳過早餐路上買咖啡」。你的大腦每天自然就按照這種 if-then 邏輯運作數十次！
 
-#### Windows
+這讓程式感覺聰明、有生命力，不再只是照著無聊、可預測的劇本行事。它們可以觀察情況，評估正在發生的事，並做出合適反應。就像給程式一顆能因應情況做選擇的大腦！
 
-- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7/?WT.mc_id=academic-77807-sagibbon) 💻
-- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands/?WT.mc_id=academic-77807-sagibbon)（也稱為 CMD）💻
-- [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)
-- [mintty](https://mintty.github.io/)
-  
-#### MacOS
+想看看這有多美妙？讓我示範：
+
+```javascript
+// 第一步：基本條件邏輯
+const userAge = 17;
+
+if (userAge >= 18) {
+  console.log("You can vote!");
+} else {
+  const yearsToWait = 18 - userAge;
+  console.log(`You'll be able to vote in ${yearsToWait} year(s).`);
+}
+```
+
+**程式碼做了什麼：**
+- **檢查**使用者的年齡是否符合投票資格
+- **依條件結果**執行不同程式區塊
+- **計算並顯示**未滿18歲還需多久才可投票
+- **提供**針對每種情況的具體有用回饋
+
+```javascript
+// 步驟2：多個條件與邏輯運算子
+const userAge = 17;
+const hasPermission = true;
+
+if (userAge >= 18 && hasPermission) {
+  console.log("Access granted: You can enter the venue.");
+} else if (userAge >= 16) {
+  console.log("You need parent permission to enter.");
+} else {
+  console.log("Sorry, you must be at least 16 years old.");
+}
+```
+
+**拆解過程：**
+- **用 `&&`（且）運算符**組合多重條件
+- **用 `else if`**建立多層條件判斷架構
+- **用最後 `else`**涵蓋所有可能情況
+- **提供**每種不同狀況清楚明確的反饋
+
+```javascript
+// 第三步：使用三元運算子的簡潔條件判斷
+const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet";
+console.log(`Status: ${votingStatus}`);
+```
+
+**記住：**
+- **用三元運算子 (`? :`)**快速處理簡單兩選一條件
+- **先寫判斷式**，接著是 `?`，接著是條件為真時的結果，再來是 `:`，最後是條件為假的結果
+- **適用於根據條件賦值**
+
+```javascript
+// 第4步：處理多個特定情況
+const dayOfWeek = "Tuesday";
+
+switch (dayOfWeek) {
+  case "Monday":
+  case "Tuesday":
+  case "Wednesday":
+  case "Thursday":
+  case "Friday":
+    console.log("It's a weekday - time to work!");
+    break;
+  case "Saturday":
+  case "Sunday":
+    console.log("It's the weekend - time to relax!");
+    break;
+  default:
+    console.log("Invalid day of the week");
+}
+```
+
+**這段程式碼完成：**
+- **對變數值比對多個特定案例**
+- **將相似案例歸類（平日與週末）**
+- **找到符合時執行對應程式碼塊**
+- **用 `default` 處理不預期的值**
+- **用 `break` 防止繼續執行下一案例**
+
+> 💡 **現實類比**：想像控制流程就像世界上最有耐心的 GPS 指示路線。它可能說「如果主街塞車，就走高速公路。如果高速公路施工封路，試試風景線路。」程式正是用這種條件邏輯聰明回應不同情況，且永遠給使用者最佳體驗。
+
+### 🎯 **概念檢測：基礎構件掌握**
+
+**來看看你對基礎的掌握：**
+- 你能用自己的話解釋變數和陳述句的差別嗎？
+- 想出一個現實生活中會用到 if-then 判斷的例子（像投票例子）
+- 有哪些程式邏輯讓你感到驚訝？
+
+**快速提振信心：**
+```mermaid
+flowchart LR
+    A["📝 陳述式<br/>(指令)"] --> B["📦 變數<br/>(儲存)"] --> C["🔀 控制流程<br/>(判斷)"] --> D["🎉 可執行程式!"]
+    
+    style A fill:#ffeb3b
+    style B fill:#4caf50
+    style C fill:#2196f3
+    style D fill:#ff4081
+```
+✅ **接下來是什麼**：我們將會非常盡興地深入這些概念，繼續這段奇妙旅程！此刻先專注感受那種對未來無限可能的興奮吧。隨著練習，具體技巧自然會牢牢記住 — 我保證你會比預期還要享受這過程！
+
+## 工具裝備介紹
+
+老實說，到了這裡我已經興奮到快控制不住了！🚀 我們將談談那些令人讚嘆的工具，讓你感覺像是剛拿到一架數位太空船的鑰匙。
+
+你知道廚師的刀具平衡得恰到好處，好像手臂的延伸嗎？或是音樂家有把只要一彈就唱的吉他？開發者們也有自己版本的魔法工具，而接下來要說的絕對令你瞠目結舌 — 這些大部分全都是免費的！
+
+我幾乎坐立難安想跟你分享，因為這些工具徹底改變了我們建立軟體的方式。像是 AI 助手可以幫忙寫程式碼（不是開玩笑！）、雲端環境讓你能在任何有 Wi-Fi 的地方開發完整應用程式，還有那種進階到像透視眼一樣的除錯工具。
+
+更令人起雞皮疙瘩的是：這些不是「初學者工具」用膩就丟的喔。這些正是 Google、Netflix、你愛的獨立 App 工作室的開發者現在就正用的專業級工具。你用它們會感覺自己超級專業！
+
+```mermaid
+graph TD
+    A["💡 你的想法"] --> B["⌨️ 程式編輯器<br/>(VS Code)"] 
+    B --> C["🌐 瀏覽器開發工具<br/>(測試與除錯)"]
+    C --> D["⚡ 命令列<br/>(自動化與工具)"]
+    D --> E["📚 文件<br/>(學習與參考)"]
+    E --> F["🚀 優秀的網頁應用程式!"]
+    
+    B -.-> G["🤖 AI 助手<br/>(GitHub Copilot)"]
+    C -.-> H["📱 裝置測試<br/>(響應式設計)"]
+    D -.-> I["📦 套件管理器<br/>(npm, yarn)"]
+    E -.-> J["👥 社群<br/>(Stack Overflow)"]
+    
+    style A fill:#fff59d
+    style F fill:#c8e6c9
+    style G fill:#e1f5fe
+    style H fill:#f3e5f5
+    style I fill:#ffccbc
+    style J fill:#e8eaf6
+```
+### 程式碼編輯器與 IDE：你新的數位最佳夥伴
+
+談談程式碼編輯器 — 它們真的會成為你最愛待著的地方！把它們想成你個人的程式創作聖地，你會花大量時間在這裡打造你的數位作品。
+
+現代編輯器的魔法在於：它們不只是華麗的純文字編輯器。就像有位最聰明、最支持你的程式教練全天候陪你坐在旁邊。它們在你察覺錯誤前就幫你抓出來，給你建議讓你看起來像個天才，幫你理解每段程式碼在做什麼，有些甚至能預測你下一秒想打什麼，主動幫你補全！
+
+我記得第一次發現自動完成時的感覺 — 就像活在未來。你開始打字，編輯器說：「嘿，你是不是想用這個功能，它正好做你需要的事？」彷彿有個讀心術高手當你程式夥伴！
+
+**這些編輯器厲害在哪裡？**
+
+現代程式碼編輯器提供一系列設計來提升工作效率的功能：
+
+| 功能 | 作用 | 為何有用 |
+|---------|--------------|--------------|
+| **語法高亮** | 為程式碼不同部分上色 | 讓程式碼更易讀、易發現錯誤 |
+| **自動完成** | 打字時建議程式碼 | 加快寫程式速度、減少錯字 |
+| **除錯工具** | 幫你找出並修正錯誤 | 省下大量問題排查時間 |
+| **擴充套件** | 新增專門功能 | 客製化編輯器符合各種技術需求 |
+| **AI 助手** | 建議程式碼與解釋 | 加速學習與提升生產力 |
+
+> 🎥 **影片資源**：想看這些工具實戰嗎？請查看這支[工具裝備介紹影片](https://youtube.com/watch?v=69WJeXGBdxg)獲得完整概覽。
 
-- [Terminal](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻
-- [iTerm](https://iterm2.com/)
-- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos?view=powershell-7/?WT.mc_id=academic-77807-sagibbon)
+#### 推薦網頁開發用編輯器
 
-#### Linux
+**[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)**（免費）
+- 網頁開發者最愛
+- 卓越的擴充生態系
+- 內建終端機與 Git 整合
+- **必裝擴充套件**：
+  - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) — AI 驅動的程式碼建議
+  - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) — 即時協作
+  - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) — 自動格式化程式碼
+  - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) — 幫你抓拼字錯誤
 
-- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻
-- [KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)
-- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux?view=powershell-7/?WT.mc_id=academic-77807-sagibbon)
+**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)**（付費，學生免費）
+- 進階除錯與測試工具
+- 智慧化程式碼補全
+- 內建版本控制
 
-#### 常用命令列工具
+**雲端 IDE**（不同收費方案）
+- [GitHub Codespaces](https://github.com/features/codespaces) — 瀏覽器中的完整 VS Code
+- [Replit](https://replit.com/) — 很適合學習與分享程式碼
+- [StackBlitz](https://stackblitz.com/) — 立即啟用全端網頁開發
 
-- [Git](https://git-scm.com/) (💻 大多數操作系統預裝)
-- [NPM](https://www.npmjs.com/)
-- [Yarn](https://classic.yarnpkg.com/en/docs/cli/)
+> 💡 **初學者建議**：從 Visual Studio Code 開始 — 它免費、產業廣泛使用，加上強大的社群與豐富教學與擴充套件。
 
-### 文檔
 
-當開發者想學習新事物時，他們通常會查閱文檔以了解如何使用它。開發者經常依賴文檔來指導他們正確使用工具和語言，並深入了解其工作原理。
+### 網頁瀏覽器：你的秘密開發實驗室
 
-#### 網頁開發常用文檔
+好了，準備好被徹底震撼吧！你知道你平常用瀏覽器滑社群媒體、看影片？其實它們一直藏著個令人難以置信的祕密開發實驗室，等著你發掘！
 
-- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)，由 [Firefox](https://www.mozilla.org/firefox/) 瀏覽器的出版商 Mozilla 提供
-- [Frontend Masters](https://frontendmasters.com/learn/)
-- [Web.dev](https://web.dev)，由 [Chrome](https://www.google.com/chrome/) 的出版商 Google 提供
-- [Microsoft 的開發者文檔](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)，適用於 [Microsoft Edge](https://www.microsoft.com/edge)
-- [W3 Schools](https://www.w3schools.com/where_to_start.asp)
+每次你在網頁上右鍵點選「檢查元素」，你就打開了一個隱藏的開發者工具世界，誠實說它比我過去花大錢買的部分軟體還強大。就像發現你平常用的廚房後面藏著一座專業主廚實驗室！
+第一次有人給我看瀏覽器開發者工具 (DevTools) 時，我花了大概三個小時瘋狂點擊，然後驚呼：「等等，這個功能它也有？！」你真的可以即時編輯任何網站，精準看到載入速度，測試網站在不同裝置上的呈現，甚至像專家一樣除錯 JavaScript。這真的超神奇！
 
-✅ 做一些研究：現在您已了解網頁開發者的環境，試著比較和對比網頁設計師的環境。
+**這就是瀏覽器成為你秘密武器的原因：**
+
+當你建立一個網站或網頁應用程式時，你需要知道它在真實世界中的樣子和行為。瀏覽器不僅負責呈現你的作品，還會提供性能、無障礙和潛在問題的詳細反饋。
+
+#### 瀏覽器開發者工具 (DevTools)
+
+現代瀏覽器包含完整的開發套件：
+
+| 工具類別 | 功能說明 | 範例用途 |
+|----------|----------|----------|
+| **元素檢查器** | 即時檢視和編輯 HTML/CSS | 調整樣式立刻看到效果 |
+| **主控台** | 查看錯誤訊息和測試 JavaScript | 除錯問題並嘗試程式碼 |
+| **網路監視器** | 追蹤資源載入情形 | 優化效能和載入時間 |
+| **無障礙檢查器** | 測試包容性設計 | 確保網站適合所有用戶 |
+| **裝置模擬器** | 預覽不同螢幕尺寸 | 測試響應式設計不需多台裝置 |
+
+#### 推薦開發用瀏覽器
+
+- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** － 業界標準的 DevTools，附有豐富文件
+- **[Firefox](https://developer.mozilla.org/docs/Tools)** － 優秀的 CSS Grid 及無障礙工具
+- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** － 建構於 Chromium，搭配微軟開發資源
+
+> ⚠️ **重要測試提示**：務必在多個瀏覽器中測試你的網站！Chrome 完美運作的東西，可能在 Safari 或 Firefox 看起來不同。專業開發者會跨主要瀏覽器測試，確保用戶體驗一致。
+
+
+### 指令列工具：帶你開啟開發者超能力之門
+
+好了，讓我們來一個完全坦白的小時刻講講指令列，因為我想讓你聽聽來自真正懂它的人的說法。剛看到指令列那個黑黑的、閃爍著文字的螢幕時，我腦中只有一句話：「絕對不行！這看起來像是 80 年代駭客電影裡的東西，我肯定不夠聰明用！」😅
+
+但其實我當時最想有人告訴我，也是我現在想跟你說的：指令列一點也不可怕，它就像是直接跟你的電腦對話。想像你點餐時，用有圖片選單的漂亮 App 很輕鬆，但如果你直接走進你最愛的餐廳，廚師一聽你說「驚喜幫我做個超讚的菜」，馬上就給你完美料理，那指令列就像是廚師，聽你的話立刻做出結果。
+
+指令列是讓開發者感覺自己像超級巫師的地方。你打出幾個看似神奇的字（好啦，他們只是命令，但感覺很神奇！）然後按下 Enter，砰－－你建立了整個專案架構、安裝全球強大的工具，甚至把應用部署上線讓千萬人看。嘗到這種力量後，真的會上癮！
+
+**為什麼你會喜歡指令列：**
+
+雖然圖形介面很適合多種任務，指令列在自動化、精準度和速度上更勝一籌。很多開發工具主要透過指令列操作，學會有效使用可以大幅提升生產力。
+
+```bash
+# 第一步：建立並切換到專案目錄
+mkdir my-awesome-website
+cd my-awesome-website
+```
+
+**這段程式碼的功能：**
+- **建立** 一個叫做 "my-awesome-website" 的新資料夾當作專案
+- **進入** 新建資料夾開始工作
+
+```bash
+# 第2步：使用 package.json 初始化專案
+npm init -y
+
+# 安裝現代開發工具
+npm install --save-dev vite prettier eslint
+npm install --save-dev @eslint/js
+```
+
+**逐步說明如下：**
+- **初始化** 一個帶預設設定的 Node.js 專案，使用 `npm init -y`
+- **安裝** Vite，作為快速開發與生產環境建置的現代化工具
+- **加入** Prettier 進行自動格式化，ESLint 確保程式碼品質
+- **使用** `--save-dev` 標明這些為開發階段的依賴
+
+```bash
+# 第3步：建立專案結構與檔案
+mkdir src assets
+echo '<!DOCTYPE html><html><head><title>My Site</title></head><body><h1>Hello World</h1></body></html>' > index.html
+
+# 啟動開發伺服器
+npx vite
+```
+
+**上面我們做了：**
+- **整理** 專案架構，分出原始碼與資源資料夾
+- **產生** 基本 HTML 檔案，符合文件結構標準
+- **啟動** Vite 開發伺服器，支援即時重新載入和熱模組替換
+
+#### 網頁開發必備指令列工具
+
+| 工具 | 用途 | 為什麼需要它 |
+|------|------|---------------|
+| **[Git](https://git-scm.com/)** | 版本控制 | 追蹤變更、團隊協作、備份工作 |
+| **[Node.js & npm](https://nodejs.org/)** | JavaScript 執行環境及套件管理 | 執行瀏覽器外的 JavaScript，安裝現代引擎 |
+| **[Vite](https://vitejs.dev/)** | 建置工具與開發伺服器 | 極速開發搭配熱模組替換 |
+| **[ESLint](https://eslint.org/)** | 程式碼品質檢查 | 自動偵測並修正 JS 問題 |
+| **[Prettier](https://prettier.io/)** | 程式碼格式化 | 保持程式碼風格一致且易讀 |
+
+#### 平台專屬選項
+
+**Windows：**
+- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** － 現代功能齊全的終端機
+- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 － 強大的腳本環境
+- **[Command Prompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 － 傳統 Windows 指令列
+
+**macOS：**
+- **[Terminal](https://support.apple.com/guide/terminal/)** 💻 － 內建終端機應用程式
+- **[iTerm2](https://iterm2.com/)** － 進階功能的終端機模擬器
+
+**Linux：**
+- **[Bash](https://www.gnu.org/software/bash/)** 💻 － 標準 Linux 殼層
+- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** － 進階終端機模擬器
+
+> 💻 = 作業系統預裝
+
+> 🎯 **學習路徑**：從基礎指令如 `cd`（切換目錄）、`ls` 或 `dir`（列出檔案）、`mkdir`（建立資料夾）開始操作。練習現代工作流程命令如 `npm install`、`git status`、`code .`（在 VS Code 開啟目前資料夾）。熟悉後，自然會掌握更進階與自動化技巧。
+
+
+### 文件說明：你全天候的學習導師
+
+好，讓我告訴你一個小祕密，讓你作為初學者時感覺好很多：就算是經驗最老練的開發者，也花大量時間在閱讀文件。這並不是他們不懂，而是一種智慧的象徵！
+
+把文件想像成擁有世界上最耐心、最博學老師的全天候資源。凌晨兩點卡關？文件像溫暖的虛擬擁抱，給你正確答案。想學大家都在用的新功能？文件裡有一步步範例。想搞懂為什麼要用，怎麼運作？沒錯，文件會用讓你終於明白的方式解釋！
+
+有件事徹底改變我看法的：網頁開發更新太快，沒有人（真的沒有）能把一切記在腦子裡。我看到有 15 年資深的開發大佬也會查基本語法，你知道嗎？這不尷尬，這是聰明！不是記憶力完美，而是知道怎麼快速找到可靠答案，並懂得應用。
+
+**真正關鍵的地方在這裡：**
+
+專業開發者花大量時間看文檔，不是因為不懂，而是因為網頁開發環境變化如此快速，必須不斷學習才能跟上。好的文件幫你理解不只是 *怎麼用*，還有 *為什麼* 跟 *何時* 使用。
+
+#### 重要文件資源
+
+**[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)**
+- 網頁技術文件的黃金標準
+- HTML、CSS、JavaScript 全面指南
+- 包含瀏覽器相容性資訊
+- 實例範例與互動演示
+
+**[Web.dev](https://web.dev)** (由 Google 提供)
+- 現代網頁開發最佳實踐
+- 效能優化指引
+- 無障礙及包容性設計原則
+- 真實案例分享
+
+**[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)**
+- Edge 瀏覽器開發資源
+- 漸進式網頁應用程式指南
+- 跨平台開發洞察
+
+**[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)**
+- 系統化課程規劃
+- 業界專家影片課程
+- 實作編碼練習
+
+> 📚 **學習策略**：別嘗試死記文件內容，學會有效快速瀏覽才是王道。收藏常用參考資源，練習用搜尋找到特定資訊。
+
+
+### 🔧 **工具掌握測試：哪個最吸引你？**
+
+**請花一點時間想想：**
+- 你第一個最想嘗試的工具是什麼？（無所謂正錯！）
+- 指令列還是覺得害怕，或是開始想試試看了？
+- 你能想像用瀏覽器 DevTools 來窺探你最愛網站的「幕後秘辛」嗎？
+
+```mermaid
+pie title "開發者使用工具的時間分配"
+    "程式碼編輯器" : 40
+    "瀏覽器測試" : 25
+    "命令列" : 15
+    "閱讀文件" : 15
+    "除錯" : 5
+```
+> **有趣洞見**：大多數開發者約 40% 時間待在編輯器，但請注意花多少時間在測試、學習和解決問題。編程不只是寫程式碼－而是在打造體驗！
+
+✅ **思考題**：想想看建立網站的工具 (開發) 跟設計網站外觀的工具 (設計) 有什麼不同？就像是蓋房子的建築師和實際施工的承包商。兩者都很重要，但工具箱不同！這樣的思維幫你看清網站如何誕生的全貌。
+
+## GitHub Copilot Agent 挑戰 🚀
+
+使用 Agent 模式完成以下挑戰：
+
+**描述：** 探索現代程式碼編輯器或 IDE 的功能，並示範它如何提升你作為網頁開發者的工作流程。
+
+**提示：** 選擇一款程式碼編輯器或 IDE（像 Visual Studio Code、WebStorm，或雲端 IDE）。列出三個功能或擴充套件說明它們如何幫助你更有效率地撰寫、除錯或維護程式碼。對每一項提供簡短說明其對工作流程的好處。
 
 ---
 
-## 🚀 挑戰
+## 🚀 挑戰任務
+
+**破案者，準備好了嗎？**
 
-比較一些程式語言。JavaScript 與 Java 有哪些獨特特性？COBOL 與 Go 又如何？
+你已經打下堅實基礎，現在有個冒險任務要讓你見識程式世界有多麼多元迷人。別擔心，這還不是寫程式碼的時候！把自己當成一名編程語言偵探，開始你的首宗刺激案件！
 
-## 課後測驗
-[課後測驗](https://ff-quizzes.netlify.app/web/)
+**你的任務，如果你願意接受：**
+1. **成為語言探索者**：從截然不同的三個編程語言挑選出來──可能一個用於網站，另一個開發手機 App，還有一個用於科學資料分析。找相同簡單任務的各語言範例。保證你會驚訝它們看起來多不同，卻完成同一件事！
 
-## 回顧與自學
+2. **挖掘起源故事**：每種語言的特別之處是什麼？有趣的是，每種語言都是有人想：「該死，我一定可以用更好的方法解決這個問題！」才誕生的。你能找出它們當初解決的問題嗎？這些故事超好玩！
 
-研究一下程式設計師可用的不同語言。嘗試用一種語言寫一行程式碼，然後用另外兩種語言重寫它。您學到了什麼？
+3. **認識社群**：看看各語言社群如何包容熱情。某些有百萬開發者互相分享、支援；有些較小但非常團結密切。你會愛上他們不同的個性！
 
-## 作業
+4. **聽從直覺**：哪個語言現在對你來說最友善？別強迫「完美選擇」──相信你的直覺！沒有錯答案，日後還可以再多探索。
 
-[閱讀文檔](assignment.md)
+**額外偵探任務**：試找出這些語言用在哪些知名網站或 App。保證會讓你震驚 Instagram、Netflix 或你玩不膩的手機遊戲背後的技術！
 
-> 注意：在選擇作業工具時，請勿選擇上述已列出的編輯器、瀏覽器或命令列工具。
+> 💡 **記住**：今天你不用成為任何語言專家。只是先認識街區，決定想在哪裡落腳。慢慢來，玩得開心，讓好奇心帶路！
+
+## 讓我們一起慶祝你的發現！
+
+哇靠，今天你吸收了好多令人驚奇的資訊！我非常期待看到這趟精彩旅程在你心中留下多少痕跡。記得──這不是要你考試或要完美表現。更像是在慶祝你已經了解這個即將踏入的奇妙世界！
+
+[前往課後測驗](https://ff-quizzes.netlify.app/web/)
+## Review & Self Study
+
+**花點時間探索並享受其中的樂趣！**
+
+你今天已經學了很多，這真的是值得驕傲的事！現在來到有趣的部分——探索激發你好奇心的主題。記得，這不是作業，而是一場冒險！
+
+**深入探究讓你感興趣的內容：**
+
+**親自動手玩程式語言：**
+- 造訪吸引你目光的 2-3 種程式語言官方網站。每種語言都有它獨特的個性與故事！
+- 嘗試一些線上編碼平台，如 [CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/) 或 [Replit](https://replit.com/)。別害怕嘗試——你不會破壞任何東西！
+- 閱讀你喜愛語言的誕生故事。真的，有些起源故事非常迷人，能幫助你理解語言設計背後的原因。
+
+**熟悉你的新工具：**
+- 如果還沒下載過 Visual Studio Code，快去下載吧——它是免費的，你一定會喜歡！
+- 花幾分鐘瀏覽 Extensions 市集。它就像你的程式碼編輯器的應用程式商店！
+- 打開瀏覽器的開發者工具，點點看各種功能。別擔心一次全部懂，只要熟悉環境即可。
+
+**參與社群：**
+- 追蹤一些開發者社群，如 [Dev.to](https://dev.to/)、[Stack Overflow](https://stackoverflow.com/) 或 [GitHub](https://github.com/)。程式社群對新手非常友善！
+- 在 YouTube 上觀看一些入門程式教學影片。許多優質創作者都記得初學時的心情。
+- 考慮參加本地聚會或線上社群。相信我，開發者都很樂於幫助新手！
+
+> 🎯 **記住，我希望你牢記的是**：你不需要一夜之間成為程式高手！現在，你只是開始認識這個即將成為你生活一部分的精彩新世界。慢慢來，享受這趟旅程，並記得——你所敬佩的每位開發者，都曾經坐在你現在的位置，滿心期待也可能帶著些許不安。那是完全正常的，這也代表你正在走在正確的道路上！
+
+
+## Assignment
+
+[Reading the Docs](assignment.md)
+
+> 💡 **關於作業的小提醒**：我真的很想看到你去探索我們還沒提過的工具！跳過我們已經談過的編輯器、瀏覽器和命令列工具——外面有個令人驚嘆的開發工具世界正等待你發掘。找尋活躍維護且擁有充滿活力、熱心社群的工具（這類工具通常擁有最好的教學，當你遇到困難需要幫助時，社群也會熱情支持你）。
+
+
+---
+
+## 🚀 Your Programming Journey Timeline
+
+### ⚡ **你接下來 5 分鐘可以做的事**
+- [ ] 書籤標記 2-3 個讓你感興趣的程式語言網站
+- [ ] 如果還沒下載 Visual Studio Code，立即下載
+- [ ] 開啟瀏覽器的開發者工具 (F12) 並在任何網站隨意點擊
+- [ ] 加入一個程式社群（Dev.to、Reddit r/webdev，或 Stack Overflow）
+
+### ⏰ **你這小時能完成的目標**
+- [ ] 完成課後測驗並反思你的答案
+- [ ] 使用 GitHub Copilot 擴充套件設定 VS Code
+- [ ] 線上嘗試 2 種不同程式語言的「Hello World」範例
+- [ ] 觀看一支 YouTube 上的「開發者的一天」影片
+- [ ] 開始執行你程式語言偵探任務（挑戰內容）
+
+### 📅 **你這週的冒險計畫**
+- [ ] 完成作業並探索 3 種新的開發工具
+- [ ] 在社群媒體追蹤 5 位開發者或程式帳號
+- [ ] 嘗試在 CodePen 或 Replit 中做一個簡單作品（至少是「Hello, [你的名字]！」）
+- [ ] 閱讀一篇開發者分享他們程式旅程的部落格文章
+- [ ] 參加線上聚會或觀看程式演講
+- [ ] 開始用線上教程學習你選定的程式語言
+
+### 🗓️ **你這月的轉變**
+- [ ] 建立你的第一個小專案（即使只是簡單的網頁也算！）
+- [ ] 貢獻於開源專案（從文件修正開始）
+- [ ] 指導剛開始學程式的人
+- [ ] 建立你的開發者個人作品集網站
+- [ ] 與本地開發者社群或學習小組聯繫
+- [ ] 開始規劃下一個學習里程碑
+
+### 🎯 **最後的反思檢查點**
+
+**在繼續前，花點時間慶祝：**
+- 今天程式中讓你最興奮的是什麼？
+- 你最想先探索哪個工具或概念？
+- 對於剛開始的程式旅程，你有什麼感覺？
+- 現在你最想問開發者的一個問題是什麼？
+
+```mermaid
+journey
+    title 你的自信建立旅程
+    section 今天
+      好奇: 3: You
+      不知所措: 4: You
+      興奮: 5: You
+    section 這週
+      探索: 4: You
+      學習: 5: You
+      連結: 4: You
+    section 下個月
+      建立: 5: You
+      自信: 5: You
+      幫助他人: 5: You
+```
+> 🌟 **記住**：每位專家都曾是初學者。每位資深開發者也曾像你現在一樣興奮、可能有點不知所措，卻充滿好奇想知道未來的可能性。你正在與了不起的人同行，這趟旅程將會非常精彩。歡迎來到美妙的程式世界！🎉
 
 ---
 
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
 **免責聲明**：  
-本文件已使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。儘管我們致力於提供準確的翻譯，請注意自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於關鍵資訊，建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或錯誤解釋不承擔責任。
\ No newline at end of file
+本文件使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們致力於準確性，但請注意，機器翻譯可能包含錯誤或不準確之處。文件原文應視為權威資料。對於重要資訊，建議採用專業人工翻譯。我們不對因使用本翻譯所產生的任何誤解或誤用承擔責任。
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->
\ No newline at end of file
diff --git a/translations/tw/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md b/translations/tw/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md
index 1a5859aa..dc8691a9 100644
--- a/translations/tw/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md
+++ b/translations/tw/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md
@@ -1,31 +1,78 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "9e2f84e351a6fcb44bfc4066d98525f0",
-  "translation_date": "2025-10-03T09:00:39+00:00",
+  "original_hash": "17b8ec8e85d99e27dcb3f73842e583be",
+  "translation_date": "2026-01-06T14:26:33+00:00",
   "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/assignment.md",
   "language_code": "tw"
 }
 -->
-## 使用說明
+# Assignment: 探索現代網頁開發工具
 
-網頁開發者可能需要許多工具，這些工具列在 [MDN 客戶端工具文件](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview) 中。請選擇 **三個工具**，這些工具必須是 **本課程未涵蓋的**（排除 [列出特定工具或參考課程內容]），並解釋 **為什麼** 網頁開發者會使用每個工具，並找到符合每個類別的工具。對於每個工具，請分享其官方文件的連結（非 MDN 上的範例）。
+## Instructions
 
-**格式：**  
-- 工具名稱  
-- 為什麼網頁開發者會使用它（2-3 句）  
-- 文件連結
+網頁開發生態系統包含數百種專門的工具，幫助開發人員高效地構建、測試和維護應用程式。你的任務是研究並了解能夠補充本課程所涵蓋工具的其他工具。
 
-**字數要求：**  
-- 每個解釋需 2-3 句。
+**你的任務：** 選擇 **三種未在本課程中涵蓋的工具**（避免選擇已列出的程式碼編輯器、瀏覽器或命令列工具）。聚焦於解決現代網頁開發工作流程中特定問題的工具。
 
-## 評分標準
+**對每個工具，請提供：**
 
-卓越 | 合格 | 需改進
---- | --- | --- |
-解釋了為什麼網頁開發者會使用工具 | 解釋了如何使用，但未說明為什麼開發者會使用工具 | 未提及開發者如何或為什麼使用工具 |
+1. **工具名稱及類別**（例如「Figma - 設計工具」或「Jest - 測試框架」）
+2. **目的與優勢** — 用2到3句話說明網頁開發者為何使用此工具，以及它解決了哪些問題
+3. **官方文件連結** — 提供該工具的官方文件或網站（不要只提供教學網站）
+4. **實務情境** — 舉例說明此工具如何融入專業開發工作流程
+
+## Suggested Tool Categories
+
+考慮從以下類別探索工具：
+
+| 類別 | 例子 | 功能說明 |
+|----------|----------|--------------|
+| **建構工具** | Vite、Webpack、Parcel、esbuild | 打包並優化程式碼以供生產環境，搭配快速開發伺服器 |
+| **測試框架** | Vitest、Jest、Cypress、Playwright | 確保程式碼正確，且於佈署前捕捉錯誤 |
+| **設計工具** | Figma、Adobe XD、Penpot | 共同製作模型、原型及設計系統 |
+| **佈署平台** | Netlify、Vercel、Cloudflare Pages | 托管並分發網站，支援自動化CI/CD |
+| **版本控制** | GitHub、GitLab、Bitbucket | 管理程式碼變更、協作與專案工作流程 |
+| **CSS框架** | Tailwind CSS、Bootstrap、Bulma | 使用預先設計的元件庫加速樣式設計 |
+| **套件管理器** | npm、pnpm、Yarn | 安裝和管理程式庫與相依性 |
+| **無障礙工具** | axe-core、Lighthouse、Pa11y | 測試包容性設計與WCAG符合度 |
+| **API開發** | Postman、Insomnia、Thunder Client | 於開發期間測試與紀錄API |
+
+## Format Requirements
+
+**針對每個工具：**  
+```
+### [Tool Name] - [Category]
+
+**Purpose:** [2-3 sentences explaining why developers use this tool]
+
+**Documentation:** [Official website/documentation link]
+
+**Workflow Integration:** [1 sentence about how it fits into development process]
+```
+  
+## Quality Guidelines
+
+- **選擇當前工具**：挑選2025年仍積極維護並廣泛使用的工具
+- **聚焦價值**：解釋具體優勢，而非僅介紹工具功能
+- **專業情境**：考慮團隊使用的工具，而非僅限個人業餘愛好者
+- **多元選擇**：從不同類別挑選工具以展現生態系多樣性
+- **現代相關性**：優先符合當前網頁開發趨勢與最佳實踐的工具
+
+## Rubric
+
+| 優異 | 良好 | 待改進 |
+|-----------|------|-------------------|
+| **清楚說明開發者使用每個工具的原因及解決問題** | **說明工具功能，但缺少價值的脈絡** | **只列出工具，未說明用途或優勢** |
+| **提供所有工具的官方文件連結** | **大部分為官方連結，偶有1-2個教學網站** | **主要依賴教學網站而非官方文件** |
+| **挑選當前專業使用且類別多元的工具** | **選擇良好，但類別多樣度有限** | **挑選過時工具或僅限單一類別** |
+| **展現工具如何融入工作流程的理解** | **對專業情境有一定了解** | **僅專注於工具功能，無工作流程背景** |
+
+> 💡 **研究小技巧**：搜尋職缺中提及的網頁開發工具、查看熱門開發者調查，或探究成功開源專案在GitHub使用的相依套件！
 
 ---
 
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
 **免責聲明**：  
-本文件已使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。儘管我們致力於提供準確的翻譯，請注意自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於關鍵資訊，建議使用專業人工翻譯。我們對因使用此翻譯而產生的任何誤解或錯誤解釋不承擔責任。
\ No newline at end of file
+本文件係使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們致力於確保準確性，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件之母語版本應視為權威來源。對於重要資訊，建議使用專業人工翻譯。對於因使用本翻譯而產生之任何誤解或誤釋，我們概不負責。
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->
\ No newline at end of file
diff --git a/translations/tw/1-getting-started-lessons/2-github-basics/README.md b/translations/tw/1-getting-started-lessons/2-github-basics/README.md
index 85ef0519..7d98beaa 100644
--- a/translations/tw/1-getting-started-lessons/2-github-basics/README.md
+++ b/translations/tw/1-getting-started-lessons/2-github-basics/README.md
@@ -1,344 +1,776 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "ea65b75e488aa33a3cc5cb1c6c3f047a",
-  "translation_date": "2025-10-03T13:43:39+00:00",
+  "original_hash": "5c383cc2cc23bb164b06417d1c107a44",
+  "translation_date": "2026-01-06T14:26:49+00:00",
   "source_file": "1-getting-started-lessons/2-github-basics/README.md",
   "language_code": "tw"
 }
 -->
-# GitHub 簡介
-
-本課程介紹 GitHub 的基礎知識，這是一個用於托管和管理程式碼變更的平台。
-
-![GitHub 簡介](../../../../translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.tw.png)
-> [Tomomi Imura](https://twitter.com/girlie_mac) 的手繪筆記
-
+# Introduction to GitHub
+
+嘿，未來的開發者！👋 準備好加入全球數百萬程式碼撰寫者的行列了嗎？我真心很興奮地要向你介紹 GitHub－把它想像成程式設計師的社群媒體平台，不同的是我們不是分享午餐照片，而是分享程式碼，一起打造超讚的東西！
+
+讓我覺得超震撼的是：你手機上的每個應用程式、你造訪的每個網站，以及你將學會使用的大部分工具，都是由像 GitHub 這樣的平台上團隊合作的開發者所建立的。你喜歡的音樂APP？有人像你一樣參與過它的開發。那款讓你愛不釋手的遊戲？沒錯，很可能就是用 GitHub 協作打造的。而現在，你也會學會如何成為這個超棒社群的一員！
+
+我知道一開始可能會覺得很複雜－天啊，我還記得第一次看 GitHub 頁面時心想：「這到底是什麼？」但重點是：每一位開發者起點都是你現在的這個位置。課程結束後，你會擁有自己的 GitHub 倉庫（想像成雲端裡的個人專案展示區），並且知道怎麼儲存你的工作、分享給別人，甚至參與數百萬用戶都在使用的專案。
+
+我們將一起逐步踏上這趟旅程。不要急，不要緊張－只有你我，還有一些即將成為你新好朋友的超酷工具！
+
+![Intro to GitHub](../../../../translated_images/webdev101-github.8846d7971abef6f9.tw.png)
+> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
+
+```mermaid
+journey
+    title 你今天的 GitHub 冒險
+    section 設置
+      Install Git: 4: You
+      Create Account: 5: You
+      First Repository: 5: You
+    section 精通 Git
+      Local Changes: 4: You
+      Commits & Pushes: 5: You
+      Branching: 4: You
+    section 協作
+      Fork Projects: 4: You
+      Pull Requests: 5: You
+      Open Source: 5: You
+```
 ## 課前測驗
 [課前測驗](https://ff-quizzes.netlify.app)
 
-## 簡介
+## 介紹
+
+在深入精彩內容之前，先來準備好你的電腦，讓 GitHub 魔法發揮作用吧！想像你在創作一件藝術品之前先安排好畫具－擁有正確工具會讓一切順暢又有趣很多。
+
+我會帶你一步步設定，我保證它沒你想像的那麼可怕。如果一開始沒馬上理解也完全沒關係！我記得剛設置開發環境時，感覺自己像在看古老的象形文字一樣。每位開發者都曾經和你一樣，心想自己是不是搞錯了。小劇透：只要你願意學，你已經走在正確的路上了！🌟
 
-在本課程中，我們將學習：
+這堂課我們會學：
 
 - 如何追蹤你在電腦上的工作
-- 與他人合作開發專案
+- 如何與他人合作專案
 - 如何為開源軟體做出貢獻
 
-### 先決條件
+### 預備條件
 
-在開始之前，請檢查是否已安裝 Git。在終端機中輸入：  
+讓我們先準備好你的電腦，讓 GitHub 魔法開始發動！別擔心－這個設定只要做一次，就能陪你整個程式碼旅程。
+
+好，從基礎開始！首先，我們要看看 Git 是否已經安裝在你的電腦上。Git 就像一位超厲害的助理，會記住你對程式碼的每個變更－比你每兩秒瘋狂按 Ctrl+S 好太多了（大家都有過這種經驗！）
+
+打開終端機（Terminal）輸入下面這個神奇指令，來看看 Git 是否存在：
 `git --version`
 
-如果尚未安裝 Git，請[下載 Git](https://git-scm.com/downloads)。接著，在終端機中設定你的本地 Git 配置：
-* `git config --global user.name "your-name"`
-* `git config --global user.email "your-email"`
+如果沒有安裝 Git，不用擔心！立刻前往 [download Git](https://git-scm.com/downloads) 下載安裝。安裝好後，我們要讓 Git 知道你是誰：
+
+> 💡 **首次設定**：這些指令會告訴 Git 你的身分。這些資訊會附加在你每次提交的紀錄上，所以請用你樂意公開分享的姓名和電子郵件。
+
+```bash
+git config --global user.name "your-name"
+git config --global user.email "your-email"
+```
+
+要確認 Git 是否已配置，可以輸入：
+```bash
+git config --list
+```
 
-要檢查 Git 是否已配置，可以輸入：
-`git config --list`
+你還需要有一個 GitHub 帳號、程式碼編輯器（像是 Visual Studio Code），並且打開你的終端機（或命令提示字元）。
 
-你還需要一個 GitHub 帳戶、一個程式碼編輯器（例如 Visual Studio Code），並打開你的終端機（或命令提示符）。
+前往 [github.com](https://github.com/) 註冊帳號，或是登入並完善你的個人資料。
 
-前往 [github.com](https://github.com/) 註冊帳戶（如果尚未註冊），或登入並填寫你的個人資料。
+💡 **現代小技巧**：考慮設定 [SSH 金鑰](https://docs.github.com/en/authentication/connecting-to-github-with-ssh) 或使用 [GitHub CLI](https://cli.github.com/) 來方便無密碼登入。
 
-✅ GitHub 不是唯一的程式碼儲存庫平台；還有其他選擇，但 GitHub 是最知名的。
+✅ GitHub 並非唯一的程式碼儲存庫平台，但它是最廣為人知的。
 
 ### 準備工作
 
-你需要在本地電腦（筆記型電腦或 PC）上準備一個包含程式碼專案的資料夾，以及 GitHub 上的一個公共儲存庫，作為如何為他人專案做出貢獻的示例。
+你需要在本機（筆電或桌機）有一個專案資料夾，還要有一個 GitHub 上的公開倉庫，當作示範用來學習如何貢獻他人的專案。
 
----
+### 保護你的程式碼安全
+
+談談安全性－別擔心，不會嚇到你！把這些安全習慣想像成鎖車門或家門－簡單的習慣，保護你的心血結晶。
+
+我們會從一開始就示範使用安全、現代的 GitHub 使用方式，助你養成良好習慣，未來程式人生都用得上。
+
+使用 GitHub 時，請務必遵守安全最佳實踐：
+
+| 安全領域 | 最佳做法 | 為什麼重要 |
+|----------|-----------|------------|
+| **身份驗證** | 使用 SSH 金鑰或個人存取權杖 | 密碼安全性較差，且逐漸被淘汰 |
+| **雙重驗證** | 啟用 GitHub 帳號雙重驗證(2FA) | 增加帳號額外保護層 |
+| **倉庫安全** | 千萬不要提交敏感資訊 | API 金鑰及密碼絕不應出現在公開倉庫 |
+| **相依更新管理** | 啟用 Dependabot 自動更新相依套件 | 保持套件安全且最新 |
 
-## 程式碼管理
+> ⚠️ **重要安全提醒**：切勿將 API 金鑰、密碼或其他敏感資訊推送到任何倉庫。請使用環境變數和 `.gitignore` 檔案保護敏感資料。
 
-假設你在本地有一個包含程式碼專案的資料夾，並希望使用 Git（版本控制系統）來追蹤你的進度。有些人將使用 Git 比喻為寫給未來自己的情書。閱讀幾天、幾週或幾個月後的提交訊息，你可以回憶起為什麼做出某個決定，或者「回滾」某個更改——前提是你寫了好的「提交訊息」。
+**現代身份驗證設定：**
 
-### 任務：建立儲存庫並提交程式碼  
+```bash
+# 產生 SSH 金鑰（現代 ed25519 演算法）
+ssh-keygen -t ed25519 -C "your_email@example.com"
 
-> 查看影片
+# 設定 Git 使用 SSH
+git remote set-url origin git@github.com:username/repository.git
+```
+
+> 💡 **專家秘訣**：SSH 金鑰可以免除重複輸入密碼，更加安全。
+
+---
+
+## 像專家一樣管理你的程式碼
+
+好啦，接下來才是真正令人興奮的部分！🎉 我們即將學會怎麼像專家一樣追蹤和管理你的程式碼。說實話，這是我最喜歡教的事，因為它真的能徹底改變遊戲規則。
+
+想像你在寫一個精彩故事，你想記錄每個草稿、每次巧妙修改和所有「哇，這點子真棒！」的時刻。Git 就幫你做到這件事！它像是能穿越時空的筆記本，記得一切－每次按鍵、每個改動、每次「糟糕，這壞掉了」的時刻，讓你馬上回到從前修正錯誤。
+
+老實說－一開始會覺得難懂。當年我也想「為什麼不直接用一般方式存檔呢？」但相信我：當你理解 Git（肯定會的！）時，你會有那種頓悟：「以前怎麼能沒有它寫程式？」就像發現你其實能飛，而不是一輩子都走路一樣！
+
+假設你本機有一個專案資料夾，想用 git（版本控制系統）開始追蹤你的進度。有些人形容用 git 就像寫信給未來的自己。幾天、幾週甚至幾個月後讀回你的提交訊息，就能回想起你為什麼做決定，或者「回溯」之前的改動－當然這全賴你寫的「提交訊息」好不好。
+
+```mermaid
+flowchart TD
+    A[📁 你的專案檔案] --> B{這是 Git 倉庫嗎？}
+    B -->|否| C[git init]
+    B -->|是| D[進行變更]
+    C --> D
+    D --> E[git add .]
+    E --> F["git commit -m '訊息'"]
+    F --> G[git push]
+    G --> H[🌟 GitHub 上的程式碼！]
+    
+    H --> I{想要協作嗎？}
+    I -->|是| J[分叉並克隆]
+    I -->|否| D
+    J --> K[建立分支]
+    K --> L[進行變更]
+    L --> M[拉取請求]
+    M --> N[🎉 貢獻中！]
+    
+    style A fill:#fff59d
+    style H fill:#c8e6c9
+    style N fill:#ff4081,color:#fff
+```
+### 任務：建立你的第一個倉庫！
+
+> 🎯 **你的任務（我超級期待你成功！）**：我們一起創建你的第一個 GitHub 倉庫！完成後，你會擁有網路上的一個小角落來存放你的程式碼，而且你會做出你的第一個「commit」（專業講法，即用聰明的方式儲存你的工作）。
+>
+> 這真的是個特別時刻－你即將正式加入全球開發者社群！我還記得自己第一次建立倉庫時，心情超激動，心想「哇，我真的在做這件事！」
+
+讓我們一起一步步完成這趟探索旅程。慢慢來，每個步驟都會讓你越來越懂。記住，每個你尊敬的程式碼巨星都曾經如你現在這般，準備寫下第一個倉庫。是不是很酷？
+
+> 觀看影片
 > 
-> [![Git 和 GitHub 基礎影片](https://img.youtube.com/vi/9R31OUPpxU4/0.jpg)](https://www.youtube.com/watch?v=9R31OUPpxU4)
+> [![Git and GitHub basics video](https://img.youtube.com/vi/9R31OUPpxU4/0.jpg)](https://www.youtube.com/watch?v=9R31OUPpxU4)
+
+**一起來做：**
 
-1. **在 GitHub 上建立儲存庫**。在 GitHub.com 的儲存庫標籤中，或從右上方的導航列找到 **new repo** 按鈕。
+1. **在 GitHub 建立你的倉庫**。前往 GitHub.com，找到那個鮮綠色的 **New** 按鈕（或右上角的 **+** 符號），點擊後選擇 **New repository**。
 
-   1. 為你的儲存庫（資料夾）命名
-   1. 選擇 **create repository**。
+   這樣做：
+   1. 給你的倉庫取個名字－選一個有意義的名稱！
+   1. 想的話，可以加上描述（幫助別人了解專案內容）
+   1. 決定倉庫是公開（所有人可見）還是私人（只有你看得到）
+   1. 建議勾選新增 README 檔案－它就像專案的門面首頁
+   1. 按下 **Create repository**，慶祝吧－你已建立第一個倉庫！🎉
 
-1. **導航到你的工作資料夾**。在終端機中，切換到你想開始追蹤的資料夾（也稱為目錄）。輸入：
+2. **打開你的專案資料夾**。現在打開終端機（別怕，它沒你想像的複雜！）。我們要告訴電腦專案檔案在那裡，輸入：
 
    ```bash
    cd [name of your folder]
    ```
 
-1. **初始化 Git 儲存庫**。在你的專案中輸入：
+   **我們在做什麼：**
+   - 基本上是對電腦說「嘿，帶我去我的專案資料夾」
+   - 就像用滑鼠打開桌面的特定資料夾，不過用指令文字指示
+   - 把 `[name of your folder]` 換成你專案資料夾的實際名稱
+
+3. **把資料夾變成 Git 倉庫**。魔法的部分來了！輸入：
 
    ```bash
    git init
    ```
 
-1. **檢查狀態**。要檢查儲存庫的狀態，輸入：
+   **剛剛發生了什麼（超酷！）：**
+   - Git 在你的專案裡建立一個隱藏的 `.git` 資料夾－你看不到它，但它存在！
+   - 你的普通資料夾現在變成一個能追蹤所有改動的「倉庫」
+   - 想像你的資料夾獲得了超能力，能記住一切
+
+4. **查看現況**。看看 Git 現在對你的專案有什麼看法：
 
    ```bash
    git status
    ```
 
-   輸出的內容可能如下所示：
+   **解讀 Git 的回應：**
+   
+   你可能會看到像這樣的訊息：
 
    ```output
    Changes not staged for commit:
    (use "git add <file>..." to update what will be committed)
-   (use "git checkout -- <file>..." to discard changes in working directory)
+   (use "git restore <file>..." to discard changes in working directory)
 
         modified:   file.txt
         modified:   file2.txt
    ```
 
-   通常，`git status` 命令會告訴你哪些檔案已準備好被 _保存_ 到儲存庫，或者哪些檔案有更改需要持久化。
+   **別慌！這代表什麼：**
+   - **紅色** 的檔案代表改過但還沒準備好存檔
+   - **綠色** （如果出現）代表檔案已準備好儲存
+   - Git 很貼心地告訴你下一步該怎麼做
 
-1. **添加所有檔案進行追蹤**  
-   這也稱為暫存檔案/將檔案添加到暫存區。
+   > 💡 **專家小提示**：`git status` 是你最好的朋友！任何時候疑惑，都能問它「Hey，情況怎麼樣？」。
+
+5. **準備你的檔案以儲存**（這叫做「暫存」）：
 
    ```bash
    git add .
    ```
 
-   `git add` 加上 `.` 參數表示所有檔案和更改都將被追蹤。
+   **剛剛做了啥：**
+   - 我們告訴 Git「嘿，下一次存檔要包含所有檔案」
+   - `.` 代表資料夾中「全部內容」
+   - 現在你的檔案都已被「暫存」，準備好進行下一步
 
-1. **添加選定檔案進行追蹤**
+   **想挑選性暫存嗎？** 你可以只暫存指定檔案：
 
    ```bash
    git add [file or folder name]
    ```
 
-   當你不想一次提交所有檔案時，這可以幫助我們只添加選定的檔案到暫存區。
+   **為什麼想這樣做？**
+   - 有時你想把相關改動一次存成一組
+   - 有助分類你的工作成有意義的單元
+   - 方便將來理解什麼時候變動了什麼
 
-1. **取消暫存所有檔案**
+   **想取消暫存？** 沒問題！用這個指令：
 
    ```bash
+   # 取消所有檔案的暫存
    git reset
+   
+   # 只取消一個檔案的暫存
+   git reset [file name]
    ```
 
-   此命令可幫助我們一次取消暫存所有檔案。
+   不用怕－這不會刪除你工作內容，只是把檔案從「準備存」區移除。
 
-1. **取消暫存特定檔案**
-
-   ```bash
-   git reset [file or folder name]
-   ```
-
-   此命令可幫助我們一次取消暫存特定檔案，該檔案不希望包含在下一次提交中。
-
-1. **保存你的工作**。此時你已將檔案添加到所謂的 _暫存區_，Git 正在追蹤你的檔案。要使更改永久化，你需要 _提交_ 檔案。使用 `git commit` 命令建立一個 _提交_。提交代表儲存庫歷史中的一個保存點。輸入以下命令建立提交：
+6. **永久保存你的工作**（開始你的第一次 commit！）：
 
    ```bash
    git commit -m "first commit"
    ```
 
-   此命令提交所有檔案，並添加訊息 "first commit"。未來的提交訊息應更具描述性，以傳達你所做的更改類型。
+   **🎉 恭喜！你完成了第一個 commit！**
+   
+   **發生了什麼事：**
+   - Git 在此刻對所有暫存檔案拍了一張「快照」
+   - 你寫下的 commit 訊息「first commit」說明這個存檔的意義
+   - Git 給了這快照一個獨特識別碼，日後可以輕鬆找到
+   - 你正式開始追蹤專案歷史了！
+
+   > 💡 **未來的 commit 訊息**：下次提交時試著更具描述性！不要只寫「updated stuff」，改成「Add contact form to homepage」或「Fix navigation menu bug」。你的未來自己會非常感謝你！
 
-1. **將本地 Git 儲存庫連接到 GitHub**。本地的 Git 儲存庫很好，但某些時候你可能希望將檔案備份到其他地方，並邀請其他人與你合作。一個很好的地方就是 GitHub。記得我們已經在 GitHub 上建立了一個儲存庫，所以現在只需要將本地 Git 儲存庫與 GitHub 連接。`git remote add` 命令可以做到這一點。輸入以下命令：
+7. **連結本機專案到 GitHub**。現在你的專案只存在電腦裡，我們要把它連結到 GitHub 倉庫，這樣才能分享給世界！
 
-   > 注意，在輸入命令之前，前往你的 GitHub 儲存庫頁面找到儲存庫 URL。你將在以下命令中使用它。將 ```https://github.com/username/repository_name.git``` 替換為你的 GitHub URL。
+   先到你的 GitHub 倉庫頁面，複製它的 URL。回來終端機，輸入：
 
    ```bash
    git remote add origin https://github.com/username/repository_name.git
    ```
+   
+   （把這個 URL 換成你的專案網址！）
 
-   此命令建立了一個名為 "origin" 的 _遠端_ 連接，指向你之前建立的 GitHub 儲存庫。
+   **我們剛剛做了什麼：**
+   - 我們建立了您本地專案和 GitHub 儲存庫之間的連結
+   - 「Origin」只是您 GitHub 儲存庫的一個暱稱——就像將連絡人加到您的手機一樣
+   - 現在您的本地 Git 知道在您準備分享時要將代碼傳送到哪裡
 
-1. **將本地檔案推送到 GitHub**。到目前為止，你已建立了本地儲存庫與 GitHub 儲存庫之間的 _連接_。使用以下命令 `git push` 將檔案推送到 GitHub：
+   💡 **更簡易的方法**：如果您已安裝 GitHub CLI，可以用一條命令完成這個動作：
+   ```bash
+   gh repo create my-repo --public --push --source=.
+   ```
 
-   > 注意，你的分支名稱可能默認不是 ```main```。
+8. **將代碼傳送到 GitHub**（重頭戲來了！）：
 
    ```bash
    git push -u origin main
    ```
 
-   此命令將你的 "main" 分支中的提交推送到 GitHub。命令中包含 `-u` 的 `upstream` 分支設定，建立了本地分支與遠端分支之間的連結，因此未來你可以簡單地使用 git push 或 git pull，而無需指定分支名稱。Git 將自動使用 upstream 分支，未來的命令中不需要明確指定分支名稱。
+   **🚀 就是現在！您正在將代碼上傳到 GitHub！**
+   
+   **正在發生的事情：**
+   - 您的 commit 正從您的電腦傳送至 GitHub
+   - `-u` 參數設置了永久連接，讓以後推送更簡單
+   - 「main」是您主要分支的名稱（就像主要資料夾）
+   - 這之後，您只需輸入 `git push` 即可上傳！
+
+   💡 **快速提醒**：如果您的分支叫別的名字（例如「master」），請改用那個名稱。您可用 `git branch --show-current` 查看。
 
-2. **添加更多更改**。如果你想繼續進行更改並將它們推送到 GitHub，只需使用以下三個命令：
+9. **您的新日常程式編寫節奏**（開始上癮的地方！）：
+
+   從現在開始，每當您改動專案時，就有這樣簡單的三步舞：
 
    ```bash
    git add .
-   git commit -m "type your commit message here"
+   git commit -m "describe what you changed"
    git push
    ```
 
-   > 提示，你可能還希望採用 `.gitignore` 檔案，以防止你不想追蹤的檔案出現在 GitHub 上——例如存放在同一資料夾中的筆記檔案，但不適合放在公共儲存庫中。你可以在 [.gitignore templates](https://github.com/github/gitignore) 找到 `.gitignore` 檔案的模板。
+   **這將成為您的編碼心跳：**
+   - 為代碼做出精彩更改 ✨
+   - 用 `git add` 將它們階段化（「嘿 Git，注意這些更改！」）
+   - 用 `git commit` 和描述訊息保存它們（未來的您會感謝現在的自己！）
+   - 用 `git push` 分享給世界 🚀
+   - 反覆如此——說真的，這將變得跟呼吸一樣自然！
+
+   我喜歡這個工作流程，因為它就像遊戲裡的多個儲存點。喜歡剛剛做的改動？就 commit 它！想嘗試冒險？沒問題──如果出錯了，隨時可以回到最後一次 commit！
+
+   > 💡 **小提示**：您也可能想用 `.gitignore` 檔案防止某些不想被追蹤的檔案出現在 GitHub 上，例如同資料夾裡您用來記錄筆記的檔案。您可從 [.gitignore templates](https://github.com/github/gitignore) 找範本，或使用 [gitignore.io](https://www.toptal.com/developers/gitignore) 製作。
+
+### 🧠 **第一次提交：感覺如何？**
+
+**請花點時間慶祝並反思：**
+- 第一次看到代碼出現在 GitHub 上感覺如何？
+- 哪個步驟讓您最困惑，哪個步驟反而出乎意料地簡單？
+- 您能用自己的話解釋 `git add`、`git commit` 和 `git push` 的不同嗎？
+
+```mermaid
+stateDiagram-v2
+    [*] --> LocalFiles: 建立專案
+    LocalFiles --> Staged: git add .
+    Staged --> Committed: git commit
+    Committed --> GitHub: git push
+    GitHub --> [*]: 成功！🎉
+    
+    note right of Staged
+        準備儲存的檔案
+    end note
+    
+    note right of Committed
+        快照已建立
+    end note
+```
+> **記得**：即使是經驗豐富的開發者也有時會忘記確切指令。讓這套流程成為肌肉記憶需要練習——您做得很棒！
+
+#### 現代 Git 工作流程
+
+考慮採用以下現代實務：
+
+- **慣例性提交（Conventional Commits）**：使用規範化的提交訊息格式，如 `feat:`、`fix:`、`docs:` 等。詳情請見 [conventionalcommits.org](https://www.conventionalcommits.org/)
+- **原子性提交（Atomic commits）**：讓每次提交代表單一邏輯變更
+- **頻繁提交**：經常用描述性訊息提交，而非少量但龐大的提交
 
 #### 提交訊息
 
-一個好的 Git 提交主題行應完成以下句子：
-如果應用，這次提交將 <你的主題行>
+優秀的 Git 提交主題行會完成這個句子：
+如果套用，這次提交將會 <在這裡寫您的主題行>
+
+主題請使用祈使句和現在式：「change」而非「changed」或「changes」。 
+在主題中如此，正文（可選）也以祈使句現在式呈現。正文應說明變更的動機，並與先前行為對比。您在解釋的是「為什麼」，不是「怎麼做」。
 
-主題行使用命令式現在時態："change" 而不是 "changed" 或 "changes"。  
-在主題行中，以及在正文（可選）中，也使用命令式現在時態。正文應包括更改的動機，並與之前的行為形成對比。你是在解釋 `為什麼`，而不是 `如何`。
+✅ 花幾分鐘逛逛 GitHub。能找到特別棒的提交訊息嗎？能找到特別簡潔的嗎？您認為提交訊息中什麼資訊最重要且實用？
 
-✅ 花幾分鐘瀏覽 GitHub。你能找到一個非常好的提交訊息嗎？你能找到一個非常簡略的嗎？你認為在提交訊息中最重要和最有用的信息是什麼？
+## 與他人協作（最好玩的部分！）
 
-### 任務：合作
+請戴好帽子，因為這裡是 GitHub 變得魔幻的時刻！🪄 你已學會管理自己的代碼，現在我們將深入我最愛的部分——與世界各地了不起的人合作。
 
-將內容放到 GitHub 上的主要原因是讓其他開發者能夠合作。
+想像一下：明天醒來發現有人在東京睡覺時優化了你代碼；接著有人在柏林修正了你卡住的錯誤。下午時候，聖保羅的開發者加上你從未想過的功能。這不是科幻，而是 GitHub 世界裡的平常星期二！
 
-## 與他人合作專案
+讓我真正振奮的是，你即將學到的協作技巧，正是 Google、微軟和你喜愛的初創公司每天都在用的工作流。你不只是學會了一個酷工具——你學會了讓整個軟體世界無縫合作的祕密語言。
 
-> 查看影片
+說真的，一旦你體驗到有人合併你的第一個拉取請求（Pull Request）的興奮，你就會理解為什麼開發者對開源那麼熱衷。這就像成為世界上最大、最有創意的團隊專案一份子！
+
+> 請看影片
 >
-> [![Git 和 GitHub 基礎影片](https://img.youtube.com/vi/bFCM-PC3cu8/0.jpg)](https://www.youtube.com/watch?v=bFCM-PC3cu8)
+> [![Git and GitHub basics video](https://img.youtube.com/vi/bFCM-PC3cu8/0.jpg)](https://www.youtube.com/watch?v=bFCM-PC3cu8)
+
+把東西放到 GitHub 的主要原因，是為了讓與其他開發者協作成為可能。
 
-在你的儲存庫中，導航到 `Insights > Community`，查看你的專案如何符合推薦的社群標準。
+```mermaid
+flowchart LR
+    A[🔍 尋找專案] --> B[🍴 分叉儲存庫]
+    B --> C[📥 克隆到本地]
+    C --> D[🌿 建立分支]
+    D --> E[✏️ 進行更改]
+    E --> F[💾 提交更改]
+    F --> G[📤 推送分支]
+    G --> H[🔄 建立拉取請求]
+    H --> I{維護者審查}
+    I -->|✅ 核准| J[🎉 合併!]
+    I -->|❓ 請求修改| K[📝 進行更新]
+    K --> F
+    J --> L[🧹 清理分支]
+    
+    style A fill:#e3f2fd
+    style J fill:#e8f5e8
+    style L fill:#fff3e0
+```
+在您的儲存庫裡，導航至 `Insights > Community`，查看您的專案如何與建議的社群標準比較。
 
-以下是一些可以改善 GitHub 儲存庫的事項：
-- **描述**。你是否為你的專案添加了描述？
-- **README**。你是否添加了 README？GitHub 提供了撰寫 [README](https://docs.github.com/articles/about-readmes/?WT.mc_id=academic-77807-sagibbon) 的指導。
-- **貢獻指南**。你的專案是否有 [貢獻指南](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/?WT.mc_id=academic-77807-sagibbon)？
-- **行為準則**。是否有 [行為準則](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/)？
-- **授權條款**。或許最重要的是，是否有 [授權條款](https://docs.github.com/articles/adding-a-license-to-a-repository/)？
+想讓您的儲存庫看起來專業且受歡迎嗎？前往您的儲存庫，點選 `Insights > Community`。這個很棒的功能會告訴您專案如何與 GitHub 社群認為的「優秀儲存庫實踐」對比。
 
-所有這些資源都將有助於新團隊成員的入門。而這些通常是新貢獻者在查看你的程式碼之前會先查看的內容，以了解你的專案是否值得他們投入時間。
+> 🎯 **讓您的專案閃耀**：一個有良好文件的井然有序儲存庫就像擁有乾淨且熱情的店面。讓人知道您在意您的工作，也讓其他人想要參與！
 
-✅ README 檔案雖然需要時間準備，但經常被忙碌的維護者忽略。你能找到一個特別詳細的 README 示例嗎？注意：有一些[工具可以幫助撰寫好的 README](https://www.makeareadme.com/)，你可能會想試試。
+**一個出色儲存庫的特點有：**
 
-### 任務：合併程式碼
+| 欄位 | 重要性 | 給您的好處 |
+|-------------|-------------------|---------------------|
+| **描述（Description）** | 第一印象很重要！ | 讓人立刻知道您的專案做什麼 |
+| **README** | 您專案的首頁 | 像友善的導覽員給新訪客介紹 |
+| **貢獻指南（Contributing Guidelines）** | 展現歡迎協助 | 讓人知道如何能幫您忙 |
+| **行為準則（Code of Conduct）** | 創造友善空間 | 讓大家都感到歡迎參與 |
+| **授權條款（License）** | 法律明確 | 讓其他人知道如何使用您的代碼 |
+| **安全政策（Security Policy）** | 展現專業 | 表明您對安全負責 |
 
-貢獻文檔幫助人們為專案做出貢獻。它解釋了你希望的貢獻類型以及流程如何運作。貢獻者需要完成一系列步驟才能為你的 GitHub 儲存庫做出貢獻：
+> 💡 **專家祕訣**：GitHub 提供這些文件的範本。建立新儲存庫時，勾選對應框即可自動生成。
 
-1. **分叉你的儲存庫**。你可能希望人們 _分叉_ 你的專案。分叉意味著在他們的 GitHub 個人檔案中建立你的儲存庫的副本。
-1. **克隆**。接著他們會將專案克隆到本地電腦。
-1. **建立分支**。你會希望他們為自己的工作建立一個 _分支_。
-1. **專注於一個區域的更改**。請求貢獻者一次專注於一件事——這樣你能夠合併他們工作的可能性更高。想像他們修復了一個錯誤、添加了一個新功能並更新了幾個測試——如果你只想實施其中的 2 個或 1 個更改，該怎麼辦？
+**探索現代 GitHub 功能：**
 
-✅ 想像一個情境，分支對於撰寫和交付良好的程式碼特別重要。你能想到哪些使用案例？
+🤖 **自動化與 CI/CD：**
+- 用 **GitHub Actions** 進行自動化測試和部署
+- 用 **Dependabot** 自動更新相依套件
 
-> 注意，成為你希望看到的改變，為自己的工作也建立分支。你所做的任何提交都將在你目前「檢出」的分支上進行。使用 `git status` 查看當前所在的分支。
+💬 **社群與專案管理：**
+- 用 **GitHub Discussions** 進行超越議題的社群對話
+- 用 **GitHub Projects** 做看板式專案管理
+- 用 **分支保護規則** 強制執行程式碼品質標準
 
-讓我們來看看貢獻者的工作流程。假設貢獻者已經 _分叉_ 並 _克隆_ 了儲存庫，因此他們在本地電腦上有一個準備工作的 Git 儲存庫：
 
-1. **建立分支**。使用 `git branch` 命令建立一個分支，該分支將包含他們打算貢獻的更改：
+這些資源對於新團隊成員入職特別有幫助。而這些正是新貢獻者在看您的程式碼前，先用來判斷專案是否值得投入時間的資訊。
+
+✅ README 檔案雖然準備時間不少，但經常被繁忙的維護者忽略。能找到特別詳盡的 README 範例嗎？另外，有些 [工具可以幫助製作好 README](https://www.makeareadme.com/) 您也可以試試。
+
+### 任務：合併部分代碼
+
+貢獻文件幫助人們貢獻到專案。它說明了您期待哪類貢獻以及流程如何。在 GitHub 上，貢獻者需要通過一系列步驟才能向您的 repo 做出貢獻：
+
+1. **Fork 您的儲存庫** 您大概會希望大家「fork」您的專案。Fork 是在他們的 GitHub 帳號建立您儲存庫的副本。
+1. **Clone** 然後他們會把專案 clone 到電腦本地。
+1. **建立分支** 您會想要求他們建立一個分支來工作。
+1. **專注於單一改動點** 請貢獻者一次專注修改一件事——這樣您合併（merge）的可能性才高。想像他們寫了一個 bug 修正、新增一個功能並更新了幾個測試——如果您只想、或只能接受三個改動中的兩個或一個怎麼辦？
+
+✅ 想想在寫作和交付好代碼時，分支特別重要的情境有哪些？
+
+> 記得，自身想見的改變要來自自己，也要替自己的工作建立分支。您所做的任何 commit 都會在當前「切換到」（checked out）分支上。用 `git status` 看看您在哪個分支。
+
+接下來走一遍貢獻者的工作流程。假設貢獻者已經 fork 及 clone 了儲存庫，在他們本機已有可用的 Git repo：
+
+1. **建立分支** 用指令 `git branch` 建立要做貢獻的分支：
 
    ```bash
    git branch [branch-name]
    ```
 
-1. **切換到工作分支**。切換到指定分支並使用 `git switch` 更新工作目錄：
+   > 💡 **現代方法**：您也可以用一條命令同時建立並切換到這個新分支：
+   ```bash
+   git switch -c [branch-name]
+   ```
+
+1. **切換到工作分支** 用 `git switch` 切換指定分支並更新工作目錄：
 
    ```bash
    git switch [branch-name]
    ```
 
-1. **進行工作**。此時你可以添加更改。不要忘記使用以下命令告訴 Git：
+   > 💡 **現代提醒**：`git switch` 是改變分支時的現代替代指令，比 `git checkout` 清楚且更安全，適合新手。
+
+1. **開始工作** 這時您要加入改動。別忘了用以下指令告訴 Git：
 
    ```bash
    git add .
    git commit -m "my changes"
    ```
 
-   確保你為提交取一個好的名稱，對你自己以及你正在幫助的儲存庫維護者都有幫助。
+   > ⚠️ **提交訊息品質**：確保 commit 起個好名字，為您自己也為您協助的 repo 維護者。具體說明您改了什麼！
 
-1. **將你的工作與 `main` 分支合併**。某個時候你完成了工作，並希望將你的工作與 `main` 分支的工作合併。`main` 分支可能在此期間已經更改，因此請確保首先使用以下命令更新到最新版本：
+1. **與 `main` 分支整合** 某個時刻您工作完成，想與 `main` 分支整合。於此之前，先用以下指令確保 `main` 是最新的：
 
    ```bash
    git switch main
    git pull
    ```
 
-   此時你需要確保任何 _衝突_（Git 無法輕易 _合併_ 的情況）發生在你的工作分支中。因此，執行以下命令：
+   接著，您要確保所有 _衝突_ ，也就是 Git 無法輕易 _合併_ 的情況，都在您的工作分支裡解決。因而請執行：
 
    ```bash
    git switch [branch_name]
    git merge main
    ```
 
-   `git merge main` 命令將把 `main` 中的所有更改帶入你的分支。希望你可以直接繼續。如果不行，VS Code 會告訴你 Git _困惑_ 的地方，你只需修改受影響的檔案，指出哪個內容最準確。
+   `git merge main` 指令會將 `main` 的所有變更帶入您的分支。希望您可以直接繼續。如果不能，VS Code 會告訴您 Git 到底卡在哪裡，只要修改影響檔案來決定哪部分內容是正確的。
 
-   要切換到不同的分支，使用現代的 `git switch` 命令：
+   💡 **現代替代方案**：考慮用 `git rebase` 取得較乾淨的歷史紀錄：
    ```bash
-   git switch [branch_name]
-
+   git rebase main
+   ```
+   這會將您的提交重播在最新 main 之上，形成一條絕對線性歷史。
 
-1. **將你的工作推送到 GitHub**。將你的工作推送到 GitHub 意味著兩件事：將你的分支推送到你的儲存庫，然後開啟一個 PR（拉取請求）。
+1. **將工作推送到 GitHub** 推送工作到 GitHub 意味著兩件事。將分支推送到您的儲存庫，然後開啟 PR（拉取請求）。
 
    ```bash
    git push --set-upstream origin [branch-name]
    ```
 
-   上述命令會在你的分叉儲存庫中建立分支。
-1. **開啟 PR**。接下來，你需要開啟一個 PR（Pull Request）。你可以在 GitHub 上進入你分叉的倉庫，GitHub 會提示你是否要建立新的 PR，點擊後會進入一個介面，讓你可以修改提交訊息的標題，並提供更合適的描述。現在，你分叉的倉庫的維護者就能看到這個 PR，_希望_他們會欣賞並_合併_你的 PR。恭喜你，現在你是一名貢獻者了，太棒了！ :)
+   上述指令會在您分叉的儲存庫中建立分支。
+
+### 🤝 **協作技能測試：準備好與他人合作了嗎？**
+
+**看看您對協作的感覺如何：**
+- 現在您了解 fork 和 pull request 的概念了嗎？
+- 工作中關於分支的哪個部分您想多練習？
+- 您對於貢獻他人專案感覺自在嗎？
+
+```mermaid
+mindmap
+  root((Git 協作))
+    Branching
+      Feature branches
+      Bug fix branches
+      Experimental work
+    Pull Requests
+      Code review
+      Discussion
+      Testing
+    Best Practices
+      Clear commit messages
+      Small focused changes
+      Good documentation
+```
+> **信心加強**：每位您欣賞的開發者，首次拉取請求時都曾緊張。GitHub 社群對新手非常友善！
+
+1. **開啟 PR** 接著，您想開啟 PR。方法是到 fork 的儲存庫 GitHub 頁面。GitHub 會提示您是否要建立新的 PR，點擊後進入介面，可調整 commit 訊息標題，給它更合理描述。這時您 fork 的原始專案維護者就會看到這個 PR，_祈禱_ 他們會欣賞並 _合併_ 您的 PR。您現在成為貢獻者了，耶 :)
+
+   💡 **現代技巧**：您也可以使用 GitHub CLI 建立 PR：
+   ```bash
+   gh pr create --title "Your PR title" --body "Description of changes"
+   ```
 
-1. **清理**。成功合併 PR 後，清理工作被認為是一種良好的習慣。你需要清理本地分支以及推送到 GitHub 的分支。首先，使用以下指令刪除本地分支：
+   🔧 **PR 最佳實務：**
+   - 用像是「Fixes #123」的關鍵字連結相關 issue
+   - UI 改動附上截圖
+   - 指定想要審查的特定人員
+   - 使用草稿 PR 進行開發中工作
+   - 確保所有 CI 檢查通過後再請求審查
+1. **清理**。成功合併 Pull Request 後，_清理_ 是一個被認為良好的習慣。你要清理你的本地分支以及你推送到 GitHub 的分支。首先使用以下指令在本地刪除它：
 
    ```bash
    git branch -d [branch-name]
    ```
 
-   接著，進入 GitHub 上分叉的倉庫頁面，刪除你剛剛推送的遠端分支。
+   接著請到 Fork 的 GitHub 頁面，移除你剛剛推送的遠端分支。
 
-`Pull request` 這個詞聽起來有點奇怪，因為實際上你是想將你的更改推送到專案中。但維護者（專案擁有者）或核心團隊需要在合併到專案的 "main" 分支之前審核你的更改，因此你實際上是在向維護者請求更改的決定。
+`Pull request`（拉取請求）這名稱聽起來有些奇怪，因為你真正想做的是將你的修改推送到專案中。但維護者（專案擁有者）或核心團隊需要在合併至專案的「主」分支前，審核你的修改，所以你實際上是在向維護者請求更改的決定。
 
-Pull request 是一個用來比較和討論分支中引入的差異的地方，並且可以進行審核、評論、整合測試等操作。一個好的 Pull request 通常遵循與提交訊息相似的規則。當你的工作解決了一個問題時，你可以在問題追蹤器中引用該問題。這可以通過使用 `#` 後接問題編號來完成，例如 `#97`。
+Pull request 是用來比較並討論分支上的差異的地方，包含審查、意見回饋、整合測試等等。一份好的 Pull request 大致遵守和提交訊息相同的規範。當你的工作修復了一個問題時，可以加入對議題追蹤器(issue tracker)中議題的參考，做法是使用 `#` 後面接你的議題編號。例如 `#97`。
 
-🤞希望所有檢查都通過，專案擁有者合併你的更改到專案中🤞
+🤞祈禱所有檢查都通過，專案擁有者們會將你的更改合併進專案🤞
 
-更新本地工作分支，將 GitHub 上對應的遠端分支的所有新提交拉取下來：
+使用 `git pull` 將你目前本地工作分支與 GitHub 對應遠端分支的所有新提交同步更新：
 
 `git pull`
 
-## 如何貢獻開源專案
+## 參與開源專案（你改變世界的機會！）
+
+準備好被震撼了嗎？🤯 讓我們來談談參與開源專案吧—說實話，一想到要和你分享這些，我都起雞皮疙瘩了！
+
+這是你成為真正非凡事物一部分的機會。想像一下改進每天數百萬開發者都在使用的工具，或修復你朋友喜愛的應用程式中的錯誤。這不只是一個夢想——這就是開源貢獻的全部意義！
 
-首先，找到一個你感興趣並希望貢獻更改的 GitHub 倉庫（或 **repo**）。你需要將其內容複製到你的電腦上。
+讓我總是激動不已的是：你用來學習的每個工具——你的程式編輯器、我們要探索的框架、甚至你用來閱讀這篇文章的瀏覽器——其實都是由一位跟你一樣的人，做出了他們的第一次貢獻開始。那位打造你最愛 VS Code 擴充功能的天才開發者？他們也曾是初學者，用著顫抖的手點擊「建立拉取請求（create pull request）」按鈕，就像你現在要做的。
 
-✅ 找到「適合初學者」的倉庫的一個好方法是[透過標籤 'good-first-issue' 進行搜尋](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/)。
+最美好的部分是：開源社群就像互聯網上最大的集體擁抱。大多數專案積極尋找新手，還有標示了「good first issue（適合初學者）」的議題，專門為像你這樣的人準備！維護者看到新貢獻者時會真心感到興奮，因為他們還記得自己的第一步。
 
-![本地複製倉庫](../../../../translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.tw.png)
+```mermaid
+flowchart TD
+    A[🔍 探索 GitHub] --> B[🏷️ 找到 "good first issue"]
+    B --> C[📖 閱讀貢獻指南]
+    C --> D[🍴 分叉倉庫]
+    D --> E[💻 設置本地環境]
+    E --> F[🌿 創建功能分支]
+    F --> G[✨ 做出你的貢獻]
+    G --> H[🧪 測試你的更改]
+    H --> I[📝 撰寫清晰的提交訊息]
+    I --> J[📤 推送並創建 PR]
+    J --> K[💬 參與反饋討論]
+    K --> L[🎉 合併！你是貢獻者了！]
+    L --> M[🌟 找下一個問題]
+    
+    style A fill:#e1f5fe
+    style L fill:#c8e6c9
+    style M fill:#fff59d
+```
+你不是僅僅在學習編寫程式碼——你正在準備加入一個全球建造者的大家庭，他們每天醒來都在想：「我們怎麼讓數位世界變得更好一點？」歡迎加入這個俱樂部！🌟
 
-有幾種複製程式碼的方法。一種方法是使用 HTTPS、SSH 或 GitHub CLI（命令列介面）來「克隆」倉庫的內容。
+首先，讓我們在 GitHub 找到一個你感興趣、且想要貢獻修改的程式碼庫（repo）。你會想把它的內容複製到你的機器上。
 
-打開終端機並像這樣克隆倉庫：
-`git clone https://github.com/ProjectURL`
+✅ 找尋「適合新手」的優良程式碼庫的好方法是 [透過 'good-first-issue' 標籤搜尋](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/)。
 
-要開始專案工作，切換到正確的資料夾：
+![將程式庫複製到本機](../../../../translated_images/clone_repo.5085c48d666ead57.tw.png)
+
+複製程式碼有多種方式。常見的一種是使用 HTTPS、SSH 或 GitHub CLI（命令列介面）來「克隆」整個程式庫內容。
+
+打開終端機，像這樣克隆儲存庫：
+```bash
+# 使用 HTTPS
+git clone https://github.com/ProjectURL
+
+# 使用 SSH（需要設定 SSH 金鑰）
+git clone git@github.com:username/repository.git
+
+# 使用 GitHub CLI
+gh repo clone username/repository
+```
+
+要開始專案，切換到正確的目錄：
 `cd ProjectURL`
 
-你也可以使用 [Codespaces](https://github.com/features/codespaces)（GitHub 的嵌入式程式碼編輯器/雲端開發環境）或 [GitHub Desktop](https://desktop.github.com/) 打開整個專案。
+你也可以使用以下方式打開整個專案：
+- **[GitHub Codespaces](https://github.com/features/codespaces)** - 透過瀏覽器使用 VS Code 的 GitHub 雲端開發環境
+- **[GitHub Desktop](https://desktop.github.com/)** - 針對 Git 操作的圖形介面應用程式
+- **[GitHub.dev](https://github.dev)** - 在任何 GitHub 儲存庫按下 `.` 鍵，於瀏覽器打開 VS Code
+- 安裝 GitHub Pull Requests 擴充功能的 **VS Code**
 
-最後，你也可以下載壓縮檔案形式的程式碼。
+最後也可以下載壓縮檔的程式碼。
 
-### 關於 GitHub 的一些有趣事
+### 關於 GitHub 的一些有趣資訊
 
-你可以對 GitHub 上的任何公共倉庫進行加星、關注或「分叉」。你可以在右上角的下拉選單中找到你加星的倉庫。這就像為程式碼加書籤。
+你可以收藏（star）、關注（watch）和／或「派生」（fork） GitHub 上任何公開程式庫。你可以在右上方的下拉選單中找到你收藏的儲存庫。這就像為程式碼做書籤一樣。
 
-專案通常有一個問題追蹤器，大多數情況下在 GitHub 的 "Issues" 標籤中，除非另有說明，人們會在這裡討論與專案相關的問題。而 Pull Requests 標籤則是人們討論和審核正在進行的更改的地方。
+專案有議題追蹤系統，大多數位於 GitHub 的「Issues」標籤頁，除非另有標示，在這裡大家討論專案相關問題。拉取請求（Pull Requests）標籤頁則是大家討論及審查進行中修改的地方。
 
-專案可能還會在論壇、郵件列表或像 Slack、Discord 或 IRC 這樣的聊天頻道中進行討論。
+有些專案也會在論壇、郵件列表或 Slack、Discord、IRC 等聊天室中討論。
 
-✅ 瀏覽一下你的新 GitHub 倉庫，試試一些功能，比如編輯設定、添加倉庫資訊，或建立專案（例如看板）。你可以做很多事情！
+🔧 **現代 GitHub 功能**：
+- **GitHub Discussions** - 內建的社群討論區
+- **GitHub Sponsors** - 金錢支持維護者
+- **Security tab（安全標籤）** - 漏洞報告與資安公告
+- **Actions tab（工作流程標籤）** - 查看自動化流程與 CI/CD 管線
+- **Insights tab（洞察標籤）** - 關於貢獻者、提交與專案健康狀況的分析
+- **Projects tab（專案標籤）** - GitHub 內建的專案管理工具
+
+✅ 到你的新儲存庫四處看看，嘗試設定、編輯資料、建立專案（例如看板），及設定 GitHub Actions 自動化。有很多事情你可以做！
 
 ---
 
 ## 🚀 挑戰
 
-與朋友合作，互相修改彼此的程式碼。共同建立一個專案，分叉程式碼，建立分支，並合併更改。
+好了，是時候測試你閃亮的新 GitHub 超能力了！🚀 這個挑戰會讓一切在最令人滿意的方式中連結起來：
+
+找一個朋友（或者那位總問你「你到底在搞什麼電腦東西」的家人）一起開始合作編碼冒險！真正的魔法從這裡開始——創建一個專案，讓對方 fork，建立一些分支，並像專家一樣合併變更。
+
+我不騙你——你們過程中可能會笑翻（尤其是同時改到同一行時）、也可能摸不著頭緒，但你們一定會有那些「啊哈！」的精彩時刻，讓學習之旅都值回票價。而且跟別人分享第一次成功合併的感覺很特別——就像慶祝你走了多遠！
+
+還沒有編程夥伴？完全不用擔心！GitHub 社群非常熱情友善，他們還記得新手時的感覺。找尋標示有「good first issue」的儲存庫——這些就是在說：「嘿，新手，來跟我們一起學習吧！」多棒啊！
 
 ## 課後測驗
-[課後測驗](https://ff-quizzes.netlify.app/web/en/)
+[Post-lecture quiz](https://ff-quizzes.netlify.app/web/en/)
+
+## 回顧與持續學習
 
-## 複習與自學
+呼！🎉 看看你——你剛剛像冠軍一樣征服了 GitHub 基礎！如果你現在腦袋覺得有點滿，那是很正常的，甚至是好現象。你學到的工具，我剛開始時花了好幾週才能熟悉。
 
-閱讀更多關於[如何貢獻開源軟體](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution)。
+Git 和 GitHub 非常強大（真的很強大），我認識的每位開發者——包括那些看起來像巫師的高手們——都得碰撞、練習、走彎路才終於能掌握。你完成這課代表你已經踏上了精通開發者最重要工具之一的路。
 
-[Git 速查表](https://training.github.com/downloads/github-git-cheat-sheet/)。
+以下都是極佳的資源，幫你練習並變得更厲害：
 
-多練習，多實踐。GitHub 提供了很棒的學習路徑：[skills.github.com](https://skills.github.com):
+- [參與開源軟體指南](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution) – 引導你如何有所作為
+- [Git 快捷清單](https://training.github.com/downloads/github-git-cheat-sheet/) – 隨手可用的速查表！
 
-- [GitHub 的第一週](https://skills.github.com/#first-week-on-github)
+記得：練習造就進步，不是完美！你越用 Git 和 GitHub，就會越自然。GitHub 也推出了非常棒的互動課程，讓你在安全的環境中練習：
 
-你還可以找到更多進階課程。
+- [GitHub 入門](https://github.com/skills/introduction-to-github)
+- [使用 Markdown 進行溝通](https://github.com/skills/communicate-using-markdown)  
+- [GitHub Pages](https://github.com/skills/github-pages)
+- [管理合併衝突](https://github.com/skills/resolve-merge-conflicts)
+
+**想挑戰更進階工具？試試這些現代化工具：**
+- [GitHub CLI 文件](https://cli.github.com/manual/) – 想感受命令列魔法就用它
+- [GitHub Codespaces 文件](https://docs.github.com/en/codespaces) – 在雲端編碼！
+- [GitHub Actions 文件](https://docs.github.com/en/actions) – 自動化所有工作
+- [Git 最佳實踐](https://www.atlassian.com/git/tutorials/comparing-workflows) – 提升你的工作流程
+
+## GitHub Copilot Agent 挑戰 🚀
+
+使用 Agent 模式完成以下挑戰：
+
+**描述：** 建立一個協作網頁開發專案，展示本課程中學到的完整 GitHub 工作流程。此挑戰將幫助你在真實情境中練習儲存庫創建、協作功能與現代 Git 工作流程。
+
+**提示：** 建立一個公共 GitHub 儲存庫，主題為簡單的「網頁開發資源」專案。此儲存庫應包含結構良好的 README.md 檔，列出實用的網頁開發工具和資源，並依類別（HTML、CSS、JavaScript 等）組織。設定儲存庫以符合社群標準，包括授權條款、貢獻指引與行為準則。建立至少兩個功能分支：一個用來新增 CSS 資源，另一個用來新增 JavaScript 資源。對每個分支進行有描述性提交訊息的 commit，然後建立 Pull Request 將變更合併回 main。啟用 Issues、Discussions 等 GitHub 功能，並且設定基本的 GitHub Actions 工作流程自動檢查。
 
 ## 作業
 
-完成 [GitHub 的第一週課程](https://skills.github.com/#first-week-on-github)
+你的任務，如果你願意接受：完成 GitHub Skills 的 [Introduction to GitHub](https://github.com/skills/introduction-to-github) 課程。這個互動課程會讓你在安全、有引導的環境中練習你所學的一切。完成後還能獲得一個炫酷的徽章！🏅
+
+**準備好接受更多挑戰了嗎？**
+- 設定 GitHub 帳號的 SSH 認證（不再需要密碼！）
+- 嘗試使用 GitHub CLI 進行日常 Git 操作
+- 建立一個帶有 GitHub Actions 工作流程的儲存庫
+- 用 GitHub Codespaces 開啟此儲存庫，體驗雲端編輯器
+
+---
+
+## 🚀 你的 GitHub 精通時間表
+
+### ⚡ **接下來 5 分鐘能做到的事情**
+- [ ] 收藏此儲存庫及另 3 個你感興趣的專案
+- [ ] 在 GitHub 帳號設定雙重身份驗證
+- [ ] 為你的第一個儲存庫建立簡單的 README
+- [ ] 追蹤 5 位讓你感覺受啟發的開發者
+
+### 🎯 **這一小時可以完成的目標**
+- [ ] 完成課後測驗，並反思你的 GitHub 旅程
+- [ ] 設定 SSH 金鑰以免密碼驗證
+- [ ] 做出你的第一個具意義的 commit，並寫好提交訊息
+- [ ] 探索 GitHub 的「探索」標籤，發現熱門專案
+- [ ] 練習 fork 一個儲存庫並做些小修改
+
+### 📅 **本周的 GitHub 探險**
+- [ ] 完成 GitHub Skills 課程（入門 GitHub、Markdown）
+- [ ] 向一個開源專案發送你的第一個 pull request
+- [ ] 設置 GitHub Pages 來展示你的成果
+- [ ] 參與你感興趣專案的 GitHub Discussions
+- [ ] 建立一個符合社群標準（README、授權等）的儲存庫
+- [ ] 嘗試使用 GitHub Codespaces 進行雲端開發
+
+### 🌟 **本月的蛻變目標**
+- [ ] 向 3 個不同的開源專案貢獻程式碼
+- [ ] 指導一位 GitHub 新手（回饋社群！）
+- [ ] 設置 GitHub Actions 自動工作流程
+- [ ] 建立展示你 GitHub 貢獻的作品集
+- [ ] 參加 Hacktoberfest 或類似社群活動
+- [ ] 成為你自己專案的維護者，並邀請其他人貢獻
+
+### 🎓 **最終 GitHub 精通檢查**
+
+**慶祝你走了多遠：**
+- 你最喜歡 GitHub 的哪一點？
+- 哪個協作功能讓你最感興趣？
+- 你對貢獻開源的信心有多少？
+- 你第一個想貢獻的專案是什麼？
+
+```mermaid
+journey
+    title 你的 GitHub 自信旅程
+    section 今天
+      緊張: 3: 你
+      好奇: 4: 你
+      興奮: 5: 你
+    section 這週
+      練習中: 4: 你
+      貢獻中: 5: 你
+      連結中: 5: 你
+    section 下個月
+      協作中: 5: 你
+      領導中: 5: 你
+      激勵他人: 5: 你
+```
+> 🌍 **歡迎加入全球開發者社群！** 你現在擁有與全球數百萬開發者協作的工具。你的第一筆貢獻可能看似微小，但請記住——每個重要的開源專案都是從有人做出第一次提交開始。問題不在於你是否會有所影響，而是第一個因你的獨特觀點而受益的神奇專案會是什麼！🚀
+
+記住：每個專家也曾是初學者。你可以的！💪
 
 ---
 
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
 **免責聲明**：  
-本文件已使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於關鍵資訊，建議使用專業人工翻譯。我們對因使用此翻譯而產生的任何誤解或錯誤解釋不承擔責任。
\ No newline at end of file
+本文件係使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們致力於達到準確性，但請注意，自動翻譯可能包含錯誤或不準確之處。原文文件的母語版本應視為權威來源。對於重要資訊，建議聘請專業人工翻譯。我們不對因使用本翻譯所產生之任何誤解或錯誤解釋承擔責任。
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->
\ No newline at end of file
diff --git a/translations/tw/1-getting-started-lessons/3-accessibility/README.md b/translations/tw/1-getting-started-lessons/3-accessibility/README.md
index c7d3aa08..0d65ab5c 100644
--- a/translations/tw/1-getting-started-lessons/3-accessibility/README.md
+++ b/translations/tw/1-getting-started-lessons/3-accessibility/README.md
@@ -1,244 +1,1501 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "f0c88c3e2cefa8952d356f802b1e47ca",
-  "translation_date": "2025-08-29T15:29:50+00:00",
+  "original_hash": "7f2c48e04754724123ea100a822765e5",
+  "translation_date": "2026-01-06T14:18:47+00:00",
   "source_file": "1-getting-started-lessons/3-accessibility/README.md",
   "language_code": "tw"
 }
 -->
-# 建立無障礙的網頁
-
-![關於無障礙設計](../../../../translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.tw.png)
-> 由 [Tomomi Imura](https://twitter.com/girlie_mac) 繪製的手繪筆記
-
+# 建立無障礙網頁
+
+![關於無障礙的一切](../../../../translated_images/webdev101-a11y.8ef3025c858d897a.tw.png)
+> 手繪筆記由 [Tomomi Imura](https://twitter.com/girlie_mac) 製作
+
+```mermaid
+journey
+    title 你的無障礙學習冒險
+    section 基礎
+      了解使用者: 5: 你
+      測試工具: 4: 你
+      POUR 原則: 5: 你
+    section 建立技能
+      語意 HTML: 4: 你
+      視覺設計: 5: 你
+      ARIA 技術: 4: 你
+    section 精通實踐
+      鍵盤導覽: 5: 你
+      表單無障礙: 4: 你
+      實務測試: 5: 你
+```
 ## 課前測驗
 [課前測驗](https://ff-quizzes.netlify.app/web/)
 
-> 網路的力量在於其普遍性。不論是否有障礙，人人都能使用是其核心要素。
+> 網路的力量在於其普遍性。無論有無障礙，每個人都能使用是關鍵。
 >
-> \- 提姆·伯納斯-李爵士，W3C 主任及全球資訊網發明者
+> \- Sir Timothy Berners-Lee，W3C 主任暨萬維網發明者
+
+這裡有件事可能會讓你吃驚：當你建立無障礙網站時，你不只是幫助有障礙的人——事實上你是在讓網路變得更好，對所有人都有益！
+
+你有沒有注意過路口的人行道斜坡？它最初是為輪椅設計的，但現在也幫助推嬰兒車的人、運送員推貨車、旅行者拉行李箱，以及騎腳踏車的人。這正是無障礙網頁設計的運作方式──幫助某一群體的解決方案，往往最終惠及所有人。很酷，對吧？
+
+在本課中，我們將探索如何創建真正適合所有人使用的網站，不論他們怎麼瀏覽網路。你將發現已納入網頁標準中的實用技巧，學習使用測試工具實際操作，並看到無障礙如何改善所有使用者的網站可用性。
+
+到本課結束時，你將有信心將無障礙自然地融入你的開發流程。準備好探索如何透過有心的設計選擇，讓數十億人都能使用網路嗎？讓我們開始吧！
+
+```mermaid
+mindmap
+  root((網頁無障礙))
+    Users
+      Screen readers
+      Keyboard navigation
+      Voice control
+      Magnification
+    Technologies
+      HTML語意
+      ARIA屬性
+      CSS焦點指示器
+      鍵盤事件
+    Benefits
+      更廣泛的受眾
+      更佳的SEO
+      法律遵循
+      通用設計
+    Testing
+      自動化工具
+      手動測試
+      使用者回饋
+      真實輔助技術
+```
+> 你可以在 [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon) 上學習這堂課！
 
-這句話完美地突顯了建立無障礙網站的重要性。一個無法讓所有人使用的應用程式，本質上就是排他的。作為網頁開發者，我們應該時刻考慮無障礙性。從一開始就專注於此，將確保您所建立的頁面能被所有人訪問。在本課程中，您將學習如何使用工具來確保您的網頁資產是無障礙的，以及如何以無障礙性為核心進行設計。
+## 了解輔助技術
 
-> 您可以在 [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon) 上學習本課程！
+在開始編碼前，讓我們先花點時間了解不同能力的人是如何瀏覽網路的。這不只是理論──了解這些真實的瀏覽模式會讓你成為更好的開發者！
 
-## 可用工具
+輔助技術是非常厲害的工具，幫助有障礙的人以你可能意想不到的方式與網站互動。一旦你懂得這些技術的運作，建立無障礙網頁就會變得更直覺。就像學會用別人的視角看你的程式碼。
 
 ### 螢幕閱讀器
 
-最知名的無障礙工具之一是螢幕閱讀器。
+[螢幕閱讀器](https://en.wikipedia.org/wiki/Screen_reader) 是相當先進的技術，能將數位文字轉換成語音或點字輸出。雖然主要用於視障人士，但對有學習障礙如失讀症的使用者也非常有幫助。
+
+我喜歡把螢幕閱讀器想像成一本有智慧的旁白幫你朗讀書籍。它會依照邏輯順序朗讀內容，宣告可互動元素如「按鈕」或「連結」，並提供鍵盤快捷鍵在頁面中跳轉。但關鍵是──螢幕閱讀器只有在我們用適當結構和有意義的內容建網站時，才能發揮魔力。這就是你作為開發者的角色！
+
+**各平台常見螢幕閱讀器：**
+- **Windows**： [NVDA](https://www.nvaccess.org/about-nvda/)（免費且最流行）、[JAWS](https://webaim.org/articles/jaws/)、[Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon)（內建）
+- **macOS/iOS**：[VoiceOver](https://support.apple.com/guide/voiceover/welcome/10)（內建且功能強大）
+- **Android**：[TalkBack](https://support.google.com/accessibility/android/answer/6283677)（內建）
+- **Linux**：[Orca](https://wiki.gnome.org/Projects/Orca)（免費開源）
+
+**螢幕閱讀器如何瀏覽網頁內容：**
+
+螢幕閱讀器提供多種瀏覽方法，讓經驗豐富的使用者更有效率：
+- **順序閱讀**：從上到下朗讀內容，像讀書一樣
+- **地標導航**：在頁面區塊間跳轉（標頭、導航、主內容、頁尾）
+- **標題導覽**：在標題間跳轉，理解頁面結構
+- **連結清單**：產生所有連結列表以快速存取
+- **表單控制**：直接跳轉到輸入欄位和按鈕
+
+> 💡 **這件事讓我大開眼界**：有68%的螢幕閱讀器使用者主要靠標題瀏覽頁面（[WebAIM 調查](https://webaim.org/projects/screenreadersurvey9/#finding)）。你的標題結構就像使用者的地圖──把它做好，真的幫助人快速找到內容！
+
+### 建立你的測試流程
+
+好消息是──有效的無障礙測試並不困難！你需要結合自動化工具（非常擅長抓明顯問題）和實際操作測試。以下是我發現最有效且不耗費太多時間的系統方法：
+
+**必要的手動測試流程：**
+
+```mermaid
+flowchart TD
+    A[🚀 開始測試] --> B{⌨️ 鍵盤導覽}
+    B --> C[使用Tab鍵瀏覽所有互動元素]
+    C --> D{🎧 螢幕閱讀器測試}
+    D --> E[使用NVDA/VoiceOver測試]
+    E --> F{🔍 縮放測試}
+    F --> G[將縮放設定為200％並測試功能]
+    G --> H{🎨 色彩/對比度檢查}
+    H --> I[確認所有文字符合對比度標準]
+    I --> J{👁️ 焦點管理}
+    J --> K[確保焦點指示器可見]
+    K --> L[✅ 測試完成]
+    
+    style A fill:#e3f2fd
+    style L fill:#e8f5e8
+    style B fill:#fff3e0
+    style D fill:#f3e5f5
+    style F fill:#e0f2f1
+    style H fill:#fce4ec
+    style J fill:#e8eaf6
+```
+**逐步測試清單：**
+1. **鍵盤導覽**：只用 Tab、Shift+Tab、Enter、空白鍵和方向鍵
+2. **螢幕閱讀器測試**：啟用 NVDA、VoiceOver 或 Narrator，眼睛閉著操作
+3. **放大測試**：檢測 200% 和 400% 放大比例
+4. **色彩對比檢查**：確認所有文字及介面元件
+5. **焦點指示測試**：確保所有互動元素有明顯焦點狀態
 
-[螢幕閱讀器](https://en.wikipedia.org/wiki/Screen_reader) 是視障人士常用的工具。當我們花時間確保瀏覽器能正確傳遞我們想要分享的資訊時，我們也必須確保螢幕閱讀器能做到同樣的事情。
+✅ **從 Lighthouse 開始**：開啟瀏覽器的開發者工具，執行 Lighthouse 無障礙審核，然後根據結果調整手動測試重點。
 
-最基本的螢幕閱讀器會從上到下以語音方式讀取頁面內容。如果您的頁面全是文字，閱讀器會以類似瀏覽器的方式傳遞資訊。然而，網頁很少僅包含文字；它們通常還包含連結、圖片、顏色和其他視覺元素。我們需要特別注意，確保這些資訊能被螢幕閱讀器正確讀取。
+### 縮放與放大工具
 
-每位網頁開發者都應該熟悉螢幕閱讀器。正如上文所述，這是您的使用者會使用的工具。就像您熟悉瀏覽器的運作方式一樣，您也應該了解螢幕閱讀器的運作方式。幸運的是，大多數作業系統都內建了螢幕閱讀器。
+你知道有時候手機文字太小你就會用兩指捏合放大嗎，或在戶外亮光下盯著筆電螢幕看？很多用戶每天都依賴放大工具讓內容變得可讀。這包括低視力者、長者，以及任何曾在戶外看網站的人。
 
-一些瀏覽器也內建了工具和擴充功能，可以朗讀文字，甚至提供一些基本的導航功能，例如 [這些專注於無障礙設計的 Edge 瀏覽器工具](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features)。這些工具也是重要的無障礙工具，但它們的功能與螢幕閱讀器非常不同，不能將它們視為螢幕閱讀器測試工具。
+現代縮放技術不只是放大文字。了解這些工具的運作方式會幫你創造在任意放大比例下都保持功能性與美觀的響應式設計。
 
-✅ 試用螢幕閱讀器和瀏覽器的文字朗讀功能。在 Windows 上，[Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon) 是預設內建的，您也可以安裝 [JAWS](https://webaim.org/articles/jaws/) 和 [NVDA](https://www.nvaccess.org/about-nvda/)。在 macOS 和 iOS 上，[VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) 是預設內建的。
+**現代瀏覽器的縮放功能：**
+- **頁面縮放**：所有內容比例放大（文字、圖片、版面）──首選方式
+- **僅文字縮放**：放大字體大小，維持原有版面
+- **捏合縮放**：行動裝置暫時放大手勢支援
+- **瀏覽器支援**：所有現代瀏覽器支援最高 500% 縮放且不破壞功能
 
-### 放大功能
+**專用放大軟體：**
+- **Windows**：[放大鏡](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198)（內建）、[ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/)
+- **macOS/iOS**：[Zoom](https://www.apple.com/accessibility/mac/vision/)（內建且功能先進）
 
-另一個視障人士常用的工具是放大功能。最基本的放大方式是靜態放大，可以透過 `Control + 加號 (+)` 或降低螢幕解析度來實現。這種放大方式會使整個頁面重新調整大小，因此使用 [響應式設計](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Responsive_Design) 對於在高放大級別下提供良好的使用者體驗非常重要。
+> ⚠️ **設計考量**：WCAG 規範要求內容在 200% 縮放時仍需保持可用。此比例應盡量避免水平滾動，所有互動元素也須可操作。
 
-另一種放大方式依賴於專門的軟體，放大螢幕的一個區域並進行平移，就像使用真正的放大鏡一樣。在 Windows 上，[Magnifier](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) 是內建的，而 [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) 是一款第三方放大軟體，功能更多且用戶群更大。在 macOS 和 iOS 上，內建的放大軟體稱為 [Zoom](https://www.apple.com/accessibility/mac/vision/)。
+✅ **測試你的響應式設計**：將瀏覽器縮放至 200% 和 400%。你的版面是否能順暢調整？所有功能能否不需過多滾動就能使用？
 
-### 對比檢查工具
+## 現代無障礙測試工具
 
-網站上的顏色需要仔細選擇，以滿足色盲使用者或難以辨識低對比顏色的人的需求。
+既然你已了解使用輔助技術瀏覽網頁的方式，接下來探索幫助你建置及測試無障礙網站的工具。
 
-✅ 使用瀏覽器擴充功能（例如 [WCAG 的顏色檢查工具](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US&WT.mc_id=academic-77807-sagibbon)）測試您喜歡的網站的顏色使用情況。您學到了什麼？
+想像一下：自動化工具擅長抓明顯錯誤（如遺漏替代文字），而手動測試則幫助你確保網站在真實環境中使用感受良好。兩者結合才能讓你確信網站對所有人都友好。
 
-### Lighthouse
+### 色彩對比測試
 
-在瀏覽器的開發者工具區域，您會找到 Lighthouse 工具。這個工具對於初步檢視網站的無障礙性（以及其他分析）非常重要。雖然不應完全依賴 Lighthouse，但 100% 的分數作為基準是非常有幫助的。
+好消息是：色彩對比是最常見的無障礙問題之一，但同時也是最容易修正的。良好的對比對所有人都好──無論是視障者或是在海灘上看手機的人。
 
-✅ 在瀏覽器的開發者工具面板中找到 Lighthouse，並對任何網站進行分析。您發現了什麼？
+**WCAG 對比要求：**
 
-## 無障礙設計
+| 文字類型 | WCAG AA（最低） | WCAG AAA（加強） |
+|----------|-----------------|-------------------|
+| **一般文字**（小於 18pt） | 4.5:1 對比比率 | 7:1 對比比率 |
+| **大字**（18pt 以上或 14pt 加粗） | 3:1 對比比率 | 4.5:1 對比比率 |
+| **介面元件**（按鈕、表單邊框） | 3:1 對比比率 | 3:1 對比比率 |
 
-無障礙性是一個相對廣泛的主題。為了幫助您，有許多資源可供使用。
+**必備測試工具：**
+- [Colour Contrast Analyser](https://www.tpgi.com/color-contrast-checker/) - 桌面軟體含色彩取樣器
+- [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) - 網頁版即時反饋
+- [Stark](https://www.getstark.co/) - Figma、Sketch、Adobe XD 設計外掛
+- [Accessible Colors](https://accessible-colors.com/) - 尋找無障礙色彩調色盤
 
-- [Accessible U - 明尼蘇達大學](https://accessibility.umn.edu/your-role/web-developers)
+✅ **建立更佳色彩調色盤**：從品牌色開始，利用對比檢測工具創造無障礙的色彩變體。將其記錄為你的設計系統可用的無障礙色彩 Token。
 
-雖然我們無法涵蓋建立無障礙網站的每個方面，但以下是您需要實施的一些核心原則。從一開始就設計無障礙頁面 **總是** 比事後修改現有頁面來實現無障礙性更容易。
+### 全面無障礙稽核
 
-## 良好的顯示原則
+最有效的無障礙測試結合多種方法。沒一個工具能抓出所有問題，建立包含多種方法的測試流程才能全面。
 
-### 安全的色彩調色盤
+**瀏覽器內建測試（開發者工具）：**
+- **Chrome/Edge**：Lighthouse 無障礙檢測 + 無障礙面板
+- **Firefox**：無障礙檢查器與詳細樹狀圖
+- **Safari**：Web 檢查器的稽核分頁搭配 VoiceOver 模擬
 
-人們以不同的方式看待世界，包括顏色。在為您的網站選擇配色方案時，您應確保它對所有人都是無障礙的。一個很棒的 [生成色彩調色盤的工具是 Color Safe](http://colorsafe.co/)。
+**專業測試擴充套件：**
+- [axe DevTools](https://www.deque.com/axe/devtools/) - 業界標準自動化測試
+- [WAVE](https://wave.webaim.org/extension/) - 錯誤視覺反饋高亮
+- [Accessibility Insights](https://accessibilityinsights.io/) - 微軟完整測試套件
 
-✅ 找出一個在顏色使用上非常有問題的網站。為什麼？
+**命令列及 CI/CD 整合：**
+- [axe-core](https://github.com/dequelabs/axe-core) - JavaScript 自動化測試庫
+- [Pa11y](https://pa11y.org/) - 命令列無障礙測試工具
+- [Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci) - 自動化無障礙評分
 
-### 使用正確的 HTML
+> 🎯 **測試目標**：以 Lighthouse 得分 95+ 作為基準。記住，自動化測試只能找到約 30-40% 的無障礙問題──手動測試依然非常重要！
 
-透過 CSS 和 JavaScript，可以讓任何元素看起來像任何類型的控制項。例如，`<span>` 可以用來創建 `<button>`，而 `<b>` 可以變成超連結。雖然這樣可能更容易設計樣式，但對於螢幕閱讀器來說，這並沒有傳遞任何資訊。在頁面上創建控制項時，請使用適當的 HTML。如果您需要一個超連結，請使用 `<a>`。使用正確的 HTML 創建控制項被稱為使用語義化 HTML。
+### 🧠 **測試技能檢視：準備找出問題了嗎？**
 
-✅ 打開任何網站，檢查設計師和開發者是否正確使用了 HTML。您能找到應該是連結但卻是按鈕的例子嗎？提示：右鍵點擊並選擇瀏覽器中的「檢視頁面原始碼」來查看底層代碼。
+**讓我們看看你對無障礙測試的感覺：**
+- 哪種測試方法你現在覺得最容易上手？
+- 你能想像用純鍵盤操作一整天嗎？
+- 你個人在網路上遇過的無障礙障礙是什麼？
 
-### 創建描述性的標題層次結構
+```mermaid
+pie title "不同方法捕捉到的無障礙問題"
+    "自動化工具" : 35
+    "手動測試" : 40
+    "用戶反饋" : 25
+```
+> **自信提升**：專業無障礙測試人員正是使用這樣的組合方法。你在學習業界公認的慣例！
 
-螢幕閱讀器使用者 [非常依賴標題](https://webaim.org/projects/screenreadersurvey8/#finding) 來尋找資訊並導航頁面。撰寫描述性的標題內容並使用語義化的標題標籤，對於為螢幕閱讀器使用者創建易於導航的網站非常重要。
+## 從零開始打造無障礙
 
-### 使用良好的視覺提示
+無障礙成功的關鍵是從一開始就把它建築在基礎上。我知道你可能會想「晚點再加無障礙」，但這就像房子蓋好後再想加斜坡一樣。可能嗎？可以。但簡單嗎？不容易。
 
-CSS 提供了對頁面上任何元素外觀的完全控制。您可以創建沒有邊框的文字框或沒有底線的超連結。不幸的是，移除這些提示可能會讓依賴它們的人更難識別控制項的類型。
+把無障礙想像成蓋房子──比起事後改建，從設計圖開始就規劃輪椅可達性會輕鬆好多。
 
-## 超連結文字的重要性
+### POUR 原則：你的無障礙基礎
 
-超連結是網路導航的核心。因此，確保螢幕閱讀器能正確讀取連結，讓所有使用者都能導航您的網站。
+網頁內容無障礙指南（WCAG）圍繞四個基本原則，英文簡寫 POUR。別擔心──這不是生硬的學術概念，而是讓內容適合所有人的實用準則。
 
-### 螢幕閱讀器與連結
+當你習慣 POUR 後，做無障礙決策會更直覺。它就像心中的檢查清單，指引你的設計抉擇。來看細節：
 
-正如您所預期的，螢幕閱讀器會像讀取頁面上的其他文字一樣讀取連結文字。考慮到這一點，以下示例中的文字可能看起來完全可以接受。
+```mermaid
+flowchart LR
+    A[🔍 可感知的<br/>使用者能感知它嗎？] --> B[🎮 可操作的<br/>使用者能使用它嗎？]
+    B --> C[📖 可理解的<br/>使用者能理解它嗎？]
+    C --> D[💪 可靠的<br/>它在各處都能運作嗎？]
+    
+    A1[替代文字<br/>字幕<br/>對比] --> A
+    B1[鍵盤存取<br/>無癲癇發作<br/>時間限制] --> B
+    C1[清晰語言<br/>可預測<br/>錯誤協助] --> C
+    D1[有效程式碼<br/>相容性<br/>未來可用] --> D
+    
+    style A fill:#e1f5fe
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+```
+**🔍 可感知（Perceivable）**：資訊必須以使用者可感知的方式呈現
+
+- 為非文字內容（圖片、影片、音訊）提供替代文字
+- 確保所有文字及介面元件具足夠色彩對比
+- 為多媒體提供字幕及文字稿
+- 設計內容在縮放至 200% 時仍能正常使用
+- 用多重感官特性（不只是顏色）來傳達資訊
+
+**🎮 可操作（Operable）**：所有介面元件必須能透過可用的輸入方式操作
+
+- 所有功能須可用鍵盤導覽操作
+- 提供使用者足夠時間閱讀與互動內容
+- 避免造成癲癇發作或前庭系統疾病的內容
+- 以清晰的結構與地標協助使用者高效率導航
+- 確保互動元素有足夠的點擊區域（最少44px）
+
+**📖 可理解（Understandable）**：資訊及介面操作必須清晰易懂
+
+- 使用清晰、簡單且適合目標受眾的語言
+- 確保內容出現與操作方式均可預期且一致
+- 為使用者輸入提供清楚說明和錯誤訊息
+- 幫助使用者理解並修正表單錯誤
+- 以合理閱讀順序與資訊層次組織內容
+
+**💪 可靠（Robust）**：內容必須在不同技術與輔助設備下可靠運作
+
+- **以有效且語意正確的 HTML 作為基礎**
+- **確保與現有及未來輔助技術相容**
+- **遵守網路標準及標記最佳實踐**
+- **在不同瀏覽器、裝置和輔助工具上測試**
+- **結構化內容，使其在不支援進階功能時也能優雅降級**
+
+### 🎯 **POUR 原則檢查：讓它深入人心**
+
+**快速反思基礎概念：**
+- 你能想到哪個網站功能違反了每個 POUR 原則嗎？
+- 對你這個開發者來說，哪個原則最自然？
+- 這些原則如何改善所有人的設計，而不僅僅是對殘障使用者？
+
+```mermaid
+quadrantChart
+    title POUR 原則影響矩陣
+    x-axis 低努力 --> 高努力
+    y-axis 低影響 --> 高影響
+    quadrant-1 快速獲勝
+    quadrant-2 重大專案
+    quadrant-3 延後考慮
+    quadrant-4 策略重點
+    
+    Alt Text: [0.2, 0.9]
+    Color Contrast: [0.3, 0.8]
+    Semantic HTML: [0.4, 0.9]
+    Keyboard Nav: [0.6, 0.8]
+    ARIA Complex: [0.8, 0.7]
+    Screen Reader Testing: [0.7, 0.6]
+```
+> **記住**：從高影響、低成本的改進開始。語意 HTML 和 alt 文字能以最低成本帶來最大無障礙提升！
 
-> 小企鵝，有時被稱為仙女企鵝，是世界上最小的企鵝。[點擊這裡](https://en.wikipedia.org/wiki/Little_penguin) 獲取更多資訊。
+## 創造無障礙的視覺設計
 
-> 小企鵝，有時被稱為仙女企鵝，是世界上最小的企鵝。訪問 https://en.wikipedia.org/wiki/Little_penguin 獲取更多資訊。
+良好的視覺設計與無障礙密不可分。當你以無障礙為設計目標時，通常會發現這些限制促使你設計出更簡潔、優雅的解決方案，造福所有使用者。
 
-> **注意** 如您即將閱讀的內容，您應該 **永遠不要** 創建如上所示的連結。
+讓我們深入探討如何創造對所有人都適用、視覺吸引的設計，不論他們的視覺能力如何或在什麼環境下瀏覽你的內容。
 
-請記住，螢幕閱讀器與瀏覽器是不同的介面，具有不同的功能集。
+### 顏色與視覺無障礙策略
 
-### 使用 URL 的問題
+顏色是強大的溝通工具，但絕不該是傳遞重要資訊的唯一方式。跨越顏色限制的設計能創造更堅韌且包容的體驗，在更多情況下有效。
 
-螢幕閱讀器會讀取文字。如果文字中出現 URL，螢幕閱讀器會讀取該 URL。一般來說，URL 並不能傳遞有意義的資訊，並且可能聽起來很煩人。如果您的手機曾經語音讀取過帶有 URL 的簡訊，您可能會有這樣的體驗。
+**為色覺差異設計：**
 
-### 使用「點擊這裡」的問題
+約有 8% 男性與 0.5% 女性有某種色覺差異（常稱為「色盲」）。最常見的類型有：
+- **綠色盲（Deuteranopia）**：難區分紅與綠
+- **紅色盲（Protanopia）**：紅色顯得較暗
+- **藍色盲（Tritanopia）**：難區分藍與黃（罕見）
 
-螢幕閱讀器還能僅讀取頁面上的超連結，就像視力正常的人會掃描頁面尋找連結一樣。如果連結文字總是「點擊這裡」，使用者聽到的將是「點擊這裡，點擊這裡，點擊這裡，點擊這裡，點擊這裡，……」所有連結現在都無法區分。
+**包容性色彩策略：**
 
-### 良好的連結文字
+```css
+/* ❌ Bad: Using only color to indicate status */
+.error { color: red; }
+.success { color: green; }
 
-良好的連結文字應簡要描述連結的內容。在上述關於小企鵝的例子中，連結指向該物種的維基百科頁面。「小企鵝」這個短語作為連結文字非常合適，因為它清楚地表明點擊連結後會學到什麼——小企鵝。
+/* ✅ Good: Color plus icons and context */
+.error {
+  color: #d32f2f;
+  border-left: 4px solid #d32f2f;
+}
+.error::before {
+  content: "⚠️";
+  margin-right: 8px;
+}
 
-> [小企鵝](https://en.wikipedia.org/wiki/Little_penguin)，有時被稱為仙女企鵝，是世界上最小的企鵝。
+.success {
+  color: #2e7d32;
+  border-left: 4px solid #2e7d32;
+}
+.success::before {
+  content: "✅";
+  margin-right: 8px;
+}
+```
 
-✅ 瀏覽網路幾分鐘，找出使用模糊連結策略的頁面。將它們與其他連結更好的網站進行比較。您學到了什麼？
+**超越基本對比要求：**
+- 使用色盲模擬器測試你的色彩選擇
+- 搭配使用圖案、紋理或形狀來強化顏色標示
+- 確保互動狀態在無色彩下依然可辨
+- 考慮你的設計在高對比模式下的呈現
 
-#### 搜尋引擎的注意事項
+✅ **測試你的色彩無障礙性**：使用 [Coblis](https://www.color-blindness.com/coblis-color-blindness-simulator/) 等工具查看你的網站對不同色覺類型使用者的呈現。
 
-確保您的網站對所有人無障礙，還能幫助搜尋引擎更好地導航您的網站。搜尋引擎使用連結文字來了解頁面的主題。因此，使用良好的連結文字對所有人都有幫助！
+### 焦點指示與互動設計
 
-### ARIA
+焦點指示就像數位游標，告訴鍵盤使用者目前所在頁面位置。良好設計的焦點指示提升所有人的體驗，使互動清晰且可預測。
 
-想像以下頁面：
+**現代焦點指示最佳實踐：**
 
-| 產品          | 描述              | 訂購          |
-| ------------- | ----------------- | ------------- |
-| 小工具        | [描述](../../../../1-getting-started-lessons/3-accessibility/')       | [訂購](../../../../1-getting-started-lessons/3-accessibility/')   |
-| 超級小工具    | [描述](../../../../1-getting-started-lessons/3-accessibility/')       | [訂購](../../../../1-getting-started-lessons/3-accessibility/')   |
+```css
+/* Enhanced focus styles that work across browsers */
+button:focus-visible {
+  outline: 2px solid #0066cc;
+  outline-offset: 2px;
+  box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.25);
+}
 
-在這個例子中，對於使用瀏覽器的人來說，重複的「描述」和「訂購」文字是合理的。然而，使用螢幕閱讀器的人只會聽到「描述」和「訂購」重複出現，沒有上下文。
+/* Remove focus outline for mouse users, preserve for keyboard users */
+button:focus:not(:focus-visible) {
+  outline: none;
+}
 
-為了支援這類情境，HTML 支援一組稱為 [無障礙豐富網際網路應用程式 (ARIA)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) 的屬性。這些屬性允許您為螢幕閱讀器提供額外的資訊。
+/* Focus-within for complex components */
+.card:focus-within {
+  box-shadow: 0 0 0 3px rgba(74, 144, 164, 0.5);
+  border-color: #4A90A4;
+}
 
-> **注意**：與 HTML 的許多方面一樣，瀏覽器和螢幕閱讀器的支援可能有所不同。然而，大多數主流客戶端都支援 ARIA 屬性。
+/* Ensure focus indicators meet contrast requirements */
+.custom-focus:focus-visible {
+  outline: 3px solid #ffffff;
+  outline-offset: 2px;
+  box-shadow: 0 0 0 6px #000000;
+}
+```
 
-您可以使用 `aria-label` 來描述連結，當頁面的格式不允許您這樣做時。例如，對於小工具的描述可以設置為：
+**焦點指示要求：**
+- **可見性**：與周圍元素對比至少 3:1
+- **寬度**：元素周圍至少 2px 厚
+- **持續性**：應持續顯示直到焦點移開
+- **明顯不同**：與其他 UI 狀態在視覺上有區別
+
+> 💡 **設計提示**：優秀的焦點指示通常結合外框、陰影和色彩變化，確保在不同背景和環境下可見。
+
+✅ **檢查焦點指示**：用 Tab 鍵瀏覽網站，找出焦點指示是否清晰，是否有看不清或完全沒有的元件？
+
+### 語意 HTML：無障礙的基礎
+
+語意 HTML 就像給輔助技術網站的衛星導航系統。當你為元素正確使用特定 HTML 標籤，等於給螢幕閱讀器、鍵盤及其他工具提供詳細導航地圖，幫助使用者有效瀏覽。
+
+我喜歡用這個比喻：語意 HTML 就像有明確分類且標示清楚的圖書館，相較於書籍亂放的倉庫。兩邊都有書，但你肯定比較想在圖書館裡找書，對吧？
+
+```mermaid
+flowchart TD
+    A[🏠 HTML 文件] --> B[📰 頁首]
+    A --> C[🧭 導覽]
+    A --> D[📄 主內容]
+    A --> E[📋 頁尾]
+    
+    B --> B1[h1: 網站名稱<br/>商標與品牌]
+    C --> C1[ul: 導覽<br/>主要連結]
+    D --> D1[article: 內容<br/>section: 小節]
+    D --> D2[aside: 側邊欄<br/>相關內容]
+    E --> E1[nav: 頁尾連結<br/>版權資訊]
+    
+    D1 --> D1a[h1: 頁面標題<br/>h2: 主要區段<br/>h3: 小節]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+```
+**無障礙頁面結構基石：**
+
+```html
+<!-- Landmark elements provide page navigation structure -->
+<header>
+  <h1>Your Site Name</h1>
+  <nav aria-label="Main navigation">
+    <ul>
+      <li><a href="/home">Home</a></li>
+      <li><a href="/about">About</a></li>
+      <li><a href="/services">Services</a></li>
+    </ul>
+  </nav>
+</header>
+
+<main>
+  <article>
+    <header>
+      <h1>Article Title</h1>
+      <p>Published on <time datetime="2024-10-14">October 14, 2024</time></p>
+    </header>
+    
+    <section>
+      <h2>First Section</h2>
+      <p>Content that relates to this section...</p>
+    </section>
+    
+    <section>
+      <h2>Second Section</h2>
+      <p>More related content...</p>
+    </section>
+  </article>
+  
+  <aside>
+    <h2>Related Links</h2>
+    <nav aria-label="Related articles">
+      <ul>
+        <li><a href="/related-1">First related article</a></li>
+        <li><a href="/related-2">Second related article</a></li>
+      </ul>
+    </nav>
+  </aside>
+</main>
+
+<footer>
+  <p>&copy; 2024 Your Site Name. All rights reserved.</p>
+  <nav aria-label="Footer links">
+    <ul>
+      <li><a href="/privacy">Privacy Policy</a></li>
+      <li><a href="/contact">Contact Us</a></li>
+    </ul>
+  </nav>
+</footer>
+```
 
-``` html
-<a href="#" aria-label="Widget description">description</a>
+**語意 HTML 如何改變無障礙：**
+
+| 語意元素 | 目的 | 螢幕閱讀器優勢 |
+|------------------|---------|----------------------|
+| `<header>` | 頁面或區段標頭 | 「橫幅地標」- 快速導航至頂部 |
+| `<nav>` | 導航連結 | 「導航地標」- 導航區塊清單 |
+| `<main>` | 主要頁面內容 | 「主要地標」- 直接跳至內容 |
+| `<article>` | 自含內容 | 宣告文章範圍 |
+| `<section>` | 主題內容群組 | 提供內容結構 |
+| `<aside>` | 相關側邊欄內容 | 「輔助地標」 |
+| `<footer>` | 頁面或區段頁尾 | 「內容資訊地標」 |
+
+**語意 HTML 的螢幕閱讀器超能力：**
+- **地標導航**：可立即跳轉頁面主要區塊
+- **標題大綱**：根據標題結構產生目錄
+- **元素清單**：建立所有連結、按鈕或表單控件清單
+- **內容關聯性**：理解內容區段間的連結關係
+
+> 🎯 **快速測試**：用螢幕閱讀器利用地標捷徑 (NVDA/JAWS：D 為地標，H 為標題，K 為連結) 瀏覽你的網站，導航是否合理？
+
+### 🏗️ **語意 HTML 大師檢查：建立堅固基礎**
+
+**來評估你對語意的理解：**
+- 你能否僅從 HTML 判斷頁面地標？
+- 你會如何向朋友解釋 `<section>` 與 `<div>` 的區別？
+- 若螢幕閱讀器用戶回報導航問題，你會先檢查什麼？
+
+```mermaid
+stateDiagram-v2
+    [*] --> UnsementicHTML: div 湯
+    UnsementicHTML --> SemanticHTML: 新增地標
+    SemanticHTML --> AccessibleHTML: 使用輔助技術測試
+    AccessibleHTML --> [*]: 使用者成功！
+    
+    note right of UnsementicHTML
+        螢幕閱讀器失效
+        鍵盤導覽中斷
+    end note
+    
+    note right of AccessibleHTML
+        清晰的導覽
+        高效瀏覽
+    end note
 ```
+> **專業見解**：良好語意 HTML 自動解決約 70% 無障礙問題。精通這個基礎，你就離成功不遠了！
 
-✅ 一般來說，如上所述使用語義化標記比使用 ARIA 更優先，但有時某些 HTML 元件並沒有語義等價物。例如樹狀結構。HTML 中沒有樹狀結構的等價物，因此您需要為這個元素的通用 `<div>` 添加適當的角色和 ARIA 值。[MDN 上的 ARIA 文件](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) 包含更多有用的資訊。
+✅ **檢查你的語意結構**：用瀏覽器開發者工具的無障礙面板查看無障礙樹狀結構，確保標記建立合理架構。
+
+### 標題階層：建立邏輯內容大綱
+
+標題對無障礙內容至關重要，它們就像支撐內容的脊椎。螢幕閱讀器使用者仰賴標題理解與導航內容。把它當作頁面目錄即可。
+
+**標題黃金法則：**
+絕不跳級。標題階層必須邏輯漸進，如 `<h1>`→`<h2>`→`<h3>`。像以前學校做大綱一樣，絕不會跳過中間的層級。
+
+**理想標題結構範例：**
+
+```html
+<!-- ✅ Excellent: Logical, hierarchical progression -->
+<main>
+  <h1>Complete Guide to Web Accessibility</h1>
+  
+  <section>
+    <h2>Understanding Screen Readers</h2>
+    <p>Introduction to screen reader technology...</p>
+    
+    <h3>Popular Screen Reader Software</h3>
+    <p>NVDA, JAWS, and VoiceOver comparison...</p>
+    
+    <h3>Testing with Screen Readers</h3>
+    <p>Step-by-step testing instructions...</p>
+  </section>
+  
+  <section>
+    <h2>Color and Contrast Guidelines</h2>
+    <p>Designing with sufficient contrast...</p>
+    
+    <h3>WCAG Contrast Requirements</h3>
+    <p>Understanding the different contrast levels...</p>
+    
+    <h3>Testing Tools and Techniques</h3>
+    <p>Tools for verifying contrast ratios...</p>
+  </section>
+</main>
+```
 
 ```html
-<h2 id="tree-label">File Viewer</h2>
-<div role="tree" aria-labelledby="tree-label">
-  <div role="treeitem" aria-expanded="false" tabindex="0">Uploads</div>
+<!-- ❌ Problematic: Skipping levels, inconsistent structure -->
+<h1>Page Title</h1>
+<h3>Subsection</h3> <!-- Skipped h2 -->
+<h2>This should come before h3</h2>
+<h1>Another main heading?</h1> <!-- Multiple h1s -->
+```
+
+**標題最佳實踐：**
+- **每頁一個 `<h1>`**：通常是主頁標題或主要內容標題
+- **階層邏輯**：切勿跳級（h1 → h2 → h3，不是 h1 → h3）
+- **描述明確**：使標題即使脫離上下文也具意義
+- **用 CSS 控制視覺**：用 CSS 形塑外觀，HTML 標籤用於結構
+
+**螢幕閱讀器使用統計：**
+- 68% 螢幕閱讀器使用者會以標題導航（[WebAIM 調查](https://webaim.org/projects/screenreadersurvey9/#finding)）
+- 使用者期待有邏輯的標題大綱
+- 標題是最快理解頁面結構的方式
+
+> 💡 **專業提示**：用瀏覽器擴充工具「HeadingsMap」視覺化你的標題結構，它應該像個有條理的目錄。
+
+✅ **測試你的標題結構**：用螢幕閱讀器標題導航鍵（NVDA 內的 H 鍵）跳過標題。階層是否合邏輯，在說明你的內容？
+
+### 進階視覺無障礙技術
+
+除了對比與色彩基本法則外，還有高級技術幫助創建真正包容的視覺體驗。這些方法確保你的內容在不同瀏覽條件與輔助技術下有效。
+
+**重要視覺溝通策略：**
+
+- **多模式回饋**：結合視覺、文字，有時加上聲音提示
+- **漸進揭露**：分段呈現資訊，易於消化
+- **一致互動模式**：運用熟悉 UI 慣例
+- **響應式排版**：依裝置適當縮放文字
+- **載入與錯誤狀態**：提供清晰反饋給所有使用者行為
+
+**強化無障礙的 CSS 工具：**
+
+```css
+/* Screen reader only text - visually hidden but accessible */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Skip link for keyboard navigation */
+.skip-link {
+  position: absolute;
+  top: -40px;
+  left: 6px;
+  background: #000000;
+  color: #ffffff;
+  padding: 8px 16px;
+  text-decoration: none;
+  border-radius: 4px;
+  font-weight: bold;
+  transition: top 0.3s ease;
+  z-index: 1000;
+}
+
+.skip-link:focus {
+  top: 6px;
+}
+
+/* Reduced motion respect */
+@media (prefers-reduced-motion: reduce) {
+  .skip-link {
+    transition: none;
+  }
+  
+  * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+  .button {
+    border: 2px solid;
+  }
+}
+```
+
+> 🎯 **無障礙模式**：「跳過連結」對鍵盤使用者至關重要。它應是頁面首個可聚焦元素，能直接跳至主要內容區。
+
+✅ **實作跳過導航**：在頁面加入跳過連結，頁面加載後立即用 Tab 試驗。它們應該出現並允許跳至主內容。
+
+## 打造有意義的連結文字
+
+連結是網路公路，但文字寫得不好就像路標只寫「地方」而非「芝加哥市中心」，非常沒幫助不是嗎？
+
+令我驚訝的是：螢幕閱讀器可以抽取頁面所有連結，並列成一個大清單。想像有人遞給你頁面所有連結的目錄，每個連結獨立看都得能說明意義。這是你連結文字必須通過的考驗！
+
+### 理解連結導航模式
+
+螢幕閱讀器強大的連結導航功能依賴清楚的連結文字：
+
+**連結導航方式：**
+- **依序閱讀**：連結隨內容上下文一起讀取
+- **連結清單產生**：將頁面所有連結建立成可搜尋目錄
+- **快速導航**：用鍵盤快速切換連結（NVDA 的 K 鍵）
+- **搜尋功能**：輸入部分文字找到特定連結
+
+**為何語境重要：**
+螢幕閱讀器使用者看到連結清單時，可能有：
+- 「下載報告」
+- 「了解更多」
+- 「點這裡」
+- 「隱私政策」
+- 「點這裡」
+
+其中只有兩個對脫離語境的讀取有實質資訊！
+
+> 📊 **使用者影響**：螢幕閱讀器使用者掃描連結清單快速了解頁面內容，通用連結文字迫使他們必須回到連結上下文，極大降低瀏覽效率。
+
+### 避免的常見連結文字錯誤
+
+理解失敗模式幫助你認清問題並修正現有內容的無障礙缺陷。
+
+**❌ 無上下文的通用連結文字：**
+
+```html
+<!-- Meaningless when read from a link list -->
+<p>Our sustainability efforts are detailed in our recent report. 
+   <a href="/sustainability-2024.pdf">Click here</a> to view it.</p>
+
+<!-- Repeated generic text throughout the page -->
+<div class="article-card">
+  <h3>Web Accessibility Guide</h3>
+  <p>Learn the fundamentals...</p>
+  <a href="/accessibility-guide">Read more</a>
 </div>
+<div class="article-card">
+  <h3>Color Contrast Tips</h3>
+  <p>Improve your design...</p>
+  <a href="/color-contrast">Read more</a>
+</div>
+
+<!-- URLs as link text (difficult for screen readers to announce) -->
+<p>Visit https://www.w3.org/WAI/WCAG21/quickref/ for WCAG guidelines.</p>
+
+<!-- Vague action words -->
+<a href="/contact">Go</a> | <a href="/about">See</a> | <a href="/help">View</a>
 ```
 
-## 圖片
+**這些模式失敗原因：**
+- **「點這裡」** 不告訴使用者目標是什麼
+- **「閱讀更多」多次重複易混淆**
+- **裸露 URL 較難被螢幕閱讀器明確朗讀**
+- **單字如「去」或「看」缺乏描述性**
+
+### 撰寫優秀連結文字
+
+描述性連結文字惠及所有使用者—有視力者可迅速瀏覽，螢幕閱讀器用戶亦能立即理解連結目的。
 
-不用說，螢幕閱讀器無法自動讀取圖片中的內容。確保圖片是無障礙的並不需要太多工作——這就是 `alt` 屬性的作用。所有有意義的圖片都應該有一個 `alt` 屬性來描述它們的內容。
-純裝飾性的圖片應將其 `alt` 屬性設置為空字串：`alt=""`。這樣可以防止螢幕閱讀器不必要地宣告裝飾性圖片。
+**✅ 清楚具體的連結文字範例：**
 
-✅ 正如您可能預期的，搜尋引擎也無法理解圖片中的內容。它們也使用 alt 文本。因此，再次確保您的頁面是無障礙的還能帶來額外的好處！
+```html
+<!-- Descriptive text that explains the destination -->
+<p>Our comprehensive <a href="/sustainability-2024.pdf">2024 sustainability report (PDF, 2.1MB)</a> details our environmental initiatives.</p>
+
+<!-- Specific, unique link text for each card -->
+<div class="article-card">
+  <h3>Web Accessibility Guide</h3>
+  <p>Learn the fundamentals of inclusive design...</p>
+  <a href="/accessibility-guide">Read our complete web accessibility guide</a>
+</div>
+<div class="article-card">
+  <h3>Color Contrast Tips</h3>
+  <p>Improve your design with better color choices...</p>
+  <a href="/color-contrast">Explore color contrast best practices</a>
+</div>
 
-## 鍵盤
+<!-- Meaningful text instead of raw URLs -->
+<p>The <a href="https://www.w3.org/WAI/WCAG21/quickref/">WCAG 2.1 Quick Reference guide</a> provides comprehensive accessibility guidelines.</p>
 
-有些使用者無法使用滑鼠或觸控板，而是依賴鍵盤操作來從一個元素切換到下一個元素。確保您的網站以邏輯順序呈現內容，讓鍵盤使用者能夠按順序訪問每個互動元素。如果您使用語義化標記構建網頁，並使用 CSS 設計其視覺佈局，您的網站應該是可用鍵盤導航的，但手動測試這一方面仍然很重要。了解更多 [鍵盤導航策略](https://webaim.org/techniques/keyboard/)。
+<!-- Descriptive action links -->
+<a href="/contact">Contact our support team</a> | 
+<a href="/about">About our company</a> | 
+<a href="/help">Get help with your account</a>
+```
 
-✅ 打開任何網站，嘗試僅使用鍵盤進行導航。哪些有效，哪些無效？為什麼？
+**連結文字最佳實踐：**
+- **具體明確**：「下載季度財務報告」勝過「下載」
+- **包含檔案類型與大小**：「（PDF，1.2MB）」標示可下載檔案
+- **注明是否新視窗開啟**：「（會在新視窗開啟）」視情況使用
+- **使用主動語句**：「聯絡我們」勝過「聯絡頁面」
+- **保持簡潔**：盡量在 2-8 個字之間
 
-## 總結
+### 進階連結無障礙模式
 
-一個僅對部分人無障礙的網路並不是真正的「全球資訊網」。確保您建立的網站是無障礙的最佳方式是從一開始就融入無障礙設計的最佳實踐。雖然這需要額外的步驟，但現在將這些技能融入您的工作流程，將確保您創建的所有頁面都是無障礙的。
+有時視覺設計限制或技術需求需特殊解決方案。以下是常見困難情境的高級技術：
+
+**使用 ARIA 增強上下文：**
+
+```html
+<!-- When button text must be short but needs more context -->
+<a href="/report.pdf" 
+   aria-label="Download 2024 annual financial report, PDF format, 2.3MB">
+  Download Report
+</a>
+
+<!-- When the full context comes from surrounding content -->
+<h3 id="sustainability-heading">Sustainability Initiative</h3>
+<p>Our efforts to reduce environmental impact...</p>
+<a href="/sustainability-details" 
+   aria-labelledby="sustainability-heading"
+   aria-describedby="sustainability-summary">
+  Learn more
+</a>
+<p id="sustainability-summary">Detailed breakdown of our 2024 environmental goals and achievements</p>
+```
+
+**標示檔案類型與外部連結：**
+
+```html
+<!-- Method 1: Include information in visible link text -->
+<a href="/annual-report.pdf">
+  Download our 2024 annual report (PDF, 2.3MB)
+</a>
+
+<!-- Method 2: Use screen reader-only text for file details -->
+<a href="/annual-report.pdf">
+  Download our 2024 annual report
+  <span class="sr-only">(PDF format, 2.3MB)</span>
+</a>
+
+<!-- Method 3: External link indication -->
+<a href="https://example.com" 
+   target="_blank" 
+   aria-describedby="external-link-warning">
+  Visit external resource
+</a>
+<span id="external-link-warning" class="sr-only">
+  (opens in new window)
+</span>
+
+<!-- Method 4: Using CSS for visual indicators -->
+<a href="https://example.com" class="external-link">
+  External resource
+</a>
+```
+
+```css
+/* Visual indicator for external links */
+.external-link::after {
+  content: " ↗";
+  font-size: 0.8em;
+  color: #666;
+}
+
+/* Screen reader announcement for external links */
+.external-link::before {
+  content: "External link: ";
+  position: absolute;
+  left: -10000px;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
+```
+
+> ⚠️ **重要**：使用 `target="_blank"` 時務必告知使用者連結會在新視窗或分頁開啟。意外的導覽變更會讓人感到混亂。
+
+✅ **測試你的連結語境**：用瀏覽器開發工具列出頁面所有連結，不看上下文是否能理解每個連結的用途？
+
+## ARIA：強化 HTML 無障礙
+
+[無障礙豐富網頁應用（ARIA）](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) 就像你複雜網頁應用與輔助技術之間的萬用翻譯器。當純粹 HTML 難以表達互動元件全部意義時，ARIA 補足缺口。
+
+我喜歡把 ARIA 想像成給 HTML 添加註解——像劇本裡幫助演員理解角色與關係的舞台指示。
+
+**關於 ARIA 最重要的規則：** 優先使用語意 HTML，然後才加 ARIA 來加強。把 ARIA 當調味料，而非主菜。它應該澄清和強化 HTML 結構，絕非取代。先把基礎打好！
+
+### ARIA 的策略性應用
+
+ARIA 很強大，但權力越大責任越大。錯誤使用 ARIA 反而會使無障礙變差。以下何時以及如何有效使用：
+
+**✅ 使用 ARIA 時機：**
+- 建立自訂互動元件（手風琴、分頁、輪播）
+- 建置動態內容，無須重新載入頁面
+- 提供複雜 UI 關係的額外上下文
+- 顯示載入狀態或動態內容更新
+- 創造類似應用的自訂控制介面
+
+**❌ 避免使用 ARIA 時機：**
+- 標準 HTML 元素已有所需語意時
+- 不確定如何正確實作時
+- 重複語意 HTML 已提供的資訊
+- 未使用真實輔助技術測試時
+
+> 🎯 **ARIA 黄金規則**：「除非絕對必要，不要改變語意；確保鍵盤可用；並使用真實輔助技術測試。」
+**ARIA 的五大類別：**
+
+1. **角色**：這個元素是什麼？（`button`、`tab`、`dialog`）
+2. **屬性**：它有哪些特徵？（`aria-required`、`aria-haspopup`）
+3. **狀態**：當前狀態是什麼？（`aria-expanded`、`aria-checked`）
+4. **地標**：它在頁面結構中的位置？（`banner`、`navigation`、`main`）
+5. **即時區域**：變更應該如何公告？（`aria-live`、`aria-atomic`）
+
+### 現代網頁應用的基本 ARIA 範式
+
+這些範式解決了互動式網頁應用中最常見的無障礙挑戰：
+
+**為元素命名和描述：**
+
+```html
+<!-- aria-label: Provides accessible name when visible text isn't sufficient -->
+<button aria-label="Close newsletter subscription dialog">×</button>
+
+<!-- aria-labelledby: References existing text as the accessible name -->
+<section aria-labelledby="news-heading">
+  <h2 id="news-heading">Latest News</h2>
+  <!-- news content -->
+</section>
+
+<!-- aria-describedby: Links to additional descriptive text -->
+<input type="password" 
+       aria-describedby="pwd-requirements pwd-strength"
+       required>
+<div id="pwd-requirements">
+  Password must contain at least 8 characters, including uppercase, lowercase, and numbers.
+</div>
+<div id="pwd-strength" aria-live="polite">
+  <!-- Dynamic password strength indicator -->
+</div>
+```
+
+**動態內容的即時區域：**
+
+```html
+<!-- Polite announcements (don't interrupt current speech) -->
+<div aria-live="polite" id="status-updates">
+  <!-- Status messages appear here -->
+</div>
+
+<!-- Assertive announcements (interrupt and announce immediately) -->
+<div aria-live="assertive" id="urgent-alerts">
+  <!-- Error messages and critical alerts -->
+</div>
+
+<!-- Loading states with live regions -->
+<button id="submit-btn" aria-describedby="loading-status">
+  Submit Application
+</button>
+<div id="loading-status" aria-live="polite" aria-atomic="true">
+  <!-- "Processing your application..." appears here -->
+</div>
+```
+
+**互動元件範例（手風琴）：**
+
+```html
+<div class="accordion">
+  <h3>
+    <button aria-expanded="false" 
+            aria-controls="panel-1" 
+            id="accordion-trigger-1"
+            class="accordion-trigger">
+      Accessibility Guidelines
+    </button>
+  </h3>
+  <div id="panel-1" 
+       role="region"
+       aria-labelledby="accordion-trigger-1" 
+       hidden>
+    <p>WCAG 2.1 provides comprehensive guidelines...</p>
+  </div>
+</div>
+```
+
+```javascript
+// 用於管理手風琴狀態的 JavaScript
+function toggleAccordion(trigger) {
+  const panel = document.getElementById(trigger.getAttribute('aria-controls'));
+  const isExpanded = trigger.getAttribute('aria-expanded') === 'true';
+  
+  // 切換狀態
+  trigger.setAttribute('aria-expanded', !isExpanded);
+  panel.hidden = isExpanded;
+  
+  // 向螢幕閱讀器宣告變更
+  const status = document.getElementById('status-updates');
+  status.textContent = isExpanded ? 'Section collapsed' : 'Section expanded';
+}
+```
+
+### ARIA 實作最佳實踐
+
+ARIA 功能強大，但實作時需謹慎。遵循以下指引有助於確保你的 ARIA 是提升無障礙，而非阻礙：
+
+**🛡️ 核心原則：**
+
+```mermaid
+flowchart TD
+    A[🚀 從語意化 HTML 開始] --> B{HTML 是否提供所需語意？}
+    B -->|是| C[✅ 僅使用 HTML]
+    B -->|否| D[考慮使用 ARIA 強化]
+    D --> E{是否能用較簡單方法達成？}
+    E -->|是| F[🔄 簡化方法]
+    E -->|否| G[📝 小心實作 ARIA]
+    G --> H[🧪 使用真實輔具測試]
+    H --> I{如預期般運作？}
+    I -->|否| J[🔧 除錯並修正]
+    I -->|是| K[✅ 成功！]
+    J --> H
+    F --> C
+    
+    style A fill:#e3f2fd
+    style C fill:#e8f5e8
+    style K fill:#e8f5e8
+    style G fill:#fff3e0
+    style H fill:#f3e5f5
+```
+1. **優先語義化 HTML**：永遠優先使用 `<button>`，而非 `<div role="button">`
+2. **不破壞語義**：切勿覆蓋既有 HTML 意義（避免 `<h1 role="button">`）
+3. **維持鍵盤無障礙**：所有互動式 ARIA 元素必須完全支援鍵盤操作
+4. **與真實用戶測試**：不同輔助技術對 ARIA 支援有顯著差異
+5. **從簡開始**：複雜的 ARIA 實作較易出錯
+
+**🔍 測試流程：**
+
+```mermaid
+graph TD
+    A[撰寫 ARIA 程式碼] --> B[驗證 HTML]
+    B --> C[僅使用鍵盤測試]
+    C --> D[使用螢幕閱讀器測試]
+    D --> E[跨瀏覽器測試]
+    E --> F{發現問題？}
+    F -->|是| G[修正並重新測試]
+    F -->|否| H[實作完成]
+    G --> B
+```
+**🚫 避免常見 ARIA 錯誤：**
+
+- **資訊衝突**：勿與 HTML 語義矛盾
+- **重複標記**：過多 ARIA 資訊會淹沒使用者
+- **靜態 ARIA**：忘記在內容變更時更新 ARIA 狀態
+- **未測試實作**：理論可行，但實際失效的 ARIA
+- **缺少鍵盤支援**：角色宣告卻無相應鍵盤互動
+
+> 💡 **測試資源**：使用 [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) 等工具做自動 ARIA 驗證，但務必以實際螢幕閱讀器測試完整體驗。
+
+### 🎭 **ARIA 技能檢核：準備好複雜互動了嗎？**
+
+**評估你的 ARIA 信心：**
+- 你會在哪些情況下選擇 ARIA 而非語義 HTML？（提示：幾乎不會！）
+- 能解釋為什麼 `<div role="button">` 通常不如 `<button>` 嗎？
+- ARIA 測試最重要的事情是什麼？
+
+```mermaid
+pie title "常見的 ARIA 使用模式"
+    "標籤與描述" : 40
+    "動態區域" : 25
+    "元件狀態" : 20
+    "複雜控制項" : 15
+```
+> **關鍵洞見**：大多數 ARIA 使用僅為標記及描述元素。複雜元件模式遠不如你想像中常見！
+
+✅ **向專家學習**：研讀 [ARIA 編寫實踐指南](https://w3c.github.io/aria-practices/) ，掌握經過實戰驗證的複雜互動元件範式與實作。
+
+## 讓圖片及多媒體無障礙
+
+視覺和音訊內容是現代網頁體驗不可或缺的部分，但若未周全考量，會成為障礙。目標是讓你的媒體資訊與情感影響能觸及所有使用者。一旦習慣，就會變成第二天性。
+
+不同類型的媒體需不同的無障礙方法。就像料理一樣，你不會用同一種方式料理細緻魚肉與厚實牛排。理解這些差異有助於選擇適合每種情境的解決方案。
+
+### 策略型圖片無障礙
+
+網站上的每張圖片都承載著目的。了解這項目的有助於撰寫更佳替代文字，創造更包容的體驗。
+
+**四類圖片與其替代文字策略：**
+
+**具資訊性的圖片** - 傳達重要資訊：
+```html
+<img src="../../../../translated_images/chart.31c7eb0eb5c4450d.tw.png" alt="Sales increased 25% from Q1 to Q2 2024">
+```
+
+**裝飾性圖片** - 純視覺無資訊價值：
+```html
+<img src="../../../../translated_images/decorative-border.b2f3c4d6634fb79d.tw.png" alt="" role="presentation">
+```
+
+**功能性圖片** - 作為按鈕或控制元件：
+```html
+<button>
+  <img src="search-icon.svg" alt="Search">
+</button>
+```
+
+**複雜圖片** - 圖表、示意圖、資訊圖表：
+```html
+<img src="../../../../translated_images/complex-chart.c831f461a363b446.tw.png" alt="Quarterly sales data" aria-describedby="chart-description">
+<div id="chart-description">
+  <p>Detailed description: Sales data shows a steady increase across all quarters...</p>
+</div>
+```
+
+### 影片與音訊無障礙
+
+**影片需求：**
+- **字幕**：口語內容與音效的文字版本
+- **音訊描述**：為盲用戶描述視覺元素的旁白
+- **文字稿**：全部音訊與視覺內容的完整文字版本
+
+```html
+<video controls>
+  <source src="video.mp4" type="video/mp4">
+  <track kind="captions" src="captions.vtt" srclang="en" label="English">
+  <track kind="descriptions" src="descriptions.vtt" srclang="en" label="Audio descriptions">
+</video>
+```
+
+**音訊需求：**
+- **文字稿**：所有口語內容的文字版本
+- **視覺提示**：音訊專用內容應提供視覺線索
+
+### 現代圖片技巧
+
+**使用 CSS 處理裝飾性圖片：**
+```css
+.hero-section {
+  background-image: url('decorative-hero.jpg');
+  /* Decorative images in CSS don't need alt text */
+}
+```
+
+**支援無障礙的響應式圖片：**
+```html
+<picture>
+  <source media="(min-width: 800px)" srcset="large-chart.png">
+  <source media="(min-width: 400px)" srcset="medium-chart.png">
+  <img src="../../../../translated_images/small-chart.c50c7b1bbcce43d8.tw.png" alt="Website traffic increased 40% after accessibility improvements">
+</picture>
+```
+
+✅ **測試圖片無障礙**：使用螢幕閱讀器瀏覽有圖片的頁面。你能獲得足以理解內容的資訊嗎？
+
+## 鍵盤導覽與焦點管理
+
+許多使用者完全依靠鍵盤瀏覽網頁。包括肢體障礙者、認為鍵盤比滑鼠更快速的進階用戶，以及滑鼠失效者。確保網站良好支援鍵盤操作非常重要，且往往使整體網站更高效。
+
+```mermaid
+flowchart LR
+    A[⌨️ 鍵盤導航] --> B[標籤鍵順序]
+    A --> C[焦點指示器]
+    A --> D[跳過連結]
+    A --> E[鍵盤快速鍵]
+    
+    B --> B1[邏輯順序<br/>所有互動元素<br/>無標籤鍵陷阱]
+    C --> C1[可見輪廓<br/>高對比<br/>明確邊界]
+    D --> D1[跳至主內容<br/>跳至導覽<br/>繞過重複]
+    E --> E1[Esc 鍵關閉<br/>Enter 鍵啟動<br/>群組中的方向鍵]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+```
+### 基本鍵盤導覽範式
+
+**標準鍵盤互動：**
+- **Tab**：往前跳轉焦點至互動元素
+- **Shift + Tab**：往後跳轉焦點
+- **Enter**：啟動按鈕與連結
+- **Space**：啟動按鈕、核取方塊
+- **方向鍵**：在元件群組中導航（單選按鈕、選單）
+- **Escape**：關閉模態視窗、下拉選單或取消操作
+
+### 焦點管理最佳實踐
+
+**可見焦點指標：**
+```css
+/* Ensure focus is always visible */
+button:focus-visible {
+  outline: 2px solid #4A90A4;
+  outline-offset: 2px;
+}
+
+/* Custom focus styles for different components */
+.card:focus-within {
+  box-shadow: 0 0 0 3px rgba(74, 144, 164, 0.5);
+}
+```
+
+**跳過連結以提升導航效率：**
+```html
+<a href="#main-content" class="skip-link">Skip to main content</a>
+<a href="#navigation" class="skip-link">Skip to navigation</a>
+
+<nav id="navigation">
+  <!-- navigation content -->
+</nav>
+<main id="main-content">
+  <!-- main content -->
+</main>
+```
+
+**正確的 Tab 順序：**
+```html
+<!-- Use semantic HTML for natural tab order -->
+<form>
+  <label for="name">Name:</label>
+  <input type="text" id="name" tabindex="0">
+  
+  <label for="email">Email:</label>
+  <input type="email" id="email" tabindex="0">
+  
+  <button type="submit" tabindex="0">Submit</button>
+</form>
+```
+
+### 模態框的焦點圈養
+
+開啟模態對話框時，焦點應限制於對話框內：
+
+```javascript
+// 現代焦點限制實作
+function trapFocus(element) {
+  const focusableElements = element.querySelectorAll(
+    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+  );
+  
+  const firstElement = focusableElements[0];
+  const lastElement = focusableElements[focusableElements.length - 1];
+
+  element.addEventListener('keydown', (e) => {
+    if (e.key === 'Tab') {
+      if (e.shiftKey && document.activeElement === firstElement) {
+        e.preventDefault();
+        lastElement.focus();
+      } else if (!e.shiftKey && document.activeElement === lastElement) {
+        e.preventDefault();
+        firstElement.focus();
+      }
+    }
+    
+    if (e.key === 'Escape') {
+      closeModal();
+    }
+  });
+  
+  // 模態視窗開啟時聚焦第一個元素
+  firstElement.focus();
+}
+```
+
+✅ **測試鍵盤導覽**：嘗試僅使用 Tab 鍵瀏覽網站。你能順利抵達所有互動元件嗎？焦點順序合理嗎？焦點指示明顯嗎？
+
+## 表單無障礙
+
+表單是使用者互動關鍵，需特別關注無障礙需求。
+
+### 標籤與表單控制元件配對
+
+**每個表單控制元件都須有標籤：**
+```html
+<!-- Explicit labeling (preferred) -->
+<label for="username">Username:</label>
+<input type="text" id="username" name="username" required>
+
+<!-- Implicit labeling -->
+<label>
+  Password:
+  <input type="password" name="password" required>
+</label>
+
+<!-- Using aria-label when visual label isn't desired -->
+<input type="search" aria-label="Search products" placeholder="Search...">
+```
+
+### 錯誤處理與驗證
+
+**無障礙錯誤訊息：**
+```html
+<label for="email">Email Address:</label>
+<input type="email" id="email" name="email" 
+       aria-describedby="email-error" 
+       aria-invalid="true" required>
+<div id="email-error" role="alert">
+  Please enter a valid email address
+</div>
+```
+
+**表單驗證最佳實踐：**
+- 使用 `aria-invalid` 標示錯誤欄位
+- 提供明確、具體的錯誤訊息
+- 重要錯誤使用 `role="alert"` 通知
+- 錯誤訊息於輸入即時與送出時皆提示
+
+### 群組與欄位集
+
+**關聯性強的表單控制元件需分組：**
+```html
+<fieldset>
+  <legend>Shipping Address</legend>
+  <label for="street">Street Address:</label>
+  <input type="text" id="street" name="street">
+  
+  <label for="city">City:</label>
+  <input type="text" id="city" name="city">
+</fieldset>
+
+<fieldset>
+  <legend>Preferred Contact Method</legend>
+  <input type="radio" id="contact-email" name="contact" value="email">
+  <label for="contact-email">Email</label>
+  
+  <input type="radio" id="contact-phone" name="contact" value="phone">
+  <label for="contact-phone">Phone</label>
+</fieldset>
+```
+
+## 你的無障礙旅程：重點摘要
+
+恭喜！你剛取得創造真正包容網頁體驗的基礎知識。這非常令人振奮！網頁無障礙不僅是打勾合規清單，更是意識到人們與數位內容互動的多元方式，並為這驚人複雜性而設計。
+
+你已成為越來越多理解優秀設計適用於所有人的開發者社群成員。歡迎加入！
+
+**🎯 你的無障礙工具包現包括：**
+
+| 核心原則           | 實作方式                            | 影響                            |
+|------------------|--------------------------------|-------------------------------|
+| **語義化 HTML 基礎** | 正確使用 HTML 元素               | 螢幕閱讀器導航順暢，鍵盤自動正常運作      |
+| **包容性視覺設計**  | 充足對比、有意義的色彩、明顯焦點指示        | 在任何光線環境下皆能清楚辨識               |
+| **描述性內容**      | 有意義的連結文字、替代文字、標題           | 無視覺上下文下使用者仍能理解內容           |
+| **鍵盤無障礙**      | Tab 順序、鍵盤捷徑、焦點管理               | 改善肢體無障礙者體驗與進階使用者效率       |
+| **ARIA 強化**       | 策略性使用補足語義不足                   | 複雜應用能與輔助技術順利互動               |
+| **全面測試**       | 自動工具 + 手動驗證 + 真實用戶測試          | 問題能被及早發現，減少影響使用者          |
+
+**🚀 你的下一步：**
+
+1. **將無障礙納入工作流程**：讓測試成為開發流程的自然部分
+2. **向真實使用者學習**：聽取採用輔助技術者的回饋
+3. **保持最新**：無障礙技術隨新標準和技術演進
+4. **倡導包容**：分享你的知識，將無障礙列為團隊優先
+
+> 💡 **請記得**：無障礙限制往往激發創新、優雅解決方案。路緣斜坡、字幕與語音控制曾是無障礙功能，如今成為主流改良。
+
+**商業理由很明確**：無障礙網站可接觸更多用戶、於搜尋引擎排名更佳、降低維護成本、避開法律風險。但老實說，關注無障礙的真正理由更深遠。無障礙網站體現網路最佳價值——開放性、包容性，以及每個人都應享有平等資訊取得權。
+
+你現已具備建構未來包容性網路的能力。你建置的每個無障礙網站都讓網際網路成為更歡迎每個人的空間。想想看，這真的很棒！
+
+## 附加資源
+
+持續你的無障礙學習之旅，這些是必備資源：
+
+**📚 官方標準與指引：**
+- [WCAG 2.1 指引](https://www.w3.org/WAI/WCAG21/quickref/) - 官方無障礙標準與快速參考
+- [ARIA 編撰實踐指南](https://w3c.github.io/aria-practices/) - 互動元件詳盡範式
+- [WebAIM 指引](https://webaim.org/) - 實用且適合初學者的無障礙指導
+
+**🛠️ 工具與測試資源：**
+- [axe DevTools](https://www.deque.com/axe/devtools/) - 業界標準無障礙測試工具
+- [A11y Project 清單](https://www.a11yproject.com/checklist/) - 逐步驗證無障礙準則
+- [Accessibility Insights](https://accessibilityinsights.io/) - 微軟完整測試套件
+- [Color Oracle](https://colororacle.org/) - 色盲模擬器，協助設計測試
+
+**🎓 學習與社群：**
+- [WebAIM 螢幕閱讀器調查](https://webaim.org/projects/screenreadersurvey9/) - 真實用戶偏好與行為
+- [Inclusive Components](https://inclusive-components.design/) - 現代無障礙元件範式
+- [A11y Coffee](https://a11y.coffee/) - 快速無障礙技巧與洞察
+- [Web Accessibility Initiative (WAI)](https://www.w3.org/WAI/) - W3C 全面無障礙資源
+
+**🎥 實作學習：**
+- [Accessibility Developer Guide](https://www.accessibility-developer-guide.com/) - 實用實作指導
+- [Deque University](https://dequeuniversity.com/) - 專業無障礙培訓課程
+
+## GitHub Copilot Agent 挑戰 🚀
+
+使用 Agent 模式完成以下挑戰：
+
+**說明：** 建立一個無障礙模態對話框元件，展示適當的焦點管理、ARIA 屬性和鍵盤導航範式。
+
+**提示：** 使用 HTML、CSS 與 JavaScript 建構完整模態對話框，包含：正確的焦點圈養、ESC 鍵關閉、點擊外部關閉、為螢幕閱讀器加上 ARIA 屬性及可見焦點指示。模態框內含表單，具有正確標籤與錯誤處理。確保元件符合 WCAG 2.1 AA 標準。
 
----
 
 ## 🚀 挑戰
 
-將以下 HTML 重寫為盡可能無障礙，運用您學到的策略。
+使用你學到的策略，將此 HTML 重寫成盡可能無障礙的版本。
 
 ```html
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
-    <title>
-      Example
-    </title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Turtle Ipsum - The World's Premier Turtle Fan Club</title>
     <link href='../assets/style.css' rel='stylesheet' type='text/css'>
   </head>
   <body>
-    <div class="site-header">
-      <p class="site-title">Turtle Ipsum</p>
+    <header class="site-header">
+      <h1 class="site-title">Turtle Ipsum</h1>
       <p class="site-subtitle">The World's Premier Turtle Fan Club</p>
-    </div>
-    <div class="main-nav">
-      <p class="nav-header">Resources</p>
-      <div class="nav-list">
-        <p class="nav-item nav-item-bull"><a href="https://www.youtube.com/watch?v=CMNry4PE93Y">"I like turtles"</a></p>
-        <p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtle">Basic Turtle Info</a></p>
-        <p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtles_(chocolate)">Chocolate Turtles</a></p>
-      </div>
-    </div>
-    <div class="main-content">
-      <div>
-        <p class="page-title">Welcome to Turtle Ipsum. 
-            <a href="">Click here</a> to learn more.
+    </header>
+    
+    <nav class="main-nav" aria-label="Main navigation">
+      <h2 class="nav-header">Resources</h2>
+      <ul class="nav-list">
+        <li><a href="https://www.youtube.com/watch?v=CMNry4PE93Y">"I like turtles" video</a></li>
+        <li><a href="https://en.wikipedia.org/wiki/Turtle">Basic turtle information</a></li>
+        <li><a href="https://en.wikipedia.org/wiki/Turtles_(chocolate)">Chocolate turtles candy</a></li>
+      </ul>
+    </nav>
+    
+    <main class="main-content">
+      <article>
+        <h1>Welcome to Turtle Ipsum</h1>
+        <p class="intro">
+          <a href="/about">Learn more about our turtle community</a> and discover fascinating facts about these amazing creatures.
         </p>
         <p class="article-text">
-          Turtle ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
-        </p>
-      </div>
-    </div>
-    <div class="footer">
-      <div class="footer-section">
-        <span class="button">Sign up for turtle news</span>
-      </div><div class="footer-section">
-        <p class="nav-header footer-title">
-          Internal Pages
+          Turtle ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
         </p>
-        <div class="nav-list">
-          <p class="nav-item nav-item-bull"><a href="../">Index</a></p>
-          <p class="nav-item nav-item-bull"><a href="../semantic">Semantic Example</a></p>
-        </div>
-      </div>
-      <p class="footer-copyright">&copy; 2016 Instrument</p>
-    </div>
+      </article>
+    </main>
+    
+    <footer class="footer">
+      <section class="newsletter-signup">
+        <h2>Stay Updated</h2>
+        <button type="button" onclick="showNewsletterForm()">Sign up for turtle news</button>
+      </section>
+      
+      <nav class="footer-nav" aria-label="Footer navigation">
+        <h2>Site Pages</h2>
+        <ul>
+          <li><a href="../">Home</a></li>
+          <li><a href="../semantic">Semantic HTML example</a></li>
+        </ul>
+      </nav>
+      
+      <p class="footer-copyright">&copy; 2024 Instrument. All rights reserved.</p>
+    </footer>
   </body>
 </html>
 ```
 
+**主要改進：**
+- 加入正確語義化 HTML 結構
+- 修正標題階層（單一 h1，合邏輯的進階順序）
+- 使用有意義的連結文字，替代「點此」
+- 增加導航的適當 ARIA 標籤
+- 新增 lang 屬性與正確的 meta 標籤
+- 互動元件以 button 元素呈現
+- 使用適當地標結構組織頁尾內容
+
 ## 課後測驗
 [課後測驗](https://ff-quizzes.netlify.app/web/en/)
 
-## 回顧與自學
-許多國家政府對於無障礙需求有相關法律規定。請查閱您所在國家的無障礙法律，了解涵蓋的範圍以及未涵蓋的部分。例如：[這個政府網站](https://accessibility.blog.gov.uk/)。
+## 複習與自學
+
+許多國家有關於無障礙的法律規範。查閱你所在國家無障礙相關法律，涵蓋哪些範圍，哪些未涵蓋？範例是 [此政府網站](https://accessibility.blog.gov.uk/)。
 
 ## 作業
+ 
+[分析一個非無障礙網站](assignment.md)
 
-[分析一個不符合無障礙標準的網站](assignment.md)
+致謝：[Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) 由 Instrument 製作
 
-來源: [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) by Instrument
+---
+
+## 🚀 你的無障礙精通時間軸
+
+### ⚡ **接下來 5 分鐘能做到什麼**
+- [ ] 在瀏覽器安裝 axe DevTools 擴充功能
+- [ ] 對你喜歡的網站執行 Lighthouse 無障礙檢測
+- [ ] 嘗試僅用 Tab 鍵瀏覽任何網站
+- [ ] 測試瀏覽器內建螢幕閱讀器（Narrator/VoiceOver）
+
+### 🎯 **本小時內能完成的事**
+- [ ] 完成課後測驗並反思無障礙學習心得
+- [ ] 練習為 10 張不同圖片撰寫有意義替代文字
+- [ ] 使用 HeadingsMap 擴充檢視網站標題結構
+- [ ] 修正挑戰中 HTML 發現的無障礙問題
+- [ ] 以 WebAIM 工具測試目前專案的色彩對比
+
+### 📅 **本週無障礙學習計劃**
+- [ ] 完成分析非無障礙網站的作業
+- [ ] 設置開發環境並整合無障礙測試工具
+- [ ] 在 5 個不同的複雜網站上練習鍵盤導覽
+- [ ] 建立一個具有適當標籤、錯誤處理和 ARIA 的簡單表單
+- [ ] 加入一個無障礙社群（A11y Slack、WebAIM 論壇）
+- [ ] 觀看實際有障礙的使用者瀏覽網站（YouTube 有很棒的範例）
+
+### 🌟 **你的為期一個月的轉變**
+- [ ] 將無障礙測試整合到你的開發工作流程中
+- [ ] 透過修正無障礙問題來貢獻開源專案
+- [ ] 與使用輔助技術的人員進行可用性測試
+- [ ] 為你的團隊建立一個無障礙元件庫
+- [ ] 在工作場所或社群中推廣無障礙
+- [ ] 指導無障礙概念的新手
+
+### 🏆 **無障礙冠軍的最終回顧**
+
+**慶祝你的無障礙旅程：**
+- 你對人們如何使用網路學到的最令人驚訝的事情是什麼？
+- 哪一項無障礙原則最貼近你的開發風格？
+- 學習無障礙後，你對設計的看法有何改變？
+- 你想在真實專案中優先做的第一個無障礙改進是什麼？
+
+```mermaid
+journey
+    title 你的無障礙信心演變
+    section 今天
+      壓力山大: 3: 你
+      好奇: 4: 你
+      有動力: 5: 你
+    section 本週
+      練習中: 4: 你
+      測試中: 5: 你
+      理解中: 5: 你
+    section 下個月
+      倡導中: 5: 你
+      領導中: 5: 你
+      預設包容: 5: 你
+```
+> 🌍 **你現在是一位無障礙冠軍！** 你了解優秀的網頁體驗適用於所有人，無論他們如何瀏覽網路。你所建立的每個無障礙功能都讓網際網路更具包容性。網路需要像你這樣的開發者，他們不將無障礙視為負擔，而是視為為所有使用者創造更佳體驗的機會。歡迎加入這場運動！ 🎉
 
 ---
 
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
 **免責聲明**：  
-本文件使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。應以原始語言的文件作為權威來源。對於關鍵資訊，建議尋求專業人工翻譯。我們對因使用此翻譯而產生的任何誤解或錯誤解讀概不負責。
\ No newline at end of file
+本文件係使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們致力於確保翻譯準確，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件之原文版本應視為權威依據。對於重要資訊，建議尋求專業人工翻譯。我們對因使用本翻譯所產生之任何誤解或誤釋概不負責。
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->
\ No newline at end of file
diff --git a/translations/tw/1-getting-started-lessons/3-accessibility/assignment.md b/translations/tw/1-getting-started-lessons/3-accessibility/assignment.md
index 79c004c3..74d2e47b 100644
--- a/translations/tw/1-getting-started-lessons/3-accessibility/assignment.md
+++ b/translations/tw/1-getting-started-lessons/3-accessibility/assignment.md
@@ -1,27 +1,261 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "a258597a194e77d4fd469b3cd976b29e",
-  "translation_date": "2025-08-23T23:26:31+00:00",
+  "original_hash": "e6d0f456dfc22afb41bbdefeb5ec179d",
+  "translation_date": "2026-01-06T14:22:31+00:00",
   "source_file": "1-getting-started-lessons/3-accessibility/assignment.md",
   "language_code": "tw"
 }
 -->
-# 分析一個無法訪問的網站
+# 全面性網站無障礙審核
 
-## 指導說明
+## 指示
 
-找出一個您認為無法訪問的網站，並制定一個行動計劃來改善其可訪問性。  
-您的第一個任務是識別這個網站，詳細說明您認為它無法訪問的方式（不使用分析工具），然後提交給 Lighthouse 進行分析。將此分析的結果保存為 PDF，並列出一個包含至少十點的詳細計劃，說明如何改進該網站。
+在此作業中，您將對一個真實網站進行專業等級的無障礙審核，應用您所學的原則與技術。這種實作經驗將深化您對無障礙障礙與解決方案的理解。
 
-## 測試網站可訪問性的表格
+選擇一個看起來存在無障礙問題的網站—相較於分析一個已完美無瑕的網站，這能提供更多學習機會。良好候選網站包括舊版網站、複雜的網頁應用程式或含有豐富多媒體內容的網站。
 
-| 標準     | 優秀       | 足夠       | 需要改進         |
-|----------|-----------|----------|----------------|
-|          | 缺少不到 10% 的要求 | 缺少 20% 的要求  | 缺少 50% 的要求  |
+### 階段 1：策略性手動評估
 
-----
-學生報告：包括關於網站無法訪問程度的段落、以 PDF 保存的 Lighthouse 報告、一份包含十點改進建議的清單，以及如何改進的詳細說明
+在使用自動工具前，先進行全面的手動評估。這種以人為中心的方法常能揭露工具無法察覺的問題，並幫助您理解真實使用者體驗。
 
+**🔍 重要評估標準：**
+
+**導覽與結構：**
+- 您能否僅使用鍵盤（Tab、Shift+Tab、Enter、空白鍵、方向鍵）導航整個網站？
+- 所有互動元素是否有明顯的焦點指示？
+- 標題結構（H1-H6）是否建立了邏輯性內容大綱？
+- 是否有跳轉主內容的跳過連結？
+
+**視覺無障礙：**
+- 全站是否有足夠的色彩對比（一般文字至少 4.5:1）？
+- 網站是否僅靠顏色傳達重要資訊？
+- 所有圖片是否都有合適的替代文字？
+- 當放大至 200% 時，版面是否仍保持功能性？
+
+**內容與溝通：**
+- 是否存在「點此」或含糊的連結文字？
+- 您是否能在無視覺提示下理解內容與功能？
+- 表單欄位是否正確標記與群組？
+- 錯誤訊息是否清楚且有幫助？
+
+**互動元素：**
+- 所有按鈕和表單控制項是否能僅用鍵盤操作？
+- 動態內容更動是否會向螢幕閱讀器公告？
+- 模態對話框及複雜的元件是否遵循適當的無障礙模式？
+
+📝 **記錄您的發現**，包含具體範例、截圖及頁面 URL。記下問題與優點。
+
+### 階段 2：全面自動化測試
+
+現在使用業界標準的無障礙測試工具驗證並擴充您的手動結果。每種工具有不同強項，多工具並用可達到完整覆蓋。
+
+**🛠️ 必要測試工具：**
+
+1. **Lighthouse 無障礙審核**（內建於 Chrome/Edge 開發者工具）
+   - 對多個頁面執行審核
+   - 聚焦於特定指標與建議
+   - 記錄無障礙分數與具體違規事項
+
+2. **axe DevTools**（瀏覽器擴充元件－業界標準）
+   - 識別問題比 Lighthouse 更詳盡
+   - 提供具體修正程式碼範例
+   - 依據 WCAG 2.1 標準測試
+
+3. **WAVE Web Accessibility Evaluator**（瀏覽器擴充元件）
+   - 無障礙特性視覺化呈現
+   - 標示錯誤與正面特徵
+   - 協助理解頁面結構
+
+4. **色彩對比分析工具**
+   - WebAIM 對比檢查器用於指定顏色配對
+   - 瀏覽器擴充元件做整頁分析
+   - 依照 WCAG AA 及 AAA 標準測試
+
+**🎧 真實輔助技術測試：**
+- **螢幕閱讀器測試**：使用 NVDA（Windows）、VoiceOver（Mac）、或 TalkBack（Android）
+- **純鍵盤導覽**：拔掉滑鼠，完全以鍵盤瀏覽網站
+- **縮放測試**：於 200% 和 400% 縮放比例測試功能
+- **語音控制測試**：如果可用，試用語音導航工具
+
+**📊 整理結果**，建立主控試算表紀錄：
+- 問題描述及位置
+- 嚴重程度（關鍵/高/中/低）
+- 違反 WCAG 成功標準
+- 探測該問題的工具
+- 截圖和證據
+
+### 階段 3：完整發現報告撰寫
+
+製作專業的無障礙審核報告，展現您對技術問題及其對人的影響的理解。
+
+**📋 報告必備章節：**
+
+1. **執行摘要**（1頁）
+   - 網站 URL 與簡要描述
+   - 整體無障礙成熟度評估
+   - 3大最關鍵問題
+   - 估計對身障用戶之影響
+
+2. **方法論**（½頁）
+   - 測試方式與所用工具
+   - 評估的頁面與設備/瀏覽器組合
+   - 遵循標準（WCAG 2.1 AA）
+
+3. **詳細發現**（2-3頁）
+   - 依 WCAG 原則分類（可感知、可操作、可理解、穩定性）
+   - 附帶截圖與具體範例
+   - 記錄您發現的正面無障礙特性
+   - 與自動工具結果互相參照
+
+4. **使用者影響評估**（1頁）
+   - 發現問題如何影響不同障礙類型用戶
+   - 描述實際使用者情境
+   - 商業影響（法律風險、SEO、用戶擴展）
+
+**📸 證據蒐集：**
+- 無障礙違規截圖
+- 問題使用流程的螢幕錄影
+- 工具報告（PDF格式保存）
+- 顯示問題的程式碼範例
+
+### 階段 4：專業修復計畫
+
+制定一份策略性且有優先次序的修復計畫，顯示您具備像專業網頁開發者一樣，能兼顧真實商業限制的問題解決能力。
+
+**🎯 編寫至少 10 個問題的詳細改善建議：**
+
+**每個已識別問題需包含：**
+
+- **問題描述**：清楚說明錯誤及其問題所在
+- **WCAG 參考**：具體違反的成功標準（例如「2.4.4 鏈結用途（上下文中）－A級」）
+- **使用者影響**：影響不同障礙用戶的方式
+- **解決方案**：具體程式碼修改、設計調整或流程改進
+- **優先級別**：關鍵（阻礙基本使用）／高（重大障礙）／中（可用性問題）／低（優化）
+- **實作難易度**：所需時間／複雜度估計（快速修復／中度努力／重大重構）
+- **測試驗證**：如何確認修復有效
+
+**改善建議範例：**
+
+```
+Issue: Generic "Read more" link text appears 8 times on homepage
+WCAG Reference: 2.4.4 Link Purpose (In Context) - Level A
+User Impact: Screen reader users cannot distinguish between links when viewed in link list
+Solution: Replace with descriptive text like "Read more about sustainability initiatives"
+Priority: High (major navigation barrier)
+Effort: Low (30 minutes to update content)
+Testing: Generate link list with screen reader - each link should be meaningful standalone
+```
+
+**📈 策略實施階段：**
+
+- **階段 1（0-2 週）**：阻礙基本功能的關鍵問題
+- **階段 2（1-2 個月）**：優先改善以增進使用體驗
+- **階段 3（3-6 個月）**：中優先度增強與流程優化
+- **階段 4（持續進行）**：持續監控與改善
+
+## 評分標準
+
+您的無障礙審核將根據技術準確度與專業呈現進行評分：
+
+| 評分項目 | 優秀（90-100%） | 良好（80-89%） | 滿意（70-79%） | 需改進（<70%） |
+|----------|-------------------|---------------|---------------------|------------------------|
+| **手動測試深度** | 全面評估涵蓋所有 POUR 原則，具體觀察與使用場景詳實 | 良好覆蓋大多數無障礙領域，含清晰發現與部分使用者影響分析 | 基本評估涵蓋主要範圍，觀察適當 | 測試有限，觀察淺顯，使用者影響考量不足 |
+| **工具使用與分析** | 有效善用所有必備工具，交叉參照發現，證據清楚，分析工具限制 | 多數工具使用良好，文件充分，部分交叉參照，證據足夠 | 必備工具使用，基礎文件與部分證據 | 工具使用不充分，文件欠缺或無證據 |
+| **問題識別與分類** | 辨認 15 個以上具體問題，涵蓋所有 WCAG 原則，正確分類嚴重度，理解深刻 | 辨認 10-14 問題，涵蓋多數 WCAG 原則，分類良好，理解穩健 | 辨認 7-9 問題，對 WCAG 覆蓋基礎，分類基本 | 辨認少於 7 問題，範圍有限或分類不佳 |
+| **解決方案品質與可行性** | 10+ 詳細可行方案，準確 WCAG 參考，實作時程合理，驗證方法明確 | 8-9 成熟方案，參考準確，實施細節良好 | 6-7 基本方案，有些細節，方法大致可行 | 少於 6 解決方案，細節不足，實施不切實際 |
+| **專業溝通** | 報告組織優秀，清晰撰寫，有執行摘要，技術語言恰當，符合商業文件標準 | 組織良好，文筆良好，包含大部分要求章節，語調恰當 | 組織與寫作尚可，含基本必須章節 | 組織差，文字不清楚，缺少重要章節 |
+| **實務應用能力** | 展現業務影響、法律考量、用戶多樣性與實作挑戰的理解 | 展現良好實務了解與部分商業脈絡 | 基本實務應用認知 | 與實務應用連結有限 |
+
+## 進階挑戰選項
+
+**🚀 進階挑戰學生專用：**
+
+- **比較分析**：審核 2-3 個競爭網站，並比較其無障礙成熟度
+- **行動裝置無障礙聚焦**：深入研究行動裝置特有無障礙問題，使用 Android TalkBack 或 iOS VoiceOver
+- **國際觀點**：研究並應用不同國家無障礙標準（EN 301 549、Section 508、ADA）
+- **無障礙聲明審核**：根據您的發現評估網站現有的無障礙聲明（如有）
+
+## 成果交付
+
+提交一份展示專業分析與實務規劃的全面無障礙審核報告：
+
+**📄 最終報告需求：**
+
+1. **執行摘要**（1頁）
+   - 網站概述與無障礙成熟度評估
+   - 主要發現總結與商業影響
+   - 推薦優先行動
+
+2. **方法論與範圍**（1頁）
+   - 測試方法、使用工具與評估標準
+   - 評估頁面/區段及任何限制
+   - 標準遵從框架（WCAG 2.1 AA）
+
+3. **詳細發現報告**（3-4頁）
+   - 手動測試觀察與使用情境
+   - 自動工具結果與交叉參照
+   - 依 WCAG 原則分類問題與證據
+   - 認定的正面無障礙特性
+
+4. **策略修復計畫**（3-4頁）
+   - 優先排序的改進建議（最少 10 項）
+   - 實施時程與工作量估計
+   - 成功指標與驗證方法
+   - 長期無障礙維護策略
+
+5. **輔助證據**（附錄）
+   - 無障礙違規截圖與測試工具
+   - 顯示問題與解決方案的程式碼範例
+   - 工具報告與審核摘要
+   - 螢幕閱讀器測試筆記或錄音
+
+**📊 格式要求：**
+- **文件格式**：PDF（專業呈現）
+- **字數**：2,500-3,500字（不計附錄與截圖）
+- **視覺元素**：報告內含截圖、圖表與範例
+- **引用**：適當參照 WCAG 指南與無障礙資源
+
+**💡 卓越撰寫提示：**
+- 使用專業報告格式，標題與樣式一致
+- 包含目錄方便導覽
+- 技術精確與商業語言兼備
+- 展示技術施行與使用者影響理解
+
+## 學習成效
+
+完成此全面性無障礙審核後，您將具備重要專業技能：
+
+**🎯 技術能力：**
+- **無障礙測試精通**：熟練掌握業界標準手動與自動測試方法
+- **WCAG 應用**：實務運用網站內容無障礙指引於真實案例
+- **輔助技術認知**：實際操作螢幕閱讀器與鍵盤導航
+- **問題與解決對應**：能辨識無障礙障礙並制定具體可行的修復策略
+
+**💼 專業技能：**
+- **技術溝通**：撰寫專業報告，向多元利害關係人表達
+- **策略規劃能力**：根據使用者影響與實作可行性優先排序改進事項
+- **品質保證**：理解無障礙測試在開發生命週期的角色
+- **風險評估**：認知遵從無障礙的法律、商業與倫理涵義
+
+**🌍 包容設計心態：**
+- **使用者同理心**：深刻理解多元使用者需求與輔助工具互動
+- **通用設計原則**：認知無障礙設計不僅造福身障者，更惠及所有使用者
+- **持續改進框架**：建立持續評估與提升無障礙的系統
+- **倡議能力**：自信推動未來專案與團隊執行無障礙最佳實務
+
+**🚀 職涯準備：**
+此作業與真實世界無障礙顧問專案相仿，助您累積展示：
+- 系統性解決問題能力
+- 細膩兼顧技術細節與商業影響
+- 清晰溝通複雜技術概念
+- 理解法律與倫理責任於網頁開發
+
+完成後，您將能於任何網頁開發相關職務中有意義地推動無障礙倡議，並在職涯中持續支持包容性設計。
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
 **免責聲明**：  
-本文件使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。應以原始語言的文件作為權威來源。對於關鍵資訊，建議尋求專業人工翻譯。我們對於因使用此翻譯而引起的任何誤解或錯誤解釋概不負責。
\ No newline at end of file
+本文件係使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們致力於準確性，但請注意，自動翻譯可能包含錯誤或不準確之處。原文文件應視為權威來源。對於關鍵資訊，建議採用專業人工翻譯。我們不對因使用本翻譯所產生的任何誤解或錯誤詮釋負責。
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->
\ No newline at end of file
diff --git a/translations/tw/10-ai-framework-project/README.md b/translations/tw/10-ai-framework-project/README.md
index 1f081c12..5823fd66 100644
--- a/translations/tw/10-ai-framework-project/README.md
+++ b/translations/tw/10-ai-framework-project/README.md
@@ -1,41 +1,187 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "5fe046e7729ae6a24c717884bf875917",
-  "translation_date": "2025-10-11T14:21:45+00:00",
+  "original_hash": "3925b6a1c31c60755eaae4d578232c25",
+  "translation_date": "2026-01-06T13:18:53+00:00",
   "source_file": "10-ai-framework-project/README.md",
   "language_code": "tw"
 }
 -->
-# AI 框架
+# AI Framework
 
-市面上有許多 AI 框架，使用這些框架可以大幅縮短建立專案所需的時間。在本專案中，我們將專注於了解這些框架解決的問題，並親自建立一個相關的專案。
+曾經覺得從零開始建立 AI 應用程式壓力山大嗎？你並不孤單！AI 框架就像是為 AI 開發準備的瑞士軍刀——它們是強大的工具，能在建立智慧型應用程式時節省你的時間和麻煩。把 AI 框架想像成一個組織完善的函式庫：它提供預建元件、標準化的 API 和聰明的抽象，讓你可以專注於解決問題，而不是為了實作細節而苦惱。
 
-## 為什麼選擇框架
+在本課程中，我們將探索像 LangChain 這樣的框架，如何把過去複雜的 AI 整合工作轉化為乾淨、易讀的程式碼。你將發現如何應對實務挑戰，例如追蹤對話、實作工具呼叫，以及透過單一介面切換不同 AI 模型。
 
-在使用 AI 時，有不同的方式和理由選擇這些方式，以下是一些例子：
+到最後，你將知道什麼時候該選擇框架而非直接呼叫 API，如何有效運用它們的抽象，以及如何建構適合真實應用的 AI 應用程式。讓我們一起探索 AI 框架對你的專案能帶來什麼助益。
 
-- **無 SDK**：大多數 AI 模型允許您直接透過例如 HTTP 請求與模型互動。這種方式可行，並且在缺少 SDK 選項時可能是唯一的選擇。
-- **SDK**：使用 SDK 通常是推薦的方式，因為它可以減少與模型互動所需的程式碼量。通常 SDK 只適用於特定模型，如果需要使用不同的模型，可能需要撰寫新的程式碼來支援這些額外的模型。
-- **框架**：框架通常能將事情提升到另一個層次，例如需要使用不同的模型時，框架提供統一的 API，差異通常僅在於初始設定。此外，框架還提供有用的抽象，例如在 AI 領域，它們可以處理工具、記憶、工作流程、代理等，同時減少程式碼量。由於框架通常具有明確的設計理念，如果您接受它的運作方式，它會非常有幫助，但如果您嘗試做一些框架未設計的定制化操作，可能會遇到困難。有時框架可能過於簡化，導致您無法學習某些重要的主題，這可能在後期影響性能。
+## ⚡ 接下來 5 分鐘你能做到什麼
 
-總的來說，選擇適合工作的工具。
+**忙碌開發者的快速啟動路徑**
 
-## 簡介
+```mermaid
+flowchart LR
+    A[⚡ 5分鐘] --> B[安裝 LangChain]
+    B --> C[建立 ChatOpenAI 用戶端]
+    C --> D[發送第一個提示]
+    D --> E[見識框架威力]
+```
+- **第1分鐘**：安裝 LangChain：`pip install langchain langchain-openai`
+- **第2分鐘**：設定你的 GitHub 令牌並匯入 ChatOpenAI 物件
+- **第3分鐘**：建立簡單對話，包含系統訊息與使用者訊息
+- **第4分鐘**：加入基本工具（例如加法函式）並體驗 AI 工具呼叫
+- **第5分鐘**：感受原生 API 呼叫與框架抽象的差異
+
+**快速測試程式碼**：
+```python
+from langchain_openai import ChatOpenAI
+from langchain_core.messages import SystemMessage, HumanMessage
+
+llm = ChatOpenAI(
+    api_key=os.environ["GITHUB_TOKEN"],
+    base_url="https://models.github.ai/inference",
+    model="openai/gpt-4o-mini"
+)
 
-在本課程中，我們將學習：
+response = llm.invoke([
+    SystemMessage(content="You are a helpful coding assistant"),
+    HumanMessage(content="Explain Python functions briefly")
+])
+print(response.content)
+```
 
-- 使用常見的 AI 框架。
-- 解決常見問題，例如聊天對話、工具使用、記憶和上下文。
-- 利用這些技術來建立 AI 應用程式。
+**為什麼重要**：在短短 5 分鐘內，你將體驗 AI 框架如何將複雜的 AI 整合簡化為簡單方法呼叫。這是支撐生產環境 AI 應用的基礎。
 
-## 第一個提示
+## 為什麼選擇框架？
 
-在我們的第一個應用程式範例中，我們將學習如何連接到 AI 模型並使用提示進行查詢。
+你已準備好開發 AI 應用—太棒了！但事情是這樣的：你有數條不同路徑可走，每條路都有其優缺點。這有點像選擇走路、騎腳踏車或開車去某地—都能到達，但經驗（和努力）截然不同。
 
-### 使用 Python
+讓我們拆解三種主要的 AI 整合方式：
+
+| 方法 | 優點 | 適合情景 | 注意事項 |
+|----------|------------|----------|--------------|
+| **直接 HTTP 請求** | 完全控制，無依賴 | 簡單查詢，學習基礎 | 程式碼冗長，需手動錯誤處理 |
+| **SDK 整合** | 減少樣板碼，模型優化 | 單一模型應用 | 限於特定提供者 |
+| **AI 框架** | 統一 API，內建抽象 | 多模型應用，複雜流程 | 學習曲線，可能抽象過度 |
+
+### 框架優勢實務應用
+
+```mermaid
+graph TD
+    A[您的應用程式] --> B[AI 框架]
+    B --> C[OpenAI GPT]
+    B --> D[Anthropic Claude]
+    B --> E[GitHub 模型]
+    B --> F[本地模型]
+    
+    B --> G[內建工具]
+    G --> H[記憶管理]
+    G --> I[對話歷史]
+    G --> J[函式呼叫]
+    G --> K[錯誤處理]
+```
+**為什麼框架很重要：**
+- **統一** 多家 AI 供應商在單一介面下
+- **自動處理** 對話記憶
+- **提供** 現成工具，應對如嵌入與函式呼叫等常見任務
+- **管理** 錯誤與重試邏輯
+- **將** 複雜工作流程轉換為可讀的方法呼叫
+
+> 💡 **專家提示**：在多模型切換或建構代理人、記憶、工具呼叫等複雜功能時使用框架。學習基礎或構建簡單應用時則直接使用 API。
+
+**結論**：就像選擇專匠的專用工具與完整工作坊一樣，要依任務挑選工具。框架適合功能豐富且複雜的應用，而直接 API 適用於簡潔明瞭的場景。
+
+## 🗺️ 你的 AI 框架精通學習之旅
+
+```mermaid
+journey
+    title 從原始 API 到生產 AI 應用
+    section 框架基礎
+      理解抽象優勢: 4: You
+      精通 LangChain 基本概念: 6: You
+      比較不同方法: 7: You
+    section 會話系統
+      建立聊天介面: 5: You
+      實現記憶模式: 7: You
+      處理串流回應: 8: You
+    section 進階功能
+      創建自訂工具: 6: You
+      精通結構化輸出: 8: You
+      建立文件系統: 8: You
+    section 生產應用
+      結合所有功能: 7: You
+      處理錯誤場景: 8: You
+      部署完整系統: 9: You
+```
+**你的學習目標**：本課程結束後，你將精通 AI 框架開發，能建構媲美商用 AI 助理的高階且生產用 AI 應用。
+
+## 介紹
+
+本課程將學習：
+
+- 使用常見 AI 框架。
+- 解決常見問題，如聊天對話、工具使用、記憶與上下文管理。
+- 利用這些知識打造 AI 應用。
+
+## 🧠 AI 框架開發生態
+
+```mermaid
+mindmap
+  root((AI 框架))
+    Abstraction Benefits
+      簡化代碼
+        統一 API
+        內建錯誤處理
+        一致模式
+        減少樣板代碼
+      多模型支援
+        供應商無關
+        輕鬆切換
+        備援選項
+        成本優化
+    Core Components
+      對話管理
+        訊息類型
+        記憶系統
+        上下文追蹤
+        歷史持久化
+      工具整合
+        函數調用
+        API 連接
+        自訂工具
+        工作流程自動化
+    Advanced Features
+      結構化輸出
+        Pydantic 模型
+        JSON 架構
+        型別安全
+        驗證規則
+      文件處理
+        向量嵌入
+        向量存儲
+        相似度搜尋
+        RAG 系統
+    Production Patterns
+      應用架構
+        模組化設計
+        錯誤邊界
+        非同步操作
+        狀態管理
+      部署策略
+        可擴展性
+        監控
+        性能
+        安全性
+```
+**核心原則**：AI 框架將複雜度抽象化，同時提供強大的對話管理、工具整合及文件處理抽象，讓開發者能用乾淨、易維護程式碼構建高階 AI 應用。
+
+## 你的第一個 AI 提示
+
+從基礎開始，建立你的第一個 AI 應用，以送出問題並獲得回答。就像阿基米德在浴缸中發現排水原理一樣，有時最簡單的觀察帶來最深遠的洞見——而框架讓這些洞見變得易於實現。
 
-在此範例中，我們將使用 Langchain 連接到 GitHub 模型。我們可以使用名為 `ChatOpenAI` 的類別，並提供 `api_key`、`base_url` 和 `model` 等欄位。Token 是在 GitHub Codespaces 中自動填充的，如果您在本地運行應用程式，則需要設置個人訪問 Token 才能正常運作。
+### 使用 GitHub 模型設定 LangChain
+
+我們將用 LangChain 連接 GitHub 模型，這非常棒，因為它讓你免費使用各種 AI 模型。最好的是？只需幾個簡單設定參數就能啟動：
 
 ```python
 from langchain_openai import ChatOpenAI
@@ -47,32 +193,58 @@ llm = ChatOpenAI(
     model="openai/gpt-4o-mini",
 )
 
-# works
-response  = llm.invoke("What's the capital of France?")
+# 傳送一個簡單的提示
+response = llm.invoke("What's the capital of France?")
 print(response.content)
 ```
 
-在此程式碼中，我們：
-
-- 呼叫 `ChatOpenAI` 來建立客戶端。
-- 使用 `llm.invoke` 和提示來生成回應。
-- 使用 `print(response.content)` 打印回應。
+**拆解這段程式發生了什麼：**
+- **建立** LangChain 用戶端，透過 `ChatOpenAI` 類別，這是你的 AI 門戶！
+- **設定** 與 GitHub 模型的連線，包含認證令牌
+- **指定** 使用的 AI 模型 (`gpt-4o-mini`)，就像挑選 AI 助手
+- **送出** 問題，使用 `invoke()` 方法，魔法從這裡發生
+- **擷取** 並顯示回應——瞧，你正在與 AI 對話！
 
-您應該會看到類似以下的回應：
+> 🔧 **設定說明**：如果你使用 GitHub Codespaces，恭喜 - `GITHUB_TOKEN` 已預設好！本地開發？別擔心，只要建立有正確權限的個人存取令牌即可。
 
+**預期輸出：**
 ```text
 The capital of France is Paris.
 ```
 
-## 聊天對話
+```mermaid
+sequenceDiagram
+    participant App as 你的 Python 應用程式
+    participant LC as LangChain
+    participant GM as GitHub 模型
+    participant AI as GPT-4o-mini
+    
+    App->>LC: llm.invoke("法國的首都是哪裡？")
+    LC->>GM: 帶有提示詞的 HTTP 請求
+    GM->>AI: 處理提示詞
+    AI->>GM: 產生的回應
+    GM->>LC: 回傳回應
+    LC->>App: response.content
+```
+## 建構對話式 AI
 
-在前一部分中，您看到我們使用了通常稱為零次提示的方式，即單一提示後跟回應。
+第一個範例示範基礎，但它只是單次互動——你提問，得到回答，就結束。真實應用中，你希望 AI 留住過去談話，就像華森與福爾摩斯隨著時間累積調查對話。
 
-然而，通常您會遇到需要維持多次訊息交換的對話情境，這些訊息是您與 AI 助手之間的互動。
+這時 LangChain 尤其好用。它提供不同訊息類型，協助組織對話結構，還能賦予 AI 個性。你將打造保持上下文與角色的聊天體驗。
 
-### 使用 Python
+### 理解訊息類型
 
-在 Langchain 中，我們可以將對話存儲在列表中。`HumanMessage` 代表使用者的訊息，而 `SystemMessage` 是用來設定 AI 的「個性」的訊息。在以下範例中，您可以看到我們指示 AI 扮演皮卡德艦長的角色，而人類使用者則提出「告訴我關於你的事」作為提示。
+把這些訊息類型想成在對話中戴著不同「帽子」的參與者。LangChain 用不同訊息類別追蹤誰說了什麼：
+
+| 訊息類型 | 作用 | 示例情境 |
+|--------------|---------|------------------|
+| `SystemMessage` | 定義 AI 個性與行為 | "你是一位樂於助人的程式助理" |
+| `HumanMessage` | 代表使用者輸入 | "解釋函式是怎麼運作的" |
+| `AIMessage` | 存放 AI 回應 | 對話中的先前 AI 回應 |
+
+### 建立你的第一段對話
+
+讓我們建立一段對話，讓 AI 扮演特定角色。我們讓它化身為皮卡德船長——以其外交智慧與領導力聞名的角色：
 
 ```python
 messages = [
@@ -81,7 +253,12 @@ messages = [
 ]
 ```
 
-此範例的完整程式碼如下：
+**拆解這段對話設定：**
+- **透過** `SystemMessage` 設定 AI 角色及個性
+- **給予** 使用者起始查詢，包在 `HumanMessage` 中
+- **打造** 多輪對話的基礎
+
+以下是此範例的完整程式碼：
 
 ```python
 from langchain_core.messages import HumanMessage, SystemMessage
@@ -100,12 +277,12 @@ messages = [
 ]
 
 
-# works
+# 有效
 response  = llm.invoke(messages)
 print(response.content)
 ```
 
-您應該會看到類似以下的結果：
+你應該會看到類似這樣的結果：
 
 ```text
 I am Captain Jean-Luc Picard, the commanding officer of the USS Enterprise (NCC-1701-D), a starship in the United Federation of Planets. My primary mission is to explore new worlds, seek out new life and new civilizations, and boldly go where no one has gone before. 
@@ -115,7 +292,7 @@ I believe in the importance of diplomacy, reason, and the pursuit of knowledge.
 I hold the ideals of the Federation close to my heart, believing in the importance of cooperation, understanding, and respect for all sentient beings. My experiences have shaped my leadership style, and I strive to be a thoughtful and just captain. How may I assist you further?
 ```
 
-為了保持對話的狀態，您可以將聊天的回應添加到對話中，這樣對話就會被記住，以下是操作方式：
+為了維持對話連貫性（而非每次都重設上下文），你需要不斷將回應加入訊息清單。就像口述傳統保留世代故事般，此方法建立持久記憶：
 
 ```python
 from langchain_core.messages import HumanMessage, SystemMessage
@@ -134,7 +311,7 @@ messages = [
 ]
 
 
-# works
+# 有效
 response  = llm.invoke(messages)
 
 print(response.content)
@@ -150,9 +327,9 @@ print(response.content)
 
 ```
 
-從上述對話中可以看到，我們兩次呼叫 LLM，第一次的對話僅包含兩條訊息，而第二次則添加了更多訊息。
+很酷吧？這裡我們呼叫了兩次大型語言模型——第一次只傳入最初兩條訊息，接著再帶完整對話歷史。就像 AI 真的在跟我們聊天！
 
-事實上，如果您運行此程式，您會看到第二次回應類似以下內容：
+當你執行此程式碼，即會收到第二則聽起來像是這樣的回應：
 
 ```text
 Welcome aboard, Chris! It's always a pleasure to meet those who share a passion for exploration and discovery. While I cannot formally offer you a position on the Enterprise right now, I encourage you to pursue your aspirations. We are always in need of talented individuals with diverse skills and backgrounds. 
@@ -160,27 +337,165 @@ Welcome aboard, Chris! It's always a pleasure to meet those who share a passion
 If you are interested in space exploration, consider education and training in the sciences, engineering, or diplomacy. The values of curiosity, resilience, and teamwork are crucial in Starfleet. Should you ever find yourself on a starship, remember to uphold the principles of the Federation: peace, understanding, and respect for all beings. Your journey can lead you to remarkable adventures, whether in the stars or on the ground. Engage!
 ```
 
-我會把這當作一個可能的答案 ;)
+```mermaid
+sequenceDiagram
+    participant User
+    participant App
+    participant LangChain
+    participant AI
+    
+    User->>App: "告訴我你的故事"
+    App->>LangChain: [系統訊息, 人類訊息]
+    LangChain->>AI: 格式化對話
+    AI->>LangChain: 皮卡德船長的回應
+    LangChain->>App: AI訊息物件
+    App->>User: 顯示回應
+    
+    Note over App: 將 AI訊息 加入對話
+    
+    User->>App: "我可以加入你的船員嗎？"
+    App->>LangChain: [系統訊息, 人類訊息, AI訊息, 人類訊息]
+    LangChain->>AI: 完整對話上下文
+    AI->>LangChain: 上下文回應
+    LangChain->>App: 新的 AI訊息
+    App->>User: 顯示具上下文的回應
+```
+我就當作是「可能」的答案了 ;)
+
+## 串流回應
 
-## 流式回應
+有沒有注意到 ChatGPT 好像在「即時打字」它的回應？這就是串流的效果。就像看書法家一筆一劃地寫出文字—不會瞬間跳出整段字—串流讓互動感覺更自然，且提供即時回饋。
 
-TODO
+### 用 LangChain 實作串流
+
+```python
+from langchain_openai import ChatOpenAI
+import os
+
+llm = ChatOpenAI(
+    api_key=os.environ["GITHUB_TOKEN"],
+    base_url="https://models.github.ai/inference",
+    model="openai/gpt-4o-mini",
+    streaming=True
+)
+
+# 串流回應
+for chunk in llm.stream("Write a short story about a robot learning to code"):
+    print(chunk.content, end="", flush=True)
+```
+
+**為什麼串流很棒：**
+- **展示** 生成中的內容——不再尷尬等待！
+- **讓** 使用者感受到內容真正在生成
+- **感覺上** 更快，儘管技術上未必
+- **允許** 使用者在 AI 還沒想完時就開始閱讀
+
+> 💡 **用戶體驗秘訣**：串流在回覆較長內容時特別有用，比如程式碼說明、創意寫作或詳細教學。你的用戶會喜歡看到進度，而不是盯著空白頁面！
+
+### 🎯 教學自我檢視：框架抽象的好處
+
+**暫停思考**：剛剛體驗了 AI 框架抽象的威力。和之前使用原生 API 呼叫相比，做過哪些簡化？
+
+**快速自評**：
+- 你能解釋 LangChain 如何簡化對話管理，與手動追蹤訊息的差別嗎？
+- `invoke()` 和 `stream()` 方法的差異是什麼？你會在什麼情境用各自？
+- 框架的訊息類型系統如何改善程式碼架構？
+
+**實務連結**：你學到的抽象模式（訊息類型、串流介面、對話記憶）是每個大型 AI 應用的基礎—from ChatGPT 介面到 GitHub Copilot 寫碼助手。你正在掌握專業 AI 團隊使用的架構模式。
+
+**挑戰問題**：你會如何設計一個框架抽象，以用單一介面支援不同 AI 模型供應商（OpenAI、Anthropic、Google）？請思考利弊。
 
 ## 提示模板
 
-TODO
+提示模板就像古典修辭學中演說的結構—想想西塞羅如何為不同聽眾調整演說模式，同時保持說服力的框架。它們讓你建立可重複使用的提示，能替換其中資訊塊而不必重寫全部。設定好模板後，只需填入變數。
+
+### 建立可重複使用提示
+
+```python
+from langchain_core.prompts import ChatPromptTemplate
+
+# 定義一個程式碼說明的模板
+template = ChatPromptTemplate.from_messages([
+    ("system", "You are an expert programming instructor. Explain concepts clearly with examples."),
+    ("human", "Explain {concept} in {language} with a practical example for {skill_level} developers")
+])
+
+# 使用該模板搭配不同的值
+questions = [
+    {"concept": "functions", "language": "JavaScript", "skill_level": "beginner"},
+    {"concept": "classes", "language": "Python", "skill_level": "intermediate"},
+    {"concept": "async/await", "language": "JavaScript", "skill_level": "advanced"}
+]
+
+for question in questions:
+    prompt = template.format_messages(**question)
+    response = llm.invoke(prompt)
+    print(f"Topic: {question['concept']}\n{response.content}\n---\n")
+```
+
+**你會喜愛模板的理由：**
+- **讓** 全應用中提示更加一致
+- **不再** 亂七八糟串接字串—變成乾淨簡單的變數
+- **保持** AI 預期行為，結構不變更
+- **更新** 方便—改一次模板、全應用生效
 
 ## 結構化輸出
 
-TODO
+嘗試解析回傳的非結構化文字 AI 回應時經常挫折？結構化輸出就像教 AI 採用林奈分類法那樣系統化、有規律、好使用。你可以要求 JSON、特定資料結構，或任何你需要的格式。
 
-## 工具調用
+### 定義輸出結構
 
-工具是我們賦予 LLM 額外技能的方式。其理念是告訴 LLM 它擁有的功能，如果提示與某個工具的描述相符，則調用該工具。
+```python
+from langchain_core.prompts import ChatPromptTemplate
+from langchain_core.output_parsers import JsonOutputParser
+from pydantic import BaseModel, Field
+
+class CodeReview(BaseModel):
+    score: int = Field(description="Code quality score from 1-10")
+    strengths: list[str] = Field(description="List of code strengths")
+    improvements: list[str] = Field(description="List of suggested improvements")
+    overall_feedback: str = Field(description="Summary feedback")
+
+# 設定解析器
+parser = JsonOutputParser(pydantic_object=CodeReview)
+
+# 建立包含格式指示的提示
+prompt = ChatPromptTemplate.from_messages([
+    ("system", "You are a code reviewer. {format_instructions}"),
+    ("human", "Review this code: {code}")
+])
+
+# 使用指示格式化提示
+chain = prompt | llm | parser
+
+# 取得結構化回應
+code_sample = """
+def calculate_average(numbers):
+    return sum(numbers) / len(numbers)
+"""
+
+result = chain.invoke({
+    "code": code_sample,
+    "format_instructions": parser.get_format_instructions()
+})
+
+print(f"Score: {result['score']}")
+print(f"Strengths: {', '.join(result['strengths'])}")
+```
+
+**為什麼結構化輸出是遊戲規則改變者：**
+- **不再** 猜測回傳格式——每次皆一致
+- **能** 直接串接資料庫與 API，無需額外處理
+- **能** 及早捕捉奇怪 AI 回應，免應用崩潰
+- **讓** 程式碼更乾淨，精準知道處理內容
+
+## 工具呼叫
+
+現在來到一個最強大的功能：工具。這是你給 AI 除了對話之外的實用能力。就像中世紀行會開發專業工具，你能為 AI 配備專用的「工具」。你描述可用工具，當需求符合時，AI 就能採取行動。
 
 ### 使用 Python
 
-讓我們像下面這樣添加一些工具：
+讓我們加入一些工具，如下：
 
 ```python
 from typing_extensions import Annotated, TypedDict
@@ -188,7 +503,7 @@ from typing_extensions import Annotated, TypedDict
 class add(TypedDict):
     """Add two integers."""
 
-    # Annotations must have the type and can optionally include a default value and description (in that order).
+    # 註解必須有類型，且可選擇包含預設值和描述（順序如是）。
     a: Annotated[int, ..., "First integer"]
     b: Annotated[int, ..., "Second integer"]
 
@@ -199,9 +514,9 @@ functions = {
 }
 ```
 
-在這裡，我們創建了一個名為 `add` 的工具描述。透過繼承 `TypedDict` 並添加像 `a` 和 `b` 這樣的成員（類型為 `Annotated`），這可以轉換為 LLM 可理解的結構。函數的創建是一個字典，確保我們知道如果識別到特定工具時該怎麼做。
+這裡發生什麼事？我們為名為 `add` 的工具建立藍圖。繼承 `TypedDict` 並用那漂亮的 `Annotated` 類型定義 `a` 和 `b`，讓 LLM 清楚知道工具做什麼，需要什麼參數。`functions` 字典像是我們的工具箱，告訴程式當 AI 選用特定工具時應該怎麼做。
 
-接下來讓我們看看如何使用此工具調用 LLM：
+下一步來看看如何帶著這工具呼叫 LLM：
 
 ```python
 llm = ChatOpenAI(
@@ -213,9 +528,9 @@ llm = ChatOpenAI(
 llm_with_tools = llm.bind_tools(tools)
 ```
 
-在這裡，我們使用 `bind_tools` 與 `tools` 陣列，從而 LLM `llm_with_tools` 現在擁有此工具的知識。
+我們使用 `bind_tools` 給 `tools` 陣列，這樣 `llm_with_tools` 就知道這個工具了。
 
-要使用這個新的 LLM，我們可以輸入以下程式碼：
+要用這個新 LLM，我們執行以下程式碼：
 
 ```python
 query = "What is 3 + 12?"
@@ -227,7 +542,7 @@ if(res.tool_calls):
 print("CONTENT: ",res.content)
 ```
 
-現在當我們在這個具有工具的 LLM 上調用 `invoke` 時，可能會填充屬性 `tool_calls`。如果是這樣，任何識別到的工具都會有 `name` 和 `args` 屬性，這些屬性標識應調用的工具及其參數。完整程式碼如下：
+現在呼叫有工具的 `invoke`，`tool_calls` 屬性可能會被填充。如果是，任何被識別的工具都會有 `name` 和 `args` 屬性，指出應呼叫哪個工具及其參數。完整程式碼如下：
 
 ```python
 from langchain_core.messages import HumanMessage, SystemMessage
@@ -238,7 +553,7 @@ from typing_extensions import Annotated, TypedDict
 class add(TypedDict):
     """Add two integers."""
 
-    # Annotations must have the type and can optionally include a default value and description (in that order).
+    # 標註必須有類型，且可選擇包含預設值與描述（按照該順序）。
     a: Annotated[int, ..., "First integer"]
     b: Annotated[int, ..., "Second integer"]
 
@@ -265,28 +580,27 @@ if(res.tool_calls):
 print("CONTENT: ",res.content)
 ```
 
-運行此程式碼，您應該會看到類似以下的輸出：
+執行這段程式碼時，你應看到類似輸出：
 
 ```text
 TOOL CALL:  15
 CONTENT: 
 ```
 
-此輸出的意思是 LLM 分析了提示「What is 3 + 12」，認為應調用 `add` 工具，並且它知道這一點是因為工具的名稱、描述和成員欄位描述。答案是 15，這是因為我們的程式碼使用字典 `functions` 來調用它：
+AI 看了「What is 3 + 12」並判定這是 `add` 工具能處理的問題。就像擅長的圖書館員根據問題類型找參考書，它根據工具名稱、描述與欄位規格做出判斷。結果 15 是由 `functions` 字典執行該工具後產生：
 
 ```python
 print("TOOL CALL: ", functions[tool["name"]](../../../10-ai-framework-project/**tool["args"]))
 ```
 
-### 一個更有趣的工具：調用 Web API
-
-添加兩個數字的工具很有趣，因為它說明了工具調用的工作原理，但通常工具會執行更有趣的操作，例如調用 Web API，讓我們使用以下程式碼來完成這項操作：
+### 更有趣的調用 Web API 的工具
+加法演示了概念，但真正的工具通常會執行更複雜的操作，例如調用網路 API。我們來擴展範例，讓 AI 從網際網路抓取內容——就像電報操作員以前連接遙遠地點一樣：
 
 ```python
 class joke(TypedDict):
     """Tell a joke."""
 
-    # Annotations must have the type and can optionally include a default value and description (in that order).
+    # 註解必須有類型，並且可以選擇性地包含預設值和描述（按該順序）。
     category: Annotated[str, ..., "The joke category"]
 
 def get_joke(category: str) -> str:
@@ -302,16 +616,42 @@ functions = {
 
 query = "Tell me a joke about animals"
 
-# the rest of the code is the same
+# 其餘程式碼相同
 ```
 
-現在如果您運行此程式碼，您會得到類似以下的回應：
+現在如果你執行這段程式碼，你會收到類似下面的回應：
 
 ```text
 TOOL CALL:  Chuck Norris once rode a nine foot grizzly bear through an automatic car wash, instead of taking a shower.
 CONTENT:  
 ```
 
+```mermaid
+flowchart TD
+    A[使用者查詢: "說一個關於動物的笑話"] --> B[LangChain 分析]
+    B --> C{有工具可用？}
+    C -->|是| D[選擇笑話工具]
+    C -->|否| E[產生直接回應]
+    
+    D --> F[擷取參數]
+    F --> G[呼叫 joke(category="animals")]
+    G --> H[向 chucknorris.io 發送 API 請求]
+    H --> I[回傳笑話內容]
+    I --> J[顯示給使用者]
+    
+    E --> K[AI 產生回應]
+    K --> J
+    
+    subgraph "工具定義層"
+        L[TypedDict 架構]
+        M[函式實作]
+        N[參數驗證]
+    end
+    
+    D --> L
+    F --> N
+    G --> M
+```
 以下是完整程式碼：
 
 ```python
@@ -323,14 +663,14 @@ from typing_extensions import Annotated, TypedDict
 class add(TypedDict):
     """Add two integers."""
 
-    # Annotations must have the type and can optionally include a default value and description (in that order).
+    # 註解必須有類型，並且可以選擇性地包含預設值和描述（按該順序）。
     a: Annotated[int, ..., "First integer"]
     b: Annotated[int, ..., "Second integer"]
 
 class joke(TypedDict):
     """Tell a joke."""
 
-    # Annotations must have the type and can optionally include a default value and description (in that order).
+    # 註解必須有類型，並且可以選擇性地包含預設值和描述（按該順序）。
     category: Annotated[str, ..., "The joke category"]
 
 tools = [add, joke]
@@ -359,30 +699,448 @@ query = "Tell me a joke about animals"
 res = llm_with_tools.invoke(query)
 if(res.tool_calls):
     for tool in res.tool_calls:
-        # print("TOOL CALL: ", tool)
+        # print("工具呼叫: ", tool)
         print("TOOL CALL: ", functions[tool["name"]](../../../10-ai-framework-project/**tool["args"]))
 print("CONTENT: ",res.content)
 ```
 
-## 嵌入
+## 嵌入向量與文件處理
 
-向量化內容，通過餘弦相似度進行比較
+嵌入向量是現代 AI 中最優雅的解決方案之一。想像你可以將任何文本轉換成數值座標，捕捉其語意。這正是嵌入向量的作用——它們將文本轉換成多維空間中的點，類似概念會聚集在一起。這就像為想法建立了一個座標系統，有點像孟得列夫依據原子特性整理週期表的方式。
 
-https://python.langchain.com/docs/how_to/embed_text/
+### 建立及使用嵌入向量
 
-### 文件加載器
+```python
+from langchain_openai import OpenAIEmbeddings
+from langchain_community.vectorstores import FAISS
+from langchain_community.document_loaders import TextLoader
+from langchain.text_splitter import CharacterTextSplitter
+
+# 初始化嵌入向量
+embeddings = OpenAIEmbeddings(
+    api_key=os.environ["GITHUB_TOKEN"],
+    base_url="https://models.github.ai/inference",
+    model="text-embedding-3-small"
+)
+
+# 載入並拆分文件
+loader = TextLoader("documentation.txt")
+documents = loader.load()
+
+text_splitter = CharacterTextSplitter(chunk_size=1000, chunk_overlap=0)
+texts = text_splitter.split_documents(documents)
+
+# 建立向量資料庫
+vectorstore = FAISS.from_documents(texts, embeddings)
+
+# 執行相似度搜尋
+query = "How do I handle user authentication?"
+similar_docs = vectorstore.similarity_search(query, k=3)
+
+for doc in similar_docs:
+    print(f"Relevant content: {doc.page_content[:200]}...")
+```
+
+### 支援多種格式的文件載入器
+
+```python
+from langchain_community.document_loaders import (
+    PyPDFLoader,
+    CSVLoader,
+    JSONLoader,
+    WebBaseLoader
+)
+
+# 載入不同的文件類型
+pdf_loader = PyPDFLoader("manual.pdf")
+csv_loader = CSVLoader("data.csv")
+json_loader = JSONLoader("config.json")
+web_loader = WebBaseLoader("https://example.com/docs")
+
+# 處理所有文件
+all_documents = []
+for loader in [pdf_loader, csv_loader, json_loader, web_loader]:
+    docs = loader.load()
+    all_documents.extend(docs)
+```
+
+**嵌入向量能做到的事：**
+- **建構**真正理解你意思的搜尋功能，不只是關鍵字匹配
+- **創建**能回答文件問題的 AI
+- **製作**能建議真正相關內容的推薦系統
+- **自動**整理與分類你的內容
+
+```mermaid
+flowchart LR
+    A[文件] --> B[文字分割器]
+    B --> C[建立嵌入]
+    C --> D[向量儲存庫]
+    
+    E[使用者查詢] --> F[查詢嵌入]
+    F --> G[相似度搜尋]
+    G --> D
+    D --> H[相關文件]
+    H --> I[AI 回應]
+    
+    subgraph "向量空間"
+        J[文件 A: [0.1, 0.8, 0.3...]]
+        K[文件 B: [0.2, 0.7, 0.4...]]
+        L[查詢: [0.15, 0.75, 0.35...]]
+    end
+    
+    C --> J
+    C --> K
+    F --> L
+    G --> J
+    G --> K
+```
+## 建立完整的 AI 應用
+
+現在我們將整合所學的一切，打造一個完整應用——一個能回答問題、使用工具並維持對話記憶的程式助手。就如同印刷術結合了現有技術（活字、墨水、紙張與壓力）而成為變革，我們將匯聚 AI 組件，做出實用且有用的產品。
+
+### 完整應用範例
+
+```python
+from langchain_openai import ChatOpenAI, OpenAIEmbeddings
+from langchain_core.prompts import ChatPromptTemplate
+from langchain_core.messages import HumanMessage, SystemMessage, AIMessage
+from langchain_community.vectorstores import FAISS
+from typing_extensions import Annotated, TypedDict
+import os
+import requests
+
+class CodingAssistant:
+    def __init__(self):
+        self.llm = ChatOpenAI(
+            api_key=os.environ["GITHUB_TOKEN"],
+            base_url="https://models.github.ai/inference",
+            model="openai/gpt-4o-mini"
+        )
+        
+        self.conversation_history = [
+            SystemMessage(content="""You are an expert coding assistant. 
+            Help users learn programming concepts, debug code, and write better software.
+            Use tools when needed and maintain a helpful, encouraging tone.""")
+        ]
+        
+        # 定義工具
+        self.setup_tools()
+    
+    def setup_tools(self):
+        class web_search(TypedDict):
+            """Search for programming documentation or examples."""
+            query: Annotated[str, "Search query for programming help"]
+        
+        class code_formatter(TypedDict):
+            """Format and validate code snippets."""
+            code: Annotated[str, "Code to format"]
+            language: Annotated[str, "Programming language"]
+        
+        self.tools = [web_search, code_formatter]
+        self.llm_with_tools = self.llm.bind_tools(self.tools)
+    
+    def chat(self, user_input: str):
+        # 將使用者訊息加入對話
+        self.conversation_history.append(HumanMessage(content=user_input))
+        
+        # 取得 AI 回應
+        response = self.llm_with_tools.invoke(self.conversation_history)
+        
+        # 處理任何工具呼叫
+        if response.tool_calls:
+            for tool_call in response.tool_calls:
+                tool_result = self.execute_tool(tool_call)
+                print(f"🔧 Tool used: {tool_call['name']}")
+                print(f"📊 Result: {tool_result}")
+        
+        # 將 AI 回應加入對話
+        self.conversation_history.append(response)
+        
+        return response.content
+    
+    def execute_tool(self, tool_call):
+        tool_name = tool_call['name']
+        args = tool_call['args']
+        
+        if tool_name == 'web_search':
+            return f"Found documentation for: {args['query']}"
+        elif tool_name == 'code_formatter':
+            return f"Formatted {args['language']} code: {args['code'][:50]}..."
+        
+        return "Tool execution completed"
+
+# 使用範例
+assistant = CodingAssistant()
+
+print("🤖 Coding Assistant Ready! Type 'quit' to exit.\n")
+
+while True:
+    user_input = input("You: ")
+    if user_input.lower() == 'quit':
+        break
+    
+    response = assistant.chat(user_input)
+    print(f"🤖 Assistant: {response}\n")
+```
+
+**應用架構：**
+
+```mermaid
+graph TD
+    A[使用者輸入] --> B[程式助理]
+    B --> C[對話記憶]
+    B --> D[工具偵測]
+    B --> E[大型語言模型處理]
+    
+    D --> F[網路搜尋工具]
+    D --> G[程式碼格式化工具]
+    
+    E --> H[回應產生]
+    F --> H
+    G --> H
+    
+    H --> I[使用者介面]
+    H --> C
+```
+**我們實作的主要功能：**
+- **記憶**你整段對話，保持上下文連貫
+- **執行操作**透過工具調用，而非僅對話
+- **遵循**可預測的交互模式
+- **自動管理**錯誤處理與複雜工作流程
+
+### 🎯 教學自我檢核：生產級 AI 架構
 
-PDF 和 CSV
+**架構理解**：你已構建出結合對話管理、工具調用及結構化工作流程的完整 AI 應用，代表生產級 AI 應用開發。
 
-## 建立應用程式
+**掌握的關鍵概念**：
+- **基於類別的架構**：結構化、易維護的 AI 應用架構
+- **工具整合**：拓展對話以外的自定義功能
+- **記憶管理**：持久化的對話上下文
+- **錯誤處理**：強健的應用行為
 
-TODO
+**產業連結**：你實現的架構模式（對話類別、工具系統、記憶管理）是企業 AI 應用如 Slack AI 助手、GitHub Copilot 與 Microsoft Copilot 所採用的相同模式。你正以專業等級的架構思維打造系統。
 
-## 作業
+**反思問題**：你會如何擴展這個應用來支援多用戶、持久化儲存或整合外部資料庫？試著思考擴展性與狀態管理的挑戰。
+
+## 作業：打造你自己的 AI 驅動學習助手
+
+**目標**：創建一個幫助學生學習程式概念的 AI 應用，提供解說、程式範例與互動式測驗。
+
+### 要求
+
+**核心功能（必須）：**
+1. **對話介面**：實作可跨多個問題維持上下文的聊天系統
+2. **教育工具**：建立至少兩個學習輔助工具：
+   - 程式碼解說工具
+   - 概念測驗生成器
+3. **個人化學習**：使用系統訊息調整回應以配合不同技能層級
+4. **回應格式化**：實作測驗題目結構化輸出
+
+### 實作步驟
+
+**步驟 1：設定環境**
+```bash
+pip install langchain langchain-openai
+```
+
+**步驟 2：基本聊天功能**
+- 建立 `StudyAssistant` 類別
+- 實作對話記憶
+- 加入教育專用個性設定
+
+**步驟 3：新增教育工具**
+- **程式碼解說**：將程式碼拆解為易懂部分
+- **測驗生成器**：製作有關程式概念的問題
+- **進度追蹤器**：紀錄已涵蓋主題
+
+**步驟 4：增強功能（選擇性）**
+- 實作串流回應以提升使用體驗
+- 加入文件載入功能，整合課程資料
+- 使用嵌入向量進行基於相似度的內容檢索
+
+### 評分標準
+
+| 功能 | 優秀 (4) | 良好 (3) | 滿意 (2) | 需改進 (1) |
+|---------|---------------|----------|------------------|----------------|
+| **對話流暢度** | 自然、上下文敏感回應 | 良好上下文維持 | 基本對話 | 交流間無記憶 |
+| **工具整合** | 多個實用工具無縫運作 | 2 個以上工具正常實作 | 1-2 基本工具 | 工具無法運作 |
+| **程式碼品質** | 乾淨、有文件、錯誤處理佳 | 結構良好、有部分文件 | 基本功能正常 | 結構差，無錯誤處理 |
+| **教育價值** | 真正有助學習且具適應性 | 良好學習支持 | 基本解說 | 教育效益有限 |
+
+### 範例程式碼結構
+
+```python
+class StudyAssistant:
+    def __init__(self, skill_level="beginner"):
+        # 初始化大型語言模型、工具和對話記憶
+        pass
+    
+    def explain_code(self, code, language):
+        # 工具：解釋程式碼運作方式
+        pass
+    
+    def generate_quiz(self, topic, difficulty):
+        # 工具：製作練習題
+        pass
+    
+    def chat(self, user_input):
+        # 主要對話介面
+        pass
+
+# 使用範例
+assistant = StudyAssistant(skill_level="intermediate")
+response = assistant.chat("Explain how Python functions work")
+```
+
+**額外挑戰：**
+- 新增語音輸入/輸出功能
+- 使用 Streamlit 或 Flask 建立網頁介面
+- 用嵌入向量從課程資料創建知識庫
+- 加入進度追蹤與個人化學習路徑
+
+## 📈 你的 AI 框架開發精通時間軸
+
+```mermaid
+timeline
+    title 生產 AI 框架開發旅程
+    
+    section 框架基礎
+        理解抽象
+            : 主框架與 API 決策
+            : 學習 LangChain 核心概念
+            : 實作訊息類型系統
+        
+        基本整合
+            : 連接 AI 供應商
+            : 處理驗證
+            : 管理設定
+    
+    section 對話系統
+        記憶管理
+            : 建立對話歷史
+            : 實作上下文追蹤
+            : 處理會話持續性
+        
+        高階互動
+            : 掌握串流回應
+            : 建立提示範本
+            : 實作結構化輸出
+    
+    section 工具整合
+        客製工具開發
+            : 設計工具結構
+            : 實作函式呼叫
+            : 處理外部 API
+        
+        工作流程自動化
+            : 串接多個工具
+            : 建立決策樹
+            : 建立代理行為
+    
+    section 生產應用
+        完整系統架構
+            : 結合所有框架功能
+            : 實作錯誤邊界
+            : 建立可維護程式碼
+        
+        企業準備度
+            : 處理擴充性問題
+            : 實作監控
+            : 建立部署策略
+```
+**🎓 畢業里程碑**：你已成功精通 AI 框架開發，利用與現代 AI 應用同樣的工具與模式。這些技能代表 AI 應用開發的尖端，並為你打造企業級智慧系統奠定基礎。
+
+**🔄 下一階段能力**：
+- 準備探索進階 AI 架構（代理人、多代理系統）
+- 準備構建結合向量資料庫的 RAG 系統
+- 裝備多模態 AI 應用開發能力
+- 打好 AI 應用擴展與優化基礎
 
 ## 總結
 
+🎉 你已掌握 AI 框架開發的基本功，並學會如何使用 LangChain 建構複雜 AI 應用。就像完成一段完整的學徒訓練，你擁有豐富的技能工具包。讓我們複習你完成了什麼。
+
+### 你學到了什麼
+
+**核心框架概念：**
+- **框架優勢**：知道何時選擇框架而非直接呼叫 API
+- **LangChain 基礎**：設置和配置 AI 模型連接
+- **訊息類型**：使用 `SystemMessage`、`HumanMessage`、`AIMessage` 進行結構化對話
+
+**進階功能：**
+- **工具調用**：創建並整合自定義工具以增強 AI 能力
+- **對話記憶**：跨多輪對話維持上下文
+- **串流回應**：實作即時回應輸出
+- **提示模板**：建立可重用的動態提示
+- **結構化輸出**：確保 AI 回應一致且可解析
+- **嵌入向量**：創建語義搜索與文件處理功能
+
+**實務應用：**
+- **建構完整應用**：結合多項功能達到生產準備
+- **錯誤處理**：實作穩健的錯誤管理和驗證
+- **工具整合**：創建自定義工具擴充 AI 功能
+
+### 重要提醒
+
+> 🎯 **記住**：像 LangChain 這樣的 AI 框架，基本上就是幫你隱藏複雜度、擁有大量功能的好幫手。當你需要對話記憶、工具調用或同時操作多種 AI 模型時，它們是你的最佳選擇。
+
+**AI 整合決策框架：**
+
+```mermaid
+flowchart TD
+    A[AI整合需求] --> B{簡單單一查詢？}
+    B -->|是| C[直接API呼叫]
+    B -->|否| D{需要對話記憶？}
+    D -->|否| E[SDK整合]
+    D -->|是| F{需要工具或複雜功能？}
+    F -->|否| G[具有基本設定的框架]
+    F -->|是| H[完整框架實作]
+    
+    C --> I[HTTP請求，最少依賴]
+    E --> J[提供者SDK，模型專用]
+    G --> K[LangChain基礎聊天]
+    H --> L[LangChain搭配工具、記憶、代理]
+```
+### 接下來怎麼走？
+
+**馬上開始打造：**
+- 利用這些概念去建造令你興奮的東西！
+- 透過 LangChain 玩玩不同 AI 模型，就像擁有一個 AI 遊樂場
+- 創造解決你工作或專案實際問題的工具
+
+**準備好挑戰下一階段了嗎？**
+- **AI 代理人**：打造能獨立規劃並執行複雜任務的 AI 系統
+- **RAG（檢索增強生成）**：結合自有知識庫打造超強應用
+- **多模態 AI**：同時處理文字、圖片和音訊——可能性無窮！
+- **生產部署**：學習如何擴展與監控你的 AI 應用
+
+**加入社群：**
+- LangChain 社群是保持最新並學習最佳實踐的絕佳資源
+- GitHub Models 讓你能使用尖端 AI 功能，適合實驗與開發
+- 持續嘗試各種用例，專案中會教你更多
+
+現在你擁有打造智能對話應用的知識，能協助人們解決真實問題。就像文藝復興時期的工匠融合藝術遠見與技藝，你也能將 AI 能力與實務應用合而為一。問題是：你會創造什麼？🚀
+
+## GitHub Copilot 代理人挑戰 🚀
+
+使用代理人模式完成以下挑戰：
+
+**描述:** 建立一個先進的 AI 驅動程式碼審查助手，結合多種 LangChain 功能，包括工具調用、結構化輸出及對話記憶，為程式碼提交提供全面的回饋。
+
+**提示:** 創建一個 CodeReviewAssistant 類別，實作：
+1. 用於分析程式碼複雜度與改善建議的工具
+2. 用於檢查程式碼是否符合最佳實務的工具
+3. 使用 Pydantic 模型的結構化輸出以保持審查格式一致
+4. 用於追蹤審查會話的對話記憶
+5. 主要聊天介面，能處理程式碼提交並提供詳細、具體可執行的回饋
+
+此助手應能審查多種程式語言，維持多次提交的上下文，並提供總結分數與詳細改進建議。
+
+在此了解更多 [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode)。
+
 ---
 
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
 **免責聲明**：  
-本文件已使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。儘管我們致力於提供準確的翻譯，請注意自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於關鍵資訊，建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或錯誤解釋概不負責。
\ No newline at end of file
+本文件係使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 翻譯而成。雖然我們力求準確，但請注意自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於重要資訊，建議採用專業人工翻譯。對因使用本翻譯內容而產生的任何誤解或誤釋，我們概不負責。
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->
\ No newline at end of file
diff --git a/translations/tw/2-js-basics/1-data-types/README.md b/translations/tw/2-js-basics/1-data-types/README.md
index fc79081f..f56ca403 100644
--- a/translations/tw/2-js-basics/1-data-types/README.md
+++ b/translations/tw/2-js-basics/1-data-types/README.md
@@ -1,215 +1,618 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "b95fdd8310ef467305015ece1b0f9411",
-  "translation_date": "2025-08-29T15:24:14+00:00",
+  "original_hash": "672b0bb6e8b431075f3bdb7130590d2d",
+  "translation_date": "2026-01-06T13:28:48+00:00",
   "source_file": "2-js-basics/1-data-types/README.md",
   "language_code": "tw"
 }
 -->
 # JavaScript 基礎：資料型別
 
-![JavaScript 基礎 - 資料型別](../../../../translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.tw.png)
-> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
+![JavaScript 基礎 - 資料型別](../../../../translated_images/webdev101-js-datatypes.4cc470179730702c.tw.png)
+> 手繪筆記作者：[Tomomi Imura](https://twitter.com/girlie_mac)
+
+```mermaid
+journey
+    title 你的 JavaScript 資料類型冒險
+    section 基礎
+      變數與常數: 5: 你
+      宣告語法: 4: 你
+      指派概念: 5: 你
+    section 核心類型
+      數字與數學: 4: 你
+      字串與文字: 5: 你
+      布林值與邏輯: 4: 你
+    section 應用知識
+      類型轉換: 4: 你
+      實際範例: 5: 你
+      最佳實務: 5: 你
+```
+資料型別是 JavaScript 中的基本概念之一，您在每個撰寫的程式中都會遇到它。可以將資料型別想像成亞歷山卓圖書館古代圖書館員使用的歸檔系統——他們有特定的地方放置包含詩歌、數學和歷史記錄的捲軸。JavaScript 以類似的方式組織資訊，為不同種類的資料設立不同的類別。
+
+在本課程中，我們將探討使 JavaScript 運作的核心資料型別。您將學習如何處理數字、文字、真假值，以及了解為什麼選擇正確的型別對您的程式至關重要。這些概念起初可能看起來抽象，但透過練習，它們將成為您的第二天性。
+
+理解資料型別會讓 JavaScript 的其他部分更清晰。正如建築師需要了解不同的建築材料，才能建造一座大教堂，這些基礎知識將支持您將來的每一個建設。
 
 ## 課前測驗
 [課前測驗](https://ff-quizzes.netlify.app/web/)
 
-本課程涵蓋 JavaScript 的基礎知識，這是一種為網頁提供互動功能的語言。
+本課程涵蓋 JavaScript 的基本知識，JavaScript 是提供網頁互動功能的語言。
 
-> 你可以在 [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-variables/?WT.mc_id=academic-77807-sagibbon) 上學習本課程！
+> 您可以在 [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-variables/?WT.mc_id=academic-77807-sagibbon) 上參加此課程！
 
-[![變數](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "JavaScript 中的變數")
+[![Variables](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "JavaScript 中的變數")
 
-[![JavaScript 中的資料型別](https://img.youtube.com/vi/AWfA95eLdq8/0.jpg)](https://youtube.com/watch?v=AWfA95eLdq8 "JavaScript 中的資料型別")
+[![Data Types in JavaScript](https://img.youtube.com/vi/AWfA95eLdq8/0.jpg)](https://youtube.com/watch?v=AWfA95eLdq8 "JavaScript 中的資料型別")
 
-> 🎥 點擊上方圖片觀看有關變數和資料型別的影片
+> 🎥 點擊上方圖片觀看關於變數和資料型別的影片
 
 讓我們從變數和填充它們的資料型別開始吧！
 
+```mermaid
+mindmap
+  root((JavaScript 資料))
+    Variables
+      let myVar
+      const PI = 3.14
+      var oldStyle
+    Primitive Types
+      number
+        42
+        3.14
+        -5
+      string
+        "Hello"
+        'World'
+        `Template`
+      boolean
+        true
+        false
+      undefined
+      null
+    Operations
+      Arithmetic
+        + - * / %
+      String Methods
+        串接
+        範本字串
+      Type Conversion
+        隱式
+        顯式
+```
 ## 變數
 
-變數用來儲存值，這些值可以在程式碼中使用並進行更改。
+變數是程式設計中的基本建構塊。就像中世紀煉金術士用來存放不同物質的標籤罐，變數讓您能儲存資訊，並賦予具描述性的名稱，以便後續參考。需要記住某人的年齡嗎？將它存放在名為 `age` 的變數中。想追蹤使用者名稱？把它放在名為 `userName` 的變數中。
+
+我們將專注於 JavaScript 中建立變數的現代方法。您在這裡學到的技術是多年語言演變及程式社群最佳實踐的結晶。
 
-建立和**宣告**變數的語法如下：**[關鍵字] [名稱]**。它由以下兩部分組成：
+建立和**宣告**變數的語法為 **[關鍵字] [名稱]**，由兩部分組成：
 
-- **關鍵字**。關鍵字可以是 `let` 或 `var`。
+- **關鍵字**。使用 `let` 表示可以變更的變數，或 `const` 表示不會改變的值。
+- **變數名稱**，由您自行選擇的具描述性名稱。
 
-✅ `let` 關鍵字是在 ES6 中引入的，為變數提供了所謂的 _區塊作用域_。建議使用 `let` 而非 `var`。我們會在後續部分更深入地探討區塊作用域。
-- **變數名稱**，這是你自己選擇的名稱。
+✅ `let` 關鍵字於 ES6 中引入，賦予變數所謂的 _區塊作用域_。建議使用 `let` 或 `const` 替代舊的 `var` 關鍵字。我們會在後續章節更深入探討區塊作用域。
 
-### 任務 - 使用變數
+### 任務 - 操作變數
 
-1. **宣告變數**。讓我們使用 `let` 關鍵字宣告一個變數：
+1. **宣告一個變數**。讓我們從建立第一個變數開始：
 
     ```javascript
     let myVariable;
     ```
 
-   `myVariable` 現在已使用 `let` 關鍵字宣告，但目前尚未賦值。
+   **這段程式的意義：**
+   - 這告訴 JavaScript 建立一個名為 `myVariable` 的儲存空間
+   - JavaScript 為此變數在記憶體中分配空間
+   - 該變數目前沒有值（undefined）
 
-1. **賦值**。使用 `=` 運算符將值儲存到變數中，後面跟著期望的值。
+2. **賦值給它**。現在讓我們將內容放入變數中：
 
     ```javascript
     myVariable = 123;
     ```
 
-   > 注意：在本課程中使用 `=` 表示我們使用的是「賦值運算符」，用於將值設定到變數中。它並不表示相等。
+   **賦值的運作方式：**
+   - `=` 運算子將 123 指派給我們的變數
+   - 變數現在包含這個值，不再是未定義
+   - 您可以在程式中以 `myVariable` 參考此值
 
-   `myVariable` 現在已被*初始化*為值 123。
+   > 注意：本課程中 `=` 的用法是「指派運算子」，用於設定變數的值，而非代表相等。
 
-1. **重構**。將你的程式碼替換為以下語句。
+3. **聰明地操作**。實際上，我們可以將這兩個步驟合併：
 
     ```javascript
     let myVariable = 123;
     ```
 
-    上述語句稱為 _顯式初始化_，即在宣告變數的同時賦值。
+    **這種方式更有效率：**
+    - 您同時宣告變數並賦值於一個語句中
+    - 這是開發者的標準作法
+    - 縮短程式碼長度，同時保持清晰度
 
-1. **更改變數值**。以下方式更改變數值：
+4. **改變想法**。如果想儲存不同的數字怎麼辦？
 
    ```javascript
    myVariable = 321;
    ```
 
-   一旦變數被宣告，你可以隨時使用 `=` 運算符和新值更改其值。
+   **理解重新賦值：**
+   - 變數現在包含 321，取代了 123
+   - 先前的值被覆蓋—變數一次只能存一個值
+   - 這種可變性是使用 `let` 宣告的關鍵特性
 
-   ✅ 試試看！你可以直接在瀏覽器中撰寫 JavaScript。打開瀏覽器窗口並導航到開發者工具。在控制台中，你會看到一個提示；輸入 `let myVariable = 123`，按下回車，然後輸入 `myVariable`。會發生什麼？注意，你會在後續課程中學到更多相關概念。
+   ✅ 試試看！您可以直接在瀏覽器中撰寫 JavaScript。打開瀏覽器並進入開發者工具。在主控台中，輸入 `let myVariable = 123`，按下 Enter，接著輸入 `myVariable`。結果是什麼？注意，您會在後續課程中進一步學習這些概念。
+
+### 🧠 **變數掌握檢測：養成熟練感**
+
+**來看看您對變數的理解程度：**
+- 您能解釋宣告和賦值變數的差別嗎？
+- 如果嘗試在宣告之前使用變數會發生什麼？
+- 什麼時候會選用 `let` 代替 `const`？
+
+```mermaid
+stateDiagram-v2
+    [*] --> Declared: let myVar
+    Declared --> Assigned: myVar = 123
+    Assigned --> Reassigned: myVar = 456
+    Assigned --> [*]: 變數準備好了！
+    Reassigned --> [*]: 更新的值
+    
+    note right of Declared
+        變數存在但
+        沒有值 (未定義)
+    end note
+    
+    note right of Assigned
+        變數包含
+        值 123
+    end note
+```
+> **快速提示**：想像變數是貼有標籤的儲存箱。您建立箱子（`let`）、放入內容（`=`），如有需要，之後還可以更換內容！
 
 ## 常數
 
-常數的宣告和初始化遵循與變數相同的概念，但使用 `const` 關鍵字。常數通常以全大寫字母宣告。
+有時您需要儲存執行期間絕對不會改變的資訊。想像常數就像古希臘歐幾里得制定的數學原理——一旦被證明與記載，將固定不變成為永遠參考的標準。
+
+常數與變數相似，但有個重要限制：一旦賦值，值就不能被更改。這種不可變性有助於避免程式中重要值的意外修改。
+
+宣告與初始化常數與變數的概念相同，但使用 `const` 關鍵字。常數通常以全大寫字母命名。
 
 ```javascript
 const MY_VARIABLE = 123;
 ```
 
-常數與變數相似，但有兩個例外：
+**此段程式做了什麼：**
+- **建立**名為 `MY_VARIABLE` 的常數，值為 123
+- **採用**常數的全大寫命名慣例
+- **防止**未來對該值的任何修改
+
+常數有兩大規則：
+
+- **必須立刻賦值**——不允許空的常數！
+- **值不能更改**——若嘗試更改，JavaScript 會報錯。看看範例：
 
-- **必須有值**。常數必須初始化，否則在執行程式碼時會出現錯誤。
-- **引用不可更改**。常數的引用在初始化後不可更改，否則在執行程式碼時會出現錯誤。以下是兩個例子：
-   - **簡單值**。以下是不允許的：
+   **簡單值** - 以下寫法不被允許：
    
       ```javascript
       const PI = 3;
-      PI = 4; // not allowed
+      PI = 4; // 不被允許
       ```
+
+   **要記得：**
+   - **嘗試**重新指派常數會發生錯誤
+   - **保護**重要值不被意外更動
+   - **確保**整個程式中數值保持一致
  
-   - **物件引用受保護**。以下是不允許的：
+   **物件參考不可變** - 以下寫法也不被允許：
    
       ```javascript
       const obj = { a: 3 };
-      obj = { b: 5 } // not allowed
+      obj = { b: 5 } // 不被允許
       ```
 
-    - **物件值未受保護**。以下是允許的：
+   **這裡的概念是：**
+   - **防止**整個物件被替換成另一個新物件
+   - **保護**原始物件的參考
+   - **維持**記憶體中物件的唯一身份
+
+    **物件的內容值可變** - 以下寫法是被允許的：
     
       ```javascript
       const obj = { a: 3 };
-      obj.a = 5;  // allowed
+      obj.a = 5;  // 被允許
       ```
 
-      上述範例中，你更改了物件的值，但未更改其引用，因此是允許的。
+      **說明發生了什麼：**
+      - **更改**物件內屬性的值
+      - **保留**相同的物件參考
+      - **展示**物件的內容可變，但參考不可變
 
-   > 注意，`const` 表示引用受到保護，不能重新賦值。然而，值並非 _不可變_，尤其是當它是像物件這樣的複雜結構時，值仍然可以更改。
+   > 注意，`const` 是指參考不可被重新指定。但是值不一定是「不可變」的，特別是在複雜結構如物件的情況。
 
 ## 資料型別
 
-變數可以儲存許多不同類型的值，例如數字和文字。這些不同類型的值被稱為 **資料型別**。資料型別是軟體開發中的重要部分，因為它幫助開發者決定程式碼的撰寫方式以及軟體的運行方式。此外，某些資料型別具有獨特的功能，可以幫助轉換或提取值中的額外資訊。
+JavaScript 將資訊分門別類，稱為資料型別。這個概念類似古代學者歸納知識的方法——亞里斯多德區分不同推理類型，知道邏輯原則不能一視同仁地套用於詩歌、數學和自然哲學。
+
+資料型別很重要，因為不同運算適用於不同類型的資訊。就如同您無法對人名進行算術運算，或對數學方程式排序，JavaScript 也需要適合每個運算的資料型別。理解這點可避免錯誤並讓程式更穩健。
+
+變數可以存放多種不同類型的值，例如數字與文字。這些不同的值類型稱為**資料型別**。資料型別是軟體開發的重要部分，它幫助開發者決定程式如何撰寫以及軟體如何執行。此外，某些資料型別具有獨特特性，能幫助轉換或擷取值中的額外資訊。
 
-✅ 資料型別也被稱為 JavaScript 的資料原始型別，因為它們是語言提供的最低層級資料型別。共有 7 種原始型別：string、number、bigint、boolean、undefined、null 和 symbol。花點時間想像這些原始型別可能代表什麼。什麼是 `zebra`？`0` 呢？`true` 呢？
+✅ 資料型別亦稱為 JavaScript 原始資料型別，因為它們是語言提供的最基礎的資料型別。共有七種原始型別：string、number、bigint、boolean、undefined、null 與 symbol。花點時間想像這些原始型別代表什麼。`zebra` 是什麼？`0` 呢？`true` 是什麼？
 
 ### 數字
 
-在上一節中，`myVariable` 的值是一個數字型別。
+數字是 JavaScript 中最直觀的資料型別。不論是整數如 42、帶小數點的 3.14，或是負數如 -5，JavaScript 都以統一方式處理。
 
-`let myVariable = 123;`
+還記得先前的變數嗎？我們儲存的 123 實際上是數字型別：
 
-變數可以儲存所有類型的數字，包括小數或負數。數字還可以與算術運算符一起使用，這部分內容會在[下一節](../../../../2-js-basics/1-data-types)中介紹。
+```javascript
+let myVariable = 123;
+```
+
+**主要特性：**
+- JavaScript 會自動識別數值
+- 您可用這些變數做數學運算
+- 不需要明確宣告型別
+
+變數能儲存所有類型的數字，包括小數和負數。數字也可以搭配算術運算子使用，下一節會介紹此主題。
+
+```mermaid
+flowchart LR
+    A["🔢 數字"] --> B["➕ 加法"]
+    A --> C["➖ 減法"]
+    A --> D["✖️ 乘法"]
+    A --> E["➗ 除法"]
+    A --> F["📊 餘數 %"]
+    
+    B --> B1["1 + 2 = 3"]
+    C --> C1["5 - 3 = 2"]
+    D --> D1["4 * 3 = 12"]
+    E --> E1["10 / 2 = 5"]
+    F --> F1["7 % 3 = 1"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+    style F fill:#fce4ec
+```
+### 算術運算子
+
+算術運算子允許您在 JavaScript 中進行數學計算。這些運算符與數學家世世代代使用的符號相同——類似阿爾花剌子密發展代數符號的方式。
+
+這些運算符的運作方式與傳統算術一致：`+` 表加法，`-` 表減法，以此類推。
 
-### 算術運算符
+以下是幾種常見的算術運算子：
 
-在執行算術運算時，有幾種運算符可供使用，以下列出了一些：
+| 符號   | 說明                                                                    | 範例                             |
+| ------ | ---------------------------------------------------------------------- | -------------------------------- |
+| `+`    | **加法**：計算兩數字的和                                                | `1 + 2 //預期結果是 3`            |
+| `-`    | **減法**：計算兩數字的差                                                | `1 - 2 //預期結果是 -1`           |
+| `*`    | **乘法**：計算兩數字的積                                                | `1 * 2 //預期結果是 2`            |
+| `/`    | **除法**：計算兩數字的商                                                | `1 / 2 //預期結果是 0.5`          |
+| `%`    | **餘數**：計算兩數字相除後的餘數                                        | `1 % 2 //預期結果是 1`            |
 
-| 符號 | 描述                                                                      | 範例                          |
-| ---- | ------------------------------------------------------------------------ | ----------------------------- |
-| `+`  | **加法**：計算兩個數字的總和                                             | `1 + 2 //預期答案是 3`         |
-| `-`  | **減法**：計算兩個數字的差                                               | `1 - 2 //預期答案是 -1`        |
-| `*`  | **乘法**：計算兩個數字的乘積                                             | `1 * 2 //預期答案是 2`         |
-| `/`  | **除法**：計算兩個數字的商                                               | `1 / 2 //預期答案是 0.5`       |
-| `%`  | **餘數**：計算兩個數字相除後的餘數                                       | `1 % 2 //預期答案是 1`         |
+✅ 試試看！在瀏覽器主控台試做一個算術運算。結果讓您驚訝嗎？
 
-✅ 試試看！在瀏覽器的控制台中嘗試一個算術運算。結果是否讓你感到驚訝？
+### 🧮 **數學技能檢測：自信計算**
+
+**測試您的算術理解：**
+- `/`（除法）與 `%`（餘數）的差異是什麼？
+- 您能預測 `10 % 3` 等於多少嗎？（提示：不是 3.33...）
+- 餘數運算子在程式設計中可能有什麼用途？
+
+```mermaid
+pie title "JavaScript 數字運算使用情況"
+    "加法 (+)" : 35
+    "減法 (-)" : 20
+    "乘法 (*)" : 20
+    "除法 (/)" : 15
+    "餘數 (%)" : 10
+```
+> **實務洞察**：餘數運算子（%）非常適合檢查數字是奇數還是偶數、創造模式，或在陣列中循環！
 
 ### 字串
 
-字串是一組位於單引號或雙引號之間的字符。
+在 JavaScript 中，文字資料用字串表示。字串這個詞源自將字元串連的概念，就像中世紀修道院抄寫員將字母串連成詞句和句子一樣。
 
-- `'這是一個字串'`
-- `"這也是一個字串"`
-- `let myString = '這是一個儲存在變數中的字串值';`
+字串是網頁開發的基礎。網站上顯示的每一段文字——使用者名稱、按鈕標籤、錯誤訊息、內容——都以字串形式處理。理解字串是建立功能性使用者介面的關鍵。
 
-記得在撰寫字串時使用引號，否則 JavaScript 會假設它是一個變數名稱。
+字串是套在單引號或雙引號之間的一組字元。
 
-### 格式化字串
+```javascript
+'This is a string'
+"This is also a string"
+let myString = 'This is a string value stored in a variable';
+```
 
-字串是文字，有時需要進行格式化。
+**理解這些概念：**
+- **使用**單引號 `'` 或雙引號 `"` 定義字串
+- **儲存**可包含字母、數字與符號的文字資料
+- **賦值**字串給變數以便後續使用
+- **需要**用引號區別字串與變數名稱
 
-要**串接**兩個或更多字串（即將它們連接在一起），可以使用 `+` 運算符。
+記得在撰寫字串時使用引號，否則 JavaScript 會把它當成變數名。
+
+```mermaid
+flowchart TD
+    A["📝 字串"] --> B["單引號"]
+    A --> C["雙引號"]
+    A --> D["範本字面量"]
+    
+    B --> B1["'Hello World'"]
+    C --> C1["\"Hello World\""]
+    D --> D1["`Hello \${name}`"]
+    
+    E["字串操作"] --> F["串接"]
+    E --> G["範本插入"]
+    E --> H["長度 & 方法"]
+    
+    F --> F1["'Hello' + ' ' + 'World'"]
+    G --> G1["`Hello \${firstName} \${lastName}`"]
+    H --> H1["myString.length"]
+    
+    style A fill:#e3f2fd
+    style E fill:#fff3e0
+    style D fill:#e8f5e8
+    style G fill:#e8f5e8
+```
+### 字串格式化
+
+字串操作讓您合併文字、結合變數，並創造會隨程式狀態變化的動態內容。此技巧使您能以程式化方式建構文字。
+
+常常需要將多個字串串接在一起——這個過程稱為連接（concatenation）。
+要**串接**兩個或多個字串，或將它們連接在一起，使用 `+` 運算子。
 
 ```javascript
 let myString1 = "Hello";
 let myString2 = "World";
 
-myString1 + myString2 + "!"; //HelloWorld!
-myString1 + " " + myString2 + "!"; //Hello World!
-myString1 + ", " + myString2 + "!"; //Hello, World!
-
+myString1 + myString2 + "!"; //哈囉世界！
+myString1 + " " + myString2 + "!"; //哈囉 世界！
+myString1 + ", " + myString2 + "!"; //哈囉，世界！
 ```
 
-✅ 為什麼在 JavaScript 中 `1 + 1 = 2`，但 `'1' + '1' = 11`？想一想。那麼 `'1' + 1` 呢？
+**一步步來，以下是發生了什麼事情：**
+- **使用** `+` 運算子將多個字串 **結合**
+- **直接** 將字串連接在一起，第一個範例沒有空格
+- **在字串間加入** 空白字元 `" "` 以增進可讀性
+- **插入** 標點符號如逗號，來創造適當的格式
 
-**模板字串**是另一種格式化字串的方式，不同於引號，使用的是反引號。任何非純文字的內容都必須放在 `${ }` 區塊中，包括可能是字串的變數。
+✅ 為什麼在 JavaScript 之中 `1 + 1 = 2`，但是 `'1' + '1' = 11` 呢？想一想。那 `'1' + 1` 呢？
+
+**範本字串**是另一種格式化字串的方法，只是用的是反引號（backtick）而非引號。任何不是純文字的內容必須放在 `${ }` 佔位符裡面。這包括任何可能是字串的變數。
 
 ```javascript
 let myString1 = "Hello";
 let myString2 = "World";
 
-`${myString1} ${myString2}!` //Hello World!
-`${myString1}, ${myString2}!` //Hello, World!
+`${myString1} ${myString2}!` //哈囉，世界！
+`${myString1}, ${myString2}!` //哈囉，世界！
 ```
 
-你可以使用任一方法來實現格式化目標，但模板字串會保留所有空格和換行。
-
-✅ 什麼時候你會使用模板字串而不是普通字串？
+**讓我們理解各個部分：**
+- **使用** 反引號 `` ` `` 代替一般引號來建立範本字串
+- **直接嵌入** 變數，利用 `${}` 佔位符語法
+- **保持** 空格和格式與原文一致
+- **提供** 一種更乾淨的方式來建立包含變數的複雜字串
+
+你可以使用任一方式達成格式化目的，但範本字串會尊重所有空格和換行。
+
+✅ 何時會使用範本字串而非普通字串？
+
+### 🔤 **字串熟練度檢查：文字操作信心**
+
+**評估你的字串技能：**
+- 你能解釋為什麼 `'1' + '1'` 等於 `'11'` 而不是 `2` 嗎？
+- 你覺得哪種字串方法較具可讀性：串接還是範本字串？
+- 如果忘記在字串周圍加引號會發生什麼事情？
+
+```mermaid
+stateDiagram-v2
+    [*] --> PlainText: "你好"
+    [*] --> Variable: name = "Alice"
+    PlainText --> Concatenated: + " " + name
+    Variable --> Concatenated
+    PlainText --> Template: `你好 ${name}`
+    Variable --> Template
+    Concatenated --> Result: "你好 Alice"
+    Template --> Result
+    
+    note right of Concatenated
+        傳統方法
+        較冗長
+    end note
+    
+    note right of Template
+        現代 ES6 語法
+        更簡潔且易讀
+    end note
+```
+> **專家秘訣**：範本字串通常在建構複雜字串時更受青睞，因為它們更為可讀且能完美處理多行字串！
 
 ### 布林值
 
-布林值只有兩個值：`true` 或 `false`。布林值可以幫助決定在滿足某些條件時應執行哪些程式碼行。在許多情況下，[運算符](../../../../2-js-basics/1-data-types)會協助設定布林值，並且你會經常注意到變數被初始化或其值被運算符更新。
+布林值代表最簡單的資料形式：它只能有兩種值之一 —— `true` 或 `false`。這個二元邏輯系統可追溯自 19 世紀數學家 George Boole 的布林代數。
 
-- `let myTrueBool = true`
-- `let myFalseBool = false`
+儘管它們很簡單，布林值對於程式邏輯至關重要。它們讓程式能根據條件做出決策——用戶是否登入、按鈕是否被點擊、或是否符合某些條件。
 
-✅ 如果一個變數的值評估為布林值 `true`，則可以認為它是「真值」。有趣的是，在 JavaScript 中，[所有值都是真值，除非被定義為假值](https://developer.mozilla.org/docs/Glossary/Truthy)。
+布林值只能是 `true` 或 `false`。布林值可以協助判斷當特定條件成立時，哪些程式碼行應該執行。許多情況下，[運算子](../../../../2-js-basics/1-data-types)協助設定布林值的內容，你也會常見到變數被初始化或其值透過運算子被更新。
+
+```javascript
+let myTrueBool = true;
+let myFalseBool = false;
+```
+
+**如上所示，我們：**
+- **建立** 一個變數來儲存布林值 `true`
+- **示範** 如何儲存布林值 `false`
+- **使用** 正確的關鍵字 `true` 和 `false`（不需要引號）
+- **準備** 這些變數以供條件判斷使用
+
+✅ 如果變數評估為布林 `true`，就可視為“truthy”。有趣的是，在 JavaScript 中，[所有值都是 truthy，除非被定義為 falsy](https://developer.mozilla.org/docs/Glossary/Truthy)。
+
+```mermaid
+flowchart LR
+    A["🔘 布林值"] --> B["true"]
+    A --> C["false"]
+    
+    D["真值"] --> D1["'hello'"]
+    D --> D2["42"]
+    D --> D3["[]"]
+    D --> D4["{}"]
+    
+    E["假值"] --> E1["false"]
+    E --> E2["0"]
+    E --> E3["''"]
+    E --> E4["null"]
+    E --> E5["undefined"]
+    E --> E6["NaN"]
+    
+    style B fill:#e8f5e8
+    style C fill:#ffebee
+    style D fill:#e3f2fd
+    style E fill:#fff3e0
+```
+### 🎯 **布林邏輯檢查：決策能力**
+
+**測試你的布林理解：**
+- 你認為為什麼 JavaScript 除了 `true` 和 `false` 外，還有 "truthy" 和 "falsy" 的概念？
+- 你能判斷以下哪個是假值 (falsy) 嗎：`0`、`"0"`、`[]`、`"false"`？
+- 布林值如何幫助控制程式流程？
+
+```mermaid
+pie title "常見的布林使用案例"
+    "條件邏輯" : 40
+    "使用者狀態" : 25
+    "功能切換" : 20
+    "驗證" : 15
+```
+> **記住**：在 JavaScript 中，只有 6 個 falsy 值：`false`、`0`、`""`、`null`、`undefined` 和 `NaN`。其它全是 truthy！
 
 ---
 
+## 📊 **你的資料型別工具包總結**
+
+```mermaid
+graph TD
+    A["🎯 JavaScript 資料型別"] --> B["📦 變數"]
+    A --> C["🔢 數字"]
+    A --> D["📝 字串"]
+    A --> E["🔘 布林值"]
+    
+    B --> B1["let 可變"]
+    B --> B2["const 不可變"]
+    
+    C --> C1["42, 3.14, -5"]
+    C --> C2["+ - * / %"]
+    
+    D --> D1["'單引號' 或 \\\"雙引號\\\""]
+    D --> D2["`模板字串`"]
+    
+    E --> E1["true 或 false"]
+    E --> E2["真值 vs 假值"]
+    
+    F["⚡ 重要概念"] --> F1["運算時型別很重要"]
+    F --> F2["JavaScript 是動態型別"]
+    F --> F3["變數型別可變"]
+    F --> F4["命名大小寫有區分"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+    style F fill:#fce4ec
+```
+## GitHub Copilot Agent 挑戰 🚀
+
+利用 Agent 模式完成以下挑戰：
+
+**描述：** 創建一個個人資訊管理器，展現本課程中學到的所有 JavaScript 資料型別，同時處理真實世界的資料場景。
+
+**提示：** 建立一個 JavaScript 程式，創建一個使用者資料物件，包含：姓名（字串）、年齡（數字）、是否為學生（布林值）、喜愛顏色陣列，以及含有街道、城市和郵遞區號的地址物件。包含函式來顯示個人資料資訊及更新各欄位。確保示範字串串接、範本字串、使用年齡進行的算術運算，以及學生狀態的布林邏輯。
+
+想了解更多 [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode)。
+
 ## 🚀 挑戰
 
-JavaScript 因其偶爾令人驚訝的資料型別處理方式而聞名。進行一些研究，了解這些「陷阱」。例如：大小寫敏感可能會讓你吃虧！在控制台中嘗試以下操作：`let age = 1; let Age = 2; age == Age`（結果為 `false` —— 為什麼？）。你還能找到哪些其他陷阱？
+JavaScript 有些行為會讓開發者措手不及。以下是經典範例：試著在瀏覽器主控台輸入：`let age = 1; let Age = 2; age == Age` 並觀察結果。它回傳 `false` — 你能判斷為什麼嗎？
+
+這代表許多值得瞭解的 JavaScript 行為之一。熟悉這些細節有助於你寫出更穩健的程式碼，並更有效地除錯。
 
-## 課後測驗
-[課後測驗](https://ff-quizzes.netlify.app)
+## 課後小測驗
+[課後小測驗](https://ff-quizzes.netlify.app)
 
 ## 複習與自學
 
-查看[這份 JavaScript 練習題列表](https://css-tricks.com/snippets/javascript/)並嘗試其中一題。你學到了什麼？
+看看[這份 JavaScript 練習清單](https://css-tricks.com/snippets/javascript/)並嘗試其中一項。你學到了什麼？
 
 ## 作業
 
 [資料型別練習](assignment.md)
 
+## 🚀 你的 JavaScript 資料型別精通時間線
+
+### ⚡ **接下來 5 分鐘你可以做什麼**
+- [ ] 打開瀏覽器主控台，建立三個不同資料型別的變數
+- [ ] 嘗試挑戰：`let age = 1; let Age = 2; age == Age`，並搞懂為什麼會是 false
+- [ ] 練習用你的名字和愛好數字做字串串接
+- [ ] 試試看數字和字串相加時會發生什麼
+
+### 🎯 **接下來一小時你可以完成什麼**
+- [ ] 完成課後小測驗並複習任何不清楚的概念
+- [ ] 建立一個迷你計算機，能做加減乘除兩數運算
+- [ ] 用範本字串建立一個簡單的姓名格式化程式
+- [ ] 探索 `==` 與 `===` 比較運算子之間的差異
+- [ ] 練習不同資料型別的互轉
+
+### 📅 **你的一週 JavaScript 基礎**
+- [ ] 帶著自信和創意完成作業
+- [ ] 建立個人資料物件，使用全部學到的資料型別
+- [ ] 練習 [CSS-Tricks 的 JavaScript 練習題](https://css-tricks.com/snippets/javascript/)
+- [ ] 用布林邏輯建立簡單的表單驗證器
+- [ ] 嘗試陣列和物件資料型別（下一課預告）
+- [ ] 加入 JavaScript 社群並詢問關於資料型別的問題
+
+### 🌟 **你的一個月轉變**
+- [ ] 將資料型別知識整合到大型程式專案裡
+- [ ] 理解在實務中何時、為什麼使用每個資料型別
+- [ ] 幫助其他初學者理解 JavaScript 基礎
+- [ ] 建立一個管理不同類型使用者資料的小型應用程式
+- [ ] 探索進階資料型別概念，如型別強制轉換與嚴格相等
+- [ ] 透過文件改善，為開源 JavaScript 專案做出貢獻
+
+### 🧠 **終極資料型別精通檢視**
+
+**慶祝你的 JavaScript 基礎：**
+- 哪種資料型別的行為讓你最感意外？
+- 你對於向朋友講解變數與常數的舒服程度如何？
+- 在 JavaScript 的型別系統裡，你發現最有趣的事情是什麼？
+- 你能想像用這些基本概念打造哪種實際應用程式？
+
+```mermaid
+journey
+    title 你的 JavaScript 信心之旅
+    section 今天
+      困惑: 3: 你
+      好奇: 4: 你
+      興奮: 5: 你
+    section 本週
+      練習中: 4: 你
+      理解中: 5: 你
+      建構中: 5: 你
+    section 下個月
+      解決問題: 5: 你
+      教導他人: 5: 你
+      實際專案: 5: 你
+```
+> 💡 **基礎已建立！** 了解資料型別就像學會字母，然後開始寫故事。你未來寫的每個 JavaScript 程式都會用到這些基礎概念。你現在擁有建構互動網站、動態應用，以及以程式解決真實問題的基石。歡迎進入奇妙的 JavaScript 世界！ 🎉
+
 ---
 
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
 **免責聲明**：  
-本文件使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。應以原始語言的文件作為權威來源。對於關鍵資訊，建議尋求專業人工翻譯。我們對因使用此翻譯而產生的任何誤解或錯誤解讀概不負責。
\ No newline at end of file
+本文件係使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們力求準確，但請注意自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於重要資訊，建議採用專業人工翻譯。對於因使用本翻譯而產生的任何誤解或誤譯，我們概不負責。
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->
\ No newline at end of file
diff --git a/translations/tw/2-js-basics/1-data-types/assignment.md b/translations/tw/2-js-basics/1-data-types/assignment.md
index b0bc3032..a6196b5d 100644
--- a/translations/tw/2-js-basics/1-data-types/assignment.md
+++ b/translations/tw/2-js-basics/1-data-types/assignment.md
@@ -1,25 +1,103 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "de0ec12c337394806425c7fd2f003b62",
-  "translation_date": "2025-10-03T08:58:53+00:00",
+  "original_hash": "6fd645e97c48cd5eb5a3d290815ec8b5",
+  "translation_date": "2026-01-06T13:30:36+00:00",
   "source_file": "2-js-basics/1-data-types/assignment.md",
   "language_code": "tw"
 }
 -->
-# 資料型別練習
+# Data Types Practice: 電子商務購物車
 
-## 說明
+## Instructions
 
-假設您正在建立一個購物車。撰寫有關完成購物體驗所需資料型別的文件。對於每種資料型別，解釋如何使用以及為什麼需要使用，並提供範例。六種 JavaScript 資料型別分別是：String、Number、Boolean、Null、Undefined 和 Object。
+想像你正在構建一個現代電子商務購物車系統。此作業將幫助你理解不同的 JavaScript 資料型態如何協同運作，以建立現實世界的應用程式。
 
-## 評分標準
+### Your Task
 
-標準 | 卓越 | 合格 | 需改進
---- | --- | --- | --- |
-資料型別 | 六種資料型別均列出，詳細探討並附有範例 | 探討四種資料型別並有部分解釋 | 僅探討兩種資料型別且解釋不足 |
+建立一份全面分析，說明你將如何在購物車應用中使用 JavaScript 資料型態。針對七種基本資料型態及物件，你需要：
+
+1. **識別** 資料型態及其用途
+2. **解釋** 為何此資料型態是特定購物車功能的最佳選擇
+3. **提供** 實際的程式碼範例，展示該資料型態的應用
+4. **描述** 此資料型態如何與購物車中的其他部分互動
+
+### Required Data Types to Cover
+
+**基本資料型態：**
+- **String**：產品名稱、描述、用戶資訊
+- **Number**：價格、數量、稅額計算
+- **Boolean**：商品可用性、用戶偏好、購物車狀態
+- **Null**：有意留空的值（例如缺失的折扣碼）
+- **Undefined**：未初始化的值或缺少的資料
+- **Symbol**：唯一識別符（進階應用）
+- **BigInt**：大型金融計算（進階應用）
+
+**參考型態：**
+- **Object**：產品細節、用戶資料、購物車內容
+- **Array**：產品清單、訂單歷史、分類
+
+### Example Format for Each Data Type
+
+針對每個資料型態，請依照以下格式撰寫：
+
+```markdown
+## [Data Type Name]
+
+**Purpose in Shopping Cart:** [Explain what this data type does]
+
+**Why This Type:** [Explain why this is the best choice]
+
+**Code Example:**
+```javascript
+// Your realistic code example here
+```
+
+**Real-world Usage:** [描述在實務中如何運作]
+
+**Interactions:** [解釋此資料型態如何與其他型態互動]
+```
+
+### Bonus Challenges
+
+1. **Type Coercion**: Show an example where JavaScript automatically converts between data types in your shopping cart (e.g., string "5" + number 10)
+
+2. **Data Validation**: Demonstrate how you would check if user input is the correct data type before processing
+
+3. **Performance Considerations**: Explain when you might choose one data type over another for performance reasons
+
+### Submission Guidelines
+
+- Create a markdown document with clear headings for each data type
+- Include working JavaScript code examples
+- Use realistic e-commerce scenarios in your examples
+- Explain your reasoning clearly for beginners to understand
+- Test your code examples to ensure they work correctly
+
+## Rubric
+
+| Criteria | Exemplary (90-100%) | Proficient (80-89%) | Developing (70-79%) | Needs Improvement (Below 70%) |
+|----------|---------------------|---------------------|---------------------|------------------------------|
+| **Data Type Coverage** | All 7 primitive types and objects/arrays covered with detailed explanations | 6-7 data types covered with good explanations | 4-5 data types covered with basic explanations | Fewer than 4 data types or minimal explanations |
+| **Code Examples** | All examples are realistic, working, and well-commented | Most examples work and are relevant to e-commerce | Some examples work but may be generic | Code examples are incomplete or non-functional |
+| **Real-world Application** | Clearly connects each data type to practical shopping cart features | Good connection to e-commerce scenarios | Some connection to shopping cart context | Limited real-world application demonstrated |
+| **Technical Accuracy** | All technical information is correct and demonstrates deep understanding | Most technical information is accurate | Generally accurate with minor errors | Contains significant technical errors |
+| **Communication** | Explanations are clear, beginner-friendly, and well-organized | Good explanations that are mostly clear | Explanations are understandable but may lack clarity | Explanations are unclear or poorly organized |
+| **Bonus Elements** | Includes multiple bonus challenges with excellent execution | Includes one or more bonus challenges well done | Attempts bonus challenges with mixed success | No bonus challenges attempted |
+
+### Learning Objectives
+
+By completing this assignment, you will:
+- ✅ **Understand** the seven JavaScript primitive data types and their uses
+- ✅ **Apply** data types to real-world programming scenarios
+- ✅ **Analyze** when to choose specific data types for different purposes
+- ✅ **Create** working code examples that demonstrate data type usage
+- ✅ **Explain** technical concepts in beginner-friendly language
+- ✅ **Connect** fundamental programming concepts to practical applications
 
 ---
 
-**免責聲明**：  
-本文件已使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。儘管我們努力確保翻譯的準確性，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於關鍵信息，建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或誤釋不承擔責任。
\ No newline at end of file
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**免責聲明**：
+本文件由 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 所翻譯。雖然我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於重要資訊，建議使用專業人工翻譯。我們不對因使用本翻譯而產生的任何誤解或誤譯負責。
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->
\ No newline at end of file
diff --git a/translations/tw/2-js-basics/2-functions-methods/README.md b/translations/tw/2-js-basics/2-functions-methods/README.md
index de09444e..e6b31300 100644
--- a/translations/tw/2-js-basics/2-functions-methods/README.md
+++ b/translations/tw/2-js-basics/2-functions-methods/README.md
@@ -1,45 +1,105 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "92e136090efc4341b1d51c37924c1802",
-  "translation_date": "2025-08-29T15:23:28+00:00",
+  "original_hash": "71f7d7dafa1c7194d79ddac87f669ff9",
+  "translation_date": "2026-01-06T13:26:41+00:00",
   "source_file": "2-js-basics/2-functions-methods/README.md",
   "language_code": "tw"
 }
 -->
 # JavaScript 基礎：方法與函式
 
-![JavaScript 基礎 - 函式](../../../../translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.tw.png)
-> 繪圖筆記由 [Tomomi Imura](https://twitter.com/girlie_mac) 提供
+![JavaScript Basics - Functions](../../../../translated_images/webdev101-js-functions.be049c4726e94f8b.tw.png)
+> 手繪筆記作者：[Tomomi Imura](https://twitter.com/girlie_mac)
+
+```mermaid
+journey
+    title 你的 JavaScript 函數冒險
+    section 基礎
+      函數語法: 5: 你
+      呼叫函數: 4: 你
+      參數與引數: 5: 你
+    section 進階概念
+      返回值: 4: 你
+      預設參數: 5: 你
+      函數組合: 4: 你
+    section 現代 JavaScript
+      箭頭函數: 5: 你
+      匿名函數: 4: 你
+      高階函數: 5: 你
+```
+## 課前小測驗
+[課前小測驗](https://ff-quizzes.netlify.app)
+
+重複寫同樣的程式碼是程式設計中最常見的挫折之一。函式解決這個問題，讓你可以把程式碼包裝成可重複使用的區塊。可以把函式想像成亨利·福特裝配線中標準化的零件——一旦你建立了可靠的組件，就可以在需要時使用它，而不用重新打造。
 
-## 課前測驗
-[課前測驗](https://ff-quizzes.netlify.app)
+函式讓你把程式碼片段打包，方便在整個程式中重複使用。不用到處複製貼上相同的邏輯，你只需建立一次函式，然後隨時呼叫。這種做法讓你的程式碼保持整潔，也讓更新變得輕鬆許多。
 
-在撰寫程式碼時，我們總是希望確保程式碼具有可讀性。雖然這聽起來有些矛盾，但程式碼被閱讀的次數遠遠多於被撰寫的次數。開發者工具箱中的一個核心工具就是 **函式**，它能幫助我們確保程式碼的可維護性。
+在本課中，你將學習如何建立自己的函式、傳遞資訊給它們，並獲取有用的結果。你會理解函式和方法的差異、學習現代語法方式，並看到函式如何與其他函式協作。我們將一步步建立這些概念。
 
 [![方法與函式](https://img.youtube.com/vi/XgKsD6Zwvlc/0.jpg)](https://youtube.com/watch?v=XgKsD6Zwvlc "方法與函式")
 
 > 🎥 點擊上方圖片觀看有關方法與函式的影片。
 
-> 您可以在 [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-functions/?WT.mc_id=academic-77807-sagibbon) 上學習本課程！
-
+> 你也可以在 [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-functions/?WT.mc_id=academic-77807-sagibbon) 上學習這堂課！
+
+```mermaid
+mindmap
+  root((JavaScript Functions))
+    Basic Concepts
+      Declaration
+        傳統語法
+        箭頭函式語法
+      Calling
+        使用括號
+        需要括號
+    Parameters
+      Input Values
+        多個參數
+        預設值
+      Arguments
+        傳入的值
+        可為任意類型
+    Return Values
+      Output Data
+        return 陳述式
+        離開函式
+      Use Results
+        儲存於變數
+        鏈結函式
+    Advanced Patterns
+      Higher-Order
+        函式作為參數
+        回呼函式
+      Anonymous
+        不需要名稱
+        內嵌定義
+```
 ## 函式
 
-函式的核心是一段可以按需執行的程式碼。這非常適合需要多次執行相同任務的情境；與其在多個地方重複邏輯（這會在需要更新時變得困難），我們可以將邏輯集中在一個地方，並在需要執行操作時呼叫它——甚至可以從其他函式中呼叫函式！
+函式是獨立的程式碼區塊，用來完成特定任務。它封裝了邏輯，使你能夠在需要時執行。
+
+與其在程式中重複寫相同的程式碼，不如打包成函式，並在需要時呼叫該函式。這讓你的程式碼保持乾淨，也讓維護更容易。想像如果你需要修改散布在 20 個不同位置的邏輯會有多麻煩。
 
-同樣重要的是為函式命名的能力。雖然這看起來微不足道，但名稱提供了一種快速記錄程式碼片段的方式。您可以將其視為按鈕上的標籤。如果我點擊一個標有「取消計時器」的按鈕，我就知道它會停止時鐘的運行。
+為你的函式取具描述性的名稱非常重要。一個命名良好的函式能清楚傳達它的用途——當你看到 `cancelTimer()` 時，你立刻明白它的功能，就像明確標示的按鈕讓你一看就知道按下後會發生什麼事。
 
-## 建立與呼叫函式
+## 創建與呼叫函式
 
-函式的語法如下所示：
+讓我們來看看如何創建函式。語法遵循固定模式：
 
 ```javascript
-function nameOfFunction() { // function definition
- // function definition/body
+function nameOfFunction() { // 函數定義
+ // 函數定義／主體
 }
 ```
 
-如果我想建立一個函式來顯示問候語，它可能看起來像這樣：
+來拆解一下：
+- `function` 關鍵字告訴 JavaScript「嘿，我要建立函式了！」
+- `nameOfFunction` 是你給函式取的描述性名稱
+- 括號 `()` 中可以加入參數（我們稍後會說明）
+- 大括號 `{}` 包含呼叫函式時會執行的實際程式碼
+
+我們來寫一個簡單的問候函式，看它如何運作：
 
 ```javascript
 function displayGreeting() {
@@ -47,28 +107,57 @@ function displayGreeting() {
 }
 ```
 
-每當我們想要呼叫（或執行）函式時，我們使用函式名稱後加上 `()`。值得注意的是，我們的函式可以在呼叫之前或之後定義；JavaScript 編譯器會幫您找到它。
+這個函式會在控制台印出「Hello, world!」。一旦定義完成，你就可以隨時呼叫它。
+
+要執行（或「呼叫」）函式，寫函式名稱後跟括號即可。JavaScript 允許你在呼叫函式前或後定義函式，JavaScript 引擎會負責處理執行順序。
 
 ```javascript
-// calling our function
+// 呼叫我們的函數
 displayGreeting();
 ```
 
-> **NOTE:** 有一種特殊類型的函式稱為 **方法**，您已經在使用了！事實上，我們在上面的示例中使用 `console.log` 時就看到了這一點。方法與函式的不同之處在於，方法附加在物件上（例如我們的例子中的 `console`），而函式則是獨立的。您會發現許多開發者會交替使用這些術語。
+執行這行後，函式內的所有程式碼會執行，並在瀏覽器的控制台中顯示「Hello, world!」。你可以重複呼叫這個函式。
+
+### 🧠 **函式基礎檢測：建立你的第一個函式**
+
+**來測試你對基本函式的理解：**
+- 為什麼函式定義中使用大括號 `{}`？
+- 如果你寫成 `displayGreeting` 而沒有括號會發生什麼事？
+- 為什麼你會想多次呼叫同一個函式？
+
+```mermaid
+flowchart TD
+    A["✏️ 定義函式"] --> B["📦 打包程式碼"]
+    B --> C["🏷️ 命名它"]
+    C --> D["📞 需要時呼叫"]
+    D --> E["🔄 在任何地方重複使用"]
+    
+    F["💡 好處"] --> F1["不重複撰寫程式碼"]
+    F --> F2["容易維護"]
+    F --> F3["組織清晰"]
+    F --> F4["更容易測試"]
+    
+    style A fill:#e3f2fd
+    style E fill:#e8f5e8
+    style F fill:#fff3e0
+```
+> **注意：** 在這些課程中你一直在使用 **方法**。`console.log()` 是方法——本質上是屬於 `console` 物件的函式。主要區別在於方法附加在物件上，而函式是獨立存在。很多開發者在平常對話中會混用這兩個詞。
 
-### 函式的最佳實踐
+### 函式最佳實踐
 
-在建立函式時，有一些最佳實踐需要記住：
+以下幾點可以幫助你撰寫優秀的函式：
 
-- 一如既往，使用描述性的名稱，讓您知道函式的用途
-- 使用 **camelCasing** 來結合多個單字
-- 讓函式專注於特定的任務
+- 為函式取清楚且具描述性的名稱——未來的你會感謝自己！
+- 多字名稱使用 **駝峰式命名**（如 `calculateTotal`，而不是 `calculate_total`）
+- 保持每個函式專注做好一件事
 
 ## 傳遞資訊給函式
 
-為了讓函式更具重用性，您通常需要向函式傳遞資訊。如果我們考慮上面的 `displayGreeting` 示例，它只會顯示 **Hello, world!**。這並不是一個非常有用的函式。如果我們希望它更靈活一些，例如允許指定要問候的人的名字，我們可以添加一個 **參數**。參數（有時也稱為 **引數**）是傳遞給函式的額外資訊。
+我們之前的 `displayGreeting` 函式很有限——它只能印出「Hello, world!」。參數讓函式更靈活、更有用。
+
+**參數** 就像佔位符，每次你呼叫函式時可以放入不同的值。這樣同一個函式就可以在每次呼叫時根據不同資訊執行。
 
-參數在定義部分列於括號內，並以逗號分隔，如下所示：
+你在定義函式時，在括號內列出參數，多個參數以逗號分隔：
 
 ```javascript
 function name(param, param2, param3) {
@@ -76,7 +165,9 @@ function name(param, param2, param3) {
 }
 ```
 
-我們可以更新 `displayGreeting` 以接受名字並顯示該名字。
+每個參數就像佔位符——呼叫函式時，使用者會提供實際的值替代這些位置。
+
+我們來改寫問候函式，讓它接受名字參數：
 
 ```javascript
 function displayGreeting(name) {
@@ -85,16 +176,44 @@ function displayGreeting(name) {
 }
 ```
 
-當我們想要呼叫函式並傳遞參數時，我們在括號內指定它。
+注意我們用反引號（`` ` ``）和 `${}` 直接把名字代入訊息——這叫做模板字串，是混合變數建立字串的方便方式。
+
+現在呼叫函式時，可以傳入任意名字：
 
 ```javascript
 displayGreeting('Christopher');
-// displays "Hello, Christopher!" when run
+// 執行時顯示「Hello, Christopher!」
 ```
 
+JavaScript 會把字串 `'Christopher'` 指派給 `name` 參數，並產生個人化訊息「Hello, Christopher!」。
+
+```mermaid
+flowchart LR
+    A["🎯 函式呼叫"] --> B["📥 參數"]
+    B --> C["⚙️ 函式主體"]
+    C --> D["📤 結果"]
+    
+    A1["displayGreeting('Alice')"] --> A
+    B1["name = 'Alice'"] --> B
+    C1["範本字串\n\`Hello, \${name}!\`"] --> C
+    D1["'Hello, Alice!'"] --> D
+    
+    E["🔄 參數類型"] --> E1["字串"]
+    E --> E2["數字"]
+    E --> E3["布林值"]
+    E --> E4["物件"]
+    E --> E5["函式"]
+    
+    style A fill:#e3f2fd
+    style C fill:#e8f5e8
+    style D fill:#fff3e0
+    style E fill:#f3e5f5
+```
 ## 預設值
 
-我們可以通過添加更多參數使函式更加靈活。但如果我們不希望每個值都必須指定呢？以問候語的例子為例，我們可以將名字設為必填（我們需要知道要問候誰），但希望允許問候語根據需要進行自定義。如果有人不想自定義，我們提供一個預設值。要為參數提供預設值，我們可以像為變數設置值一樣進行設置——`parameterName = 'defaultValue'`。完整示例如下：
+如果我們要讓某些參數可選怎麼辦？這時就用預設值！
+
+假設我們想讓人可以自訂問候詞，但如果不指定，我們就用「Hello」作為預設。你可以用等號設定預設值，就像給變數設定：
 
 ```javascript
 function displayGreeting(name, salutation='Hello') {
@@ -102,29 +221,63 @@ function displayGreeting(name, salutation='Hello') {
 }
 ```
 
-當我們呼叫函式時，可以決定是否要為 `salutation` 設置值。
+這裡 `name` 仍是必須的，但 `salutation` 有預設值 `'Hello'`，如果沒提供別的問候詞就用它。
+
+現在我們可以用兩種不同方式呼叫函式：
 
 ```javascript
 displayGreeting('Christopher');
-// displays "Hello, Christopher"
+// 顯示 "Hello, Christopher"
 
 displayGreeting('Christopher', 'Hi');
-// displays "Hi, Christopher"
+// 顯示 "Hi, Christopher"
+```
+
+第一次呼叫，因為沒有指定問候詞，JavaScript 就用預設「Hello」。第二次呼叫則用我們自訂的「Hi」。這種彈性讓函式適用於多種場景。
+
+### 🎛️ **參數熟練度檢測：讓函式更彈性**
+
+**測試你對參數的理解：**
+- 參數（parameter）和引數（argument）有什麼差別？
+- 為什麼預設值在實務編程中很有用？
+- 如果傳入的引數比參數多，會發生什麼事？
+
+```mermaid
+stateDiagram-v2
+    [*] --> NoParams: function greet() {}
+    [*] --> WithParams: function greet(name) {}
+    [*] --> WithDefaults: function greet(name, greeting='Hi') {}
+    
+    NoParams --> Static: 輸出總是相同
+    WithParams --> Dynamic: 隨輸入變化
+    WithDefaults --> Flexible: 可選的自訂
+    
+    Static --> [*]
+    Dynamic --> [*]
+    Flexible --> [*]
+    
+    note right of WithDefaults
+        最靈活的方法
+        向後相容
+    end note
 ```
+> **專業提示**：預設參數讓你的函式更友善。使用者可以快速用合理預設開始，但也能依需要自訂！
 
 ## 回傳值
 
-到目前為止，我們建立的函式會始終輸出到 [console](https://developer.mozilla.org/docs/Web/API/console)。有時這正是我們所需要的，特別是當我們建立會呼叫其他服務的函式時。但如果我想建立一個輔助函式來執行計算並將值回傳，以便我可以在其他地方使用它呢？
+迄今為止，我們的函式只是印出訊息，但如果你想要函式計算並回傳結果呢？
 
-我們可以通過使用 **回傳值** 來實現。回傳值由函式回傳，並且可以像字串或數字等靜態值一樣存儲在變數中。
+這時用到 **回傳值**。函式不只是顯示東西，可以把值「交還」給呼叫者，讓你存到變數或用於程式其他地方。
 
-如果函式確實回傳某些內容，則使用關鍵字 `return`。`return` 關鍵字需要一個值或參考作為回傳內容，如下所示：
+要回傳值，用 `return` 關鍵字，後面接你想回傳的東西：
 
 ```javascript
 return myVariable;
-```  
+```
+
+重要的是：函式遇到 `return` 陳述句會立刻停止執行，並把該值返還給呼叫它的地方。
 
-我們可以建立一個函式來建立問候語訊息並將值回傳給呼叫者。
+讓我們修改問候函式，讓它回傳訊息，而不是印出：
 
 ```javascript
 function createGreetingMessage(name) {
@@ -133,35 +286,81 @@ function createGreetingMessage(name) {
 }
 ```
 
-呼叫此函式時，我們會將值存儲在變數中。這與我們將變數設置為靜態值（例如 `const name = 'Christopher'`）的方式非常相似。
+現在函式不是印出問候語，而是建立訊息並回傳給我們。
+
+要使用回傳值，我們可以把它存到變數裡，就像任何其他值：
 
 ```javascript
 const greetingMessage = createGreetingMessage('Christopher');
 ```
 
-## 函式作為函式的參數
+`greetingMessage` 現在包含「Hello, Christopher」，我們可以任意在程式碼中使用——顯示在網頁上、放入電子郵件，或傳給其他函式。
+
+```mermaid
+flowchart TD
+    A["🔧 函式處理"] --> B{"回傳敘述?"}
+    B -->|是| C["📤 回傳值"]
+    B -->|否| D["📭 回傳未定義"]
+    
+    C --> E["💾 儲存至變數"]
+    C --> F["🔗 在運算式中使用"]
+    C --> G["📞 傳入函式"]
+    
+    D --> H["⚠️ 通常沒用"]
+    
+    I["📋 回傳值用途"] --> I1["計算結果"]
+    I --> I2["驗證輸入"]
+    I --> I3["資料轉換"]
+    I --> I4["創造物件"]
+    
+    style C fill:#e8f5e8
+    style D fill:#ffebee
+    style I fill:#e3f2fd
+```
+### 🔄 **回傳值檢測：取得結果**
+
+**評估你對回傳值的理解：**
+- 函式中 `return` 之後的程式碼會發生什麼？
+- 為什麼回傳值通常比直接印到控制台更好？
+- 函式能回傳不同類型的值嗎（字串、數字、布林）？
+
+```mermaid
+pie title "常見的回傳值類型"
+    "字串" : 30
+    "數字" : 25
+    "物件" : 20
+    "布林值" : 15
+    "陣列" : 10
+```
+> **關鍵見解**：回傳值函式更靈活，因為呼叫者決定如何使用結果。這讓程式碼更模組化且可重複使用！
+
+## 函式作為其他函式的參數
+
+函式也可以作為參數傳給其它函式。這個概念乍看很複雜，但它是靈活程式編寫的重要特性。
 
-隨著您在程式設計生涯中的進步，您會遇到接受函式作為參數的函式。這個巧妙的技巧通常用於我們不知道某件事何時會發生或完成，但我們知道需要執行某個操作作為回應。
+這種模式很常用於「當某事發生時，做這個事」。如「計時器結束時，執行這段程式碼」或「使用者按鈕點擊時，呼叫此函式。」
 
-例如，考慮 [setTimeout](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout)，它啟動一個計時器並在完成時執行程式碼。我們需要告訴它我們想執行什麼程式碼。聽起來像是函式的完美工作！
+來看內建的 `setTimeout` 函式，它會等待一段時間，然後執行某段程式碼。得告訴它要執行什麼程式碼——這時傳入函式就是很好的用法！
 
-如果您執行以下程式碼，3 秒後您會看到訊息 **3 seconds has elapsed**。
+試試這段程式碼——3 秒後，你會看到訊息：
 
 ```javascript
 function displayDone() {
   console.log('3 seconds has elapsed');
 }
-// timer value is in milliseconds
+// 計時器數值為毫秒
 setTimeout(displayDone, 3000);
 ```
 
+注意我們把 `displayDone`（沒加括號）傳給 `setTimeout`。我們不是自己呼叫函式，而是交給 `setTimeout`，告訴它「3 秒後呼叫這個函式」。
+
 ### 匿名函式
 
-讓我們再看看我們建立的內容。我們正在建立一個只會使用一次的具名函式。隨著應用程式變得更加複雜，我們可能會建立許多只會被呼叫一次的函式。這並不理想。事實證明，我們並不總是需要提供名稱！
+有時候你只需要一個函式做特定事，不想給它名字。想想看——如果你只用一次函式，幹嘛讓程式碼多個名稱？
 
-當我們將函式作為參數傳遞時，我們可以跳過事先建立函式，而是在參數中直接建立它。我們使用相同的 `function` 關鍵字，但將其作為參數來建立。
+JavaScript 允許你建立 **匿名函式**——沒有名字、直接在需要地方定義的函式。
 
-讓我們重寫上述程式碼以使用匿名函式：
+我們用匿名函式改寫計時器範例：
 
 ```javascript
 setTimeout(function() {
@@ -169,13 +368,15 @@ setTimeout(function() {
 }, 3000);
 ```
 
-如果您執行我們的新程式碼，您會注意到結果相同。我們建立了一個函式，但不需要給它命名！
+結果一樣，但函式直接寫在 `setTimeout` 內，免去額外的函式宣告。
 
-### Fat Arrow 函式
+### 箭頭函式
 
-許多程式語言（包括 JavaScript）中常見的一個快捷方式是使用所謂的 **箭頭** 或 **Fat Arrow** 函式。它使用特殊的指示符 `=>`，看起來像一個箭頭——因此得名！通過使用 `=>`，我們可以跳過 `function` 關鍵字。
+現代 JavaScript 有更短的函式寫法，叫做 **箭頭函式**。它用 `=>` （看起來像箭頭）且深受開發者喜愛。
 
-讓我們再一次重寫程式碼以使用 Fat Arrow 函式：
+箭頭函式省去了 `function` 關鍵字，可寫出更簡潔的程式碼。
+
+這是用箭頭函式改寫的計時器範例：
 
 ```javascript
 setTimeout(() => {
@@ -183,28 +384,200 @@ setTimeout(() => {
 }, 3000);
 ```
 
-### 何時使用每種策略
-
-您現在已經看到我們有三種方式將函式作為參數傳遞，可能會想知道何時使用哪一種。如果您知道函式會被多次使用，請正常建立它。如果只會在一個地方使用，通常最好使用匿名函式。至於使用 Fat Arrow 函式還是更傳統的 `function` 語法，則取決於您，但您會注意到大多數現代開發者更喜歡使用 `=>`。
+`()` 是參數（此例為空），然後是箭頭 `=>`，最後是用大括號包裹的函式主體。這給你一樣功能，但語法更精簡。
+
+```mermaid
+flowchart LR
+    A["📝 函數風格"] --> B["傳統"]
+    A --> C["箭頭"]
+    A --> D["匿名"]
+    
+    B --> B1["function name() {}"]
+    B --> B2["提升"]
+    B --> B3["具名"]
+    
+    C --> C1["const name = () => {}"]
+    C --> C2["簡潔語法"]
+    C --> C3["現代風格"]
+    
+    D --> D1["function() {}"]
+    D --> D2["無名稱"]
+    D --> D3["一次性使用"]
+    
+    E["⏰ 什麼時候使用"] --> E1["傳統: 可重複使用函數"]
+    E --> E2["箭頭: 簡短回呼函數"]
+    E --> E3["匿名: 事件處理函數"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+```
+### 何時使用各種寫法
+
+應該何時用哪種方式？實務建議：如果會多次使用函式，給它命名並獨立定義；如果只用一次，考慮匿名函式。箭頭函式和傳統函式語法都行，不過現代 JavaScript 廣泛使用箭頭函式。
+
+### 🎨 **函式風格熟練度檢測：選擇合適的語法**
+
+**測驗你對語法的了解：**
+- 什麼時候你會偏好箭頭函式而非傳統函式語法？
+- 匿名函式的主要優點是什麼？
+- 你能想到哪種情況下命名函式比匿名函式好？
+
+```mermaid
+quadrantChart
+    title 函數選擇決策矩陣
+    x-axis 簡單 --> 複雜
+    y-axis 一次性使用 --> 可重複使用
+    quadrant-1 箭頭函數
+    quadrant-2 命名函數
+    quadrant-3 匿名函數
+    quadrant-4 傳統函數
+    
+    Event Handlers: [0.3, 0.2]
+    Utility Functions: [0.7, 0.8]
+    Callbacks: [0.2, 0.3]
+    Class Methods: [0.8, 0.7]
+    Mathematical Operations: [0.4, 0.6]
+```
+> **現代趨勢**：箭頭函式越來越受歡迎，因為語法簡潔，但傳統函式仍有其地位！
 
 ---
 
+
+
 ## 🚀 挑戰
 
-您能否用一句話說明函式與方法的區別？試試看！
+請試著用一句話說明函式與方法的差異？
+
+## GitHub Copilot Agent 挑戰 🚀
+
+使用 Agent 模式完成以下挑戰：
 
-## 課後測驗
-[課後測驗](https://ff-quizzes.netlify.app)
+**描述：** 建立一個數學函式工具庫，示範本課涵蓋的函式概念，包括參數、預設值、回傳值與箭頭函式。
+
+**提示：** 建立一個名為 `mathUtils.js` 的 JavaScript 檔案，包含下列函式：
+1. 一個有兩個參數，回傳兩者和的函式 `add`
+2. 一個帶有預設參數值的函式 `multiply`（第二個參數預設為 1）
+3. 一個箭頭函式 `square`，接受一個數字並回傳平方
+4. 一個函式 `calculate`，接受另一個函式及兩個數字參數，並將該函式應用於兩數上
+5. 展示各函式的適當測試案例呼叫
+
+了解更多 [Agent 模式](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode)。
+
+## 課後小測驗
+[課後小測驗](https://ff-quizzes.netlify.app)
 
 ## 複習與自學
 
-值得[深入了解箭頭函式](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions)，因為它們在程式碼中越來越常用。練習撰寫一個函式，然後使用此語法重寫它。
+值得多讀一些關於 [箭頭函式](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions) 的資料，因為它們越來越多用於程式碼庫。練習寫一個函式，然後用這種語法重寫一遍。
 
 ## 作業
 
-[函式趣味練習](assignment.md)
+[函式樂趣](assignment.md)
+
+---
+
+## 🧰 **你的 JavaScript 函式工具包摘要**
+
+```mermaid
+graph TD
+    A["🎯 JavaScript 函式"] --> B["📋 函式宣告"]
+    A --> C["📥 參數"]
+    A --> D["📤 回傳值"]
+    A --> E["🎨 現代語法"]
+    
+    B --> B1["function name() {}"]
+    B --> B2["具描述性的命名"]
+    B --> B3["可重複使用的程式區塊"]
+    
+    C --> C1["輸入資料"]
+    C --> C2["預設值"]
+    C --> C3["多重參數"]
+    
+    D --> D1["return 陳述式"]
+    D --> D2["離開函式"]
+    D --> D3["將資料傳回"]
+    
+    E --> E1["箭頭函式: () =>"]
+    E --> E2["匿名函式"]
+    E --> E3["高階函式"]
+    
+    F["⚡ 核心優點"] --> F1["程式碼重用"]
+    F --> F2["更佳組織"]
+    F --> F3["更容易測試"]
+    F --> F4["模組化設計"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+    style F fill:#fce4ec
+```
+---
+
+## 🚀 你的 JavaScript 函式掌握時間軸
+
+### ⚡ **接下來五分鐘你能做的事**
+- [ ] 寫一個簡單函式回傳你最喜歡的數字
+- [ ] 建立一個有兩個參數的函式，將二者相加
+- [ ] 嘗試將傳統函式轉換為箭頭函式語法
+- [ ] 練習本挑戰：解釋函式與方法之間的差異
+
+### 🎯 **你這小時內可以完成的事項**
+- [ ] 完成課後測驗並複習任何令人困惑的概念
+- [ ] 建構 GitHub Copilot 挑戰中的數學工具庫
+- [ ] 創建一個使用另一個函式作為參數的函式
+- [ ] 練習撰寫具有預設參數的函式
+- [ ] 嘗試在函式回傳值中使用模板字串
+
+### 📅 **你為期一週的函式精通計畫**
+- [ ] 創意完成「函式樂趣」作業
+- [ ] 將寫過的重複程式碼重構成可重複使用的函式
+- [ ] 僅使用函式來建構一個小型計算機（不使用全域變數）
+- [ ] 練習使用箭頭函式搭配陣列方法如 `map()` 和 `filter()`
+- [ ] 建立一組常用任務的工具函式集合
+- [ ] 研究高階函式與函式式程式設計概念
+
+### 🌟 **你為期一個月的蛻變計畫**
+- [ ] 精通進階函式概念，如閉包與作用域
+- [ ] 建構一個大量使用函式組合的專案
+- [ ] 透過改進函式文件來貢獻開源專案
+- [ ] 教導他人函式及不同語法風格
+- [ ] 探索 JavaScript 中的函式式程式設計範式
+- [ ] 建立個人可重用函式庫供未來專案使用
+
+### 🏆 **最終函式冠軍檢視**
+
+**慶祝你的函式精通：**
+- 到目前為止你創建的最有用函式是什麼？
+- 學習函式後，你對程式碼組織的思考方式有何改變？
+- 你偏好哪種函式語法？為什麼？
+- 你會透過撰寫函式解決什麼現實世界的問題？
+
+```mermaid
+journey
+    title 你的函式信心演進
+    section 今天
+      因語法困惑: 3: You
+      理解基礎: 4: You
+      撰寫簡單函式: 5: You
+    section 本週
+      使用參數: 4: You
+      回傳值: 5: You
+      現代語法: 5: You
+    section 下個月
+      函式組合: 5: You
+      進階模式: 5: You
+      教導他人: 5: You
+```
+> 🎉 **你已經精通程式設計中最強大的概念之一了！** 函式是大型程式的基石。你未來開發的每個應用都會用到函式來組織、重複使用及結構化程式碼。你現在了解如何將邏輯包裝成可重複使用的元件，讓你成為更有效率及高效能的程式設計師。歡迎來到模組化程式設計的世界！🚀
 
 ---
 
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
 **免責聲明**：  
-本文件已使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。應以原始語言的文件作為權威來源。對於關鍵資訊，建議尋求專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或錯誤解讀概不負責。
\ No newline at end of file
+本文件係使用AI翻譯服務[Co-op Translator](https://github.com/Azure/co-op-translator)進行翻譯。雖然我們力求準確，但請注意自動翻譯可能存在錯誤或不準確之處。原始文件的母語版本應視為權威來源。對於重要資訊，建議尋求專業人工翻譯。我們不對因使用本翻譯而產生的任何誤解或誤讀承擔責任。
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->
\ No newline at end of file
diff --git a/translations/tw/2-js-basics/2-functions-methods/assignment.md b/translations/tw/2-js-basics/2-functions-methods/assignment.md
index 50b65d98..20471a44 100644
--- a/translations/tw/2-js-basics/2-functions-methods/assignment.md
+++ b/translations/tw/2-js-basics/2-functions-methods/assignment.md
@@ -1,25 +1,82 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "8973f96157680a13e9446e4bb540ee57",
-  "translation_date": "2025-08-23T22:42:50+00:00",
+  "original_hash": "8328f58f4593b4671656ff8f4b2edbd9",
+  "translation_date": "2026-01-06T13:28:32+00:00",
   "source_file": "2-js-basics/2-functions-methods/assignment.md",
   "language_code": "tw"
 }
 -->
-# 玩轉函式
+# Fun with Functions
 
-## 說明
+## Instructions
 
-創建不同的函式，包括會返回值的函式和不會返回值的函式。
+在此作業中，您將練習建立不同類型的函式，以加強您所學的 JavaScript 函式、參數、預設值和回傳語句的概念。
 
-試著創建一個同時包含普通參數和帶有預設值參數的函式。
+建立一個名為 `functions-practice.js` 的 JavaScript 檔案並實作以下函式：
 
-## 評分標準
+### Part 1: Basic Functions
+1. **建立一個名為 `sayHello` 的函式**，不接收任何參數，並在控制台印出 "Hello!"。
 
-| 評分標準 | 優秀                                                                                     | 合格                                                         | 需要改進         |
-| -------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------ | ---------------- |
-|          | 提供的解決方案包含兩個或以上運行良好的函式，且參數多樣化                                 | 提供的解決方案包含一個函式，且參數較少                       | 解決方案有錯誤  |
+2. **建立一個名為 `introduceYourself` 的函式**，接收一個 `name` 參數，並在控制台印出類似 "Hi, my name is [name]" 的訊息。
 
-**免責聲明**：  
-本文件使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。應以原始語言的文件作為權威來源。對於關鍵資訊，建議尋求專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或誤讀概不負責。
\ No newline at end of file
+### Part 2: Functions with Default Parameters
+3. **建立一個名為 `greetPerson` 的函式**，接收兩個參數：`name`（必填）和 `greeting`（選填，預設為 "Hello"）。函式應該在控制台印出類似 "[greeting], [name]!" 的訊息。
+
+### Part 3: Functions that Return Values
+4. **建立一個名為 `addNumbers` 的函式**，接收兩個參數 (`num1` 和 `num2`)，並回傳它們的和。
+
+5. **建立一個名為 `createFullName` 的函式**，接收 `firstName` 和 `lastName` 參數，並回傳完整名字的字串。
+
+### Part 4: Mix It All Together
+6. **建立一個名為 `calculateTip` 的函式**，接收兩個參數：`billAmount`（必填）和 `tipPercentage`（選填，預設為 15）。函式應計算並回傳小費金額。
+
+### Part 5: Test Your Functions
+加入函式呼叫測試每個函式，並使用 `console.log()` 顯示結果。
+
+**範例測試呼叫：**
+```javascript
+// 在這裡測試你的函式
+sayHello();
+introduceYourself("Sarah");
+greetPerson("Alex");
+greetPerson("Maria", "Hi");
+
+const sum = addNumbers(5, 3);
+console.log(`The sum is: ${sum}`);
+
+const fullName = createFullName("John", "Doe");
+console.log(`Full name: ${fullName}`);
+
+const tip = calculateTip(50);
+console.log(`Tip for $50 bill: $${tip}`);
+```
+
+## Rubric
+
+| Criteria | Exemplary | Adequate | Needs Improvement |
+| -------- | --------- | -------- | ----------------- |
+| **Function Creation** | 所有 6 個函式依正確語法與命名慣例正確實作 | 正確實作 4-5 個函式，有輕微語法錯誤 | 實作 3 個或更少函式，或有重大語法錯誤 |
+| **Parameters & Default Values** | 依指定正確使用必填參數、選填參數及預設值 | 正確使用參數，但預設值使用可能有問題 | 參數實作錯誤或遺漏 |
+| **Return Values** | 應回傳值的函式正確回傳，不需回傳值的函式僅執行動作 | 大多數回傳正確，僅有輕微問題 | 回傳語句有重大問題 |
+| **Code Quality** | 代碼乾淨、結構良好，變數命名有意義且縮排適當 | 代碼可運作，但可更整潔或更有條理 | 代碼難讀或結構差 |
+| **Testing** | 所有函式均有適當測試呼叫且結果清楚顯示 | 大部分函式有適當測試 | 測試函式有限或錯誤 |
+
+## Bonus Challenges (Optional)
+
+如果您想挑戰自我進階：
+
+1. **建立一個箭頭函式版本**的其中一個函式
+2. **建立一個可接受另一函式作為參數的函式**（如課程中的 `setTimeout` 範例）
+3. **加入輸入驗證**，確保函式能優雅地處理無效輸入
+
+---
+
+> 💡 **提示**：記得開啟瀏覽器的開發者控制台（F12）以查看 `console.log()` 語句的輸出！
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**免責聲明**：
+本文件由人工智慧翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們致力於確保翻譯的準確性，但請注意自動翻譯可能包含錯誤或不準確之處。原文文件的母語版本應視為權威來源。對於重要資訊，建議聘請專業人工翻譯。我們不對因使用本翻譯而產生的任何誤解或誤釋負責。
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->
\ No newline at end of file
diff --git a/translations/tw/2-js-basics/3-making-decisions/README.md b/translations/tw/2-js-basics/3-making-decisions/README.md
index 28d9a932..410cfe6e 100644
--- a/translations/tw/2-js-basics/3-making-decisions/README.md
+++ b/translations/tw/2-js-basics/3-making-decisions/README.md
@@ -1,183 +1,477 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "f7009631b73556168ca435120a231c98",
-  "translation_date": "2025-08-29T15:23:55+00:00",
+  "original_hash": "c688385d15dd3645e924ea0ffee8967f",
+  "translation_date": "2026-01-06T13:30:46+00:00",
   "source_file": "2-js-basics/3-making-decisions/README.md",
   "language_code": "tw"
 }
 -->
 # JavaScript 基礎：做出決策
 
-![JavaScript 基礎 - 做出決策](../../../../translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.tw.png)
+![JavaScript 基礎 - 做出決策](../../../../translated_images/webdev101-js-decisions.69e1b20f272dd1f0.tw.png)
+
+> 筆記圖示由 [Tomomi Imura](https://twitter.com/girlie_mac) 製作
+
+```mermaid
+journey
+    title 你的 JavaScript 決策冒險
+    section 基礎
+      布林值: 5: 你
+      比較運算子: 4: 你
+      邏輯思考: 5: 你
+    section 基本決策
+      If 陳述句: 4: 你
+      If-Else 邏輯: 5: 你
+      Switch 陳述句: 4: 你
+    section 進階邏輯
+      邏輯運算子: 5: 你
+      複雜條件: 4: 你
+      三元運算式: 5: 你
+```
+你是否曾好奇應用程式如何做出聰明的決定？例如導航系統如何選擇最快路線，或者恆溫器如何決定何時開啟暖氣？這是程式設計中決策制定的基本概念。
+
+正如查爾斯·巴貝奇的分析機設計用於根據條件執行不同的運算序列，現代 JavaScript 程式也需要根據不同情況做出選擇。這種分支與決策的能力，將靜態代碼轉變為具回應性的智慧型應用程式。
 
-> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
+在本課程中，你將學會如何在程式中實作條件邏輯。 我們將探討條件語句、比較運算子和邏輯表達式，讓程式可以評估情況並適當回應。
 
-## 課前測驗
+## 課前小測
 
-[課前測驗](https://ff-quizzes.netlify.app/web/quiz/11)
+[課前小測](https://ff-quizzes.netlify.app/web/quiz/11)
 
-做出決策並控制程式碼執行的順序，能讓你的程式碼更具可重用性和穩健性。本章節涵蓋了在 JavaScript 中控制資料流的語法，以及它在搭配布林值時的重要性。
+做出決策並控制程式流程的能力是程式撰寫的基本面向。這個章節涵蓋如何使用布林值和條件邏輯控制 JavaScript 程式的執行路徑。
 
 [![做出決策](https://img.youtube.com/vi/SxTp8j-fMMY/0.jpg)](https://youtube.com/watch?v=SxTp8j-fMMY "做出決策")
 
-> 🎥 點擊上方圖片觀看有關做出決策的影片。
+> 🎥 點擊上方圖片觀看關於做出決策的影片。
+
+> 你也可以在 [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-if-else/?WT.mc_id=academic-77807-sagibbon) 上修習這門課！
+
+```mermaid
+mindmap
+  root((決策制定))
+    Boolean Logic
+      true/false
+      比較結果
+      邏輯表達式
+    Conditional Statements
+      if statements
+        單一條件
+        程式碼執行
+      if-else
+        兩種路徑
+        替代行動
+      switch
+        多種選項
+        清晰結構
+    Operators
+      Comparison
+        === !== < > <= >=
+        價值關係
+      Logical
+        && || !
+        結合條件
+    Advanced Patterns
+      Ternary
+        ? : 語法
+        內嵌決策
+      Complex Logic
+        巢狀條件
+        多重標準
+```
+## 布林值簡介回顧
 
-> 你可以在 [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-if-else/?WT.mc_id=academic-77807-sagibbon) 上學習這堂課！
+在探討決策之前，讓我們回顧先前課程中的布林值。這個名稱來自數學家喬治·布爾 (George Boole)，表示二元狀態——`true` 或 `false`。沒有模糊地帶，沒有中間值。
 
-## 布林值簡介
+這些二元值是所有計算邏輯的基礎。程式所做的每個決策，最終都歸結於布林評估。
 
-布林值只有兩個可能的值：`true` 或 `false`。布林值能幫助我們決定在特定條件下，哪些程式碼行應該被執行。
+建立布林變數非常簡單：
 
-你可以像這樣設定布林值為 true 或 false：
+```javascript
+let myTrueBool = true;
+let myFalseBool = false;
+```
 
-`let myTrueBool = true`  
-`let myFalseBool = false`
+這樣會建立兩個具有明確布林值的變數。
 
-✅ 布林值的命名源自英國數學家、哲學家及邏輯學家 George Boole (1815–1864)。
+✅ 布林值是以英國數學家、哲學家與邏輯學家喬治·布爾 (1815–1864) 的名字命名。
 
 ## 比較運算子與布林值
 
-運算子用於通過比較來評估條件，並生成布林值。以下是常用的運算子列表。
-
-| 符號  | 描述                                                                                                                                                   | 範例                |
-| ----- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------- |
-| `<`   | **小於**：比較兩個值，若左側的值小於右側，則返回布林值 `true`                                                                                          | `5 < 6 // true`     |
-| `<=`  | **小於或等於**：比較兩個值，若左側的值小於或等於右側，則返回布林值 `true`                                                                              | `5 <= 6 // true`    |
-| `>`   | **大於**：比較兩個值，若左側的值大於右側，則返回布林值 `true`                                                                                          | `5 > 6 // false`    |
-| `>=`  | **大於或等於**：比較兩個值，若左側的值大於或等於右側，則返回布林值 `true`                                                                              | `5 >= 6 // false`   |
-| `===` | **嚴格相等**：比較兩個值，若左右兩側的值相等且資料型別相同，則返回布林值 `true`                                                                        | `5 === 6 // false`  |
-| `!==` | **不相等**：比較兩個值，返回與嚴格相等運算子相反的布林值                                                                                              | `5 !== 6 // true`   |
+實務上，你很少會手動設置布林值。你會透過評估條件來生成它們：「這個數字是否大於那個？」或是「這些值是否相等？」
+
+比較運算子可用來進行這些評估。它們比較數值，並根據運算元之間的關係回傳布林結果。
+
+| 符號    | 描述                                                                                                                                                       | 範例               |
+| ------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
+| `<`    | **小於**：比較兩個值，若左側值小於右側則回傳 `true`                                                                                                         | `5 < 6 // true`    |
+| `<=`   | **小於或等於**：比較兩個值，若左側值小於或等於右側則回傳 `true`                                                                                             | `5 <= 6 // true`   |
+| `>`    | **大於**：比較兩個值，若左側值大於右側則回傳 `true`                                                                                                        | `5 > 6 // false`   |
+| `>=`   | **大於或等於**：比較兩個值，若左側值大於或等於右側則回傳 `true`                                                                                             | `5 >= 6 // false`  |
+| `===`  | **嚴格相等**：比較兩個值，若左右兩側值相等且資料型態相同，回傳 `true`                                                                                      | `5 === 6 // false` |
+| `!==`  | **不等於**：比較兩個值，回傳嚴格相等回傳值的相反布林值                                                                                                   | `5 !== 6 // true`  |
+
+✅ 透過在瀏覽器的主控台撰寫一些比較運算，檢驗你的理解。有回傳結果讓你感到意外嗎？
+
+```mermaid
+flowchart LR
+    A["🔢 值"] --> B["⚖️ 比較"]
+    B --> C["✅ 布林結果"]
+    
+    D["5"] --> E["< 6"]
+    E --> F["true"]
+    
+    G["10"] --> H["=== '10'"]
+    H --> I["false"]
+    
+    J["'hello'"] --> K["!== 'world'"]
+    K --> L["true"]
+    
+    M["📋 運算子類型"] --> M1["相等: === !=="]
+    M --> M2["關係: < > <= >="]
+    M --> M3["嚴格與寬鬆"]
+    
+    style A fill:#e3f2fd
+    style C fill:#e8f5e8
+    style M fill:#fff3e0
+```
+### 🧠 **比較運算理解測試：掌握布林邏輯**
+
+**測試你的比較知識：**
+- 為什麼普遍推薦使用 `===`（嚴格相等）而非 `==`（寬鬆相等）？
+- 你能預測 `5 === '5'` 會回傳什麼嗎？`5 == '5'` 呢？
+- `!==` 與 `!=` 的差別是什麼？
+
+```mermaid
+stateDiagram-v2
+    [*] --> Comparison: 兩個值
+    Comparison --> StrictEqual: === 或 !==
+    Comparison --> Relational: < > <= >=
+    
+    StrictEqual --> TypeCheck: 檢查類型且值
+    Relational --> NumberCompare: 轉換為數字
+    
+    TypeCheck --> BooleanResult: true 或 false
+    NumberCompare --> BooleanResult
+    
+    note right of StrictEqual
+        優先方法
+        無類型轉換
+    end note
+    
+    note right of Relational
+        適用於區間
+        數值比較
+    end note
+```
+> **專家秘訣**：除非特別需要型別轉換，否則永遠使用 `===` 和 `!==` 來檢查等於與不等於。這可防止意外行為！
 
-✅ 在瀏覽器的控制台中撰寫一些比較來檢查你的知識。返回的資料是否有讓你感到驚訝？
+## If 陳述式
 
-## If 語句
+`if` 陳述式就像向程式問問題。「如果這個條件為真，那就執行這件事。」這很可能是你在 JavaScript 中做決策時最重要的工具。
 
-If 語句會在條件為 true 時執行其區塊中的程式碼。
+運作方式如下：
 
 ```javascript
 if (condition) {
-  //Condition is true. Code in this block will run.
+  // 條件為真。此區塊中的程式碼將會執行。
 }
 ```
 
-邏輯運算子通常用於形成條件。
+條件放在括號中，如果結果是 `true`，JavaScript 就會執行大括號裡的程式碼；若是 `false`，JavaScript 則會跳過整個區塊。
+
+你經常會使用比較運算子來建立條件，讓我們來看個實例：
 
 ```javascript
-let currentMoney;
-let laptopPrice;
+let currentMoney = 1000;
+let laptopPrice = 800;
 
 if (currentMoney >= laptopPrice) {
-  //Condition is true. Code in this block will run.
+  // 條件為真。此區塊中的程式碼將會執行。
   console.log("Getting a new laptop!");
 }
 ```
 
-## If..Else 語句
+因為 `1000 >= 800` 評估結果為 `true`，區塊裡的程式執行，在主控台顯示「Getting a new laptop!」。
+
+```mermaid
+flowchart TD
+    A["🚀 程式開始"] --> B{"💰 currentMoney >= laptopPrice?"}
+    B -->|true| C["🎉 '買新的筆電！'"]
+    B -->|false| D["⏭️ 跳過程式區塊"]
+    C --> E["📋 繼續程式"]
+    D --> E
+    
+    F["📊 if 陳述式結構"] --> F1["if (condition) {"]
+    F1 --> F2["  // 當為真時執行的程式碼"]
+    F2 --> F3["}"]
+    
+    style B fill:#fff3e0
+    style C fill:#e8f5e8
+    style D fill:#ffebee
+    style F fill:#e3f2fd
+```
+## If..Else 陳述式
+
+那麼，如果你希望條件是 `false` 時執行不同的程式呢？這就是 `else` 的用武之地，有點像預備方案。
 
-`else` 語句會在條件為 false 時執行其區塊中的程式碼。它是 `if` 語句的可選部分。
+`else` 陳述式讓你可以這麼說：「如果這個條件不成立，那就執行另外這件事。」
 
 ```javascript
-let currentMoney;
-let laptopPrice;
+let currentMoney = 500;
+let laptopPrice = 800;
 
 if (currentMoney >= laptopPrice) {
-  //Condition is true. Code in this block will run.
+  // 條件為真。該區塊中的程式碼將會執行。
   console.log("Getting a new laptop!");
 } else {
-  //Condition is false. Code in this block will run.
+  // 條件為假。該區塊中的程式碼將會執行。
   console.log("Can't afford a new laptop, yet!");
 }
 ```
 
-✅ 在瀏覽器控制台中執行這段程式碼以及以下程式碼來測試你的理解。更改 `currentMoney` 和 `laptopPrice` 變數的值，觀察返回的 `console.log()`。
+現在因為 `500 >= 800` 是 `false`，JavaScript 就會跳過第一個區塊，執行 `else` 裡的程式碼。你會在主控台看到「Can't afford a new laptop, yet!」。
+
+✅ 透過在瀏覽器主控台執行這段程式與以下程式，驗證你是否理解此行為。改變 currentMoney 和 laptopPrice 變數的值，看看 `console.log()` 顯示結果如何變化。
+
+### 🎯 **If-Else 邏輯檢視：分支路徑**
+
+**評估你的條件邏輯理解：**
+- 如果 `currentMoney` 等於剛好等於 `laptopPrice`，會發生什麼事？
+- 你能想到實際情境中何時會用到 if-else 邏輯嗎？
+- 你會如何擴充程式以處理多個價格區間？
+
+```mermaid
+flowchart TD
+    A["🔍 評估條件"] --> B{"條件為真？"}
+    B -->|是| C["📤 執行 IF 區塊"]
+    B -->|否| D["📥 執行 ELSE 區塊"]
+    
+    C --> E["✅ 已採取一條路徑"]
+    D --> E
+    
+    F["🌐 現實世界範例"] --> F1["使用者登入狀態"]
+    F --> F2["年齡驗證"]
+    F --> F3["表單驗證"]
+    F --> F4["遊戲狀態變化"]
+    
+    style B fill:#fff3e0
+    style C fill:#e8f5e8
+    style D fill:#e3f2fd
+    style F fill:#f3e5f5
+```
+> **重要觀念**：if-else 確保只有一條路徑被選擇。這保證你的程式對任何條件都會有回應！
+
+## Switch 陳述式
 
-## Switch 語句
+有時你需要將一個值與多個選項做比較。雖然可以串接多個 `if..else`，但是這樣寫起來非常繁瑣。`switch` 陳述式提供了更清晰的結構來處理多個離散值。
 
-`switch` 語句用於根據不同條件執行不同的操作。使用 `switch` 語句可以選擇執行多個程式碼區塊中的一個。
+該概念類似早期電話交換機的機械切換系統——一個輸入值決定執行的特定路徑。
 
 ```javascript
 switch (expression) {
   case x:
-    // code block
+    // 程式碼區塊
     break;
   case y:
-    // code block
+    // 程式碼區塊
     break;
   default:
-  // code block
+    // 程式碼區塊
 }
 ```
 
+結構如下：
+- JavaScript 先評估表達式一次
+- 逐一檢查每個 `case` 是否匹配
+- 找到匹配時，執行該區塊程式碼
+- `break` 告訴 JavaScript 停止並離開 switch
+- 若沒有任何 case 匹配，執行 `default` 區塊（如果有的話）
+
 ```javascript
-// program using switch statement
-let a = 2;
+// 使用 switch 陳述式判斷星期幾的程式
+let dayNumber = 2;
+let dayName;
 
-switch (a) {
+switch (dayNumber) {
   case 1:
-    a = "one";
+    dayName = "Monday";
     break;
   case 2:
-    a = "two";
+    dayName = "Tuesday";
+    break;
+  case 3:
+    dayName = "Wednesday";
     break;
   default:
-    a = "not found";
+    dayName = "Unknown day";
     break;
 }
-console.log(`The value is ${a}`);
+console.log(`Today is ${dayName}`);
+```
+
+在此例中，JavaScript 看到 `dayNumber` 為 `2`，找到對應的 `case 2`，將 `dayName` 設為「Tuesday」，然後跳出 switch。結果是「Today is Tuesday」被輸出到主控台。
+
+```mermaid
+flowchart TD
+    A["📥 switch(表達式)"] --> B["🔍 評估一次"]
+    B --> C{"符合案例 1？"}
+    C -->|是| D["📋 執行案例 1"]
+    C -->|否| E{"符合案例 2？"}
+    E -->|是| F["📋 執行案例 2"]
+    E -->|否| G{"符合案例 3？"}
+    G -->|是| H["📋 執行案例 3"]
+    G -->|否| I["📋 執行預設"]
+    
+    D --> J["🛑 中斷"]
+    F --> K["🛑 中斷"]
+    H --> L["🛑 中斷"]
+    
+    J --> M["✅ 離開 switch"]
+    K --> M
+    L --> M
+    I --> M
+    
+    style A fill:#e3f2fd
+    style B fill:#fff3e0
+    style M fill:#e8f5e8
 ```
+✅ 透過在瀏覽器主控台執行這段程式與以下程式，驗證你是否理解，改變變數 a 的值看看 `console.log()` 顯示結果。
 
-✅ 在瀏覽器控制台中執行這段程式碼以及以下程式碼來測試你的理解。更改變數 `a` 的值，觀察返回的 `console.log()`。
+### 🔄 **Switch 陳述式精通：多選項**
 
-## 邏輯運算子與布林值
+**測試你對 switch 的認識：**
+- 忘記撰寫 `break` 會怎麼樣？
+- 什麼時候你會用 `switch` 而不是多個 `if-else`？
+- 為什麼 `default` 案例即使你認為已涵蓋所有可能，也很有用？
 
-決策可能需要多個比較，可以使用邏輯運算子串聯起來以生成布林值。
+```mermaid
+pie title "何時使用各種決策結構"
+    "簡單的 if-else" : 40
+    "複雜的 if-else 鏈" : 25
+    "Switch 陳述式" : 20
+    "三元運算子" : 15
+```
+> **最佳實踐**：當比較單一變數與多個特定值時，使用 `switch`。複雜條件或區間檢查則用 `if-else`！
 
-| 符號  | 描述                                                                                     | 範例                                                                 |
-| ----- | ---------------------------------------------------------------------------------------- | -------------------------------------------------------------------- |
-| `&&`  | **邏輯 AND**：比較兩個布林表達式。僅當兩側都為 true 時返回 true                          | `(5 > 6) && (5 < 6 ) //一側為 false，另一側為 true。返回 false`      |
-| `\|\|` | **邏輯 OR**：比較兩個布林表達式。只要有一側為 true 就返回 true                          | `(5 > 6) \|\| (5 < 6) //一側為 false，另一側為 true。返回 true`      |
-| `!`   | **邏輯 NOT**：返回布林表達式的相反值                                                     | `!(5 > 6) // 5 不大於 6，但 "!" 會返回 true`                        |
+## 邏輯運算子與布林值
 
-## 使用邏輯運算子的條件與決策
+複雜決策通常需要同時評估多個條件。正如布林代數協助數學家結合邏輯表達式，程式設計語言提供邏輯運算子來串接多個布林條件。
+
+這些運算子讓你能將簡單的真／假評估組合成複雜的條件邏輯。
+
+| 符號    | 描述                                                                                       | 範例                                                                       |
+| ------ | ----------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- |
+| `&&`   | **邏輯與**：比較兩個布林表達式。只有當兩側皆為真時才回傳真                               | `(5 > 3) && (5 < 10) // 兩側皆為真，回傳 true`                            |
+| `\|\|` | **邏輯或**：比較兩個布林表達式。只要其中至少有一側為真即回傳真                         | `(5 > 10) \|\| (5 < 10) // 一側為假，另一側為真，回傳 true`               |
+| `!`    | **邏輯非**：回傳布林表達式的相反值                                                     | `!(5 > 10) // 5 不大於 10，"!" 使結果為 true`                             |
+
+這些運算子讓你可以以實用的方式結合條件：
+- AND (`&&`) 表示兩條件都必須為真
+- OR (`||`) 表示至少一條件為真  
+- NOT (`!`) 將真變假（反之亦然）
+
+```mermaid
+flowchart LR
+    A["🔗 邏輯運算子"] --> B["&& 且"]
+    A --> C["|| 或"]
+    A --> D["! 非"]
+    
+    B --> B1["兩者皆須為真"]
+    B --> B2["true && true = true"]
+    B --> B3["true && false = false"]
+    
+    C --> C1["至少一者為真"]
+    C --> C2["true || false = true"]
+    C --> C3["false || false = false"]
+    
+    D --> D1["反轉值"]
+    D --> D2["!true = false"]
+    D --> D3["!false = true"]
+    
+    E["🌍 真實範例"] --> E1["年齡 >= 18 && 有駕照"]
+    E --> E2["是週末 || 是假日"]
+    E --> E3["! 尚未登入"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+```
+## 使用邏輯運算子做條件和決策
 
-邏輯運算子可以用於在 if..else 語句中形成條件。
+用更實際的範例看看邏輯運算子的運作：
 
 ```javascript
-let currentMoney;
-let laptopPrice;
-let laptopDiscountPrice = laptopPrice - laptopPrice * 0.2; //Laptop price at 20 percent off
+let currentMoney = 600;
+let laptopPrice = 800;
+let laptopDiscountPrice = laptopPrice - (laptopPrice * 0.2); // 筆記型電腦價格打八折
 
 if (currentMoney >= laptopPrice || currentMoney >= laptopDiscountPrice) {
-  //Condition is true. Code in this block will run.
+  // 條件為真。此區塊中的程式碼將會執行。
   console.log("Getting a new laptop!");
 } else {
-  //Condition is true. Code in this block will run.
+  // 條件為假。此區塊中的程式碼將會執行。
   console.log("Can't afford a new laptop, yet!");
 }
 ```
 
+在此範例中：我們計算 20% 折扣後的價格（640），接著評估我們是否有足夠的資金支付全額或折扣價。600 沒有達到折扣價 640 閥值，因此條件評估結果是 `false`。
+
+### 🧮 **邏輯運算子檢視：結合條件**
+
+**測試你的邏輯運算子理解：**
+- 在表達式 `A && B` 中，若 A 為假，B 會被執行嗎？
+- 你能想到什麼情況需要同時用到三個運算子（&&、||、!）嗎？
+- `!user.isActive` 和 `user.isActive !== true` 有何不同？
+
+```mermaid
+stateDiagram-v2
+    [*] --> EvaluateA: A && B
+    EvaluateA --> CheckB: A 為真
+    EvaluateA --> ReturnFalse: A 為假
+    CheckB --> ReturnTrue: B 為真
+    CheckB --> ReturnFalse: B 為假
+    
+    [*] --> EvaluateC: A || B
+    EvaluateC --> ReturnTrue: A 為真
+    EvaluateC --> CheckD: A 為假
+    CheckD --> ReturnTrue: B 為真
+    CheckD --> ReturnFalse: B 為假
+    
+    note right of EvaluateA
+        短路評估：
+        如果 A 為假，永遠不會檢查 B
+    end note
+```
+> **效能提示**：JavaScript 使用「短路求值」- 在 `A && B` 中，如果 A 是假，B 甚至不會被執行。善用此特性！
+
 ### 否定運算子
 
-到目前為止，你已經看到如何使用 `if...else` 語句來創建條件邏輯。任何進入 `if` 的內容都需要評估為 true 或 false。通過使用 `!` 運算子，你可以**否定**表達式。它看起來像這樣：
+有時比較容易思考「某件事不成立的狀態」。譬如不是問「使用者是否已登入？」而是問「使用者是否尚未登入？」感嘆號（`!`）運算子便可幫你反轉邏輯。
 
 ```javascript
 if (!condition) {
-  // runs if condition is false
+  // 當條件為假時執行
 } else {
-  // runs if condition is true
+  // 當條件為真時執行
 }
 ```
 
+`!` 運算子就像說「相反的...」— 若為真，`!` 使其為假，反之亦然。
+
 ### 三元運算式
 
-`if...else` 不是表達決策邏輯的唯一方式。你還可以使用一種稱為三元運算子的方式。其語法如下：
+針對簡單條件賦值，JavaScript 提供了**三元運算子**。這精簡的語法可以在一行內寫出條件表達式，在你需要根據條件賦予兩個值中其中一個時非常方便。
 
 ```javascript
-let variable = condition ? <return this if true> : <return this if false>
+let variable = condition ? returnThisIfTrue : returnThisIfFalse;
 ```
 
-以下是一個更具體的例子：
+它的語意像個問題：「條件成立嗎？如果是，使用這個值。若否，使用那個值。」
+
+下面是比較實際的範例：
 
 ```javascript
 let firstNumber = 20;
@@ -185,15 +479,11 @@ let secondNumber = 10;
 let biggestNumber = firstNumber > secondNumber ? firstNumber : secondNumber;
 ```
 
-✅ 花點時間多讀幾遍這段程式碼。你理解這些運算子是如何工作的嗎？
-
-上述程式碼表示：
+✅ 花點時間多讀幾遍這段程式，了解運算子如何運作。
 
-- 如果 `firstNumber` 大於 `secondNumber`
-- 則將 `firstNumber` 賦值給 `biggestNumber`
-- 否則將 `secondNumber` 賦值給 `biggestNumber`。
+這行的意義在說：「`firstNumber` 是否大於 `secondNumber`？如果成立，將 `firstNumber` 指派給 `biggestNumber`，否則將 `secondNumber` 指派給 `biggestNumber`。」
 
-三元運算式只是以下程式碼的簡潔寫法：
+三元運算子是傳統 `if..else` 陳述式的簡寫：
 
 ```javascript
 let biggestNumber;
@@ -204,29 +494,179 @@ if (firstNumber > secondNumber) {
 }
 ```
 
+兩者結果相同。三元運算子比較簡潔，而傳統if-else結構在條件複雜時可能較易讀。
+
+```mermaid
+flowchart LR
+    A["🤔 三元運算子"] --> B["條件 ?"]
+    B --> C["條件為真 :"]
+    C --> D["條件為假"]
+    
+    E["📝 傳統 If-Else"] --> F["if (條件) {"]
+    F --> G["  回傳 條件為真"]
+    G --> H["} else {"]
+    H --> I["  回傳 條件為假"]
+    I --> J["}"]
+    
+    K["⚡ 使用時機"] --> K1["簡單賦值"]
+    K --> K2["簡短條件"]
+    K --> K3["內嵌決策"]
+    K --> K4["回傳語句"]
+    
+    style A fill:#e3f2fd
+    style E fill:#fff3e0
+    style K fill:#e8f5e8
+```
 ---
 
+
+
 ## 🚀 挑戰
 
-撰寫一個程式，先使用邏輯運算子撰寫，然後使用三元運算式重寫。你更喜歡哪種語法？
+創建一段程式，先用邏輯運算子撰寫，再用三元運算式改寫。你偏好哪種語法？
 
 ---
 
-## 課後測驗
+## GitHub Copilot 代理人挑戰 🚀
+
+使用代理人模式完成以下挑戰：
+
+**描述：** 創建一個完整的成績計算器，展現本課涵蓋的多個決策概念，包括 if-else 陳述式、switch 陳述式、邏輯運算子和三元運算式。
+
+**提示：** 撰寫一個 JavaScript 程式，輸入學生的數值成績（0-100），並依據以下標準判定其等第：
+- A：90-100
+- B：80-89  
+- C：70-79
+- D：60-69
+- F：60 以下
 
-[課後測驗](https://ff-quizzes.netlify.app/web/quiz/12)
+需求：
+1. 使用 if-else 陳述式來判斷等第
+2. 使用邏輯運算子檢查學生是否及格（grade >= 60）且有榮譽（grade >= 90）  
+3. 使用 switch 陳述式提供每個字母等級的具體反饋  
+4. 使用三元運算子判斷學生是否有資格參加下一門課程（grade >= 70）  
+5. 包含輸入驗證以確保成績介於 0 至 100 之間  
 
-## 複習與自學
+使用包含邊界值如 59、60、89、90 以及無效輸入的各種分數測試您的程式。  
 
-閱讀更多有關使用者可用的運算子的資訊：[MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators)。
+在此處了解更多關於 [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) 的資訊。  
 
-瀏覽 Josh Comeau 的精彩 [運算子查詢工具](https://joshwcomeau.com/operator-lookup/)！
 
-## 作業
+## 課後小測驗  
+
+[課後小測驗](https://ff-quizzes.netlify.app/web/quiz/12)  
+
+## 複習與自學  
+
+閱讀更多關於使用者可用的各種運算子，請見 [MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators)。  
+
+瀏覽 Josh Comeau 精彩的 [operator lookup](https://joshwcomeau.com/operator-lookup/)！  
+
+## 作業  
+
+[運算子](assignment.md)  
+
+---
+
+## 🧠 **您的決策工具包摘要**  
+
+```mermaid
+graph TD
+    A["🎯 JavaScript 決策"] --> B["🔍 布林邏輯"]
+    A --> C["📊 條件語句"]
+    A --> D["🔗 邏輯運算子"]
+    A --> E["⚡ 進階模式"]
+    
+    B --> B1["true/false 值"]
+    B --> B2["比較運算子"]
+    B --> B3["真值概念"]
+    
+    C --> C1["if 陳述句"]
+    C --> C2["if-else 鍊"]
+    C --> C3["switch 陳述句"]
+    
+    D --> D1["&& (且)"]
+    D --> D2["|| (或)"]
+    D --> D3["! (非)"]
+    
+    E --> E1["三元運算子"]
+    E --> E2["短路評估"]
+    E --> E3["複雜條件"]
+    
+    F["💡 核心原則"] --> F1["清晰可讀條件"]
+    F --> F2["一致的比較風格"]
+    F --> F3["正確運算子優先權"]
+    F --> F4["有效率的評估順序"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+    style F fill:#fce4ec
+```  
+---
 
-[運算子](assignment.md)
+## 🚀 您的 JavaScript 決策精通時間表  
+
+### ⚡ **接下來 5 分鐘您可以做的事**  
+- [ ] 在瀏覽器主控台練習比較運算子  
+- [ ] 撰寫一個簡單的 if-else 陳述式檢查您的年齡  
+- [ ] 嘗試挑戰：使用三元運算子重寫 if-else  
+- [ ] 測試不同「真值」及「假值」的結果  
+
+### 🎯 **本小時內您可以完成的目標**  
+- [ ] 完成課後測驗並複習任何令人困惑的概念  
+- [ ] 從 GitHub Copilot 挑戰建立綜合計分計算器  
+- [ ] 為真實情境（如選擇穿著）建立簡單決策樹  
+- [ ] 練習結合多重條件與邏輯運算子  
+- [ ] 嘗試針對不同使用場景使用 switch 陳述式  
+
+### 📅 **您本週的邏輯精通路徑**  
+- [ ] 利用創意範例完成運算子作業  
+- [ ] 建立使用多種條件結構的迷你測驗應用程式  
+- [ ] 建立可檢查多重輸入條件的表單驗證器  
+- [ ] 練習 Josh Comeau 的 [operator lookup](https://joshwcomeau.com/operator-lookup/) 練習題  
+- [ ] 重構既有程式碼使之使用更合適的條件結構  
+- [ ] 研究短路評估與效能影響  
+
+### 🌟 **您本月的轉型目標**  
+- [ ] 精通複雜巢狀條件並維持程式碼可讀性  
+- [ ] 建立具高度決策邏輯的應用程式  
+- [ ] 透過改進既有專案的條件邏輯對開源做出貢獻  
+- [ ] 教導他人不同條件結構及使用時機  
+- [ ] 探索函式式程式設計方法於條件邏輯  
+- [ ] 建立個人條件式最佳實踐參考指南  
+
+### 🏆 **最終決策大師檢視**  
+
+**慶祝您的邏輯思考精通：**  
+- 您成功實作過最複雜的決策邏輯是什麼？  
+- 哪種條件結構對您來說最自然？為什麼？  
+- 學習邏輯運算子如何改變了您的問題解決方式？  
+- 哪種真實世界應用會因此受益於複雜的決策邏輯？  
+
+```mermaid
+journey
+    title 你的邏輯思考演進
+    section 今天
+      布林混淆: 3: You
+      如果-否則理解: 4: You
+      運算子識別: 5: You
+    section 這週
+      複雜條件: 4: You
+      切換運用精通: 5: You
+      邏輯組合: 5: You
+    section 下個月
+      進階模式: 5: You
+      效能意識: 5: You
+      教導他人: 5: You
+```  
+> 🧠 **您已精通數位決策藝術！** 每個互動應用程式都依賴條件邏輯來智能地回應用戶操作與變化的條件。您現在了解如何讓程式思考、評估並選擇適當的反應。這個邏輯基礎將驅動您所建立的每個動態應用程式！ 🎉
 
 ---
 
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
 **免責聲明**：  
-本文件已使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。原始語言的文件應被視為權威來源。對於關鍵資訊，建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或錯誤解釋不承擔責任。
\ No newline at end of file
+本文件透過 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們力求準確，但請注意自動翻譯可能包含錯誤或不準確之處。原始文件以其母語版本為權威依據。對於重要資訊，建議採用專業人工翻譯。我們不對因使用本翻譯而產生的任何誤解或誤釋負責。
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->
\ No newline at end of file
diff --git a/translations/tw/2-js-basics/3-making-decisions/assignment.md b/translations/tw/2-js-basics/3-making-decisions/assignment.md
index ebc6658d..afc79a4b 100644
--- a/translations/tw/2-js-basics/3-making-decisions/assignment.md
+++ b/translations/tw/2-js-basics/3-making-decisions/assignment.md
@@ -1,52 +1,120 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "bf62b82567e6f9bdf4abda9ae0ccb64a",
-  "translation_date": "2025-08-23T22:39:31+00:00",
+  "original_hash": "ffe366b2d1f037b99fbadbe1dc81083d",
+  "translation_date": "2026-01-06T13:33:04+00:00",
   "source_file": "2-js-basics/3-making-decisions/assignment.md",
   "language_code": "tw"
 }
 -->
-# 運算子
+# 做決策：學生成績處理器
 
-## 說明
+## 學習目標
 
-試著使用運算子。以下是一個可以實現的程式建議：
+在此作業中，你將透過建立一個處理不同評分系統中學生成績的程式，來練習本課程的決策概念。你將使用 `if...else` 陳述式、比較運算子及邏輯運算子，判斷哪些學生通過課程。
 
-你有一組來自兩個不同評分系統的學生。
+## 挑戰說明
 
-### 第一個評分系統
+你在一所剛與另一所學校合併的學校工作。現在你需要處理來自兩種完全不同評分系統的學生成績，並判斷哪些學生合格。這是練習條件邏輯的絕佳機會！
 
-第一個評分系統的分數範圍是1到5，其中3分及以上表示通過課程。
+### 了解評分系統
 
-### 第二個評分系統
+#### 第一種評分系統（數字）
+- 成績以 1-5 的數字給分
+- **及格成績**：3 及以上（3、4 或 5）
+- **不及格成績**：低於 3（1 或 2）
 
-另一個評分系統的分數包括 `A, A-, B, B-, C, C-`，其中 `A` 是最高分，`C` 是最低的及格分數。
+#### 第二種評分系統（字母級分）
+- 成績以字母呈現：`A`、`A-`、`B`、`B-`、`C`、`C-`
+- **及格成績**：`A`、`A-`、`B`、`B-`、`C`、`C-`（所有列出的字母分數都及格）
+- **注意**：此系統沒有包含像 `D` 或 `F` 這樣的不及格字母
 
-### 任務
+### 你的任務
 
-給定以下陣列 `allStudents`，表示所有學生及其分數，構造一個新的陣列 `studentsWhoPass`，包含所有通過的學生。
-
-> TIP，使用 for 迴圈、if...else 和比較運算子：
+給定以下陣列 `allStudents`，代表所有學生及其成績，請建立一個新陣列 `studentsWhoPass`，包含依各自評分系統判定及格的學生。
 
 ```javascript
 let allStudents = [
-  'A',
-  'B-',
-  1,
-  4,
-  5,
-  2
-]
+  'A',    // 字母等級 - 通過
+  'B-',   // 字母等級 - 通過
+  1,      // 數字等級 - 不及格
+  4,      // 數字等級 - 通過
+  5,      // 數字等級 - 通過
+  2       // 數字等級 - 不及格
+];
 
 let studentsWhoPass = [];
 ```
 
-## 評分標準
+### 分步驟方法
+
+1. **設置迴圈**，遍歷 `allStudents` 陣列中的每個成績
+2. **檢查成績類型**（是數字還是字串？）
+3. **套用適用的評分規則**：
+   - 對數字：判斷成績是否 >= 3
+   - 對字串：檢查是否為有效的及格字母級分
+4. **將及格的成績** 加入 `studentsWhoPass` 陣列
+
+### 有用的程式技巧
+
+使用本課程介紹的 JavaScript 概念：
+
+- **typeof 運算子**：`typeof grade === 'number'` 用來判斷是否為數字成績
+- **比較運算子**：`>=` 用來比較數字成績
+- **邏輯運算子**：`||` 用來檢查多個字母級分條件
+- **if...else 陳述式**：用於處理不同的評分系統
+- **陣列方法**：`.push()` 用來將及格成績加入新陣列
+
+### 預期輸出
+
+當你執行程式後，`studentsWhoPass` 應該包含：`['A', 'B-', 4, 5]`
+
+**這些成績為何及格：**
+- `'A'` 和 `'B-'` 是有效的字母級分（此系統所有字母成績均為及格）
+- `4` 和 `5` 是數字成績且 >= 3
+- `1` 與 `2` 因為小於 3 而不及格
+
+## 測試你的解決方案
+
+使用不同場景測試你的程式：
+
+```javascript
+// 使用不同的分数组合進行測試
+let testGrades1 = ['A-', 3, 'C', 1, 'B'];
+let testGrades2 = [5, 'A', 2, 'C-', 4];
+
+// 你的解法應該能適用於任何有效的分数组合
+```
+
+## 進階挑戰
+
+完成基本作業後，嘗試以下擴展：
+
+1. **增加驗證**：檢查不合法成績（像是負數或無效字母）
+2. **計算統計**：計算有多少學生及格與不及格
+3. **成績轉換**：將所有成績轉換為單一數字系統（A=5，B=4，C=3，等等）
+
+## 評分規準
+
+| 標準 | 優異 (4) | 熟練 (3) | 進展中 (2) | 初階 (1) |
+|----------|---------------|----------------|----------------|---------------|
+| **功能性** | 程式能正確分辨兩種系統的所有及格成績 | 程式運作正常，少數邊緣狀況問題 | 程式部分正常，但有邏輯錯誤 | 程式錯誤嚴重或無法執行 |
+| **程式架構** | 程式碼乾淨且組織良好，有適當的 if...else 邏輯 | 結構良好，使用適當的條件語句 | 架構尚可，有組織性問題 | 架構差，邏輯難以理解 |
+| **概念運用** | 有效使用比較運算子、邏輯運算子與條件陳述式 | 利用課程概念良好，少許缺漏 | 部分使用課程概念，缺少重要元素 | 使用課程概念有限 |
+| **問題解決能力** | 清楚理解問題並提出優雅解決方案 | 概念清楚，邏輯穩健 | 解題能力尚可，但部分混亂 | 方法不明確，無法展現理解 |
+
+## 提交指引
+
+1. **充分測試**你的程式，以提供的範例為主
+2. **加入註解**說明邏輯，尤其是條件判斷部分
+3. **確認輸出**與預期結果吻合：`['A', 'B-', 4, 5]`
+4. **考慮邊緣狀況**，如空陣列或非預期資料型態
+
+> 💡 **專業小提示**：先從簡單開始！先讓基本功能順利運作，再加入更複雜的特性。記得，目標是練習本課程的決策邏輯與工具。
 
-| 評分項目 | 優秀表現                     | 合格表現                     | 需要改進                     |
-| -------- | ---------------------------- | ---------------------------- | ---------------------------- |
-|          | 提供完整的解決方案           | 提供部分解決方案             | 提供有錯誤的解決方案         |
+---
 
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
 **免責聲明**：  
-本文件使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於關鍵資訊，建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或錯誤解釋不承擔責任。
\ No newline at end of file
+本文件係使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 所翻譯而成。雖然我們力求準確，但請注意自動翻譯可能包含錯誤或不準確之處。原始語言文件應視為權威來源。對於重要資訊，建議採用專業人工翻譯。因使用本翻譯而產生之任何誤解或錯誤詮釋，我們概不負責。
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->
\ No newline at end of file
diff --git a/translations/tw/2-js-basics/4-arrays-loops/README.md b/translations/tw/2-js-basics/4-arrays-loops/README.md
index a52ac4b6..c30e5205 100644
--- a/translations/tw/2-js-basics/4-arrays-loops/README.md
+++ b/translations/tw/2-js-basics/4-arrays-loops/README.md
@@ -1,147 +1,750 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "9029f96b0e034839c1799f4595e4bb66",
-  "translation_date": "2025-08-29T15:24:44+00:00",
+  "original_hash": "1710a50a519a6e4a1b40a5638783018d",
+  "translation_date": "2026-01-06T13:33:29+00:00",
   "source_file": "2-js-basics/4-arrays-loops/README.md",
   "language_code": "tw"
 }
 -->
 # JavaScript 基礎：陣列與迴圈
 
-![JavaScript 基礎 - 陣列](../../../../translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.tw.png)
-> 由 [Tomomi Imura](https://twitter.com/girlie_mac) 繪製的筆記圖
-
-## 課前測驗
+![JavaScript Basics - Arrays](../../../../translated_images/webdev101-js-arrays.439d7528b8a29455.tw.png)  
+> Sketchnote 由 [Tomomi Imura](https://twitter.com/girlie_mac) 製作
+
+```mermaid
+journey
+    title 你的陣列與迴圈歷險
+    section 陣列基礎
+      建立陣列: 5: 你
+      存取元素: 4: 你
+      陣列方法: 5: 你
+    section 迴圈精通
+      For 迴圈: 4: 你
+      While 迴圈: 5: 你
+      現代語法: 4: 你
+    section 資料處理
+      陣列 + 迴圈: 5: 你
+      實務應用: 4: 你
+      效能優化: 5: 你
+```
+## 課前測驗  
 [課前測驗](https://ff-quizzes.netlify.app/web/quiz/13)
 
-本課程涵蓋 JavaScript 的基礎知識，這是一種為網頁提供互動性的語言。在本課程中，您將學習有關陣列和迴圈的知識，這些工具用於操作數據。
-
-[![陣列](https://img.youtube.com/vi/1U4qTyq02Xw/0.jpg)](https://youtube.com/watch?v=1U4qTyq02Xw "陣列")
-
-[![迴圈](https://img.youtube.com/vi/Eeh7pxtTZ3k/0.jpg)](https://www.youtube.com/watch?v=Eeh7pxtTZ3k "迴圈")
-
-> 🎥 點擊上方圖片觀看有關陣列和迴圈的影片。
+你是否曾好奇網站如何追蹤購物車的商品或顯示你的好友列表？這正是陣列與迴圈派上用場的地方。陣列就像數位容器，可以容納多筆資訊；而迴圈則讓你有效率地處理這些資料，無需重複寫出相同的程式碼。
+
+這兩個概念合起來構成了你程式處理資訊的基礎。你將學會如何從手動寫出每個步驟，進化到寫出智慧且高效率的程式碼，能快速處理數百甚至數千個項目。
+
+在本課程結束時，你將明白如何用幾行程式碼完成複雜的資料工作。讓我們一起探索這些程式設計的必備概念。
+
+[![Arrays](https://img.youtube.com/vi/1U4qTyq02Xw/0.jpg)](https://youtube.com/watch?v=1U4qTyq02Xw "Arrays")
+
+[![Loops](https://img.youtube.com/vi/Eeh7pxtTZ3k/0.jpg)](https://www.youtube.com/watch?v=Eeh7pxtTZ3k "Loops")
+
+> 🎥 點擊上方圖片觀看陣列與迴圈相關影片。
+
+> 你也可以在 [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-arrays/?WT.mc_id=academic-77807-sagibbon) 上學習此課程！
+
+```mermaid
+mindmap
+  root((資料處理))
+    Arrays
+      Structure
+        方括號語法
+        從零開始的索引
+        動態大小
+      Operations
+        push/pop
+        shift/unshift
+        indexOf/includes
+      Types
+        數字陣列
+        字串陣列
+        混合類型
+    Loops
+      For Loops
+        計數迭代
+        陣列處理
+        可預測流程
+      While Loops
+        基於條件
+        不確定迭代數
+        使用者輸入
+      Modern Syntax
+        for...of
+        forEach
+        函數式方法
+    Applications
+      Data Analysis
+        統計
+        篩選
+        轉換
+      User Interfaces
+        列表
+        選單
+        圖庫
+```
+## 陣列
 
-> 您可以在 [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-arrays/?WT.mc_id=academic-77807-sagibbon) 上學習本課程！
+把陣列想像成數位檔案櫃 — 不是每個抽屜放一份文件，而是在一個結構化的容器中組織多個相關項目。用程式語言來說，陣列讓你能將多筆資訊存放在一個有序的整合包中。
 
-## 陣列
+無論你是在建立相片集、管理待辦清單，或追蹤遊戲高分，陣列都提供了資料組織的基礎。讓我們看看陣列的運作方式。
 
-處理數據是任何程式語言中的常見任務，而當數據以結構化格式（如陣列）組織時，這項任務會變得更加簡單。使用陣列時，數據會以類似清單的結構存儲。陣列的一大優勢是您可以在一個陣列中存儲不同類型的數據。
+✅ 陣列就在你身邊！你能想到一個真實生活中的陣列例子嗎，例如太陽能板陣列？
 
-✅ 陣列無處不在！您能想到一個現實生活中的陣列例子嗎，例如太陽能板陣列？
+### 建立陣列
 
-陣列的語法是一對方括號。
+建立陣列超簡單 — 用中括號就搞定！
 
 ```javascript
-let myArray = [];
+// 空陣列 - 就像一個空的購物車等待放入商品
+const myArray = [];
 ```
+  
+**這裡發生了什麼？**  
+你剛用中括號 `[]` 建立了一個空的容器，就像一個空的圖書架，可以放你想整理的任何書籍。
 
-這是一個空陣列，但陣列也可以在宣告時就已經填充數據。陣列中的多個值以逗號分隔。
+你也可以從一開始就填入初始值：
 
 ```javascript
-let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+// 你們冰淇淋店的口味菜單
+const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+
+// 使用者的個人資料資訊（混合不同類型的資料）
+const userData = ["John", 25, true, "developer"];
+
+// 你最喜歡的課程的考試成績
+const scores = [95, 87, 92, 78, 85];
+```
+  
+**注意事項：**  
+- 你可以在同一陣列中存放文字、數字甚至真假值  
+- 用逗號分隔每個項目 — 超簡單！  
+- 陣列非常適合將相關資訊放在一起
+
+```mermaid
+flowchart LR
+    A["📦 陣列"] --> B["建立 [ ]"]
+    A --> C["儲存多個項目"]
+    A --> D["透過索引存取"]
+    
+    B --> B1["const arr = []"]
+    B --> B2["const arr = [1,2,3]"]
+    
+    C --> C1["數字"]
+    C --> C2["字串"]
+    C --> C3["布林值"]
+    C --> C4["混合類型"]
+    
+    D --> D1["arr[0] = 第一個"]
+    D --> D2["arr[1] = 第二個"]
+    D --> D3["arr[2] = 第三個"]
+    
+    E["📊 陣列索引"] --> E1["索引 0：第一個"]
+    E --> E2["索引 1：第二個"]
+    E --> E3["索引 2：第三個"]
+    E --> E4["索引 n-1：最後一個"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
 ```
+### 陣列索引
 
-陣列中的值會被分配一個稱為 **索引** 的唯一值，這是一個根據其與陣列開頭的距離分配的整數。在上面的例子中，字串值 "Chocolate" 的索引為 0，而 "Rocky Road" 的索引為 4。使用方括號和索引可以檢索、更改或插入陣列值。
+這裡有件事一開始可能覺得奇怪：陣列的索引從 0 開始，而不是 1。這種從零開始的索引源自電腦記憶體的運作方式 — 這是從像 C 語言這樣早期程式語言開始的慣例。陣列中每個位置都有一個稱作 **索引** 的地址號。
 
-✅ 您是否對陣列從零索引開始感到驚訝？在某些程式語言中，索引是從 1 開始的。這背後有一段有趣的歷史，您可以在 [維基百科](https://en.wikipedia.org/wiki/Zero-based_numbering) 上閱讀相關內容。
+| 索引 | 值 | 說明 |
+|-------|-------|-------------|
+| 0 | "Chocolate" | 第一個元素 |
+| 1 | "Strawberry" | 第二個元素 |
+| 2 | "Vanilla" | 第三個元素 |
+| 3 | "Pistachio" | 第四個元素 |
+| 4 | "Rocky Road" | 第五個元素 |
 
-```javascript
-let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
-iceCreamFlavors[2]; //"Vanilla"
-```
+✅ 陣列從索引 0 開始讓你驚訝嗎？在有些程式語言裡索引是從 1 開始。這背後有段有趣的歷史，你可以在 [維基百科](https://en.wikipedia.org/wiki/Zero-based_numbering) 詳細閱讀。
 
-您可以利用索引來更改值，如下所示：
+**存取陣列元素：**
 
 ```javascript
-iceCreamFlavors[4] = "Butter Pecan"; //Changed "Rocky Road" to "Butter Pecan"
+const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+
+// 使用中括號表示法存取單一元素
+console.log(iceCreamFlavors[0]); // "巧克力" - 第一個元素
+console.log(iceCreamFlavors[2]); // "香草" - 第三個元素
+console.log(iceCreamFlavors[4]); // "滿滿堅果冰淇淋" - 最後一個元素
 ```
+  
+**拆解下面的流程：**  
+- **用** 中括號加索引存取元素  
+- **回傳** 該位置存放的值  
+- **從** 0 開始計數，第一個元素索引就是 0
 
-您也可以在指定索引處插入新值，如下所示：
+**修改陣列元素：**
 
 ```javascript
-iceCreamFlavors[5] = "Cookie Dough"; //Added "Cookie Dough"
+// 更改現有值
+iceCreamFlavors[4] = "Butter Pecan";
+console.log(iceCreamFlavors[4]); // 「奶油胡桃」
+
+// 在末尾新增元素
+iceCreamFlavors[5] = "Cookie Dough";
+console.log(iceCreamFlavors[5]); // 「餅乾生麵團」
 ```
+  
+**上述程式碼說明：**  
+- **將** 索引為 4 的元素從 "Rocky Road" 改為 "Butter Pecan"  
+- **新增** 索引為 5 的元素 "Cookie Dough"  
+- **陣列長度** 自動擴充以容納新加入的元素
 
-✅ 更常見的方式是使用陣列操作符，例如 array.push()，將值推入陣列。
+### 陣列長度與常用方法
 
-要知道陣列中有多少項目，可以使用 `length` 屬性。
+陣列附帶內建屬性與方法，可以讓資料操作更簡單。
+
+**取得陣列長度：**
 
 ```javascript
-let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
-iceCreamFlavors.length; //5
+const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+console.log(iceCreamFlavors.length); // 5
+
+// 陣列變化時，長度會自動更新
+iceCreamFlavors.push("Mint Chip");
+console.log(iceCreamFlavors.length); // 6
 ```
+  
+**重點提醒：**  
+- **回傳** 陣列中元素總數  
+- **會隨** 新增或移除元素自動更新  
+- **用於** 迴圈與驗證時提供動態計數
 
-✅ 試試看！使用瀏覽器的控制台創建並操作您自己設計的陣列。
+**常用陣列方法：**
 
-## 迴圈
+```javascript
+const fruits = ["apple", "banana", "orange"];
+
+// 新增元素
+fruits.push("grape");           // 新增至末尾：["apple", "banana", "orange", "grape"]
+fruits.unshift("strawberry");   // 新增至開頭：["strawberry", "apple", "banana", "orange", "grape"]
 
-迴圈允許我們執行重複或 **迭代** 的任務，這可以節省大量時間和程式碼。每次迭代的變數、值和條件都可以不同。JavaScript 中有不同類型的迴圈，它們之間有些微差異，但基本上都執行相同的功能：遍歷數據。
+// 移除元素
+const lastFruit = fruits.pop();        // 移除並回傳 "grape"
+const firstFruit = fruits.shift();     // 移除並回傳 "strawberry"
+
+// 查找元素
+const index = fruits.indexOf("banana"); // 回傳 1（"banana" 的位置）
+const hasApple = fruits.includes("apple"); // 回傳 true
+```
+  
+**理解這些方法：**  
+- 用 `push()`（尾部）與 `unshift()`（頭部）新增元素  
+- 用 `pop()`（尾部）與 `shift()`（頭部）移除元素  
+- 用 `indexOf()` 查找元素，用 `includes()` 檢查是否存在  
+- 提供移除元素或索引位置等有用資訊
+
+✅ 自己試試看！在瀏覽器的主控台建立並操作你自己的陣列。
+
+### 🧠 **陣列基礎檢測：資料組織**
+
+**考考你對陣列的理解：**  
+- 你覺得陣列為何從 0 開始計數，而不是 1？  
+- 如果嘗試存取不存在的索引（例如在 5 個元素的陣列中存取 `arr[100]`）會怎樣？  
+- 你能想到三個現實生活中會用到陣列的場景嗎？
+
+```mermaid
+stateDiagram-v2
+    [*] --> EmptyArray: const arr = []
+    EmptyArray --> WithItems: 新增元素
+    WithItems --> Accessing: 使用索引
+    Accessing --> Modifying: 修改值
+    Modifying --> Processing: 使用方法
+    
+    WithItems --> WithItems: push(), unshift()
+    Processing --> Processing: pop(), shift()
+    
+    note right of Accessing
+        零基索引
+        arr[0] = 第一個元素
+    end note
+    
+    note right of Processing
+        內建方法
+        動態操作
+    end note
+```  
+> **真實案例:** 陣列在程式中無處不在！社群媒體動態、購物車、相片集、播放清單歌曲 — 幕後其實都是陣列！
 
+## 迴圈
+
+把迴圈想像成在查爾斯‧狄更斯小說中寫字懲罰的場景，學生得反覆在石板上抄寫字句。想像你可以簡單下指令「寫這句話 100 次」，程式就能自動完成。迴圈就是為你的程式碼做到這點。
+
+迴圈就像有位不知疲倦的助理，可以無誤重複工作。無論你需要檢查購物車每個項目、或是顯示相簿中所有照片，迴圈都能有效率地處理重複動作。
+
+JavaScript 提供多種迴圈供選擇。讓我們逐一檢視，並了解何時使用。
+
+```mermaid
+flowchart TD
+    A["🔄 迴圈類型"] --> B["For 迴圈"]
+    A --> C["While 迴圈"]
+    A --> D["For...of 迴圈"]
+    A --> E["forEach 方法"]
+    
+    B --> B1["已知的迭代次數"]
+    B --> B2["基於計數器"]
+    B --> B3["for(init; condition; increment)"]
+    
+    C --> C1["未知的迭代次數"]
+    C --> C2["基於條件"]
+    C --> C3["while(condition)"]
+    
+    D --> D1["現代 ES6+"]
+    D --> D2["陣列迭代"]
+    D --> D3["for(item of array)"]
+    
+    E --> E1["函式風格"]
+    E --> E2["陣列方法"]
+    E --> E3["array.forEach(callback)"]
+    
+    F["⏰ 何時使用"] --> F1["For: 計數、索引"]
+    F --> F2["While: 使用者輸入、搜尋"]
+    F --> F3["For...of: 簡單迭代"]
+    F --> F4["forEach: 函式式程式設計"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+    style F fill:#fce4ec
+```  
 ### For 迴圈
 
-`for` 迴圈需要三個部分來進行迭代：
-- `counter` 一個變數，通常初始化為一個數字，用於計算迭代次數
-- `condition` 使用比較運算符的表達式，當結果為 `false` 時迴圈停止
-- `iteration-expression` 在每次迭代結束時執行，通常用於更改計數器的值
+`for` 迴圈就像設定計時器 — 你知道確切次數要讓事情發生。結構清楚且可預測，最適合操作陣列或需要計數的場合。
+
+**For 迴圈結構：**
+
+| 元件 | 目的 | 範例 |
+|-----------|---------|----------|
+| **初始化** | 設定起始點 | `let i = 0` |
+| **條件判斷** | 何時繼續 | `i < 10` |
+| **遞增** | 如何更新 | `i++` |
 
 ```javascript
-// Counting up to 10
+// 從0數到9
 for (let i = 0; i < 10; i++) {
-  console.log(i);
+  console.log(`Count: ${i}`);
 }
-```
 
-✅ 在瀏覽器控制台中運行此程式碼。當您對計數器、條件或迭代表達式進行小改動時會發生什麼？您能讓它倒著運行，創建一個倒數嗎？
+// 更實用的範例：處理分數
+const testScores = [85, 92, 78, 96, 88];
+for (let i = 0; i < testScores.length; i++) {
+  console.log(`Student ${i + 1}: ${testScores[i]}%`);
+}
+```
+  
+**逐步說明：**  
+- **在一開始** 初始化計數器 `i` 為 0  
+- **每次** 執行前檢查條件 `i < 10`  
+- **當條件為真時** 執行區塊程式  
+- **每次迴圈後** 執行 `i++` 使 `i` 加 1  
+- **當條件變假時**（`i` 達 10）停止迴圈
+
+✅ 在瀏覽器主控台執行此程式碼。修改計數器、條件或遞增表達式會怎樣？能讓它倒數運作，變成倒數計時嗎？
+
+### 🗓️ **For 迴圈精熟檢測：可控重複**
+
+**評估你對 for 迴圈的理解：**  
+- for 迴圈的三個部分是什麼？每個的功能為何？  
+- 如何讓迴圈從陣列尾端往前執行？  
+- 如果忘記遞增部分 (`i++`) 會發生什麼？
+
+```mermaid
+flowchart TD
+    A["🚀 開始 For 迴圈"] --> B["初始化: let i = 0"]
+    B --> C{"條件: i < array.length?"}
+    C -->|true| D["執行程式區塊"]
+    D --> E["遞增: i++"]
+    E --> C
+    C -->|false| F["✅ 退出迴圈"]
+    
+    G["📋 常見模式"] --> G1["for(let i=0; i<n; i++)"]
+    G --> G2["for(let i=n-1; i>=0; i--)"]
+    G --> G3["for(let i=0; i<arr.length; i+=2)"]
+    
+    style A fill:#e3f2fd
+    style F fill:#e8f5e8
+    style G fill:#fff3e0
+```  
+> **迴圈智慧:** 當你知道確切重複次數時，for 迴圈是最佳選擇，也是處理陣列最常用的型態！
 
 ### While 迴圈
 
-與 `for` 迴圈的語法不同，`while` 迴圈只需要一個條件，當條件變為 `false` 時迴圈停止。迴圈中的條件通常依賴於其他值（如計數器），並且必須在迴圈中進行管理。計數器的初始值必須在迴圈外創建，並且任何滿足條件的表達式（包括更改計數器）都必須在迴圈內維護。
+`while` 迴圈就像說「持續做這件事直到...」— 你或許不知道會執行多少次，但知道何時停止。很適合問使用者輸入直到得到想要的資料，或搜尋資料直到找到目標。
+
+**While 迴圈特色：**  
+- **只要條件為真** 就繼續執行  
+- **需手動管理** 計數器變數  
+- **每次迭代前** 先檢查條件  
+- **若條件永遠真** 有無限迴圈風險
 
 ```javascript
-//Counting up to 10
+// 基本計數範例
 let i = 0;
 while (i < 10) {
- console.log(i);
- i++;
+  console.log(`While count: ${i}`);
+  i++; // 別忘了遞增！
+}
+
+// 更實用的範例：處理使用者輸入
+let userInput = "";
+let attempts = 0;
+const maxAttempts = 3;
+
+while (userInput !== "quit" && attempts < maxAttempts) {
+  userInput = prompt(`Enter 'quit' to exit (attempt ${attempts + 1}):`);
+  attempts++;
+}
+
+if (attempts >= maxAttempts) {
+  console.log("Maximum attempts reached!");
 }
 ```
+  
+**解讀範例：**  
+- **手動管理** 迴圈內的計數器 `i`  
+- **遞增** 計數器避免無限迴圈  
+- **展示** 透過使用者輸入與嘗試限制的實際用法  
+- **內建** 防止無限執行的安全機制
+
+### ♾️ **While 迴圈智慧檢測：基於條件的重複**
+
+**測試你對 while 迴圈的了解：**  
+- 使用 while 迴圈時主要風險是什麼？  
+- 何時會選擇 while 迴圈而非 for 迴圈？  
+- 如何避免無限迴圈？
+
+```mermaid
+flowchart LR
+    A["🔄 While 與 For"] --> B["While 迴圈"]
+    A --> C["For 迴圈"]
+    
+    B --> B1["未知次數"]
+    B --> B2["條件驅動"]
+    B --> B3["使用者輸入、搜尋"]
+    B --> B4["⚠️ 風險：無限迴圈"]
+    
+    C --> C1["已知次數"]
+    C --> C2["計數器驅動"]
+    C --> C3["陣列處理"]
+    C --> C4["✅ 安全：可預測結束"]
+    
+    D["🛡️ 安全提示"] --> D1["務必修改條件變數"]
+    D --> D2["包含跳脫條件"]
+    D --> D3["設定最大迭代次數"]
+    
+    style A fill:#e3f2fd
+    style B fill:#fff3e0
+    style C fill:#e8f5e8
+    style D fill:#ffebee
+```  
+> **安全第一:** While 迴圈功能強大，但需謹慎管理條件。務必確保條件會最終變成假值！
+
+### 現代迴圈替代方案
+
+JavaScript 提供現代迴圈語法，使程式碼更易讀且降低錯誤。
+
+**For...of 迴圈 (ES6+):**
 
-✅ 您為什麼會選擇使用 for 迴圈而不是 while 迴圈？17K 名讀者在 StackOverflow 上有相同的疑問，其中一些意見可能會 [引起您的興趣](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript)。
+```javascript
+const colors = ["red", "green", "blue", "yellow"];
+
+// 現代方法 - 更乾淨且更安全
+for (const color of colors) {
+  console.log(`Color: ${color}`);
+}
+
+// 與傳統的 for 迴圈比較
+for (let i = 0; i < colors.length; i++) {
+  console.log(`Color: ${colors[i]}`);
+}
+```
+  
+**for...of 的主要優點：**  
+- **免除** 索引管理，減少 off-by-one 錯誤  
+- **直接取得** 陣列元素  
+- **提升** 程式碼可讀性，降低語法複雜度
+
+**forEach 方法：**
+
+```javascript
+const prices = [9.99, 15.50, 22.75, 8.25];
+
+// 使用 forEach 來實現函數式編程風格
+prices.forEach((price, index) => {
+  console.log(`Item ${index + 1}: $${price.toFixed(2)}`);
+});
+
+// 使用箭頭函數的 forEach 來進行簡單操作
+prices.forEach(price => console.log(`Price: $${price}`));
+```
+  
+**關於 forEach 的重點：**  
+- **為陣列每個元素** 執行一段函式  
+- **提供** 元素值與索引作為參數  
+- **無法提前停止**（不同於傳統迴圈）  
+- **回傳 undefined**（不會產生新陣列）
+
+✅ 為何會選擇 for 迴圈而非 while 迴圈？在 StackOverflow 上有 1.7 萬人討論這話題，部分意見你可能會覺得有趣 [觀看討論](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript)。
+
+### 🎨 **現代迴圈語法檢測：擁抱 ES6+**
+
+**評估你對現代 JavaScript 的掌握度：**  
+- `for...of` 相較於傳統 for 迴圈有什麼優點？  
+- 在什麼時候你仍會偏好用傳統 for 迴圈？  
+- `forEach` 與 `map` 有什麼差異？
+
+```mermaid
+quadrantChart
+    title 迴圈選擇指南
+    x-axis 傳統 --> 現代
+    y-axis 簡單 --> 複雜
+    quadrant-1 現代 複雜
+    quadrant-2 傳統 複雜
+    quadrant-3 傳統 簡單
+    quadrant-4 現代 簡單
+    
+    傳統 For: [0.2, 0.7]
+    While 迴圈: [0.3, 0.6]
+    For...of: [0.8, 0.3]
+    forEach: [0.9, 0.4]
+    陣列方法: [0.8, 0.8]
+```  
+> **現代趨勢:** ES6+ 的 `for...of` 和 `forEach` 逐漸成為陣列遍歷首選，因為語法更簡潔且錯誤更少！
 
 ## 迴圈與陣列
 
-陣列經常與迴圈一起使用，因為大多數條件需要依賴陣列的長度來停止迴圈，而索引也可以作為計數器的值。
+陣列與迴圈結合可創造強大的資料處理能力。這對許多程式任務至關重要，從顯示清單到計算統計數據。
+
+**傳統陣列處理：**
 
 ```javascript
-let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
 
+// 經典的 for 迴圈方法
 for (let i = 0; i < iceCreamFlavors.length; i++) {
-  console.log(iceCreamFlavors[i]);
-} //Ends when all flavors are printed
+  console.log(`Flavor ${i + 1}: ${iceCreamFlavors[i]}`);
+}
+
+// 現代的 for...of 方法
+for (const flavor of iceCreamFlavors) {
+  console.log(`Available flavor: ${flavor}`);
+}
 ```
+  
+**理解不同方法：**  
+- 用陣列長度屬性決定迴圈界限  
+- 傳統 for 迴圈用索引存取元素  
+- for...of 迴圈直接取得元素  
+- 每個元素只處理一次
 
-✅ 在瀏覽器的控制台中，嘗試對您自己創建的陣列進行迴圈操作。
+**實務資料處理範例：**
 
+```javascript
+const studentGrades = [85, 92, 78, 96, 88, 73, 89];
+let total = 0;
+let highestGrade = studentGrades[0];
+let lowestGrade = studentGrades[0];
+
+// 使用單一迴圈處理所有分數
+for (let i = 0; i < studentGrades.length; i++) {
+  const grade = studentGrades[i];
+  total += grade;
+  
+  if (grade > highestGrade) {
+    highestGrade = grade;
+  }
+  
+  if (grade < lowestGrade) {
+    lowestGrade = grade;
+  }
+}
+
+const average = total / studentGrades.length;
+console.log(`Average: ${average.toFixed(1)}`);
+console.log(`Highest: ${highestGrade}`);
+console.log(`Lowest: ${lowestGrade}`);
+```
+  
+**程式碼運作說明：**  
+- 初始化統計變數，用於加總與極值追蹤  
+- 高效地遍歷每一個成績  
+- 累積成績總和計算平均  
+- 迴圈中同時記錄最高與最低分  
+- 迴圈結束時計算出最終統計數據
+
+✅ 在瀏覽器主控台用自己建立的陣列練習迴圈處理。
+
+```mermaid
+flowchart TD
+    A["📦 陣列資料"] --> B["🔄 迴圈處理"]
+    B --> C["📈 結果"]
+    
+    A1["[85, 92, 78, 96, 88]"] --> A
+    
+    B --> B1["計算總和"]
+    B --> B2["尋找最小/最大值"]
+    B --> B3["計算條件數量"]
+    B --> B4["轉換資料"]
+    
+    C --> C1["平均: 87.8"]
+    C --> C2["最高分: 96"]
+    C --> C3["及格人數: 5/5"]
+    C --> C4["字母等級"]
+    
+    D["⚡ 處理模式"] --> D1["累加（總和）"]
+    D --> D2["比較（最小/最大）"]
+    D --> D3["過濾（條件）"]
+    D --> D4["映射（轉換）"]
+    
+    style A fill:#e3f2fd
+    style B fill:#fff3e0
+    style C fill:#e8f5e8
+    style D fill:#f3e5f5
+```  
 ---
 
+## GitHub Copilot Agent 挑戰 🚀
+
+使用 Agent 模式完成下列挑戰：
+
+**說明:** 建立一個結合陣列與迴圈的綜合資料處理函式，分析資料集並產生有意義的洞察。
+
+**提示:** 建立一個名為 `analyzeGrades` 的函式，接受一個學生成績物件陣列（每個物件包含姓名與分數屬性），返回一個統計物件，包含最高分、最低分、平均分、及格人數（分數 >= 70）和高於平均分的學生姓名陣列。你的解決方案中至少要使用兩種不同的迴圈類型。
+
+在此了解更多關於 [Agent 模式](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode)。
+
 ## 🚀 挑戰
+JavaScript 提供了幾個現代陣列方法，可以取代特定任務的傳統迴圈。探索 [forEach](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)、[for-of](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/for...of)、[map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map)、[filter](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) 和 [reduce](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce)。
 
-除了 for 和 while 迴圈之外，還有其他方式可以遍歷陣列，例如 [forEach](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)、[for-of](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/for...of) 和 [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map)。使用其中一種技術重寫您的陣列迴圈。
+**你的挑戰：** 使用至少三種不同的陣列方法重構學生分數範例。注意隨著現代 JavaScript 語法，程式碼變得更加精簡且易讀。
+
+## 課後小考
+[課後小考](https://ff-quizzes.netlify.app/web/quiz/14)
 
-## 課後測驗
-[課後測驗](https://ff-quizzes.netlify.app/web/quiz/14)
 
 ## 複習與自學
 
-JavaScript 中的陣列有許多附加的方法，這些方法對數據操作非常有用。[閱讀這些方法](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) 並嘗試在您創建的陣列上使用一些方法（例如 push、pop、slice 和 splice）。
+JavaScript 的陣列附帶許多方法，在資料操作上非常有用。[閱讀這些方法](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) 並嘗試在你自己建立的陣列上使用它們（例如 push、pop、slice 和 splice）。
 
 ## 作業
 
-[迴圈一個陣列](assignment.md)
+[陣列迴圈](assignment.md)
+
+---
+
+## 📊 **你的陣列與迴圈工具總結**
+
+```mermaid
+graph TD
+    A["🎯 陣列與迴圈精通"] --> B["📦 陣列基礎"]
+    A --> C["🔄 迴圈類型"]
+    A --> D["🔗 資料處理"]
+    A --> E["🎨 現代技術"]
+    
+    B --> B1["建立: [ ]"]
+    B --> B2["索引: arr[0]"]
+    B --> B3["方法: push, pop"]
+    B --> B4["屬性: length"]
+    
+    C --> C1["For: 已知迭代次數"]
+    C --> C2["While: 條件控制"]
+    C --> C3["For...of: 直接存取"]
+    C --> C4["forEach: 函式式"]
+    
+    D --> D1["統計計算"]
+    D --> D2["資料轉換"]
+    D --> D3["篩選與搜尋"]
+    D --> D4["即時處理"]
+    
+    E --> E1["箭頭函式"]
+    E --> E2["方法串接"]
+    E --> E3["解構賦值"]
+    E --> E4["模板字面量"]
+    
+    F["💡 主要優點"] --> F1["高效資料處理"]
+    F --> F2["減少程式碼重複"]
+    F --> F3["可擴展的解決方案"]
+    F --> F4["更簡潔的語法"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+    style F fill:#fce4ec
+```
+---
+
+## 🚀 你的陣列與迴圈精通時間表
+
+### ⚡ **接下來 5 分鐘你可以做的事**
+- [ ] 建立你最喜愛電影的陣列並存取特定元素
+- [ ] 寫一個從 1 數到 10 的 for 迴圈
+- [ ] 嘗試課程中的現代陣列方法挑戰
+- [ ] 在瀏覽器主控台練習陣列索引
+
+### 🎯 **這一小時內你可以完成的目標**
+- [ ] 完成課後小考，複習挑戰性的概念
+- [ ] 建立來自 GitHub Copilot 挑戰的完整成績分析器
+- [ ] 建立一個簡單的購物車，能新增和移除商品
+- [ ] 練習不同迴圈類型間的轉換
+- [ ] 嘗試使用 `push`、`pop`、`slice` 和 `splice` 等陣列方法
+
+### 📅 **你這週的資料處理旅程**
+- [ ] 完成「陣列迴圈」作業並加入創意改良
+- [ ] 使用陣列與迴圈建立待辦事項清單應用程式
+- [ ] 建立一個簡單的數據統計計算器
+- [ ] 練習使用 [MDN 陣列方法](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)
+- [ ] 建立圖片庫或音樂播放清單介面
+- [ ] 探索使用 `map`、`filter` 和 `reduce` 的函式式程式設計
+
+### 🌟 **你這月的變革**
+- [ ] 精通高級陣列操作與效能優化
+- [ ] 建立完整的資料視覺化儀表板
+- [ ] 參與開源數據處理專案
+- [ ] 用實際範例教導他人陣列與迴圈
+- [ ] 建立可重用的個人資料處理函式庫
+- [ ] 探索以陣列建構的演算法與資料結構
+
+### 🏆 **終極資料處理冠軍自我檢測**
+
+**慶祝你對陣列與迴圈的精通：**
+- 你學到的陣列操作中，哪項對真實世界應用最有用？
+- 哪種迴圈類型你覺得最自然？為什麼？
+- 理解陣列與迴圈後，你對組織資料的思考有何改變？
+- 你接下來想挑戰什麼複雜的資料處理任務？
+
+```mermaid
+journey
+    title 你的資料處理演進
+    section 今天
+      陣列困惑: 3: 你
+      迴圈基礎: 4: 你
+      索引理解: 5: 你
+    section 本週
+      方法精通: 4: 你
+      高效處理: 5: 你
+      現代語法: 5: 你
+    section 下個月
+      複雜演算法: 5: 你
+      效能優化: 5: 你
+      教導他人: 5: 你
+```
+> 📦 **你已經解鎖資料組織與處理的力量！** 陣列與迴圈是你將建立的幾乎所有應用程式的基石。從簡單清單到複雜資料分析，你現在擁有有效且優雅處理資訊的工具。每個動態網站、行動應用和以資料為驅動的應用程式都依賴這些基本概念。歡迎來到可擴展資料處理的世界！🎉
 
 ---
 
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
 **免責聲明**：  
-本文件已使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。應以原始語言的文件作為權威來源。對於關鍵資訊，建議尋求專業人工翻譯。我們對因使用此翻譯而產生的任何誤解或錯誤解讀概不負責。
\ No newline at end of file
+本文件由 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 翻譯而成。雖然我們致力於確保翻譯的準確性，但請注意自動翻譯可能包含錯誤或不精確之處。原文文件的母語版本應被視為權威來源。對於重要資訊，建議尋求專業人工翻譯。我們不對因使用本翻譯而產生的任何誤解或誤用承擔責任。
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->
\ No newline at end of file
diff --git a/translations/tw/2-js-basics/4-arrays-loops/assignment.md b/translations/tw/2-js-basics/4-arrays-loops/assignment.md
index cedc4bec..ee7a4f62 100644
--- a/translations/tw/2-js-basics/4-arrays-loops/assignment.md
+++ b/translations/tw/2-js-basics/4-arrays-loops/assignment.md
@@ -1,25 +1,124 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "8b2381170bd0fd2870f5889bb8620f02",
-  "translation_date": "2025-08-23T22:45:31+00:00",
+  "original_hash": "8abcada0534e0fb3a7556ea3c5a2a8a4",
+  "translation_date": "2026-01-06T13:35:54+00:00",
   "source_file": "2-js-basics/4-arrays-loops/assignment.md",
   "language_code": "tw"
 }
 -->
-# 遍歷陣列
+# 陣列與迴圈作業
 
-## 說明
+## 指示
 
-建立一個程式，列出1到20之間每隔3個數字的數字，並將其輸出到控制台。
+完成以下練習以練習使用陣列與迴圈。每個練習都建立在課程概念之上，並鼓勵您運用不同的迴圈類型與陣列方法。
 
-> TIP: 使用 for 迴圈並修改迭代表達式
+### 練習 1：數字模式產生器
+建立一個程式，列出介於 1 到 20 之間每隔 3 個的數字並印出到主控台。
+
+**需求：**
+- 使用帶有自訂增量的 `for` 迴圈
+- 以對使用者友善的格式顯示數字
+- 加入描述性註解解釋您的邏輯
+
+**預期輸出：**
+```
+3, 6, 9, 12, 15, 18
+```
+
+> **提示：** 修改 for 迴圈中的迭代表達式以跳過數字。
+
+### 練習 2：陣列分析
+建立一個包含至少 8 個不同數字的陣列，並撰寫函式來分析資料。
+
+**需求：**
+- 建立一個名為 `numbers`，包含至少 8 個值的陣列
+- 撰寫 `findMaximum()` 函式回傳最大數字
+- 撰寫 `findMinimum()` 函式回傳最小數字  
+- 撰寫 `calculateSum()` 函式回傳所有數字的總和
+- 測試每個函式並顯示結果
+
+**加分挑戰：** 建立一個函式找出陣列中第二大的數字。
+
+### 練習 3：字串陣列處理
+建立一個您最喜歡的電影／書籍／歌曲的陣列，並練習不同的迴圈類型。
+
+**需求：**
+- 建立一個至少包含 5 個字串值的陣列
+- 使用傳統 `for` 迴圈以編號（1. 項目名稱）方式顯示項目
+- 使用 `for...of` 迴圈以大寫顯示項目
+- 使用 `forEach()` 方法計算並顯示字元總數
+
+**範例輸出：**
+```
+Traditional for loop:
+1. The Matrix
+2. Inception
+3. Interstellar
+
+For...of loop (uppercase):
+THE MATRIX
+INCEPTION
+INTERSTELLAR
+
+Character count:
+Total characters across all titles: 42
+```
+
+### 練習 4：資料篩選（進階）
+建立一個程式處理代表學生的物件陣列。
+
+**需求：**
+- 建立至少包含 5 個學生物件的陣列，物件屬性包含：`name`、`age`、`grade`
+- 使用迴圈找出年齡 18 歲以上的學生
+- 計算所有學生的平均成績
+- 建立一個新陣列，只包含成績超過 85 的學生
+
+**範例結構：**
+```javascript
+const students = [
+  { name: "Alice", age: 17, grade: 92 },
+  { name: "Bob", age: 18, grade: 84 },
+  // 添加更多學生...
+];
+```
+
+## 測試您的程式碼
+
+透過以下方式測試您的程式：
+1. 在瀏覽器主控台執行每個練習
+2. 驗證輸出是否符合預期結果
+3. 使用不同資料集進行測試
+4. 確認您的程式能處理邊界案例（空陣列、單一元素）
+
+## 繳交指南
+
+請於繳交時包含：
+- 每個練習具有良好註解的 JavaScript 程式碼
+- 顯示程式執行的截圖或文字輸出
+- 簡短說明您為每個任務選擇的迴圈類型及理由
 
 ## 評分標準
 
-| 評分標準 | 表現優異                               | 表現尚可                 | 需要改進                      |
-| -------- | --------------------------------------- | ------------------------ | ------------------------------ |
-|          | 程式運行正確且有註解                   | 程式沒有註解            | 程式不完整或有錯誤            |
+| 標準           | 優秀（3 分）                         | 尚可（2 分）                     | 需改進（1 分）                   |
+| -------------- | ---------------------------------- | ------------------------------ | ------------------------------- |
+| **功能**       | 所有練習正確完成且包含加分挑戰     | 所有必需練習皆正確執行         | 部分練習未完成或含有錯誤         |
+| **程式碼品質** | 程式碼整潔、有組織且變數名稱具描述性 | 程式碼可運作，但可更清晰       | 程式碼雜亂或難以理解             |
+| **註解**       | 詳盡說明邏輯與決策                 | 具基本註解                     | 註解極少或沒有                   |
+| **迴圈使用**   | 適當展現不同迴圈類型的理解         | 正確使用迴圈但種類有限         | 迴圈使用錯誤或效率低             |
+| **測試**       | 有多種情境完整測試的證據           | 展示基本測試                   | 幾乎沒有測試證據                 |
+
+## 反思問題
+
+完成練習後請思考：
+1. 哪種類型的迴圈使用起來最自然？為什麼？
+2. 在操作陣列時遇到了哪些挑戰？
+3. 這些技能如何應用於實際的網頁開發專案中？
+4. 若要優化程式效能，您會如何做出不同的設計？
+
+---
 
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
 **免責聲明**：  
-本文件使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。應以原始語言的文件作為權威來源。對於關鍵資訊，建議尋求專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或誤讀概不負責。
\ No newline at end of file
+本文件使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們力求準確，但請注意，自動翻譯可能包含錯誤或不準確之處。原始語言文件應視為權威版本。對於重要資訊，建議使用專業人工翻譯。我們不對因使用本翻譯所產生的任何誤解或誤釋承擔責任。
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->
\ No newline at end of file
diff --git a/translations/tw/3-terrarium/1-intro-to-html/README.md b/translations/tw/3-terrarium/1-intro-to-html/README.md
index bb9edff3..c799bb47 100644
--- a/translations/tw/3-terrarium/1-intro-to-html/README.md
+++ b/translations/tw/3-terrarium/1-intro-to-html/README.md
@@ -1,84 +1,168 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "89f7f9f800ce7c9f149e98baaae8491a",
-  "translation_date": "2025-08-29T15:25:07+00:00",
+  "original_hash": "3fcfa99c4897e051b558b5eaf1e8cc74",
+  "translation_date": "2026-01-06T14:11:43+00:00",
   "source_file": "3-terrarium/1-intro-to-html/README.md",
   "language_code": "tw"
 }
 -->
 # Terrarium 專案第一部分：HTML 入門
 
-![HTML 入門](../../../../translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.tw.png)
-> [Tomomi Imura](https://twitter.com/girlie_mac) 的手繪筆記
-
-## 課前測驗
-
-[課前測驗](https://ff-quizzes.netlify.app/web/quiz/15)
+```mermaid
+journey
+    title 你的 HTML 學習旅程
+    section 基礎
+      建立 HTML 檔案: 3: Student
+      新增 DOCTYPE: 4: Student
+      結構化文件: 5: Student
+    section 內容
+      新增元資料: 4: Student
+      插入圖片: 5: Student
+      組織佈局: 5: Student
+    section 語義
+      使用適當標籤: 4: Student
+      強化無障礙功能: 5: Student
+      建造生態瓶: 5: Student
+```
+![HTML 入門](../../../../translated_images/webdev101-html.4389c2067af68e98.tw.png)
+> 速寫筆記由 [Tomomi Imura](https://twitter.com/girlie_mac) 製作
+
+HTML，也就是超文字標記語言，是你曾經造訪過的每個網站的基礎。想像 HTML 是賦予網頁結構的骨架——它定義了內容放置的位置、組織方式，以及每個部分的意義。CSS 稍後會用色彩和版面來「裝扮」你的 HTML，JavaScript 會帶來互動效果，但 HTML 提供了讓一切成為可能的基本結構。
+
+在本課程中，你將為虛擬的玻璃容器介面建立 HTML 結構。這個實作專案會教你基本的 HTML 概念，同時打造出視覺吸引人的作品。你會學習如何使用語意元素組織內容、操作圖片，並為互動式網頁應用奠定基礎。
+
+完成本課程後，你將擁有一個運作中的 HTML 頁面，顯示以有組織欄位排放的植物圖片，準備在下一課進行樣式設定。別擔心剛開始看起來很基礎——這正是 HTML 在 CSS 加入視覺修飾前應該做的事。
+
+```mermaid
+mindmap
+  root((HTML 基礎))
+    Structure
+      DOCTYPE 聲明
+      HTML 元素
+      Head 區段
+      Body 內容
+    Elements
+      標籤與屬性
+      自我封閉標籤
+      巢狀元素
+      區塊與行內
+    Content
+      文字元素
+      圖像
+      容器 (div)
+      清單
+    Semantics
+      有意義的標籤
+      無障礙設計
+      螢幕閱讀器
+      SEO 效益
+    Best Practices
+      適當巢狀
+      有效標記
+      描述性的替代文字
+      有組織的結構
+```
+## 課前小測驗
 
-> 觀看影片
+[課前小測驗](https://ff-quizzes.netlify.app/web/quiz/15)
 
+> 📺 **觀看學習**：看看這段有用的影片概述
 > 
-> [![Git 和 GitHub 基礎影片](https://img.youtube.com/vi/1TvxJKBzhyQ/0.jpg)](https://www.youtube.com/watch?v=1TvxJKBzhyQ)
-
-### 簡介
-
-HTML（超文本標記語言）是網頁的「骨架」。如果說 CSS 是為 HTML「穿衣服」，JavaScript 是讓它「活起來」，那麼 HTML 就是網頁應用的「身體」。HTML 的語法甚至反映了這個概念，因為它包含了「head」、「body」和「footer」標籤。
+> [![HTML 基礎影片](https://img.youtube.com/vi/1TvxJKBzhyQ/0.jpg)](https://www.youtube.com/watch?v=1TvxJKBzhyQ)
 
-在這節課中，我們將使用 HTML 來設計虛擬玻璃花園的界面「骨架」。界面將包含一個標題和三個欄位：左右兩側欄位放置可拖曳的植物，中間區域則是玻璃花園的主要部分。完成這節課後，您將能看到植物出現在欄位中，但界面可能看起來有些奇怪；別擔心，下一節課我們會使用 CSS 為界面添加樣式，使其更美觀。
+## 設置你的專案
 
-### 任務
+在深入 HTML 程式碼之前，先為你的玻璃容器專案建立一個適當的工作空間。從一開始就建立有組織的檔案結構，是一個非常重要的習慣，會在你的網頁開發旅程中幫助你很多。
 
-在您的電腦上建立一個名為「terrarium」的資料夾，並在其中建立一個名為「index.html」的檔案。您可以在 Visual Studio Code 中完成此操作：打開新的 VS Code 視窗，點擊「開啟資料夾」，導航到新資料夾，然後在 Explorer 面板中點擊小型「檔案」按鈕以建立新檔案：
+### 任務：建立你的專案結構
 
-![VS Code 中的 Explorer](../../../../translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.tw.png)
+你將為玻璃容器專案創建一個專用的資料夾，並加入第一個 HTML 檔案。以下是兩種做法：
 
-或者
+**選項一：使用 Visual Studio Code**
+1. 開啟 Visual Studio Code
+2. 點選「檔案」→「開啟資料夾」或使用 `Ctrl+K, Ctrl+O`（Windows/Linux）或 `Cmd+K, Cmd+O`（Mac）
+3. 建立新資料夾，命名為 `terrarium` 並選取它
+4. 在檔案總管窗格點擊「新增檔案」圖示
+5. 檔名命名為 `index.html`
 
-使用以下指令在 Git Bash 中完成：
-* `mkdir terrarium`
-* `cd terrarium`
-* `touch index.html`
-* `code index.html` 或 `nano index.html`
+![VS Code 檔案總管示範建立新檔案](../../../../translated_images/vs-code-index.e2986cf919471eb9.tw.png)
 
-> index.html 檔案告訴瀏覽器它是資料夾中的預設檔案；例如，`https://anysite.com/test` 可能是由包含名為 `test` 的資料夾和其中的 `index.html` 檔案構建的；URL 中不一定會顯示 `index.html`。
-
----
-
-## DocType 和 html 標籤
-
-HTML 檔案的第一行是它的 DocType。這行需要放在檔案的最頂端，雖然看起來有些奇怪，但它告訴舊版瀏覽器需要以標準模式渲染頁面，遵循當前的 HTML 規範。
-
-> 提示：在 VS Code 中，您可以將滑鼠懸停在標籤上，查看 MDN 參考指南中關於其用途的資訊。
+**選項二：使用終端機指令**
+```bash
+mkdir terrarium
+cd terrarium
+touch index.html
+code index.html
+```
 
-第二行應該是 `<html>` 標籤的開啟標籤，接著是它的關閉標籤 `</html>`。這些標籤是界面的根元素。
+**這些指令完成了以下動作：**
+- **建立** 新目錄 `terrarium` 作為專案資料夾
+- **切換** 進入 terrarium 目錄 
+- **建立** 空白的 `index.html` 檔案
+- **使用** Visual Studio Code 開啟該檔案以便編輯
+
+> 💡 **專家小提示**：檔名 `index.html` 在網頁開發中很特別。瀏覽器拜訪網站時會自動尋找 `index.html` 當作預設顯示頁面。這表示像 `https://mysite.com/projects/` 這類 URL 不用特別指定檔名，就會載入 projects 資料夾裡的 `index.html`。
+
+## 理解 HTML 文件結構
+
+每份 HTML 文件都有瀏覽器需要理解且正確顯示的特定結構。把這結構當作正式信件——有特定順序的必要元素，幫助收件者（這裡是瀏覽器）正確處理內容。
+
+```mermaid
+flowchart TD
+    A["<!DOCTYPE html>"] --> B["<html>"]
+    B --> C["<head>"]
+    C --> D["<title>"]
+    C --> E["<meta charset>"]
+    C --> F["<meta viewport>"]
+    B --> G["<body>"]
+    G --> H["<h1> 標題"]
+    G --> I["<div> 容器"]
+    G --> J["<img> 圖片"]
+    
+    style A fill:#e1f5fe
+    style B fill:#f3e5f5
+    style C fill:#fff3e0
+    style G fill:#e8f5e8
+```
+先從加入每份 HTML 文件都需要的基本架構開始。
 
-### 任務
+### DOCTYPE 宣告和根元素
 
-在您的 `index.html` 檔案頂部添加以下內容：
+任何 HTML 檔案的前兩行是文件向瀏覽器的「介紹」：
 
-```HTML
+```html
 <!DOCTYPE html>
 <html></html>
 ```
 
-✅ DocType 的設定可以通過查詢字串來確定不同的模式：[Quirks Mode 和 Standards Mode](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode)。這些模式曾用於支援非常舊的瀏覽器（如 Netscape Navigator 4 和 Internet Explorer 5），但現在通常不再使用。您可以使用標準的 DocType 聲明。
+**這段程式碼的功能解析：**
+- **宣告** 文件類型為 HTML5，使用 `<!DOCTYPE html>`
+- **建立** 包含所有頁面內容的根 `<html>` 元素
+- **確立** 現代網路標準，確保瀏覽器正確呈現
+- **保證** 在不同瀏覽器和設備下呈現一致
 
----
+> 💡 **VS Code 小技巧**：在 VS Code 中將滑鼠停留在任何 HTML 標籤上，可看到 MDN Web Docs 的有用資訊，包括用法範例和瀏覽器相容性說明。
+
+> 📚 **進階知識**：DOCTYPE 宣告可避免瀏覽器進入「怪異模式」，該模式用於支援非常舊的網站。現代網頁開發採用簡單的 `<!DOCTYPE html>`，確保[標準相容的渲染](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode)。
+
+### 🔄 **學習檢視點**
+**暫停並思考**：繼續前，確保你理解以下要點：
+- ✅ 為何每份 HTML 文件都需 DOCTYPE 宣告
+- ✅ `<html>` 根元素包含什麼
+- ✅ 這種結構如何幫助瀏覽器正確渲染頁面
+
+**快速自我測驗**：你能用自己的話說明「標準相容渲染」是什麼意思嗎？
 
-## 文件的「head」
+## 添加重要的文件元資料
 
-HTML 文件的「head」區域包含關於網頁的重要資訊，也稱為[元數據](https://developer.mozilla.org/docs/Web/HTML/Element/meta)。在我們的例子中，我們告訴網頁伺服器以下四件事：
+HTML 文件的 `<head>` 區段包含瀏覽器與搜尋引擎需要但訪客不直接看見的重要資訊。想像它是幕後資訊，幫助你的網頁正常運作，並在不同設備和平台上正確顯示。
 
-- 網頁的標題
-- 頁面元數據，包括：
-    - 字符集，告訴頁面使用的字符編碼
-    - 瀏覽器資訊，包括 `x-ua-compatible`，指示支援 IE=edge 瀏覽器
-    - 關於視窗加載時應如何行為的資訊。將視窗的初始縮放設置為 1 控制頁面首次加載時的縮放級別。
+這些元資料告訴瀏覽器如何顯示頁面、使用哪種字元編碼，以及如何因應不同螢幕尺寸——這些都是打造專業且可及性良好的網頁必備條件。
 
-### 任務
+### 任務：加入文件的 head
 
-在開啟和關閉的 `<html>` 標籤之間添加一個「head」區塊。
+將這段 `<head>` 內容插入你的 `<html>` 開始及結束標籤之間：
 
 ```html
 <head>
@@ -89,17 +173,28 @@ HTML 文件的「head」區域包含關於網頁的重要資訊，也稱為[元
 </head>
 ```
 
-✅ 如果您像這樣設置視窗元標籤：`<meta name="viewport" content="width=600">`，會發生什麼？閱讀更多關於[視窗](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag)的資訊。
+**拆解各元素作用：**
+- **設定** 出現在瀏覽器分頁和搜尋結果的頁面標題
+- **指定** 使用 UTF-8 字元編碼，確保全球文字正確顯示
+- **保證** 與現代版本 Internet Explorer 兼容
+- **配置** 螢幕視窗大小與設備寬度同步，支援響應式設計
+- **控制** 初始縮放比例，內容自然呈現大小
 
----
+> 🤔 **思考看看**：如果你將 viewport meta 標籤設為 `<meta name="viewport" content="width=600">` 會怎樣？這會強制頁面寬度永遠是 600 像素，破壞響應式設計！進一步了解[正確的 viewport 設定](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag)。
+
+## 建立文件主體內容
+
+`<body>` 元素包含網頁的所有可見內容——使用者將看見並互動的所有東西。與提供瀏覽器指令的 `<head>` 不同，`<body>` 則包含實際內容：文字、圖片、按鈕，以及建構使用者介面的其他元素。
 
-## 文件的 `body`
+讓我們加入主體結構，並了解 HTML 標籤如何協作產生有意義的內容。
 
-### HTML 標籤
+### 理解 HTML 標籤結構
 
-在 HTML 中，您可以在 .html 檔案中添加標籤以創建網頁元素。每個標籤通常有開啟和關閉標籤，例如 `<p>hello</p>` 表示一段文字。通過在 `<html>` 標籤對內添加一組 `<body>` 標籤來創建界面的主體；您的標記現在看起來像這樣：
+HTML 使用配對標籤來定義元素。大多數標籤有一個開啟標籤，如 `<p>`，及一個關閉標籤，如 `</p>`，中間包含內容：`<p>Hello, world!</p>`。這建立了一個包含「Hello, world!」文字的段落元素。
 
-### 任務
+### 任務：加入 body 元素
+
+更新你的 HTML 檔案，加入 `<body>` 元素：
 
 ```html
 <!DOCTYPE html>
@@ -114,100 +209,179 @@ HTML 文件的「head」區域包含關於網頁的重要資訊，也稱為[元
 </html>
 ```
 
-現在，您可以開始構建頁面。通常，您使用 `<div>` 標籤來創建頁面中的各個元素。我們將創建一系列 `<div>` 元素來包含圖片。
+**完整結構提供以下功能：**
+- **建立** 基本的 HTML5 文件架構
+- **包含** 重要元資料，保證瀏覽器正確渲染
+- **創建** 空白主體等待顯示內容
+- **遵循** 現代網頁開發最佳實務
+
+現在你準備添加玻璃容器的可見元素。我們會使用 `<div>` 元素作為容器，組織不同的內容區塊，以及 `<img>` 元素來顯示植物圖片。
 
-### 圖片
+### 操作圖片與版面容器
 
-一個不需要關閉標籤的 HTML 標籤是 `<img>`，因為它有一個 `src` 元素，包含頁面渲染項目所需的所有資訊。
+圖片在 HTML 中很特別，因為它們用「自我封閉」的標籤。與像 `<p></p>` 這種包覆內容的元素不同，`<img>` 標籤內使用屬性（例如 `src` 指定圖片路徑，`alt` 提供輔助功能）包含所有必要資訊。
 
-在您的應用中建立一個名為 `images` 的資料夾，並將 [source code folder](../../../../3-terrarium/solution/images) 中的所有圖片添加到其中；（有 14 張植物圖片）。
+在把圖片加入 HTML 前，你需要先建立資料夾並整理專案檔案。
 
-### 任務
+**首先設定你的圖片：**
+1. 在 terrarium 專案資料夾內建立 `images` 資料夾
+2. 從[解答資料夾](../../../../3-terrarium/solution/images)下載植物圖片（共14張）
+3. 複製所有植物圖片到新建的 `images` 資料夾中
 
-在 `<body></body>` 標籤之間的兩個欄位中添加這些植物圖片：
+### 任務：建立植物展示版面
+
+現在在 `<body></body>` 標籤間加入以兩欄組織的植物圖片：
 
 ```html
 <div id="page">
 	<div id="left-container" class="container">
 		<div class="plant-holder">
-			<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
+			<img class="plant" alt="plant" id="plant1" src="../../../../translated_images/plant1.d87946a2ca70cc43.tw.png" />
 		</div>
 		<div class="plant-holder">
-			<img class="plant" alt="plant" id="plant2" src="./images/plant2.png" />
+			<img class="plant" alt="plant" id="plant2" src="../../../../translated_images/plant2.8daa1606c9c1ad89.tw.png" />
 		</div>
 		<div class="plant-holder">
-			<img class="plant" alt="plant" id="plant3" src="./images/plant3.png" />
+			<img class="plant" alt="plant" id="plant3" src="../../../../translated_images/plant3.8b0d484381a2a2a7.tw.png" />
 		</div>
 		<div class="plant-holder">
-			<img class="plant" alt="plant" id="plant4" src="./images/plant4.png" />
+			<img class="plant" alt="plant" id="plant4" src="../../../../translated_images/plant4.656e16ae1df37be2.tw.png" />
 		</div>
 		<div class="plant-holder">
-			<img class="plant" alt="plant" id="plant5" src="./images/plant5.png" />
+			<img class="plant" alt="plant" id="plant5" src="../../../../translated_images/plant5.2b41b9355f11ebcc.tw.png" />
 		</div>
 		<div class="plant-holder">
-			<img class="plant" alt="plant" id="plant6" src="./images/plant6.png" />
+			<img class="plant" alt="plant" id="plant6" src="../../../../translated_images/plant6.3d1827d03b656994.tw.png" />
 		</div>
 		<div class="plant-holder">
-			<img class="plant" alt="plant" id="plant7" src="./images/plant7.png" />
+			<img class="plant" alt="plant" id="plant7" src="../../../../translated_images/plant7.8152c302ac97f621.tw.png" />
 		</div>
 	</div>
 	<div id="right-container" class="container">
 		<div class="plant-holder">
-			<img class="plant" alt="plant" id="plant8" src="./images/plant8.png" />
+			<img class="plant" alt="plant" id="plant8" src="../../../../translated_images/plant8.38d6428174ffa850.tw.png" />
 		</div>
 		<div class="plant-holder">
-			<img class="plant" alt="plant" id="plant9" src="./images/plant9.png" />
+			<img class="plant" alt="plant" id="plant9" src="../../../../translated_images/plant9.f0e38d3327c37fc2.tw.png" />
 		</div>
 		<div class="plant-holder">
-			<img class="plant" alt="plant" id="plant10" src="./images/plant10.png" />
+			<img class="plant" alt="plant" id="plant10" src="../../../../translated_images/plant10.b159d6d6e985595f.tw.png" />
 		</div>
 		<div class="plant-holder">
-			<img class="plant" alt="plant" id="plant11" src="./images/plant11.png" />
+			<img class="plant" alt="plant" id="plant11" src="../../../../translated_images/plant11.2a03a1c2ec8ea84e.tw.png" />
 		</div>
 		<div class="plant-holder">
-			<img class="plant" alt="plant" id="plant12" src="./images/plant12.png" />
+			<img class="plant" alt="plant" id="plant12" src="../../../../translated_images/plant12.60e9b53e538fbaf3.tw.png" />
 		</div>
 		<div class="plant-holder">
-			<img class="plant" alt="plant" id="plant13" src="./images/plant13.png" />
+			<img class="plant" alt="plant" id="plant13" src="../../../../translated_images/plant13.07a51543c820bcf5.tw.png" />
 		</div>
 		<div class="plant-holder">
-			<img class="plant" alt="plant" id="plant14" src="./images/plant14.png" />
+			<img class="plant" alt="plant" id="plant14" src="../../../../translated_images/plant14.6e486371ba7d36ba.tw.png" />
 		</div>
 	</div>
 </div>
 ```
 
-> 注意：Span 和 Div 的區別。Div 被認為是「區塊」元素，而 Span 是「內聯」元素。如果您將這些 Div 轉換為 Span，會發生什麼？
-
-使用這些標記，植物現在會顯示在螢幕上。它看起來很糟糕，因為尚未使用 CSS 進行樣式設置，我們會在下一節課中完成。
-
-每張圖片都有替代文字，即使您無法看到或渲染圖片，替代文字也會顯示。這是一個重要的屬性，用於提高可訪問性。在未來的課程中，您將了解更多關於可訪問性的內容；目前請記住，alt 屬性為圖片提供了替代資訊，當使用者因某些原因無法查看圖片時（例如網速慢、src 屬性錯誤或使用者使用螢幕閱讀器）。
-
-✅ 您是否注意到每張圖片都有相同的 alt 標籤？這是好的做法嗎？為什麼？您能改進這段程式碼嗎？
-
----
-
-## 語義化標記
+**這段程式碼的逐步解釋：**
+- **建立** 一個 `id="page"` 的主要頁面容器，包含所有內容
+- **設置** 兩個欄位容器：`left-container` 和 `right-container`
+- **將** 7 株植物在左欄，7 株植物在右欄排列
+- **每張** 植物圖片用 `plant-holder` div 包裹，方便個別定位
+- **採用** 一致的 class 名稱，方便下一課搭配 CSS 美化
+- **每株** 植物圖片有獨特 ID，以便稍後用 JavaScript 操控
+- **指定** 正確的檔案路徑指向 images 目錄
+
+> 🤔 **思考看看**：目前所有圖片的 alt 文字都寫成「plant」。這對於輔助使用者不是很好。螢幕閱讀器會連續重複「plant」14次，沒辦法知道每張圖實際是什麼植物。你能想到更具描述性的 alt 文字，改善可及性嗎？
+
+> 📝 **HTML 元素類型**：`<div>` 為「區塊元素」，會佔滿整行寬度，`<span>` 為「行內元素」，只佔必要寬度。如果你將所有 `<div>` 改成 `<span>`，你覺得會發生什麼狀況？
+
+### 🔄 **學習檢視點**
+**結構理解**：花點時間回顧你的 HTML 結構：
+- ✅ 能否找出佈局中的主要容器？
+- ✅ 明白為何每張圖片有唯一 ID 嗎？
+- ✅ 如何描述 `plant-holder` div 的用途？
+
+**視覺檢查**：在瀏覽器開啟你的 HTML 檔案，你應該會看到：
+- 一份基礎的植物圖片列表
+- 兩欄呈現的圖片排列
+- 簡單、未經樣式設定的版面
+
+**記住**：在 CSS 加入前，HTML 本該就是這樣普通的外觀！
+
+加入這些標記後，植物會出現在畫面上，雖然尚未美觀完成——這就是下一課的 CSS 會負責的。此刻，你已有穩固的 HTML 基礎，可有效組織內容並遵循可及性最佳實踐。
+
+## 使用語意 HTML 促進可及性
+
+語意 HTML 意味著依據意義和用途選擇 HTML 元素，而非僅依外觀。使用語意標記，你是在向瀏覽器、搜尋引擎和協助技術（如螢幕閱讀器）傳達內容的結構與意義。
+
+```mermaid
+flowchart TD
+    A[需要新增內容嗎？] --> B{什麼類型？}
+    B -->|主標題| C["<h1>"]
+    B -->|副標題| D["<h2>, <h3>, 等等"]
+    B -->|段落| E["<p>"]
+    B -->|清單| F["<ul>, <ol>"]
+    B -->|導覽| G["<nav>"]
+    B -->|文章| H["<article>"]
+    B -->|區段| I["<section>"]
+    B -->|一般容器| J["<div>"]
+    
+    C --> K[螢幕閱讀器會宣告為主要標題]
+    D --> L[建立正確的標題結構]
+    E --> M[提供適當的文字間距]
+    F --> N[啟用清單導航快捷方式]
+    G --> O[標識導覽地標]
+    H --> P[標示獨立內容]
+    I --> Q[群組相關內容]
+    J --> R[僅在沒有語意標籤適用時使用]
+    
+    style C fill:#4caf50
+    style D fill:#4caf50
+    style E fill:#4caf50
+    style F fill:#4caf50
+    style G fill:#2196f3
+    style H fill:#2196f3
+    style I fill:#2196f3
+    style J fill:#ff9800
+```
+此方法讓你的網站對殘障使用者更友善，並幫助搜尋引擎更好地理解內容。這是現代網頁開發重要原則，能為所有人創造更佳體驗。
 
-通常，在撰寫 HTML 時最好使用有意義的「語義化」標記。這意味著您使用 HTML 標籤來表示它們設計的數據或交互類型。例如，頁面上的主要標題文字應使用 `<h1>` 標籤。
+### 加入語意頁面標題
 
-在開啟的 `<body>` 標籤下方添加以下內容：
+讓我們為玻璃容器頁加入適當的標題。將以下行插入在 `<body>` 開始標籤後面：
 
 ```html
 <h1>My Terrarium</h1>
 ```
 
-使用語義化標記，例如將標題設為 `<h1>`，將無序列表渲染為 `<ul>`，有助於螢幕閱讀器導航頁面。通常，按鈕應寫為 `<button>`，列表應寫為 `<li>`。雖然可以使用特別樣式的 `<span>` 元素和點擊處理器來模擬按鈕，但對於殘障使用者來說，使用技術來確定頁面上的按鈕位置並與之交互更方便。如果元素顯示為按鈕，這樣的設計更友好。因此，盡量使用語義化標記。
+**為何語意標記重要：**
+- **協助** 螢幕閱讀器導航與理解頁面結構
+- **提升** 搜尋引擎優化（SEO），明確內容層級
+- **增強** 視障與認知差異使用者的可及性
+- **創造** 跨設備與平台的良好使用體驗
+- **遵循** 網頁標準與專業開發最佳實務
+
+**語意與非語意元素比較：**
 
-✅ 查看螢幕閱讀器[如何與網頁交互](https://www.youtube.com/watch?v=OUDV1gqs9GA)。您能理解為什麼非語義化標記可能會讓使用者感到沮喪嗎？
+| 用途 | ✅ 語意選擇 | ❌ 非語意選擇 |
+|---------|-------------------|------------------------|
+| 主要標題 | `<h1>標題</h1>` | `<div class="big-text">標題</div>` |
+| 導航 | `<nav><ul><li></li></ul></nav>` | `<div class="menu"><div></div></div>` |
+| 按鈕 | `<button>點擊我</button>` | `<span onclick="...">點擊我</span>` |
+| 文章內容 | `<article><p></p></article>` | `<div class="content"><div></div></div>` |
 
-## 玻璃花園
+> 🎥 **示範影片**：觀看 [螢幕閱讀器如何與網頁互動](https://www.youtube.com/watch?v=OUDV1gqs9GA)，理解為何語意標記對可及性至關重要。留意正確 HTML 結構如何協助使用者高效導航。
 
-界面的最後部分涉及創建將被樣式化為玻璃花園的標記。
+## 建立玻璃容器結構
 
-### 任務：
+現在讓我們加入玻璃容器本身的 HTML 結構——這是未來放置植物的玻璃盒子。這部分展示了重要概念：HTML 提供結構，但沒有 CSS 樣式前，這些元素不會有可視效果。
 
-在最後的 `</div>` 標籤上方添加以下標記：
+玻璃容器標記使用描述性類別名稱，讓下一課的 CSS 美化更直覺且易維護。
+
+### 任務：加入玻璃容器結構
+
+將此標記插入最後一個 `</div>` 標籤之前（頁面容器的關閉標籤前）：
 
 ```html
 <div id="terrarium">
@@ -221,29 +395,200 @@ HTML 文件的「head」區域包含關於網頁的重要資訊，也稱為[元
 </div>
 ```
 
-✅ 即使您將這些標記添加到螢幕上，您仍然看不到任何渲染。為什麼？
+**理解這個玻璃容器結構：**
+- **建立** 一個主玻璃容器，具有獨特的 ID 以便樣式設定
+- **定義** 每個視覺元件的獨立元素（頂部、牆壁、泥土、底部）
+- **包含** 用於玻璃反射效果的巢狀元素（有光澤的元素）
+- **使用** 清楚表明每個元素用途的描述性類名
+- **準備** 用於 CSS 樣式以創建玻璃容器外觀的結構
+
+> 🤔 **注意到什麼了嗎？**：即使你已經新增了這些標記，你在頁面上並不會看到任何新東西！這完美說明了 HTML 提供結構，而 CSS 提供外觀。這些 `<div>` 元素存在，但尚未有任何視覺樣式——這會在下一課中加入！
+
+```mermaid
+flowchart TD
+    A[HTML 文件] --> B[文件頭]
+    A --> C[文件主體]
+    B --> D[標題元素]
+    B --> E[Meta 字符集]
+    B --> F[Meta 視窗設定]
+    C --> G[主要標題]
+    C --> H[頁面容器]
+    H --> I[左邊容器有 7 盆植物]
+    H --> J[右邊容器有 7 盆植物]
+    H --> K[玻璃容器結構]
+    
+    style A fill:#e1f5fe
+    style B fill:#fff3e0
+    style C fill:#e8f5e8
+    style H fill:#f3e5f5
+```
+### 🔄 **教學檢查點**
+**HTML 結構掌握**：在繼續之前，請確保你能：
+- ✅ 解釋 HTML 結構和視覺外觀之間的差異
+- ✅ 識別語義 versus 非語義的 HTML 元素
+- ✅ 描述適當標記如何有利於無障礙設計
+- ✅ 辨識完整的文件樹結構
+
+**測試你的理解**：嘗試在瀏覽器中關閉 JavaScript 並移除 CSS 後開啟你的 HTML 檔案。這可讓你看到你建立的純粹語義結構！
 
 ---
 
-## 🚀挑戰
+## GitHub Copilot Agent 挑戰
+
+使用 Agent 模式完成以下挑戰：
+
+**描述：** 創建一個語義化的 HTML 結構，用於加入玻璃容器專案的植物護理指南區塊。
+
+**提示：** 建立一個語義化的 HTML 區段，其中包括主要標題「Plant Care Guide」，三個子區段，分別有標題「Watering」、「Light Requirements」和「Soil Care」，每個子區段包含一段關於植物護理的資訊。使用適當語義 HTML 標籤如 `<section>`, `<h2>`, `<h3>`, 和 `<p>` 來正確組織內容。
+
+在這裡了解更多關於 [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) 。
+
+## 探索 HTML 歷史挑戰
 
-HTML 中有一些有趣的「舊」標籤，雖然不應在標記中使用已棄用的標籤，例如[這些標籤](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements)，但您可以嘗試使用舊的 `<marquee>` 標籤讓 h1 標題水平滾動。（如果您嘗試了，記得之後移除它）
+**了解網路演進**
+
+HTML 自 1990 年 Tim Berners-Lee 在 CERN 創造第一個瀏覽器以來已經有重大演變。一些舊標籤如 `<marquee>` 因不符合現代無障礙標準及響應式設計原則而被淘汰。
+
+**嘗試實驗：**
+1. 臨時使用 `<marquee>` 標籤包裹你的 `<h1>` 標題：`<marquee><h1>My Terrarium</h1></marquee>`
+2. 在瀏覽器中打開頁面，觀察滾動效果
+3. 思考此標籤被淘汰的原因（提示：用戶體驗與無障礙設計）
+4. 移除 `<marquee>` 標籤，回復使用語義標記
+
+**反思問題：**
+- 滾動標題會如何影響視覺障礙或動態敏感的使用者？
+- 哪些現代 CSS 技術可更無障礙地實現類似視覺效果？
+- 為何使用當代網路標準比使用淘汰標籤更重要？
+
+進一步探索 [過時和淘汰的 HTML 元素](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements)，了解網路標準如何演進以提升使用者體驗。
 
 ## 課後測驗
 
 [課後測驗](https://ff-quizzes.netlify.app/web/quiz/16)
 
-## 回顧與自學
+## 複習與自主學習
+
+**深化你的 HTML 知識**
+
+HTML 已是網路基礎超過 30 年，從簡單的文件標記語言演進為構建互動應用的複雜平台。了解其演變能幫助你欣賞現代網路標準並做出更佳開發決策。
+
+**推薦學習路徑：**
+
+1. **HTML 歷史與演進**
+   - 研究從 HTML 1.0 到 HTML5 的時間軸
+   - 探討某些標籤被淘汰的原因（無障礙性、行動友善、可維護性）
+   - 調查新興的 HTML 功能與提案
+
+2. **語義 HTML 深入**
+   - 研讀完整的 [HTML5 語義元素列表](https://developer.mozilla.org/docs/Web/HTML/Element)
+   - 練習何時使用 `<article>`、`<section>`、`<aside>` 和 `<main>`
+   - 了解提升無障礙設計的 ARIA 屬性
+
+3. **現代網頁開發**
+   - 探索 [Microsoft Learn 上的響應式網站建置](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon)
+   - 理解 HTML 如何與 CSS 與 JavaScript 整合
+   - 學習網頁效能與 SEO 最佳實踐
+
+**反思問題：**
+- 你發現了哪些被淘汰的 HTML 標籤？它們為何被移除？
+- 有哪些新 HTML 功能正在為未來版本提出？
+- 語義 HTML 如何促進網路無障礙及 SEO？
+
+### ⚡ **接下來 5 分鐘可做事**
+- [ ] 開啟 DevTools (F12)，檢視你最喜歡網站的 HTML 結構
+- [ ] 建立一個簡單 HTML 檔案，包含基本標籤：`<h1>`, `<p>`, 和 `<img>`
+- [ ] 使用 W3C HTML Validator 線上驗證 HTML
+- [ ] 試著在 HTML 中加入註解 `<!-- comment -->`
+
+### 🎯 **這一小時能達成的事**
+- [ ] 完成課後測驗並複習語義 HTML 概念
+- [ ] 使用正確的 HTML 結構建立一個關於你的簡易網頁
+- [ ] 試驗不同標題等級及文字格式化標籤
+- [ ] 新增圖片和連結，練習多媒體整合
+- [ ] 研究尚未嘗試過的 HTML5 功能
+
+### 📅 **為期一週的 HTML 旅程**
+- [ ] 完成具語義標記的玻璃容器專案任務
+- [ ] 建立使用 ARIA 標籤和角色的無障礙網頁
+- [ ] 練習建立各種輸入類型的表單
+- [ ] 探索 HTML5 API，例如 localStorage 或地理位置
+- [ ] 研習響應式 HTML 模式及行動優先設計
+- [ ] 檢視其他開發者的 HTML 代碼，學習最佳實踐
+
+### 🌟 **為期一個月的網頁基礎**
+- [ ] 建立展示 HTML 精通度的作品集網站
+- [ ] 學習使用 Handlebars 等框架做 HTML 範本
+- [ ] 透過改善 HTML 文件貢獻開源專案
+- [ ] 精通進階 HTML 概念如自訂元素
+- [ ] 將 HTML 與 CSS 框架及 JavaScript 函式庫整合
+- [ ] 指導其他學習 HTML 基礎的人
+
+## 🎯 你的 HTML 精通時間表
+
+```mermaid
+timeline
+    title HTML 學習進程
+    
+    section 基礎 (5 分鐘)
+        文件結構: DOCTYPE 宣告
+                 : HTML 根元素
+                 : 頭部與主體理解
+        
+    section 資料標籤 (10 分鐘)
+        重要元標籤: 字元編碼
+                     : 視窗配置
+                     : 瀏覽器相容性
+        
+    section 內容建立 (15 分鐘)
+        圖片整合: 正確檔案路徑
+                 : 替代文字重要性
+                 : 自我封閉標籤
+        
+    section 版面組織 (20 分鐘)
+        容器策略: 用 Div 元素結構化
+                  : 類別與 ID 命名
+                  : 巢狀元素階層
+        
+    section 意義掌握 (30 分鐘)
+        有意義標記: 標題階層
+                   : 螢幕閱讀器導航
+                   : 無障礙最佳實踐
+        
+    section 高級概念 (1 小時)
+        HTML5 功能: 現代語意元素
+                  : ARIA 屬性
+                  : 效能考量
+        
+    section 專業技能 (1 週)
+        程式碼組織: 檔案結構模式
+                     : 可維護標記
+                     : 團隊合作
+        
+    section 專家等級 (1 個月)
+        現代網路標準: 漸進式強化
+                        : 跨瀏覽器相容性
+                        : HTML 規範更新
+```
+### 🛠️ 你的 HTML 工具箱摘要
 
-HTML 是「久經考驗」的構建系統，幫助網絡發展成今天的樣子。通過研究一些舊標籤和新標籤，了解它的歷史。您能弄清楚為什麼某些標籤被棄用而某些被添加嗎？未來可能會引入哪些標籤？
+完成本課後，你已具備：
+- **文件結構**：完整的 HTML5 基礎與正確 DOCTYPE
+- **語義標記**：增強無障礙與 SEO 的有意義標籤
+- **圖片整合**：妥善的檔案組織與替代文字使用
+- **佈局容器**：策略性使用帶描述性類名的 div
+- **無障礙意識**：瞭解螢幕閱讀器的導航方式
+- **現代標準**：當前 HTML5 實務及淘汰標籤知識
+- **專案基礎**：為 CSS 樣式與 JavaScript 互動打好基礎
 
-了解更多關於為網頁和移動設備構建網站的內容：[Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon)。
+**下一步**：你的 HTML 結構已準備好進行 CSS 樣式設計！你所建立的語義基礎會讓下一課更易理解。
 
 ## 作業
 
-[練習 HTML：構建博客模型](assignment.md)
+[練習你的 HTML：製作一個部落格樣板](assignment.md)
 
 ---
 
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
 **免責聲明**：  
-本文件使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。應以原始語言的文件作為權威來源。對於關鍵資訊，建議尋求專業人工翻譯。我們對因使用此翻譯而產生的任何誤解或錯誤解讀概不負責。
\ No newline at end of file
+本文件係使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 所翻譯。儘管我們致力於確保準確性，但請注意，自動翻譯可能包含錯誤或不精確之處。原始文件的母語版本應被視為權威來源。對於重要資訊，建議採用專業人工翻譯。我們不對因使用本翻譯而產生的任何誤解或誤譯負責。
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->
\ No newline at end of file
diff --git a/translations/tw/3-terrarium/1-intro-to-html/assignment.md b/translations/tw/3-terrarium/1-intro-to-html/assignment.md
index 276e7fb6..e6a588d4 100644
--- a/translations/tw/3-terrarium/1-intro-to-html/assignment.md
+++ b/translations/tw/3-terrarium/1-intro-to-html/assignment.md
@@ -1,53 +1,154 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "5a764667bbe82aa72ac0a67f4c97ff4a",
-  "translation_date": "2025-10-03T09:00:55+00:00",
+  "original_hash": "650e63282e1dfa032890fcf5c1c4119d",
+  "translation_date": "2026-01-06T14:13:31+00:00",
   "source_file": "3-terrarium/1-intro-to-html/assignment.md",
   "language_code": "tw"
 }
 -->
 # HTML 練習作業：建立部落格模型
 
-## 目標
+## 學習目標
 
-設計並手寫 HTML 結構，用於個人部落格首頁。本次練習旨在幫助您熟悉語意化 HTML、佈局規劃以及程式碼組織。
+運用 HTML 知識設計並編碼完整的部落格首頁結構。此實作作業將強化語意化 HTML 概念、無障礙最佳實務以及專業程式碼組織技巧，這些技能將伴隨你在網頁開發旅程中持續使用。
 
-## 指導說明
+**完成此作業，你將能：**
+- 練習在編碼前規劃網站版面配置
+- 適當運用語意化 HTML 元素
+- 建立可無障礙使用且結構良好的標記
+- 養成以評論和組織維護專業程式碼的習慣
 
-1. **設計您的部落格模型**
-   - 繪製部落格首頁的視覺模型。包含主要區塊，例如標頭、導航欄、主要內容、側邊欄和頁尾。
-   - 您可以使用紙張繪製並掃描您的草圖，或使用數位工具（例如 Figma、Adobe XD、Canva，甚至 PowerPoint）。
+## 專案需求
 
-2. **識別 HTML 元素**
-   - 列出您計劃用於每個區塊的 HTML 元素（例如 `<header>`、`<nav>`、`<main>`、`<article>`、`<aside>`、`<footer>`、`<section>`、`<h1>`–`<h6>`、`<p>`、`<img>`、`<ul>`、`<li>`、`<a>` 等）。
+### 第 1 部分：設計規劃（視覺模型）
 
-3. **撰寫 HTML 標記**
-   - 手寫您的模型所需的 HTML。專注於語意化結構和最佳實踐。
-   - 至少包含 10 個不同的 HTML 元素。
-   - 添加註解以解釋您的選擇和結構。
+**建立一個部落格首頁的視覺模型，包括：**
+- 含網站標題和導覽列的頁首
+- 主要內容區，至少包含 2-3 篇部落格文章預覽
+- 側欄，展示附加資訊（關於區段、最新文章、分類）
+- 頁尾，含聯絡資訊或連結
 
-4. **提交您的作品**
-   - 上傳您的草圖/模型以及 HTML 文件。
-   - 可選擇性地提供簡短的反思（2–3 句），說明您的設計決策。
+**製作模型的選項：**
+- **手繪草圖**：使用紙筆繪製，再拍照或掃描你的設計
+- **數位工具**：Figma、Adobe XD、Canva、PowerPoint，或任何繪圖應用程式
+- **線框工具**：Balsamiq、MockFlow 或類似線框軟體
 
-## 評分標準
+**在模型上標註各區段**預計會使用的 HTML 元素（例如「頁首 - `<header>`」、「部落格文章 - `<article>`」）。
 
-| 評分項目         | 優秀                                                                                       | 合格                                                                         | 需改進                                                                         |
-|------------------|------------------------------------------------------------------------------------------|------------------------------------------------------------------------------|--------------------------------------------------------------------------------|
-| 視覺模型         | 清晰、詳細的模型，包含標記區塊和深思熟慮的佈局                                           | 基本模型，包含部分標記區塊                                                   | 模型簡略或不清晰；缺乏區塊標記                                                |
-| HTML 元素        | 使用 10 個以上語意化 HTML 元素；展現結構和最佳實踐的理解                                   | 使用 5–9 個 HTML 元素；部分語意化結構                                        | 使用少於 5 個元素；缺乏語意化結構                                             |
-| 程式碼品質       | 組織良好、易讀的程式碼，包含註解；遵循 HTML 標準                                           | 程式碼大致組織良好；註解較少                                                 | 程式碼混亂；缺乏註解                                                          |
-| 反思             | 深刻反思設計選擇和挑戰                                                                   | 基本反思                                                                     | 無反思或內容不相關                                                            |
+### 第 2 部分：HTML 元素規劃
 
-## 提示
+**建立一份清單，將模型的每個區段對應到具體的 HTML 元素：**
 
-- 使用語意化 HTML 標籤以提升可訪問性和 SEO。
-- 使用縮排和註解來組織您的程式碼。
-- 參考 [MDN HTML 元素參考](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) 以獲取指導。
-- 思考您的佈局如何在未來的作業中擴展或進行樣式設計。
+```
+Example:
+- Site Header → <header>
+- Main Navigation → <nav> with <ul> and <li>
+- Blog Post → <article> with <h2>, <p>, <time>
+- Sidebar → <aside> with <section> elements
+- Page Footer → <footer>
+```
+
+**必須包含的元素：**
+HTML 中至少需包含下列清單中的 10 種不同語意元素：
+- `<header>`、`<nav>`、`<main>`、`<article>`、`<section>`、`<aside>`、`<footer>`
+- `<h1>`、`<h2>`、`<h3>`、`<p>`、`<ul>`、`<li>`、`<a>`
+- `<img>`、`<time>`、`<blockquote>`、`<strong>`、`<em>`
+
+### 第 3 部分：HTML 實作
+
+**依照以下標準編碼你的部落格首頁：**
+
+1. **文件結構**：包含適當的 DOCTYPE、html、head、body 元素
+2. **語意化標記**：依元素用途使用 HTML
+3. **無障礙設計**：圖片含適當的替代文字，連結文字具意義
+4. **程式碼品質**：使用一致縮排與有意義註解
+5. **內容**：包含真實感的部落格內容（可使用預置文字）
+
+**範例 HTML 結構：**
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>My Personal Blog</title>
+</head>
+<body>
+    <!-- Main site header -->
+    <header>
+        <h1>My Blog Title</h1>
+        <nav>
+            <!-- Navigation menu -->
+        </nav>
+    </header>
+    
+    <!-- Main content area -->
+    <main>
+        <!-- Blog posts go here -->
+    </main>
+    
+    <!-- Sidebar content -->
+    <aside>
+        <!-- Additional information -->
+    </aside>
+    
+    <!-- Site footer -->
+    <footer>
+        <!-- Footer content -->
+    </footer>
+</body>
+</html>
+```
+
+### 第 4 部分：反思
+
+**撰寫簡短反思（3-5 句）說明：**
+- 哪些 HTML 元素是你最有信心使用的？
+- 在規劃或編碼過程中遇到什麼挑戰？
+- 語意化 HTML 如何協助你組織內容？
+- 下一次 HTML 專案會有哪些不同的做法？
+
+## 提交檢查清單
+
+**提交前請確定你已完成：**
+- [ ] 含標註 HTML 元素的視覺模型
+- [ ] 完整 HTML 檔案，含適當文件結構
+- [ ] 適當運用至少 10 種不同語意化 HTML 元素
+- [ ] 有意義的評論說明程式碼結構
+- [ ] 有效的 HTML 語法（請於瀏覽器測試）
+- [ ] 回答題目要求的書面反思
+
+## 評量準則
+
+| 評量項目 | 優異 (4) | 良好 (3) | 進行中 (2) | 初學 (1) |
+|----------|-----------|-----------|------------|---------|
+| **規劃與設計** | 詳盡且標注良好的模型，清楚展現版面及語意結構理解 | 清楚的模型，多數區塊標註適當 | 基本模型並有部分標註，呈現大致理解 | 模型極少或不清楚，缺少區塊識別 |
+| **語意化 HTML 使用** | 適切使用 10 種以上語意元素，展現深刻 HTML 與可及性理解 | 正確使用 8-9 種語意元素，具良好語意標記認識 | 使用 6-7 種語意元素，部分混淆用法 | 運用少於 6 種或誤用語意元素 |
+| **程式碼品質與組織** | 程式碼極為整齊，縮排恰當，含完整註解，HTML 語法完美 | 程式碼整齊，縮排良好，有助於閱讀的註解，語法有效 | 大致有組織，偶有註解，語法小錯誤 | 整理不佳、註解很少，語法錯誤多 |
+| **無障礙性與最佳實務** | 無障礙設計優異，替代文字清楚，標題階層合理，遵循所有現代最佳實務 | 無障礙功能良好，標題及替代文字適當，遵守多數最佳實務 | 有考慮無障礙性，替代文字與標題結構基本 | 無障礙功能不足，標題結構差，未遵循最佳實務 |
+| **反思與學習** | 反思深刻，展現 HTML 概念的透徹理解及學習過程的細膩分析 | 反思良好，顯示關鍵概念理解及自我覺察 | 反思基本，對 HTML 概念或學習過程的見解有限 | 反思匱乏或缺少，對學到的概念了解不深 |
+
+## 學習資源
+
+**重要參考資料：**
+- [MDN HTML 元素參考](https://developer.mozilla.org/docs/Web/HTML/Element) - 完整 HTML 元素指南
+- [HTML5 語意元素](https://developer.mozilla.org/docs/Web/HTML/Element#content_sectioning) - 理解語意標記
+- [網頁無障礙準則](https://www.w3.org/WAI/WCAG21/quickref/) - 創建無障礙網頁內容
+- [HTML 驗證器](https://validator.w3.org/) - 檢查 HTML 語法
+
+**成功秘訣：**
+- 在撰寫程式碼之前先從模型開始
+- 使用瀏覽器的開發者工具檢視 HTML 結構
+- 測試不同螢幕尺寸（即使沒有 CSS）
+- 大聲朗讀你的 HTML，確認結構是否合邏輯
+- 考慮螢幕閱讀器將如何解讀頁面結構
+
+> 💡 **提醒**：此作業重點在 HTML 結構與語意。別擔心視覺樣式 - 那是 CSS 的工作！你的頁面可能看起來簡單，但應具良好結構與語意。
 
 ---
 
-**免責聲明**：  
-本文件已使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。儘管我們致力於提供準確的翻譯，請注意自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於關鍵資訊，建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或錯誤解釋不承擔責任。
\ No newline at end of file
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**免責聲明**：
+本文件係使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們致力於提供準確的翻譯，但請注意，機器自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於重要資訊，建議採用專業人工翻譯。本公司不對因使用本翻譯而產生的任何誤解或誤譯負責。
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->
\ No newline at end of file
diff --git a/translations/tw/3-terrarium/2-intro-to-css/README.md b/translations/tw/3-terrarium/2-intro-to-css/README.md
index 34146480..34495dea 100644
--- a/translations/tw/3-terrarium/2-intro-to-css/README.md
+++ b/translations/tw/3-terrarium/2-intro-to-css/README.md
@@ -1,278 +1,727 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "acb5ae00cde004304296bb97da8ff4c3",
-  "translation_date": "2025-08-29T15:25:34+00:00",
+  "original_hash": "e39f3a4e3bcccf94639e3af1248f8a4d",
+  "translation_date": "2026-01-06T14:16:37+00:00",
   "source_file": "3-terrarium/2-intro-to-css/README.md",
   "language_code": "tw"
 }
 -->
-# 玻璃缸專案第二部分：CSS 入門
-
-![CSS 入門](../../../../translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.tw.png)  
-> [Tomomi Imura](https://twitter.com/girlie_mac) 的手繪筆記
-
+# Terrarium Project 第二部分：CSS 入門
+
+```mermaid
+journey
+    title 你的 CSS 樣式旅程
+    section 基礎
+      連結 CSS 檔案: 3: Student
+      了解級聯: 4: Student
+      學習繼承: 4: Student
+    section 選擇器
+      元素定位: 4: Student
+      類別模式: 5: Student
+      ID 特異性: 5: Student
+    section 版面配置
+      定位元素: 4: Student
+      建立容器: 5: Student
+      製作生態箱: 5: Student
+    section 精緻化
+      添加視覺效果: 5: Student
+      響應式設計: 5: Student
+      玻璃反射: 5: Student
+```
+![Introduction to CSS](../../../../translated_images/webdev101-css.3f7af5991bf53a20.tw.png)
+> 筆記作者：[Tomomi Imura](https://twitter.com/girlie_mac)
+
+還記得你的 HTML 陸地生態箱看起來相當簡單嗎？CSS 正是我們將這個樸素結構轉變成視覺吸引之物的關鍵所在。
+
+如果 HTML 就像是建造房屋骨架，那麼 CSS 則是讓它有家的感覺的所有元素——油漆顏色、家具擺設、燈光，以及各個房間如何流暢連結。試想凡爾賽宮最初是簡單的狩獵小屋，但經由細心的裝飾和布局規劃，變成了世界上最宏偉的建築之一。
+
+今天，我們將把你的陸地生態箱從功能性提升到精緻完美。你將學會如何精準定位元素、讓版面配置響應不同螢幕尺寸，以及創造令網站動人的視覺魅力。
+
+到這堂課的結束，你會發現策略性的 CSS 樣式設定能大幅提升你的專案。讓我們為陸地生態箱加點風格吧。
+
+```mermaid
+mindmap
+  root((CSS 基礎))
+    Cascade
+      Specificity Rules
+      Inheritance
+      Priority Order
+      Conflict Resolution
+    Selectors
+      Element Tags
+      Classes (.class)
+      IDs (#id)
+      Combinators
+    Box Model
+      Margin
+      Border
+      Padding
+      Content
+    Layout
+      Positioning
+      Display Types
+      Flexbox
+      Grid
+    Visual Effects
+      Colors
+      Shadows
+      Transitions
+      Animations
+    Responsive Design
+      Media Queries
+      Flexible Units
+      Viewport Meta
+      Mobile First
+```
 ## 課前測驗
 
 [課前測驗](https://ff-quizzes.netlify.app/web/quiz/17)
 
-### 簡介
+## CSS 入門
 
-CSS，全名為層疊樣式表（Cascading Style Sheets），解決了網頁開發中的一個重要問題：如何讓網站看起來更美觀。為應用程式添加樣式不僅能提升其可用性，還能讓其外觀更吸引人；此外，CSS 還能用於創建響應式網頁設計（Responsive Web Design, RWD），確保應用程式在任何螢幕尺寸下都能保持良好的顯示效果。CSS 不僅僅是讓應用程式看起來漂亮，它的規範還包括動畫和變形功能，能為應用程式實現更複雜的互動效果。CSS 工作小組負責維護當前的 CSS 規範，您可以在 [World Wide Web Consortium 的網站](https://www.w3.org/Style/CSS/members)上關注他們的工作。
+CSS 常被認為是「讓東西變漂亮」的工具，但它的用途遠更廣泛。CSS 就像電影導演——你不僅控制畫面呈現，也能操控動態效果，反應使用者互動，並適應各種狀況。
 
-> 注意，CSS 是一種不斷演進的語言，就像網路上的所有技術一樣，並非所有瀏覽器都支持最新的規範。在實作時，請務必參考 [CanIUse.com](https://caniuse.com) 來檢查支援情況。
+現代 CSS 功能強大。你可以寫程式碼自動調整版面配置，適用於手機、平板與桌面電腦。你也能創造流暢動畫，引導使用者目光焦點。當所有元素協同運作時，效果驚人。
 
-在本課程中，我們將為線上玻璃缸添加樣式，並學習多個 CSS 概念：層疊、繼承、選擇器的使用、定位以及如何使用 CSS 建立佈局。在此過程中，我們將設計玻璃缸的佈局，並創建實際的玻璃缸。
+> 💡 **專家建議**：CSS 持續演化，推出新功能與能力。使用新特性時，務必先上 [CanIUse.com](https://caniuse.com) 查詢各瀏覽器支援度。
+
+**本課目標：**
+- **建立**陸地生態箱完整視覺設計，採用現代 CSS 技巧
+- **探索**關鍵觀念如層疊(cascade)、繼承(inheritance)及 CSS 選擇器
+- **實作**響應式定位與布局策略
+- **打造**利用 CSS 形狀和樣式的陸地生態箱容器
 
 ### 前置條件
 
-您應該已經完成玻璃缸的 HTML 結構，並準備好進行樣式設計。
+請完成上堂課設計的 HTML 結構，並準備好進行樣式設定。
 
-> 查看影片
+> 📺 **影片資源**：這段詳盡的教學影片值得一看
+>
+> [![CSS Basics Tutorial](https://img.youtube.com/vi/6yIdOIV9p1I/0.jpg)](https://www.youtube.com/watch?v=6yIdOIV9p1I)
 
-> 
-> [![Git 和 GitHub 基礎影片](https://img.youtube.com/vi/6yIdOIV9p1I/0.jpg)](https://www.youtube.com/watch?v=6yIdOIV9p1I)
+### 設定你的 CSS 檔案
 
-### 任務
+開始設定樣式前，須先將 CSS 連結到 HTML。這告訴瀏覽器樣式的來源位置。
 
-在您的玻璃缸資料夾中，創建一個名為 `style.css` 的新檔案，並在 `<head>` 區域中匯入該檔案：
+在你的陸地生態箱資料夾中，建立新的檔案 `style.css`，然後在 HTML 文件的 `<head>` 區段加入連結：
 
 ```html
 <link rel="stylesheet" href="./style.css" />
 ```
 
----
+**這段程式碼說明如下：**
+- **建立** HTML 與 CSS 檔案間的連結
+- **告訴**瀏覽器載入並套用 `style.css` 內的樣式
+- **使用** `rel="stylesheet"` 屬性指明這是 CSS 檔案
+- **透過** `href="./style.css"` 指定檔案路徑
+
+## 理解 CSS 層疊機制
 
-## 層疊
+你是否好奇為什麼稱為「層疊」樣式表？因為樣式像瀑布一樣連續套用，有時彼此會產生衝突。
 
-層疊樣式表的核心概念是樣式的「層疊」，即樣式的應用是根據其優先級來決定的。由網站作者設定的樣式優先於瀏覽器設定的樣式，而內聯樣式的優先級又高於外部樣式表中的樣式。
+就像軍隊命令結構——將軍主令「所有軍隊穿綠制服」，但特定單位命令說「典禮穿藍禮服」，則以較具體指令為準。CSS 也遵循類似原理，理解這種層級結構，讓除錯輕鬆許多。
 
-### 任務
+### 體驗層疊優先順序
 
-為 `<h1>` 標籤添加內聯樣式 "color: red"：
+讓我們實際演練層疊，先在 `<h1>` 標籤加上內嵌樣式：
 
-```HTML
+```html
 <h1 style="color: red">My Terrarium</h1>
 ```
 
-接著，將以下程式碼添加到您的 `style.css` 檔案中：
+**這段程式碼做了什麼：**
+- **直接套用**紅色字體在 `<h1>` 元素，使用內嵌樣式
+- **利用** `style` 屬性，直接在 HTML 中嵌入 CSS
+- **建立**該元素最高優先度的樣式規則
+
+接著，在 `style.css` 內增加此規則：
 
-```CSS
+```css
 h1 {
- color: blue;
+  color: blue;
 }
 ```
 
-✅ 您的網頁應用程式中顯示了哪種顏色？為什麼？您能找到覆蓋樣式的方法嗎？什麼情況下您會想要這樣做，或者不這樣做？
+**以上範例讓我們：**
+- **定義**選取所有 `<h1>` 元素的 CSS 規則
+- **設定**使用外部樣式表將文字顏色設為藍色
+- **優先度**低於內嵌樣式的規則
+
+✅ **知識確認**：在你的網頁中呈現哪個顏色？該顏色為何勝出？你能想到哪些情況會想要覆寫樣式嗎？
+
+```mermaid
+flowchart TD
+    A["瀏覽器遇到 h1 元素"] --> B{"檢查內嵌樣式"}
+    B -->|找到| C["style='color: red'"] 
+    B -->|沒有| D{"檢查 ID 規則"}
+    C --> E["套用紅色 (1000 分)"]
+    D -->|找到| F["#heading { color: green }"]
+    D -->|沒有| G{"檢查類別規則"}
+    F --> H["套用綠色 (100 分)"]
+    G -->|找到| I[".title { color: blue }"]
+    G -->|沒有| J{"檢查元素規則"}
+    I --> K["套用藍色 (10 分)"]
+    J -->|找到| L["h1 { color: purple }"]
+    J -->|沒有| M["使用瀏覽器預設"]
+    L --> N["套用紫色 (1 分)"]
+    
+    style C fill:#ff6b6b
+    style F fill:#51cf66
+    style I fill:#339af0
+    style L fill:#9775fa
+```
+> 💡 **CSS 優先順序（由高至低）：**
+> 1. **內嵌樣式**（style 屬性）
+> 2. **ID 選擇器**（#myId）
+> 3. **類別選擇器**（.myClass）及屬性選擇器
+> 4. **元素選擇器**（h1, div, p）
+> 5. **瀏覽器預設**
 
----
+## CSS 繼承實例
 
-## 繼承
+CSS 繼承猶如遺傳學——子元素會從父元素繼承某些屬性。若你設定 body 的字型，頁面所有文字會自動使用相同字型。就像哈布斯堡王朝的獨特下巴特徵代代相傳，不需個別設定。
 
-樣式可以從祖先元素繼承到後代元素，嵌套的元素會繼承其父元素的樣式。
+但並非所有屬性都會繼承。像文字字型和顏色會，而邊距、邊框等布局屬性則不會。就如同小孩繼承外形特徵，但不一定繼承父母的穿衣打扮。
 
-### 任務
+### 觀察字型繼承
 
-將 body 的字體設置為指定的字體，並檢查嵌套元素的字體：
+試試將字型設定在 `<body>` 元素上：
 
-```CSS
+```css
 body {
-	font-family: helvetica, arial, sans-serif;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
 ```
 
-打開瀏覽器的控制台，切換到「Elements」標籤，觀察 H1 的字體。您會發現它繼承了 body 的字體，這在瀏覽器中有明確的說明：
+**說明這段過程：**
+- **設定**整個網頁的字型，選取 `<body>` 元素
+- **使用**字型堆疊，提供備用方案以提升瀏覽器相容性
+- **採用**現代系統字體，美觀適配多平台
+- **確保**除非明確覆寫，子元素都會繼承這個字型
 
-![繼承的字體](../../../../translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.tw.png)
+打開瀏覽器開發者工具（F12），切換到元素檢視，查看你的 `<h1>` 元素。你會看到它繼承了 body 的字型：
 
-✅ 您能讓嵌套樣式繼承不同的屬性嗎？
+![inherited font](../../../../translated_images/1.cc07a5cbe114ad1d.tw.png)
 
----
+✅ **實驗時間**：試著在 `<body>` 設定其他可繼承屬性，如 `color`、`line-height`、`text-align`。你的標題和其他元素會有什麼變化？
+
+> 📝 **可繼承屬性例**：`color`、`font-family`、`font-size`、`line-height`、`text-align`、`visibility`
+>
+> **不可繼承屬性例**：`margin`、`padding`、`border`、`width`、`height`、`position`
+
+### 🔄 **學習確認**
+**CSS 基礎理解檢核**：開始選擇器前，請確定你能：
+- ✅ 述說層疊與繼承的差異
+- ✅ 預測特殊規則下哪個樣式會生效
+- ✅ 辨識父元素會繼承哪些屬性
+- ✅ 正確將 CSS 檔案連結至 HTML
 
-## CSS 選擇器
+**快速測試**：有以下樣式， `<div class="special">` 內的 `<h1>` 會是什麼顏色？
+```css
+div { color: blue; }
+.special { color: green; }
+h1 { color: red; }
+```
+*答案：紅色（元素選擇器直接針對 h1）*
+
+## 精通 CSS 選擇器
+
+CSS 選擇器是你針對特定元素套用樣式的方式。它們像精確指示——不只是說「那棟房子」，而是說「楓樹街上有紅門的藍色房子」。
+
+CSS 提供多種定義精確度的方式，挑對選擇器就如挑對工具。有時候你要統一規劃一整區大門，有時候想特別裝飾某扇獨門。
 
-### 標籤
+### 元素選擇器（標籤）
 
-目前，您的 `style.css` 檔案中僅對少數標籤進行了樣式設計，因此應用程式看起來有些奇怪：
+元素選擇器以標籤名稱選取 HTML 元素，適合制定全頁基礎樣式：
 
-```CSS
+```css
 body {
-	font-family: helvetica, arial, sans-serif;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  margin: 0;
+  padding: 0;
 }
 
 h1 {
-	color: #3a241d;
-	text-align: center;
+  color: #3a241d;
+  text-align: center;
+  font-size: 2.5rem;
+  margin-bottom: 1rem;
 }
 ```
 
-這種針對標籤進行樣式設計的方法可以控制單一元素，但如果您需要控制玻璃缸中多個植物的樣式，就需要利用 CSS 選擇器。
+**理解這些樣式：**
+- **採用** `body` 選擇器設定網頁統一字型樣式
+- **移除**瀏覽器預設邊距與內距，方便控制排版
+- **為**所有標題元素添加文字色彩、對齊與間距
+- **運用** `rem` 單位打造可縮放、易讀字體大小
 
-### Id
+元素選擇器非常適合全面設定，但若要單獨修飾陸地生態箱中的特定植物元件，則需更具體選擇器。
 
-為左側和右側容器添加一些樣式。由於標記中只有一個左側容器和一個右側容器，因此它們被賦予了 id。要為它們設置樣式，可以使用 `#`：
+### ID 選擇器用於獨特元素
 
-```CSS
+ID 選擇器以 `#` 開頭，選取帶有指定 `id` 屬性的元素。因為 ID 必須唯一，很適合為個別特殊元素設定樣式，例如我們的左、右兩個植物容器。
+
+建立陸地生態箱側邊植物容器的樣式：
+
+```css
 #left-container {
-	background-color: #eee;
-	width: 15%;
-	left: 0px;
-	top: 0px;
-	position: absolute;
-	height: 100%;
-	padding: 10px;
+  background-color: #f5f5f5;
+  width: 15%;
+  left: 0;
+  top: 0;
+  position: absolute;
+  height: 100vh;
+  padding: 1rem;
+  box-sizing: border-box;
 }
 
 #right-container {
-	background-color: #eee;
-	width: 15%;
-	right: 0px;
-	top: 0px;
-	position: absolute;
-	height: 100%;
-	padding: 10px;
+  background-color: #f5f5f5;
+  width: 15%;
+  right: 0;
+  top: 0;
+  position: absolute;
+  height: 100vh;
+  padding: 1rem;
+  box-sizing: border-box;
 }
 ```
 
-在這裡，您使用絕對定位將這些容器固定在螢幕的最左側和最右側，並使用百分比設置其寬度，以便它們能夠適應小型行動裝置的螢幕。
+**這段程式碼成果說明：**
+- **使用** `absolute` 定位將容器置於左右兩邊邊緣
+- **採用** `vh`（視窗高度）單位，隨螢幕尺寸響應高度
+- **設定** `box-sizing: border-box`，確保內距包含於寬度內
+- **精簡**將零值的 `px` 單位去除，讓程式碼更簡潔乾淨
+- **塗上**柔和的背景色，比嚴肅的灰色更舒適
 
-✅ 這段程式碼有些重複，因此不符合「DRY」（Don't Repeat Yourself）的原則；您能找到更好的方法來設計這些 id 嗎？或許可以結合 id 和 class？您需要修改標記並重構 CSS：
+✅ **程式碼質量挑戰**：注意這份 CSS 違反 DRY（不要重複你自己）原則。你能用一組 ID 結合類別重構它嗎？
 
+**改良版方式：**
 ```html
 <div id="left-container" class="container"></div>
+<div id="right-container" class="container"></div>
+```
+
+```css
+.container {
+  background-color: #f5f5f5;
+  width: 15%;
+  top: 0;
+  position: absolute;
+  height: 100vh;
+  padding: 1rem;
+  box-sizing: border-box;
+}
+
+#left-container {
+  left: 0;
+}
+
+#right-container {
+  right: 0;
+}
 ```
 
-### Class
+### 類別選擇器用於重複利用樣式
 
-在上述範例中，您設計了螢幕上的兩個唯一元素。如果您希望樣式應用於螢幕上的多個元素，可以使用 CSS 類別（class）。以下是如何為左側和右側容器中的植物設置樣式。
+類別選擇器以 `.` 開頭，適合套用同樣樣式給多個元素。相比 ID，類別可多次使用，方便統一風格。
 
-注意，HTML 標記中的每個植物都有 id 和 class 的組合。這裡的 id 是供稍後添加的 JavaScript 使用，用於操作玻璃缸中的植物位置。而 class 則為所有植物提供統一的樣式。
+在陸地生態箱中，所有植物需有類似樣式，但每株植物又要獨立定位。用類別管理共有樣式，ID 則負責個別配置。
 
+**植物的 HTML 結構如下：**
 ```html
 <div class="plant-holder">
-	<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
+  <img class="plant" alt="Decorative plant for terrarium" id="plant1" src="../../../../translated_images/plant1.d18b18ffe73da18f.tw.png" />
 </div>
 ```
 
-將以下程式碼添加到您的 `style.css` 檔案中：
+**主要組件解析：**
+- **統一容器**使用 `class="plant-holder"` 來套用一致樣式
+- **植物圖片**使用 `class="plant"` 管理共通風格與行為
+- **獨特定位**用 `id="plant1"` 等作為唯一識別與 JavaScript 互動
+- **提供**輔助閱讀器的描述文字以提升無障礙性
+
+接著將這些樣式加入你的 `style.css`：
 
-```CSS
+```css
 .plant-holder {
-	position: relative;
-	height: 13%;
-	left: -10px;
+  position: relative;
+  height: 13%;
+  left: -0.6rem;
 }
 
 .plant {
-	position: absolute;
-	max-width: 150%;
-	max-height: 150%;
-	z-index: 2;
+  position: absolute;
+  max-width: 150%;
+  max-height: 150%;
+  z-index: 2;
+  transition: transform 0.3s ease;
 }
-```
-
-這段程式碼中值得注意的是相對定位和絕對定位的混合使用，我們會在下一節進一步探討。請注意高度的百分比處理方式：
-
-您將植物容器的高度設置為 13%，這是一個適合的數值，能確保所有植物都能顯示在每個垂直容器中，而無需滾動。
-
-您將植物容器向左移動，使植物在容器中更居中。由於圖片有大量透明背景以便於拖動，因此需要向左移動以更好地適應螢幕。
-
-接著，植物本身的最大寬度設置為 150%。這樣可以確保當瀏覽器縮小時，植物也會縮小以適應。
 
-還需要注意的是 z-index 的使用，它控制元素的相對高度（使植物顯示在容器上方，看起來像是放置在玻璃缸內）。
-
-✅ 為什麼需要同時使用植物容器和植物的 CSS 選擇器？
-
-## CSS 定位
-
-混合使用定位屬性（包括 static、relative、fixed、absolute 和 sticky 定位）可能有些棘手，但如果使用得當，能很好地控制頁面上的元素。
-
-絕對定位的元素是相對於最近的已定位祖先元素進行定位的，如果沒有已定位的祖先，則相對於文件的 body 進行定位。
-
-相對定位的元素則是根據 CSS 的指令，從其初始位置進行調整。
-
-在我們的範例中，`plant-holder` 是一個相對定位的元素，位於一個絕對定位的容器內。這樣的結果是側邊欄容器固定在左右兩側，而 `plant-holder` 則嵌套在側邊欄內，並在側邊欄內部調整自身位置，為植物的垂直排列留出空間。
+.plant:hover {
+  transform: scale(1.05);
+}
+```
 
-> `plant` 本身也使用了絕對定位，這是使其可拖動的必要條件，您將在下一課中了解更多。
+**解析這些樣式：**
+- **設定**植物容器為相對定位，建立定位參考框架
+- **調整**每個容器高度為 13%，確保所有植物垂直排放不需捲動
+- **稍微**將容器左移，讓植物在容器內更靠中間
+- **讓**植物圖片可響應縮放，透過 `max-width` 與 `max-height`
+- **利用** `z-index` 將植物層級提高，置於其他陸地元素之上
+- **新增**平滑過渡的滑鼠懸停效果，增進互動性
+
+✅ **關鍵思考**：為何需要同時用 `.plant-holder` 和 `.plant`？如果只用一個會怎樣？
+
+> 💡 **設計模式**：容器（`.plant-holder`）控制排版和定位，內容（`.plant`）負責外觀和縮放。此分工讓程式碼更易維護及彈性擴充。
+
+## 認識 CSS 定位
+
+CSS 定位如同舞台導演——你決定每個演員站哪裡、如何移動。有些演員遵循標準陣型，有些因戲劇效果需特殊定位。
+
+掌握定位，許多版面挑戰都迎刃而解。想要滾動時導航列固定？定位幫你辦到。想要在特定位置顯示工具提示？也是定位的功勞。
+
+### 五種定位值
+
+```mermaid
+quadrantChart
+    title CSS 定位策略
+    x-axis 文件流程 --> 從流程中移除
+    y-axis 靜態定位 --> 精確控制
+    quadrant-1 絕對定位
+    quadrant-2 固定定位
+    quadrant-3 靜態定位
+    quadrant-4 黏著定位
+    
+    Static: [0.2, 0.2]
+    Relative: [0.3, 0.6]
+    Absolute: [0.8, 0.8]
+    Fixed: [0.9, 0.7]
+    Sticky: [0.5, 0.9]
+```
+| 定位值 | 行為 | 使用範例 |
+|--------|------|----------|
+| `static` | 預設，忽略 top/left/right/bottom 屬性 | 正常文件流佈局 |
+| `relative` | 相對於正常位置定位 | 小幅調整，建立定位上下文 |
+| `absolute` | 相對最近定位祖先元素定位 | 精確放置，覆蓋元素 |
+| `fixed` | 相對視窗定位 | 導航列、浮動元素 |
+| `sticky` | 根據捲動位置在 relative 與 fixed 間切換 | 捲動時黏著的標頭 |
+
+### 我們陸地生態箱的定位策略
+
+我們透過定位組合，打造理想版面配置：
+
+```css
+/* Container positioning */
+.container {
+  position: absolute; /* Removes from normal flow */
+  /* ... other styles ... */
+}
 
-✅ 嘗試切換側邊容器和 `plant-holder` 的定位類型。會發生什麼？
+/* Plant holder positioning */
+.plant-holder {
+  position: relative; /* Creates positioning context */
+  /* ... other styles ... */
+}
 
-## CSS 佈局
+/* Plant positioning */
+.plant {
+  position: absolute; /* Allows precise placement within holder */
+  /* ... other styles ... */
+}
+```
 
-現在，您將使用所學的內容，完全用 CSS 建立玻璃缸！
+**定位策略說明：**
+- **絕對定位容器**脫離正常文檔流，固定於畫面邊緣
+- **相對定位植物容器**既在文檔流內又建立定位框架
+- **絕對定位植物**可在相對容器中精確擺放
+- **此組合**允許植物垂直堆疊且可獨立調整位置
+
+> 🎯 **重要關鍵**：植物元素需絕對定位，才能在下一堂課實作拖拉功能。絕對定位把元素從正常佈局中拉出，使拖放交互可行。
+
+✅ **實驗時間**：改變定位值並觀察效果：
+- 若將 `.container` 從 `absolute` 改成 `relative` 會怎樣？
+- 如果 `.plant-holder` 使用 `absolute` 而非 `relative`，佈局會如何變化？
+- 當你將 `.plant` 改成 `relative` 定位時會發生什麼？
+
+### 🔄 **教學檢測**
+**CSS 定位掌握**：暫停確認你的理解：
+- ✅ 你能解釋為什麼植物需要絕對定位才能拖放嗎？
+- ✅ 你了解相對容器如何創建定位上下文嗎？
+- ✅ 為什麼側邊容器使用絕對定位？
+- ✅ 如果完全移除定位聲明會發生什麼？
+
+**現實世界連結**：想想 CSS 定位如何反映現實佈局：
+- **Static**：書架上的書（自然排序）
+- **Relative**：稍微移動書但保持位置
+- **Absolute**：將書籤放在特定頁碼
+- **Fixed**：摺頁時仍保持可見的便利貼
+
+## 使用 CSS 建構玻璃瓶生態缸
+
+現在我們將使用純 CSS 建立玻璃罐—不需要圖片或繪圖軟體。
+
+透過定位和透明度創造逼真的玻璃、陰影和深度效果，展現 CSS 的視覺能力。這種技術類似包浩斯建築師用簡單幾何形狀打造複雜、美麗結構。理解這些原理後，你將能認出許多網頁設計背後的 CSS 技巧。
+
+```mermaid
+flowchart LR
+    A[罐子頂部] --> E[完整生態瓶]
+    B[罐壁] --> E
+    C[土層] --> E
+    D[罐底部] --> E
+    F[玻璃效果] --> E
+    
+    A1["寬度50%<br/>高度5%<br/>頂部位置"] --> A
+    B1["寬度60%<br/>高度80%<br/>圓角<br/>不透明度0.5"] --> B
+    C1["寬度60%<br/>高度5%<br/>深棕色<br/>底層"] --> C
+    D1["寬度50%<br/>高度1%<br/>底部位置"] --> D
+    F1["細微陰影<br/>透明度<br/>Z軸層次"] --> F
+    
+    style E fill:#d1e1df,stroke:#3a241d
+    style A fill:#e8f5e8
+    style B fill:#e8f5e8
+    style C fill:#8B4513
+    style D fill:#e8f5e8
+```
+### 建立玻璃罐元件
 
-首先，使用 CSS 將 `.terrarium` div 的子元素設置為圓角矩形：
+讓我們逐部分構建生態缸玻璃罐。每個部分使用絕對定位和百分比尺寸以達到響應式設計：
 
-```CSS
+```css
 .jar-walls {
-	height: 80%;
-	width: 60%;
-	background: #d1e1df;
-	border-radius: 1rem;
-	position: absolute;
-	bottom: 0.5%;
-	left: 20%;
-	opacity: 0.5;
-	z-index: 1;
+  height: 80%;
+  width: 60%;
+  background: #d1e1df;
+  border-radius: 1rem;
+  position: absolute;
+  bottom: 0.5%;
+  left: 20%;
+  opacity: 0.5;
+  z-index: 1;
+  box-shadow: inset 0 0 2rem rgba(0, 0, 0, 0.1);
 }
 
 .jar-top {
-	width: 50%;
-	height: 5%;
-	background: #d1e1df;
-	position: absolute;
-	bottom: 80.5%;
-	left: 25%;
-	opacity: 0.7;
-	z-index: 1;
+  width: 50%;
+  height: 5%;
+  background: #d1e1df;
+  position: absolute;
+  bottom: 80.5%;
+  left: 25%;
+  opacity: 0.7;
+  z-index: 1;
+  border-radius: 0.5rem 0.5rem 0 0;
 }
 
 .jar-bottom {
-	width: 50%;
-	height: 1%;
-	background: #d1e1df;
-	position: absolute;
-	bottom: 0%;
-	left: 25%;
-	opacity: 0.7;
+  width: 50%;
+  height: 1%;
+  background: #d1e1df;
+  position: absolute;
+  bottom: 0;
+  left: 25%;
+  opacity: 0.7;
+  border-radius: 0 0 0.5rem 0.5rem;
 }
 
 .dirt {
-	width: 60%;
-	height: 5%;
-	background: #3a241d;
-	position: absolute;
-	border-radius: 0 0 1rem 1rem;
-	bottom: 1%;
-	left: 20%;
-	opacity: 0.7;
-	z-index: -1;
+  width: 60%;
+  height: 5%;
+  background: #3a241d;
+  position: absolute;
+  border-radius: 0 0 1rem 1rem;
+  bottom: 1%;
+  left: 20%;
+  opacity: 0.7;
+  z-index: -1;
 }
 ```
 
-請注意這裡使用了百分比。如果您縮小瀏覽器，會看到玻璃缸也會隨之縮放。還請注意玻璃缸元素的寬度和高度百分比，以及每個元素如何絕對定位在中心，並固定在視窗底部。
+**理解生態缸構造：**
+- **使用** 百分比尺寸以適應各種螢幕大小
+- **絕對定位** 元素，以精確堆疊和對齊
+- **套用** 不同透明度來營造玻璃透明效果
+- **實現** `z-index` 分層，使植物出現在罐內
+- **添加** 細緻陰影和圓角，提升真實感
 
-我們還使用了 `rem` 作為圓角半徑的單位，這是一種相對於字體大小的長度單位。您可以在 [CSS 規範](https://www.w3.org/TR/css-values-3/#font-relative-lengths) 中了解更多關於這種類型的相對測量。
+### 百分比響應設計
 
-✅ 嘗試更改玻璃缸的顏色和透明度與泥土的顏色和透明度。會發生什麼？為什麼？
+注意所有尺寸均使用百分比而非固定像素：
 
----
+**為什麼重要：**
+- **確保** 生態缸在任何螢幕尺寸上都能等比例縮放
+- **維持** 罐內各元件的視覺關係
+- **提供** 從手機到大螢幕一貫的使用體驗
+- **讓** 設計自適應且不破壞畫面佈局
 
-## 🚀挑戰
+### CSS 單位實踐
 
-為玻璃缸的左下角添加一個「氣泡」光澤，使其看起來更像玻璃。您將需要設計 `.jar-glossy-long` 和 `.jar-glossy-short`，使其看起來像反射的光澤。完成後應如下圖所示：
+我們使用 `rem` 單位設定邊框圓角，與根字體大小成比例。這讓設計更容易被使用者字型偏好接受。欲了解更多[CSS 相對單位](https://www.w3.org/TR/css-values-3/#font-relative-lengths)的官方規範。
 
-![完成的玻璃缸](../../../../translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.tw.png)
+✅ **視覺實驗**：試著修改這些數值並觀察效果：
+- 將罐身透明度從 0.5 調高至 0.8 — 玻璃呈現如何改變？
+- 將土壤色從 `#3a241d` 換成 `#8B4513` — 視覺效果差異？
+- 將土層 `z-index` 調整為 2 — 分層效果如何？
 
-要完成課後測驗，請參考以下學習模組：[使用 CSS 為 HTML 應用程式設計樣式](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
+### 🔄 **教學檢測**
+**CSS 視覺設計理解**：確認你的視覺 CSS 掌握：
+- ✅ 百分比尺寸如何創造響應式設計？
+- ✅ 為何透明度產生玻璃透明效果？
+- ✅ `z-index` 在元素分層中扮演什麼角色？
+- ✅ 邊框圓角如何塑造罐子形狀？
 
-## 課後測驗
+**設計原則**：注意我們如何從簡單形狀打造複雜視覺：
+1. **矩形** → **圓角矩形** → **玻璃罐元件**
+2. **平面色彩** → **透明度** → **玻璃效果**
+3. **單一元素** → **分層組合** → **3D 外觀**
 
-[課後測驗](https://ff-quizzes.netlify.app/web/quiz/18)
+---
+
+## GitHub Copilot Agent 挑戰 🚀
+
+使用 Agent 模式完成以下挑戰：
+
+**描述：** 創造一個 CSS 動畫，使生態缸中的植物輕柔搖擺，模擬自然微風效果。這將幫助你練習 CSS 動畫、轉換與關鍵影格，同時提升生態缸的視覺吸引力。
+
+**提示：** 為 `.plant` 類別新增 CSS 關鍵影格動畫，使植物輕輕從左到右搖擺。動畫旋轉角度約 2-3 度，持續時間 3-4 秒，並無限循環，使用緩動函數模擬自然動作。
+
+在此了解 [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode)。
+
+## 🚀 挑戰：新增玻璃反光
+
+準備好利用真實玻璃反光效果強化生態缸嗎？此技術將為設計增添深度與真實感。
+
+你將製作細膩高光，模擬光線如何在玻璃表面反射。此作法類似文藝復興畫家揚·范艾克運用光與反射使玻璃畫作呈現立體感。目標如下：
+
+![finished terrarium](../../../../translated_images/terrarium-final.2f07047ffc597d0a.tw.png)
+
+**你的挑戰：**
+- **製作** 細膩的白色或淺色橢圓形反光
+- **將它們置於** 罐子的左側策略性位置
+- **套用** 適合的透明度與模糊效果以呈現真實光反射
+- **利用** `border-radius` 造出有機泡泡狀形狀
+- **嘗試** 漸層或盒陰影效果增加真實感
+
+## 課後小測驗
+
+[課後小測驗](https://ff-quizzes.netlify.app/web/quiz/18)
+
+## 擴充你的 CSS 知識
+
+CSS 初學或許感覺複雜，但理解這些核心概念將提供你扎實基礎以進階技巧。
+
+**你的下一步 CSS 學習領域：**
+- **Flexbox** - 簡化元素對齊與分配
+- **CSS Grid** - 強大工具製作複雜佈局
+- **CSS 變數** - 減少重複提升維護性
+- **響應式設計** - 確保網站適用不同螢幕尺寸
+
+### 互動學習資源
+
+透過這些趣味且實際的遊戲練習概念：
+- 🐸 [Flexbox Froggy](https://flexboxfroggy.com/) - 透過有趣挑戰精通 Flexbox
+- 🌱 [Grid Garden](https://codepip.com/games/grid-garden/) - 透過種胡蘿蔔學習 CSS Grid
+- 🎯 [CSS Battle](https://cssbattle.dev/) - 以程式挑戰測試你的 CSS 技能
+
+### 進階學習
+
+欲了解完整 CSS 基礎，請完成微軟學習模組：[用 CSS 風格化你的 HTML 應用](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
+
+### ⚡ **接下來 5 分鐘你可以做的事**
+- [ ] 開啟 DevTools，使用 Elements 面板檢查任一網站的 CSS 樣式
+- [ ] 製作簡單 CSS 檔案並連結至 HTML 頁面
+- [ ] 嘗試以十六進位、RGB 與命名色彩改變顏色
+- [ ] 練習盒模型，為 div 加 padding 與 margin
+
+### 🎯 **這一小時你能完成的目標**
+- [ ] 完成課後小測驗，複習 CSS 基礎
+- [ ] 使用字體、顏色與間距為 HTML 頁面加上風格
+- [ ] 使用 flexbox 或 grid 製作簡易佈局
+- [ ] 嘗試 CSS 過渡打造順暢效果
+- [ ] 使用 media query 練習響應式設計
+
+### 📅 **你的一週 CSS 冒險**
+- [ ] 創意完成生態缸樣式作業
+- [ ] 精通 CSS Grid，打造照片畫廊佈局
+- [ ] 學習 CSS 動畫，讓設計更生動
+- [ ] 探索 Sass 或 Less 預處理器
+- [ ] 研究設計原則並融入 CSS
+- [ ] 分析並重現網路上有趣的設計
+
+### 🌟 **你的一個月設計大師之路**
+- [ ] 建置完整響應式網站設計系統
+- [ ] 學習 CSS-in-JS 或 Tailwind 這類實用框架
+- [ ] 為開源專案貢獻 CSS 優化
+- [ ] 掌握 CSS 進階概念如自訂屬性及 containment
+- [ ] 創建可重用的模組化元件庫
+- [ ] 指導其他 CSS 學習者並分享設計心得
+
+## 🎯 你的 CSS 精通時間軸
+
+```mermaid
+timeline
+    title CSS 學習進度
+    
+    section 基礎 (10 分鐘)
+        檔案連結: 連結 CSS 至 HTML
+                 : 理解層疊規則
+                 : 學習繼承基礎
+        
+    section 選擇器 (15 分鐘)
+        目標元素: 元素選擇器
+               : 類別模式
+               : ID 特殊性
+               : 組合器
+        
+    section 盒模型 (20 分鐘)
+        版面基礎: 外距與內距
+               : 邊框屬性
+               : 內容尺寸
+               : 盒模型行為
+        
+    section 定位 (25 分鐘)
+        元素定位: 靜態與相對
+               : 絕對定位
+               : Z-index 堆疊
+               : 響應單位
+        
+    section 視覺設計 (30 分鐘)
+        樣式精通: 顏色與透明度
+               : 陰影與效果
+               : 過渡效果
+               : 轉換屬性
+        
+    section 響應式設計 (45 分鐘)
+        多裝置支援: 媒體查詢
+                  : 彈性版面
+                  : 行動優先策略
+                  : 視口最佳化
+        
+    section 進階技巧 (1 週)
+        現代 CSS: Flexbox 佈局
+                : CSS Grid 系統
+                : 自訂屬性
+                : 動畫關鍵影格
+        
+    section 專業技能 (1 個月)
+        CSS 架構: 元件模式
+                : 可維護程式碼
+                : 效能優化
+                : 跨瀏覽器相容性
+```
+### 🛠️ 你的 CSS 工具箱總結
 
-## 複習與自學
+完成本課後，你具備：
+- **繼承與覆寫理解**：樣式如何繼承與覆寫
+- **選擇器精通**：元素、類別與 ID 精準選取
+- **定位技巧**：策略性元素放置與分層
+- **視覺設計**：製作玻璃效果、陰影與透明度
+- **響應技術**：百分比佈局適應各種螢幕
+- **程式碼組織**：乾淨且易維護的 CSS 結構
+- **現代實務**：使用相對單位與無障礙設計模式
 
-CSS 看似簡單，但要為所有瀏覽器和螢幕尺寸完美設計樣式卻充滿挑戰。CSS-Grid 和 Flexbox 是為了讓這項工作更結構化、更可靠而開發的工具。通過玩 [Flexbox Froggy](https://flexboxfroggy.com/) 和 [Grid Garden](https://codepip.com/games/grid-garden/) 來學習這些工具。
+**下一步**：你的生態缸現在有結構（HTML）與樣式（CSS）。最後一課將增添 JavaScript 互動功能！
 
 ## 作業
 
@@ -280,5 +729,7 @@ CSS 看似簡單，但要為所有瀏覽器和螢幕尺寸完美設計樣式卻
 
 ---
 
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
 **免責聲明**：  
-本文件使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。應以原始語言的文件作為權威來源。對於關鍵資訊，建議尋求專業人工翻譯。我們對因使用本翻譯而產生的任何誤解或錯誤解讀概不負責。
\ No newline at end of file
+本文件係使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。儘管我們努力追求準確性，請注意自動翻譯可能包含錯誤或不準確之處。原文文件以其母語版本為權威依據。對於重要資訊，建議尋求專業人工翻譯。我們不對因使用本翻譯而導致之任何誤解或曲解負責。
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->
\ No newline at end of file
diff --git a/translations/tw/3-terrarium/2-intro-to-css/assignment.md b/translations/tw/3-terrarium/2-intro-to-css/assignment.md
index a26140d5..40a7a3c1 100644
--- a/translations/tw/3-terrarium/2-intro-to-css/assignment.md
+++ b/translations/tw/3-terrarium/2-intro-to-css/assignment.md
@@ -1,8 +1,8 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "a212cc22a18eddf9046b7a16dfbafd8b",
-  "translation_date": "2025-10-03T09:00:45+00:00",
+  "original_hash": "bee6762d4092a13fc7c338814963f980",
+  "translation_date": "2026-01-06T14:18:26+00:00",
   "source_file": "3-terrarium/2-intro-to-css/assignment.md",
   "language_code": "tw"
 }
@@ -11,31 +11,126 @@ CO_OP_TRANSLATOR_METADATA:
 
 ## 目標
 
-重構「玻璃花園」專案，使用 **Flexbox** 或 **CSS Grid** 進行佈局。根據需要更新 HTML 和 CSS，以實現現代化、響應式的設計。您不需要實現可拖曳的元素——僅需專注於佈局和樣式。
+將你的生態瓶專案轉換成使用現代 CSS 版面配置技術！將目前的絕對定位方式重構為使用**Flexbox** 或 **CSS Grid**，以實現更易維護、響應式的設計。本次作業挑戰你在保持生態瓶視覺吸引力的同時，運用現代 CSS 標準。
 
-## 指示
+了解何時以及如何使用不同版面配置方法是現代網頁開發的重要技能。此練習橋接了傳統定位技術與當代 CSS 版面系統。
 
-1. **建立新版本**的玻璃花園應用程式。更新標記和 CSS，使用 Flexbox 或 CSS Grid 進行佈局。
-2. **確保藝術設計和元素保持原樣**，與原始版本一致。
-3. **在至少兩個不同的瀏覽器中測試您的設計**（例如，Chrome、Firefox、Edge）。
-4. **截圖您的玻璃花園**在每個瀏覽器中的顯示，展示跨瀏覽器的相容性。
-5. **提交**您的更新後的程式碼和截圖。
+## 作業說明
+
+### 第一階段：分析與規劃
+1. **檢視目前的生態瓶程式碼** — 確認哪些元素目前使用絕對定位
+2. **選擇版面配置方法** — 決定 Flexbox 或 CSS Grid 哪個更適合你的設計目標
+3. **繪製新版面結構** — 規劃容器與植物元素如何組織
+
+### 第二階段：實作
+1. **在獨立資料夾建立新版本** 的生態瓶專案
+2. **根據需求更新 HTML 結構**，以支援你選擇的版面配置方法
+3. **重構 CSS**，改用 Flexbox 或 CSS Grid，替代絕對定位
+4. **維持視覺一致性** — 確保植物與生態瓶罐位於相同位置
+5. **實作響應式行為** — 版面配置應能優雅適應不同螢幕尺寸
+
+### 第三階段：測試與文件撰寫
+1. **跨瀏覽器測試** — 確認設計在 Chrome、Firefox、Edge 與 Safari 表現正常
+2. **響應式測試** — 檢視設計在手機、平板與桌面大小螢幕上的效果
+3. **文件註解** — 在 CSS 加入註解，說明版面配置選擇
+4. **截圖** — 捕捉生態瓶於不同瀏覽器與螢幕尺寸的畫面
+
+## 技術需求
+
+### 版面配置實作
+- **擇一實作**：Flexbox 或 CSS Grid（同一元素不可同時用兩者）
+- **響應式設計**：使用相對單位（`rem`、`em`、`%`、`vw`、`vh`），取代固定像素
+- **可及性**：保持正確語意化 HTML 結構及替代文字
+- **程式碼品質**：命名一致且 CSS 結構邏輯清晰
+
+### 現代 CSS 功能須包含
+```css
+/* Example Flexbox approach */
+.terrarium-container {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  align-items: center;
+  justify-content: center;
+}
+
+.plant-containers {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  max-width: 1200px;
+}
+
+/* Example Grid approach */
+.terrarium-layout {
+  display: grid;
+  grid-template-columns: 1fr 3fr 1fr;
+  grid-template-rows: auto 1fr;
+  min-height: 100vh;
+  gap: 1rem;
+}
+```
+
+### 瀏覽器支援需求
+- **Chrome/Edge**：最新 2 個版本
+- **Firefox**：最新 2 個版本  
+- **Safari**：最新 2 個版本
+- **行動瀏覽器**：iOS Safari、Chrome Mobile
+
+## 交付項目
+
+1. **更新後的 HTML 檔案**，增強語意結構
+2. **重構後的 CSS 檔案**，採用現代版面配置技術
+3. **截圖集**，展示跨瀏覽器相容性：
+   - 桌面視角（1920x1080）
+   - 平板視角（768x1024） 
+   - 行動視角（375x667）
+   - 至少兩種不同瀏覽器
+4. **README.md 檔案**，記錄：
+   - 你的版面配置選擇（Flexbox 與 Grid）及其原因
+   - 重構時遇到的挑戰
+   - 瀏覽器相容性說明
+   - 執行程式碼的指引
 
 ## 評分標準
 
-| 評分項目   | 優秀表現                                                                 | 合格表現                              | 需改進表現                              |
-|------------|--------------------------------------------------------------------------|---------------------------------------|----------------------------------------|
-| 佈局       | 完全使用 Flexbox 或 CSS Grid 進行重構；視覺效果吸引人且響應式設計         | 部分元素重構；部分使用 Flexbox 或 Grid | 幾乎未使用 Flexbox 或 Grid；佈局未改變 |
-| 跨瀏覽器   | 提供多個瀏覽器的截圖；外觀一致                                           | 僅提供一個瀏覽器的截圖；有輕微不一致   | 未提供截圖或存在重大不一致             |
-| 程式碼品質 | HTML/CSS 乾淨且組織良好；註解清晰                                       | 程式碼有些組織；註解較少               | 程式碼混亂；缺乏註解                   |
+| 評分項目 | 優秀 (4) | 合格 (3) | 進步中 (2) | 初學 (1) |
+|----------|----------|----------|------------|----------|
+| **版面配置實作** | 精通使用 Flexbox/Grid 與進階功能；完全響應式 | 正確實作並具良好響應式行為 | 基本實作，響應式有小問題 | 版面配置不完整或錯誤 |
+| **程式碼品質** | CSS 清晰、組織良好、有意義註解及一致命名 | 組織良好，包含部分註解 | 組織尚可，有少量註解 | 組織混亂，不易理解 |
+| **跨瀏覽器相容性** | 各必要瀏覽器完全一致並附截圖 | 兼容性良好，有少部分差異並記錄 | 有兼容性問題但不影響功能 | 重大相容性問題或缺少測試 |
+| **響應式設計** | 優異的行動優先設計，斷點流暢 | 反應良好，斷點適中 | 基本響應功能，有版面問題 | 響應式有限或失效 |
+| **文件說明** | 完整 README，含詳細說明與見解 | 良好文件，涵蓋所有需求 | 基本文件，說明不足 | 文件不完整或遺漏 |
+
+## 有用資源
+
+### 版面配置導引
+- 📖 [Flexbox 完整指南](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
+- 📖 [CSS Grid 完整指南](https://css-tricks.com/snippets/css/complete-guide-grid/)
+- 📖 [Flexbox vs Grid — 選擇正確工具](https://blog.webdevsimplified.com/2022-11/flexbox-vs-grid/)
+
+### 瀏覽器測試工具
+- 🛠️ [瀏覽器開發工具響應模式](https://developer.chrome.com/docs/devtools/device-mode/)
+- 🛠️ [Can I Use - 功能支援](https://caniuse.com/)
+- 🛠️ [BrowserStack - 跨瀏覽器測試](https://www.browserstack.com/)
+
+### 程式碼品質工具
+- ✅ [CSS 驗證器](https://jigsaw.w3.org/css-validator/)
+- ✅ [HTML 驗證器](https://validator.w3.org/)
+- ✅ [WebAIM 對比檢查器](https://webaim.org/resources/contrastchecker/)
+
+## 額外挑戰
 
-## 提示
+🌟 **進階版面配置**：在設計中不同區塊同時使用 Flexbox 和 Grid  
+🌟 **動畫整合**：加入與新版面配置配合的 CSS 過渡或動畫  
+🌟 **暗黑模式**：實作基於 CSS 自訂屬性的主題切換  
+🌟 **容器查詢**：運用現代容器查詢技術實現組件級響應
 
-- 查看 [Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) 和 [CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) 指南。
-- 使用瀏覽器開發工具測試響應式設計。
-- 在程式碼中添加註解以提高清晰度。
+> 💡 **記住**：目標不只是讓它能運作，而是理解為何你選擇的版面配置方法是該設計挑戰的最佳解決方案！
 
 ---
 
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
 **免責聲明**：  
-本文件已使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。儘管我們致力於提供準確的翻譯，請注意自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於關鍵資訊，建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或錯誤解釋不承擔責任。
\ No newline at end of file
+本文件係使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們力求準確，但請注意，自動翻譯可能包含錯誤或不精確之處。原始文件之母語版本應被視為權威來源。對於重要資訊，建議採用專業人工翻譯。我們不對因使用本翻譯而產生的任何誤解或誤釋負責。
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->
\ No newline at end of file
diff --git a/translations/tw/3-terrarium/3-intro-to-DOM-and-closures/README.md b/translations/tw/3-terrarium/3-intro-to-DOM-and-closures/README.md
index f96990e1..d666f140 100644
--- a/translations/tw/3-terrarium/3-intro-to-DOM-and-closures/README.md
+++ b/translations/tw/3-terrarium/3-intro-to-DOM-and-closures/README.md
@@ -1,61 +1,205 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "61c14b27044861e5e69db35dd52c4403",
-  "translation_date": "2025-08-29T15:26:50+00:00",
+  "original_hash": "973e48ad87d67bf5bb819746c9f8e302",
+  "translation_date": "2026-01-06T14:13:53+00:00",
   "source_file": "3-terrarium/3-intro-to-DOM-and-closures/README.md",
   "language_code": "tw"
 }
 -->
-# 玻璃生態缸專案第 3 部分：DOM 操作與閉包
+# Terrarium 專案第三部分：DOM 操作與 JavaScript 閉包
+
+```mermaid
+journey
+    title 你的 JavaScript DOM 旅程
+    section 基礎
+      了解 DOM: 3: Student
+      學習閉包: 4: Student
+      連接元素: 4: Student
+    section 互動
+      設置拖放事件: 4: Student
+      跟蹤座標: 5: Student
+      處理移動: 5: Student
+    section 精修
+      添加清理: 4: Student
+      測試功能: 5: Student
+      完成陸地生態箱: 5: Student
+```
+![DOM 和閉包](../../../../translated_images/webdev101-js.10280393044d7eaa.tw.png)
+> 筆記作者 [Tomomi Imura](https://twitter.com/girlie_mac)
+
+歡迎來到網頁開發中最有趣的部分 —— 讓網頁變得互動！文件物件模型（DOM）就像 HTML 與 JavaScript 之間的橋樑，今天我們將利用它讓你的玻璃花房活起來。當 Tim Berners-Lee 創造第一個瀏覽器時，他設想了一個文件可以是動態且互動的網頁 —— DOM 讓這個願景成真。
+
+我們還會探討 JavaScript 閉包，這個詞一開始可能聽起來嚇人。把閉包想像成幫你的函式製造「記憶口袋」，能記住重要資訊。就像你玻璃花房裡的每株植物都有自己的資料紀錄，追蹤位置。完成這堂課後，你會發現它們是多麼自然且實用。
+
+現在我們要打造的是：一個使用者能自由拖放植物到任何位置的玻璃花房。你會學會 DOM 操作技巧，這些技巧是從拖放檔案上傳到互動遊戲的基礎。讓我們讓你的玻璃花房活起來吧。
+
+```mermaid
+mindmap
+  root((DOM & JavaScript))
+    DOM 樹
+      元素選取
+      屬性存取
+      事件處理
+      動態更新
+    事件
+      指標事件
+      滑鼠事件
+      觸控事件
+      事件監聽器
+    閉包
+      私有變數
+      函式作用域
+      記憶體持續性
+      狀態管理
+    拖放
+      位置追蹤
+      座標計算
+      事件生命週期
+      使用者互動
+    現代模式
+      事件委派
+      效能
+      跨裝置
+      無障礙
+```
+## 課前小測驗
+
+[課前小測驗](https://ff-quizzes.netlify.app/web/quiz/19)
+
+## 認識 DOM：你的互動式網頁大門
+
+文件物件模型（DOM）是 JavaScript 與你的 HTML 元素溝通的方式。當瀏覽器載入 HTML 頁面時，它會在記憶體中建立該頁的結構化表示 —— 這就是 DOM。你可以將它想成一棵家譜樹，每個 HTML 元素都是家族成員，JavaScript 能造訪、修改或重排它們。
+
+DOM 操作可以將靜態網頁轉變為互動式網站。你每次看到按鈕在滑鼠懸停時變色、內容更新不需重新整理頁面，或元素可拖曳移動，背後都是 DOM 操作的功勞。
+
+```mermaid
+flowchart TD
+    A["文件"] --> B["HTML"]
+    B --> C["標頭"]
+    B --> D["主體"]
+    C --> E["標題"]
+    C --> F["元標籤"]
+    D --> G["H1: 我的生態箱"]
+    D --> H["Div: 頁面容器"]
+    H --> I["Div: 左側容器"]
+    H --> J["Div: 右側容器"]
+    H --> K["Div: 生態箱"]
+    I --> L["植物元素 1-7"]
+    J --> M["植物元素 8-14"]
+    
+    L --> N["img#plant1"]
+    L --> O["img#plant2"]
+    M --> P["img#plant8"]
+    M --> Q["img#plant9"]
+    
+    style A fill:#e1f5fe
+    style B fill:#f3e5f5
+    style D fill:#e8f5e8
+    style H fill:#fff3e0
+    style N fill:#ffebee
+    style O fill:#ffebee
+    style P fill:#ffebee
+    style Q fill:#ffebee
+```
+![DOM 樹狀圖表示](../../../../translated_images/dom-tree.7daf0e763cbbba92.tw.png)
+
+> DOM 與參照它的 HTML 標記的表示圖。取自 [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
+
+**DOM 強大的原因：**
+- **提供**有結構的方式存取頁面上任意元素
+- **允許**動態更新內容而不需重新整理頁面
+- **支持**對點擊與拖曳等用戶互動即時回應
+- **奠定**現代互動網頁應用的根基
+
+## JavaScript 閉包：打造有組織且強大的程式碼
+
+[JavaScript 閉包](https://developer.mozilla.org/docs/Web/JavaScript/Closures)就像給函式一個專屬的私有工作區，擁有持續的記憶能力。設想達爾文的加拉帕戈斯群島雀鳥根據環境發展出專屬的喙 —— 閉包同理，創造專屬功能，即使父函式執行完，仍記住特定上下文。
+
+在我們的玻璃花房中，閉包幫助每株植物獨立記憶自己的位置。這個模式在專業 JavaScript 開發中無處不在，是值得理解的重要概念。
+
+```mermaid
+flowchart LR
+    A["dragElement(plant1)"] --> B["建立閉包"]
+    A2["dragElement(plant2)"] --> B2["建立閉包"]
+    
+    B --> C["私有變數"]
+    B2 --> C2["私有變數"]
+    
+    C --> D["pos1, pos2, pos3, pos4"]
+    C --> E["pointerDrag 函式"]
+    C --> F["elementDrag 函式"]
+    C --> G["stopElementDrag 函式"]
+    
+    C2 --> D2["pos1, pos2, pos3, pos4"]
+    C2 --> E2["pointerDrag 函式"]
+    C2 --> F2["elementDrag 函式"]
+    C2 --> G2["stopElementDrag 函式"]
+    
+    H["植物1記住它的位置"] --> B
+    H2["植物2記住它的位置"] --> B2
+    
+    style B fill:#e8f5e8
+    style B2 fill:#e8f5e8
+    style C fill:#fff3e0
+    style C2 fill:#fff3e0
+```
+> 💡 **認識閉包**：閉包是 JavaScript 重要議題，許多開發者花好幾年才完全理解其理論面。今天我們重點在實際應用——隨著互動功能開發，閉包會自然出現。理解會隨觀察實際解決問題過程逐漸建立。
 
-![DOM 和閉包](../../../../translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.tw.png)
-> [Tomomi Imura](https://twitter.com/girlie_mac) 的手繪筆記
+![DOM 樹狀圖表示](../../../../translated_images/dom-tree.7daf0e763cbbba92.tw.png)
 
-## 課前測驗
+> DOM 與參照它的 HTML 標記的表示圖。取自 [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
 
-[課前測驗](https://ff-quizzes.netlify.app/web/quiz/19)
+這堂課，我們將完成互動玻璃花房專案，撰寫讓使用者能操作頁面中植物的 JavaScript。
 
-### 簡介
+## 開始前：做好準備迎接成功
 
-操作 DOM（文件物件模型）是網頁開發中的一個關鍵部分。根據 [MDN](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) 的說法，「文件物件模型 (DOM) 是一種數據表示形式，用於描述構成網頁結構和內容的物件。」由於操作 DOM 的挑戰，許多開發者選擇使用 JavaScript 框架來管理 DOM，而不是使用原生 JavaScript，但我們將嘗試自己來完成！
+你需要先前玻璃花房課程的 HTML 與 CSS 檔案 —— 我們將讓這個靜態設計變成可互動的。如果你是第一次加入，建議先完成之前的課程以取得重要背景。
 
-此外，本課程將介紹 [JavaScript 閉包](https://developer.mozilla.org/docs/Web/JavaScript/Closures) 的概念。你可以將閉包理解為一個函數包裹著另一個函數，從而使內部函數能夠訪問外部函數的作用域。
+我們將打造：
+- 所有植物的 **平滑拖放功能**
+- 位置的 **座標追蹤** 識別植物記憶位置
+- 使用純原生 JavaScript 實作的 **完整互動介面**
+- 運用閉包模式維持的 **乾淨有組織程式碼**
 
-> JavaScript 閉包是一個廣泛且複雜的主題。本課程僅涉及最基本的概念。在這個玻璃生態缸的程式碼中，你會發現一個閉包：一個內部函數和一個外部函數的結構，使內部函數能夠訪問外部函數的作用域。若想深入了解其運作方式，請參閱 [詳細文檔](https://developer.mozilla.org/docs/Web/JavaScript/Closures)。
+## 設定你的 JavaScript 檔案
 
-我們將使用閉包來操作 DOM。
+來建立一個讓玻璃花房可互動的 JavaScript 檔案。
 
-可以將 DOM 想像成一棵樹，代表了網頁文件可以被操作的所有方式。各種 API（應用程式介面）被設計出來，讓程式員可以使用他們選擇的程式語言來訪問 DOM，並進行編輯、更改、重新排列或其他管理操作。
+**第一步：建立腳本檔案**
 
-![DOM 樹結構表示](../../../../translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.tw.png)
+在你的 terrarium 資料夾中，建立一個名為 `script.js` 的新檔案。
 
-> DOM 和對應的 HTML 標記的表示圖。來源：[Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
+**第二步：將 JavaScript 連結至你的 HTML**
 
-在本課程中，我們將完成互動式玻璃生態缸專案，通過編寫 JavaScript 來讓使用者能夠操作頁面上的植物。
+在 `index.html` 的 `<head>` 區段加入以下 script 標籤：
 
-### 前置條件
+```html
+<script src="./script.js" defer></script>
+```
 
-你應該已經完成了玻璃生態缸的 HTML 和 CSS 部分。在本課程結束時，你將能夠通過拖放操作將植物移入或移出玻璃生態缸。
+**為何 `defer` 屬性很重要：**
+- **確保**你的 JavaScript 等待全部 HTML 載入完成
+- **避免**JavaScript 嘗試取用尚未準備好的元素而產生錯誤
+- **確保**所有植物元素都可被互動使用
+- **比放在頁尾執行**有更好的效能
 
-### 任務
+> ⚠️ **重要提醒**：`defer` 屬性可避免常見的時間點問題。若沒用它，JavaScript 可能搶先於 HTML 載入前存取元素，導致錯誤。
 
-在你的玻璃生態缸專案資料夾中，建立一個名為 `script.js` 的新檔案。在 `<head>` 區域中匯入該檔案：
+---
 
-```html
-	<script src="./script.js" defer></script>
-```
+## 將 JavaScript 與 HTML 元素連結
 
-> 注意：在將外部 JavaScript 檔案匯入 HTML 時，使用 `defer` 屬性，這樣可以確保 JavaScript 只有在 HTML 完全加載後才執行。你也可以使用 `async` 屬性，允許腳本在 HTML 解析時執行，但在我們的情況下，確保 HTML 元素完全可用以進行拖放操作是很重要的。
----
+在讓元素可拖放之前，JavaScript 需要先找到它們在 DOM 中的位置。這就像圖書館的分類系統 —— 有了編號，就能精準找到你要的書，並取得其所有內容。
 
-## DOM 元素
+我們會先用 `document.getElementById()` 方法進行對應。這就像有個精準的文件夾編號系統 —— 傳入 ID，即能精準定位 HTML 中的元素。
 
-首先，你需要在 DOM 中建立對你想操作的元素的引用。在我們的例子中，這些元素是目前位於側邊欄的 14 個植物。
+### 啟用所有植物拖曳功能
 
-### 任務
+在你的 `script.js` 中加入這段程式碼：
 
-```html
+```javascript
+// 啟用所有14個植物的拖曳功能
 dragElement(document.getElementById('plant1'));
 dragElement(document.getElementById('plant2'));
 dragElement(document.getElementById('plant3'));
@@ -72,159 +216,556 @@ dragElement(document.getElementById('plant13'));
 dragElement(document.getElementById('plant14'));
 ```
 
-這裡發生了什麼？你正在引用文件，並在其 DOM 中尋找具有特定 Id 的元素。還記得我們在 HTML 課程中給每個植物圖片分配了唯一的 Id（例如 `id="plant1"`）嗎？現在你將利用這些 Id。識別每個元素後，你將該項目傳遞給一個名為 `dragElement` 的函數（稍後會建立）。因此，HTML 中的元素現在已啟用拖動功能，或者即將啟用。
+**這段程式碼的目的：**
+- **尋找** DOM 中每個植物元素的獨特 ID
+- **取得**每個 HTML 元素的 JavaScript 引用
+- **將**元素傳入即將建立的 `dragElement` 函式處理
+- **準備**每株植物支援拖放互動
+- **連結**你的 HTML 結構與 JavaScript 功能
+
+> 🎯 **為什麼用 ID 而非 Class？** ID 提供每個特定元素獨一無二的識別，CSS Class 則適合用來設計多個元素的樣式。JavaScript 需要精準操控個別元素時，ID 提供了必要的精確性與效能。
+
+> 💡 **專家小提示**：你會注意到程式碼為每株植物單獨呼叫 `dragElement()`。這確保每株植物擁有獨立拖放行為，這對流暢的使用者體驗至關重要。
+
+### 🔄 **教學檢視點**
+**DOM 連結理解**：進入拖曳功能前，確保你會：
+- ✅ 解釋 `document.getElementById()` 如何定位 HTML 元素
+- ✅ 理解為何每株植物要有獨立的唯一 ID
+- ✅ 描述 `defer` 屬性的作用
+- ✅ 識別 JavaScript 與 HTML 是如何經由 DOM 連結起來的
 
-✅ 為什麼我們通過 Id 引用元素？為什麼不通過它們的 CSS 類名？你可以回顧之前的 CSS 課程來回答這個問題。
+**快速自我測驗**：如果兩個元素有相同 ID，會發生什麼？為什麼 `getElementById()` 只會回傳一個元素？
+*答案：ID 必須唯一，若重複只會回傳第一個*
 
 ---
 
-## 閉包
+## 建立拖曳元素閉包
 
-現在你準備建立 `dragElement` 閉包，這是一個外部函數，包裹著一個或多個內部函數（在我們的例子中是三個）。
+現在我們將打造拖曳功能的核心：一個管理拖曳行為的閉包。這個閉包包含多個內部函式，協同監控滑鼠移動並更新元素位置。
 
-當一個或多個函數需要訪問外部函數的作用域時，閉包非常有用。以下是一個例子：
+閉包非常適合此任務，因為它讓我們能建立「私有」變數，跨多次函式呼叫持續存在，讓每株植物擁有獨立的座標追蹤系統。
+
+### 用簡單例子了解閉包
+
+我用一個簡單例子來示範閉包概念：
 
 ```javascript
-function displayCandy(){
-	let candy = ['jellybeans'];
-	function addCandy(candyType) {
-		candy.push(candyType)
-	}
-	addCandy('gumdrops');
+function createCounter() {
+    let count = 0; // 這就像一個私有變數
+    
+    function increment() {
+        count++; // 內部函數記住了外部變數
+        return count;
+    }
+    
+    return increment; // 我們回傳內部函數
 }
-displayCandy();
-console.log(candy)
-```
-
-在這個例子中，`displayCandy` 函數包裹了一個函數，該函數將新的糖果類型推入已存在於函數中的陣列中。如果你運行這段程式碼，`candy` 陣列將是未定義的，因為它是一個局部變數（僅限於閉包的作用域）。
 
-✅ 如何讓 `candy` 陣列可訪問？嘗試將它移到閉包之外。這樣，該陣列將變為全域變數，而不是僅限於閉包的局部作用域。
+const myCounter = createCounter();
+console.log(myCounter()); // 1
+console.log(myCounter()); // 2
+```
 
-### 任務
+**這個閉包模式的重點：**
+- **建立**一個私有的 `count` 變數，只存在於閉包中
+- **內部函式**能存取並修改封閉外層的變數（閉包機制）
+- **當回傳**內部函式時，它仍然保有對該私有資料的連結
+- **即使**`createCounter()` 執行結束，`count` 仍持續存在並記憶值
+
+### 為什麼閉包最適合拖曳功能
+
+每株植物都要記得自己目前位置座標。閉包為我們的專案帶來完美解決方案：
+
+**對我們專案的關鍵優點：**
+- **保持**每株植物私有的座標變數
+- **保存**拖曳事件間的坐標資料
+- **避免**不同可拖曳元素間的變數衝突
+- **製造**乾淨且有組織的程式碼結構
+
+> 🎯 **學習目標**：你不需立刻掌握閉包的全部細節。重點是了解閉包怎麼幫助我們組織程式和維持拖曳狀態。
+
+```mermaid
+stateDiagram-v2
+    [*] --> Ready: 頁面載入
+    Ready --> DragStart: 使用者按下（pointerdown）
+    DragStart --> Dragging: 滑鼠/手指移動（pointermove）
+    Dragging --> Dragging: 繼續移動
+    Dragging --> DragEnd: 使用者放開（pointerup）
+    DragEnd --> Ready: 重設以便下一次拖曳
+    
+    state DragStart {
+        [*] --> CapturePosition
+        CapturePosition --> SetupListeners
+        SetupListeners --> [*]
+    }
+    
+    state Dragging {
+        [*] --> CalculateMovement
+        CalculateMovement --> UpdatePosition
+        UpdatePosition --> [*]
+    }
+    
+    state DragEnd {
+        [*] --> RemoveListeners
+        RemoveListeners --> CleanupState
+        CleanupState --> [*]
+    }
+```
+### 建立 dragElement 函式
 
-在 `script.js` 中的元素聲明下，建立一個函數：
+現在來建立主要處理所有拖曳邏輯的函式。將這個函式放在你的植物元素宣告後面：
 
 ```javascript
 function dragElement(terrariumElement) {
-	//set 4 positions for positioning on the screen
-	let pos1 = 0,
-		pos2 = 0,
-		pos3 = 0,
-		pos4 = 0;
-	terrariumElement.onpointerdown = pointerDrag;
+    // 初始化位置追蹤變數
+    let pos1 = 0,  // 先前的滑鼠 X 位置
+        pos2 = 0,  // 先前的滑鼠 Y 位置
+        pos3 = 0,  // 當前的滑鼠 X 位置
+        pos4 = 0;  // 當前的滑鼠 Y 位置
+    
+    // 設定初始拖曳事件監聽器
+    terrariumElement.onpointerdown = pointerDrag;
 }
 ```
 
-`dragElement` 從腳本頂部的聲明中獲取其 `terrariumElement` 物件。然後，你為傳遞到函數中的物件設置了一些初始位置，這些位置的值為 `0`。這些是每個元素的局部變數，當你為每個元素添加拖放功能時，這些變數將被操作。玻璃生態缸將由這些被拖動的元素填充，因此應用程式需要跟蹤它們的放置位置。
-
-此外，傳遞給該函數的 `terrariumElement` 被分配了一個 `pointerdown` 事件，這是 [web API](https://developer.mozilla.org/docs/Web/API) 的一部分，旨在幫助管理 DOM。`onpointerdown` 事件在按下按鈕時觸發，或者在我們的例子中，當一個可拖動的元素被點擊時觸發。該事件處理程序適用於 [網頁和行動瀏覽器](https://caniuse.com/?search=onpointerdown)，但有少數例外。
-
-✅ [事件處理程序 `onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick) 在跨瀏覽器方面有更廣泛的支援；為什麼不在這裡使用它？想一想你試圖創建的精確螢幕互動類型。
+**認識位置追蹤系統：**
+- **`pos1` 和 `pos2`**：記錄舊滑鼠與新滑鼠位置差異
+- **`pos3` 和 `pos4`**：追蹤當前滑鼠座標
+- **`terrariumElement`**：該可拖曳的植物元素
+- **`onpointerdown`**：使用者開始拖曳時觸發的事件
+
+**閉包模式運作原理：**
+- **為每株植物元素建立**私有位置變數
+- **維持維護**這些變數於拖曳生命週期中
+- **確保**每株植物獨立追蹤各自座標
+- **透過 `dragElement` 函式**提供乾淨介面
+
+### 為什麼用 Pointer 事件？
+
+你可能會問為什麼用 `onpointerdown` 而不是熟悉的 `onclick`。原因如下：
+
+| 事件類型 | 適用場景 | 注意事項 |
+|----------|---------|----------|
+| `onclick` | 簡單按鈕點擊 | 只能處理點擊並放開，無法拖曳 |
+| `onpointerdown` | 支援滑鼠與觸控 | 新式，但當前已廣泛支持 |
+| `onmousedown` | 僅桌面滑鼠 | 不支援行動裝置觸控 |
+
+**Pointer 事件適合我們的原因：**
+- **無論**使用滑鼠、手指或觸控筆都可良好運作
+- **在筆電、平板、手機上**有一致操作體驗
+- **能處理**真正的拖曳動作，而非僅點擊
+- **提供**現代網頁應用期待的流暢體驗
+
+> 💡 **前瞻未來**：Pointer 事件是現代用戶互動處理的標準，無需為滑鼠和觸控編寫兩套程式碼，超方便。
+
+### 🔄 **教學檢視點**
+**事件處理理解**：停下來確認你是否懂得：
+- ✅ 為什麼用 pointer 事件而非 mouse 事件？
+- ✅ 閉包變數如何在函式呼叫間持續存在？
+- ✅ `preventDefault()` 在平滑拖曳中扮演什麼角色？
+- ✅ 為何事件監聽器綁在 document 而非單一元素？
+
+**實務連結**：想想你每天用的拖放介面：
+- **檔案上傳**：把檔案拖進瀏覽器視窗
+- **看板系統**：在欄位間移動任務卡
+- **圖片庫**：調整照片排序
+- **行動介面**：觸控螢幕滑動拖曳
 
 ---
 
-## Pointerdrag 函數
+## pointerDrag 函式：捕捉拖曳開始
 
-`terrariumElement` 現在可以被拖動；當觸發 `onpointerdown` 事件時，函數 `pointerDrag` 被調用。在這行代碼下方添加該函數：`terrariumElement.onpointerdown = pointerDrag;`：
+當使用者按下某株植物（無論用滑鼠或手指點擊），`pointerDrag` 函式會啟動。它擷取初始座標並設定拖曳系統。
 
-### 任務 
+將這個函式放在你的 `dragElement` 閉包內，位置在這段 `terrariumElement.onpointerdown = pointerDrag;` 行之後：
 
 ```javascript
 function pointerDrag(e) {
-	e.preventDefault();
-	console.log(e);
-	pos3 = e.clientX;
-	pos4 = e.clientY;
+    // 防止預設瀏覽器行為（如文字選取）
+    e.preventDefault();
+    
+    // 捕捉初始滑鼠/觸控位置
+    pos3 = e.clientX;  // 拖曳開始時的 X 座標
+    pos4 = e.clientY;  // 拖曳開始時的 Y 座標
+    
+    // 設置拖曳過程的事件監聽器
+    document.onpointermove = elementDrag;
+    document.onpointerup = stopElementDrag;
 }
 ```
 
-這裡發生了幾件事。首先，你通過使用 `e.preventDefault();` 阻止了 `pointerdown` 事件的預設行為。這樣你可以更好地控制介面的行為。
+**逐步說明：**
+- **阻止**防止瀏覽器默認行為干擾拖曳
+- **紀錄**使用者開始拖曳時的精確座標
+- **設定**持續拖曳移動的事件監聽器
+- **準備**系統追蹤整個文件上的滑鼠／觸控移動
 
-> 當你完全建立腳本檔案後，回到這行代碼並嘗試刪除 `e.preventDefault()` - 會發生什麼？
+### 了解事件阻止
 
-其次，在瀏覽器窗口中打開 `index.html`，並檢查介面。當你點擊一個植物時，你可以看到如何捕獲 'e' 事件。深入檢查該事件，看看一次 `pointerdown` 事件收集了多少資訊！
+`e.preventDefault()` 是平滑拖曳的重要一行：
 
-接下來，注意如何將局部變數 `pos3` 和 `pos4` 設置為 `e.clientX`。你可以在檢查面板中找到 `e` 的值。這些值捕獲了你點擊或觸摸植物時的 x 和 y 座標。你需要對植物的行為進行精細控制，因此需要跟蹤它們的座標。
+**若不阻止，瀏覽器可能會：**
+- **在拖曳時**選取頁面文字
+- **在右鍵拖曳時**彈出上下文選單
+- **干擾**我們自訂的拖曳行為
+- **產生**視覺上的拖曳異常
 
-✅ 現在是否更清楚為什麼整個應用程式是用一個大的閉包構建的？如果不是閉包，你將如何為 14 個可拖動的植物維持作用域？
+> 🔍 **實驗**：結束課程後試著移除 `e.preventDefault()`，感受一下拖曳行為的差異。你將會很快體會它的重要性！
 
-完成初始函數，通過在 `pos4 = e.clientY` 下添加另外兩個指針事件操作：
+### 座標追蹤系統
 
-```html
+屬性 `e.clientX` 與 `e.clientY` 提供精確滑鼠／觸控位置：
+
+| 屬性 | 測量內容 | 使用情境 |
+|-------|----------|----------|
+| `clientX` | 相對視窗的水平位置 | 追蹤左右移動 |
+| `clientY` | 相對視窗的垂直位置 | 追蹤上下移動 |
+**理解這些座標：**
+- **提供** 完美像素的定位資訊
+- **隨著** 使用者移動指標即時更新
+- **在不同螢幕尺寸和縮放級別下仍保持** 一致性
+- **讓** 拖曳操作流暢且反應迅速
+
+### 設置文件級事件監聽器
+
+請注意我們將移動和停止事件附加到整個 `document`，而不僅是植物元素：
+
+```javascript
 document.onpointermove = elementDrag;
 document.onpointerup = stopElementDrag;
 ```
-現在你正在指示植物隨著指針移動而被拖動，並在取消選擇植物時停止拖動手勢。`onpointermove` 和 `onpointerup` 都是與 `onpointerdown` 相同 API 的一部分。介面現在會拋出錯誤，因為你尚未定義 `elementDrag` 和 `stopElementDrag` 函數，因此接下來建立這些函數。
 
-## elementDrag 和 stopElementDrag 函數
+**為何附加到 document：**
+- **即使滑鼠離開植物元素也繼續** 追蹤
+- **防止** 使用者快速移動時拖曳中斷
+- **提供** 整個螢幕的平滑拖曳體驗
+- **處理** 游標移出瀏覽器視窗的邊緣案例
 
-你將通過添加另外兩個內部函數來完成閉包，這些函數將處理拖動植物和停止拖動時發生的事情。你希望的行為是，隨時可以拖動任何植物，並將其放置在螢幕上的任何位置。這個介面非常靈活（例如，沒有特定的放置區域），允許你自由設計玻璃生態缸，添加、移除和重新定位植物。
+> ⚡ **效能提醒**：拖曳停止時我們會清除這些文件級監聽器，以避免記憶體洩漏和效能問題。
 
-### 任務
+## 完成拖曳系統：移動與清理
 
-在 `pointerDrag` 的結束大括號後添加 `elementDrag` 函數：
+現在我們將新增兩個函式，分別處理真正的拖曳移動和拖曳停止時的清理。這些函式協同工作，創造平滑且靈敏的植物移動體驗。
+
+### elementDrag 函式：追蹤移動
+
+在 `pointerDrag` 函式的結尾大括號後新增 `elementDrag` 函式：
 
 ```javascript
 function elementDrag(e) {
-	pos1 = pos3 - e.clientX;
-	pos2 = pos4 - e.clientY;
-	pos3 = e.clientX;
-	pos4 = e.clientY;
-	console.log(pos1, pos2, pos3, pos4);
-	terrariumElement.style.top = terrariumElement.offsetTop - pos2 + 'px';
-	terrariumElement.style.left = terrariumElement.offsetLeft - pos1 + 'px';
+    // 計算自上次事件以來移動的距離
+    pos1 = pos3 - e.clientX;  // 水平方向移動的距離
+    pos2 = pos4 - e.clientY;  // 垂直方向移動的距離
+    
+    // 更新目前位置追蹤
+    pos3 = e.clientX;  // 新的目前 X 位置
+    pos4 = e.clientY;  // 新的目前 Y 位置
+    
+    // 將移動套用到元素的位置
+    terrariumElement.style.top = (terrariumElement.offsetTop - pos2) + 'px';
+    terrariumElement.style.left = (terrariumElement.offsetLeft - pos1) + 'px';
 }
 ```
-在這個函數中，你對先前設置為局部變數的 `pos1` 到 `pos4` 進行了大量操作。這裡發生了什麼？
-
-當你拖動時，你通過將 `pos3`（之前設置為 `e.clientX`）減去當前的 `e.clientX` 值來重新分配 `pos1`。對 `pos2` 進行了類似的操作。然後，你將 `pos3` 和 `pos4` 重置為元素的新 X 和 Y 座標。你可以在拖動時在控制台中觀察這些變化。接著，你操作植物的 CSS 樣式，根據 `pos1` 和 `pos2` 的新位置計算植物的頂部和左側 X 和 Y 座標，並設置其新位置。
-
-> `offsetTop` 和 `offsetLeft` 是 CSS 屬性，用於根據父元素設置元素的位置；父元素可以是任何非 `static` 定位的元素。
 
-所有這些位置的重新計算使你能夠微調玻璃生態缸及其植物的行為。
-
-### 任務 
+**理解座標計算：**
+- **`pos1` 和 `pos2`**：計算滑鼠自上一更新以來的移動距離
+- **`pos3` 和 `pos4`**：儲存當前滑鼠位置以供下次計算
+- **`offsetTop` 和 `offsetLeft`**：取得元素當前在頁面上的位置
+- **減法邏輯**：依滑鼠移動距離來移動元素
+
+```mermaid
+sequenceDiagram
+    participant User
+    participant Mouse
+    participant JavaScript
+    participant Plant
+    
+    User->>Mouse: 在 (100, 50) 開始拖曳
+    Mouse->>JavaScript: pointerdown 事件
+    JavaScript->>JavaScript: 儲存初始位置 (pos3=100, pos4=50)
+    JavaScript->>JavaScript: 設定移動/放開監聽器
+    
+    User->>Mouse: 移動到 (110, 60)
+    Mouse->>JavaScript: pointermove 事件
+    JavaScript->>JavaScript: 計算：pos1=10, pos2=10
+    JavaScript->>Plant: 更新：left += 10px, top += 10px
+    Plant->>Plant: 在新位置渲染
+    
+    User->>Mouse: 在 (120, 65) 釋放
+    Mouse->>JavaScript: pointerup 事件
+    JavaScript->>JavaScript: 移除監聽器
+    JavaScript->>JavaScript: 重置為下一次拖曳
+```
+**移動計算說明：**
+1. **測量** 舊滑鼠位置與新滑鼠位置的差異
+2. **計算** 應移動元素的距離
+3. **即時更新** 元素的 CSS 位置屬性
+4. **儲存** 新位置作為下一次移動計算基準
+
+### 數學的視覺化表示
+
+```mermaid
+sequenceDiagram
+    participant Mouse
+    participant JavaScript
+    participant Plant
+    
+    Mouse->>JavaScript: 從 (100,50) 移動到 (110,60)
+    JavaScript->>JavaScript: 計算：向右移動 10px，向下移動 10px
+    JavaScript->>Plant: 更新位置，向右 +10px，向下 +10px
+    Plant->>Plant: 在新位置渲染
+```
+### stopElementDrag 函式：進行清理
 
-完成介面的最後一步是在 `elementDrag` 的結束大括號後添加 `stopElementDrag` 函數：
+在 `elementDrag` 函式結尾大括號後新增清理函式：
 
 ```javascript
 function stopElementDrag() {
-	document.onpointerup = null;
-	document.onpointermove = null;
+    // 移除文件層級的事件監聽器
+    document.onpointerup = null;
+    document.onpointermove = null;
 }
 ```
 
-這個小函數將 `onpointerup` 和 `onpointermove` 事件重置為 null，這樣你可以重新開始拖動植物，或者開始拖動新的植物。
+**為何清理很重要：**
+- **防止** 因事件監聽器未清除而造成記憶體洩漏
+- **停止** 使用者放開植物時的拖曳行為
+- **允許** 其他元素可獨立進行拖曳
+- **重設** 系統為下一次拖曳操作做準備
+
+**不清理會發生什麼：**
+- 事件監聽器即使拖曳停止仍持續運行
+- 隨著未使用的監聽器累積，效能降低
+- 與其他元素互動時行為出錯
+- 瀏覽器資源浪費於不必要的事件處理
+
+### 理解 CSS 位置屬性
+
+我們的拖曳系統操作兩個關鍵的 CSS 屬性：
+
+| 屬性 | 控制內容 | 我們如何使用 |
+|------|---------|--------------|
+| `top` | 與頂部邊界的距離 | 拖曳垂直定位 |
+| `left` | 與左側邊界的距離 | 拖曳水平定位 |
+
+**關於 offset 屬性的重點：**
+- **`offsetTop`**：相對於最近位置設定的父元素頂部的距離
+- **`offsetLeft`**：相對於最近位置設定的父元素左側的距離
+- **定位上下文**：這些值相對的參考是最近的有定位祖先元素
+- **即時更新**：修改 CSS 屬性時立刻改變
+
+> 🎯 **設計理念**：此拖曳系統故意保持彈性——沒有“放置區域”或限制。使用者可以把植物放在任何位置，讓他們完整掌控植栽設計。
+
+## 整合所有：您的完整拖曳系統
 
-✅ 如果你不將這些事件設置為 null 會發生什麼？
+恭喜！您剛剛用純 JavaScript 建立了一個複雜的拖放系統。完整的 `dragElement` 函式現在包含一個強大的閉包，能管理：
 
-現在你已經完成了你的專案！
+**您的閉包達成了什麼：**
+- **維持** 每個植物獨立的私有位置變數
+- **處理** 從開始到結束的完整拖曳生命週期
+- **提供** 全螢幕範圍的平滑、靈敏移動
+- **適當清理** 資源避免記憶體洩漏
+- **創造** 直覺且具創意的生態箱設計介面
 
-🥇恭喜！你已經完成了你的美麗玻璃生態缸！![完成的玻璃生態缸](../../../../translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.tw.png)
+### 測試您的互動生態箱
+
+現在測試您的互動生態箱吧！在瀏覽器打開 `index.html`，試試以下功能：
+
+1. **按住並點擊** 任一植物開始拖曳
+2. **移動滑鼠或手指**，觀察植物平滑跟隨移動
+3. **放開** 放下植物於新的位置
+4. **嘗試** 不同排列方式以探索介面
+
+🥇 **成就獎章**：您已經使用專業開發者每日運用的核心概念，創造出一個完全互動的網頁應用。該拖放功能背後原理也被用於檔案上傳、看板系統與其他許多互動介面。
+
+### 🔄 **教學自我檢測**
+**完整系統理解**：驗證你對拖曳系統的掌握：
+- ✅ 閉包如何維持每株植物的獨立狀態？
+- ✅ 為何座標計算數學對流暢移動很重要？
+- ✅ 如果忘記清理事件監聽器會怎樣？
+- ✅ 此模式如何擴展到更複雜的互動？
+
+**程式碼品質反思**：回顧您的完整解決方案：
+- **模組化設計**：每個植物擁有自己的閉包實例
+- **事件效率**：監聽器適當設定與清理
+- **跨裝置支援**：同時適用桌面與行動裝置
+- **效能意識**：避免記憶體洩漏和重複計算
+
+![finished terrarium](../../../../translated_images/terrarium-final.0920f16e87c13a84.tw.png)
 
 ---
 
-## 🚀挑戰
+## GitHub Copilot Agent 挑戰 🚀
+
+使用 Agent 模式完成以下挑戰：
 
-為你的閉包添加新的事件處理程序，讓植物有更多的互動功能；例如，雙擊植物將其移到最前面。發揮創意吧！
+**描述：** 為生態箱專案新增重置功能，將所有植物以平滑動畫帶回原始位置。
+
+**提示：** 創建一個重置按鈕，點擊時使用 CSS 過渡效果，將所有植物從側邊欄的原始位置動畫地移回。函式需在頁面載入時儲存原始位置，按下重置時以一秒劃時間平滑移動。
+
+欲了解更多，請參考 [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) 。
+
+## 🚀 額外挑戰：提升您的技能
+
+準備將生態箱提升到新層級嗎？嘗試實作以下增強功能：
+
+**創意擴展：**
+- **雙擊** 植物使其置頂（z-index 操作）
+- **添加視覺回饋**，例如滑鼠懸停時微光效果
+- **實作邊界限制**，防止植物被拖曳出生態箱外
+- **建立儲存功能**，用 localStorage 記錄植物位置
+- **新增音效**，在拾起和放下植物時播放
+
+> 💡 **學習機會**：這些挑戰會教你新的 DOM 操控、事件處理與使用體驗設計技術。
 
 ## 課後測驗
 
 [課後測驗](https://ff-quizzes.netlify.app/web/quiz/20)
 
-## 回顧與自學
+## 複習與自學：深化理解
+
+你已掌握 DOM 操控和閉包基礎，但學無止境！以下是擴展知識與技能的方向。
+
+### 替代拖放方法
+
+我們用 pointer 事件達最大彈性，但網頁開發還有多種選擇：
+
+| 方法 | 適用情境 | 學習價值 |
+|------|----------|----------|
+| [HTML 拖放 API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API) | 檔案上傳、正式拖放區域 | 了解瀏覽器原生能力 |
+| [觸控事件](https://developer.mozilla.org/docs/Web/API/Touch_events) | 行動專用互動 | 行動先行開發模式 |
+| CSS `transform` 屬性 | 平滑動畫 | 效能優化技術 |
+
+### 進階 DOM 操控主題
+
+**學習下一步：**
+- **事件代理**：高效管理多元素事件
+- **Intersection Observer**：偵測元素出入視口
+- **Mutation Observer**：監聽 DOM 結構變更
+- **Web Components**：構建可重用封裝式 UI 元件
+- **虛擬 DOM 概念**：理解框架如何優化 DOM 更新
+
+### 必備持續學習資源
+
+**技術文件：**
+- [MDN Pointer Events 指南](https://developer.mozilla.org/docs/Web/API/Pointer_events) - 全面 pointer 事件參考
+- [W3C Pointer Events 規範](https://www.w3.org/TR/pointerevents1/) - 官方標準文件
+- [JavaScript 閉包深入](https://developer.mozilla.org/docs/Web/JavaScript/Closures) - 進階閉包模式
+
+**瀏覽器相容性：**
+- [CanIUse.com](https://caniuse.com/) - 瀏覽器功能支援狀況
+- [MDN Browser Compatibility Data](https://github.com/mdn/browser-compat-data) - 詳細相容性資料
+
+**練習機會：**
+- **製作** 類似拖曳機制的拼圖遊戲
+- **創建** 支援拖放的看板任務管理
+- **設計** 可拖動照片排列的圖庫
+- **嘗試** 行動裝置觸控手勢操作
+
+> 🎯 **學習策略**：最佳鞏固方式是多練習。嘗試建造不同變化的拖曳介面——每個專案都會教你更多用戶互動與 DOM 操控技巧。
+
+### ⚡ **您可在接下來 5 分鐘內做些什麼**
+- [ ] 開啟瀏覽器開發者工具於主控台輸入 `document.querySelector('body')`
+- [ ] 嘗試用 `innerHTML` 或 `textContent` 修改網頁文字
+- [ ] 對任何按鈕或連結增加點擊事件監聽器
+- [ ] 使用元素面板檢查 DOM 樹結構
+
+### 🎯 **這一小時您可以達成**
+- [ ] 完成課後小測驗並複習 DOM 操控概念
+- [ ] 建立一個響應使用者點擊的互動網頁
+- [ ] 練習各種事件類型的事件處理（click、mouseover、keypress）
+- [ ] 打造簡易代辦清單或計數器應用
+- [ ] 探索 HTML 元素與 JavaScript 物件關係
+
+### 📅 **您的 JavaScript 一週學習計畫**
+- [ ] 完成具拖放功能的互動生態箱專案
+- [ ] 精通事件代理以提升事件處理效率
+- [ ] 學習事件迴圈與非同步 JavaScript
+- [ ] 練習閉包，建立帶有私有狀態的模組
+- [ ] 探索最新 DOM API，如 Intersection Observer
+- [ ] 不用框架建構互動元件
+
+### 🌟 **您的 JavaScript 一個月精通計畫**
+- [ ] 使用純 JavaScript 建置複雜單頁應用程式
+- [ ] 學習並比較現代框架（React、Vue、Angular）與純 DOM 操控
+- [ ] 參與 JavaScript 開源專案貢獻
+- [ ] 精通高級概念如 Web Components 和自訂元素
+- [ ] 建構效能優化的網頁應用
+- [ ] 教授他人 DOM 操控與 JavaScript 基礎
+
+## 🎯 您的 JavaScript DOM 精通時間軸
+
+```mermaid
+timeline
+    title DOM 與 JavaScript 學習進度
+    
+    section 基礎 (15 分鐘)
+        DOM 理解: 元素選取方法
+                 : 樹狀結構導覽
+                 : 屬性存取模式
+        
+    section 事件處理 (20 分鐘)
+        使用者互動: 指標事件基礎
+                    : 事件監聽器設定
+                    : 跨裝置相容性
+                    : 事件阻止技巧
+        
+    section 閉包 (25 分鐘)
+        範圍管理: 私有變數建立
+                 : 函式持續存在
+                 : 狀態管理模式
+                 : 記憶體效率
+        
+    section 拖曳系統 (30 分鐘)
+        互動功能: 座標追蹤
+                  : 位置計算
+                  : 移動數學
+                  : 清理程序
+        
+    section 進階模式 (45 分鐘)
+        專業技能: 事件委派
+                 : 效能優化
+                 : 錯誤處理
+                 : 無障礙考量
+        
+    section 框架理解 (1 週)
+        現代開發: 虛擬 DOM 概念
+                  : 狀態管理函式庫
+                  : 元件架構
+                  : 建置工具整合
+        
+    section 專家級 (1 個月)
+        進階 DOM API: 交叉觀察器
+                      : 變異觀察器
+                      : 自訂元素
+                      : 網頁元件
+```
+### 🛠️ 您的 JavaScript 工具包總結
 
-雖然在螢幕上拖動元素看起來很簡單，但根據你想要的效果，有許多方法可以實現，並且可能會遇到許多陷阱。事實上，有一個完整的 [拖放 API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API) 可以嘗試。我們在本模組中沒有使用該 API，因為我們想要的效果有些不同，但你可以在自己的專案中嘗試這個 API，看看能實現什麼。
+完成本課後，您已具備：
+- **DOM 精通**：元素選取、屬性操作與樹狀結構導覽
+- **事件專業**：跨裝置指標事件處理
+- **閉包理解**：私有狀態管理與函式持續性
+- **互動系統**：完整拖放功能從零開始實作
+- **效能意識**：適當事件清理與記憶體管理
+- **現代模式**：職業開發中常見程式組織技術
+- **用戶體驗**：打造直覺、響應快速的介面
 
-在 [W3C 文檔](https://www.w3.org/TR/pointerevents1/) 和 [MDN 網頁文檔](https://developer.mozilla.org/docs/Web/API/Pointer_events) 上找到更多關於指針事件的資訊。
+**職業技能收穫**：您已使用與以下同樣技術開發功能：
+- **Trello/看板系統**：欄位間拖曳卡片
+- **檔案上傳系統**：拖放檔案處理
+- **圖庫**：照片排列介面
+- **行動應用**：觸控式互動模式
 
-隨時使用 [CanIUse.com](https://caniuse.com/) 檢查瀏覽器的支援能力。
+**下一步**：您已準備探索基於這些基礎 DOM 概念的現代框架如 React、Vue 或 Angular！ 
 
 ## 作業
 
-[進一步練習 DOM](assignment.md)
+[多練習 DOM 操作](assignment.md)
 
 ---
 
-**免責聲明**：  
-本文件使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。應以原始語言的文件作為權威來源。對於關鍵資訊，建議尋求專業人工翻譯。我們對因使用此翻譯而產生的任何誤解或錯誤解讀概不負責。
\ No newline at end of file
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**免責聲明**：
+本文件係使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 所翻譯。雖然我們致力於確保翻譯的準確性，但請注意自動翻譯可能包含錯誤或不準確之處。原始文件的原文版本應被視為權威來源。對於重要資訊，建議採用專業人工翻譯。我們對於因使用本翻譯所導致的任何誤解或誤釋概不負責。
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->
\ No newline at end of file
diff --git a/translations/tw/3-terrarium/3-intro-to-DOM-and-closures/assignment.md b/translations/tw/3-terrarium/3-intro-to-DOM-and-closures/assignment.md
index 238209f5..60861779 100644
--- a/translations/tw/3-terrarium/3-intro-to-DOM-and-closures/assignment.md
+++ b/translations/tw/3-terrarium/3-intro-to-DOM-and-closures/assignment.md
@@ -1,23 +1,139 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "22fb6c3cb570c47f1ac65048393941fa",
-  "translation_date": "2025-08-23T22:31:45+00:00",
+  "original_hash": "947ca5ce7c94aee9c7de7034e762bc17",
+  "translation_date": "2026-01-06T14:16:15+00:00",
   "source_file": "3-terrarium/3-intro-to-DOM-and-closures/assignment.md",
   "language_code": "tw"
 }
 -->
-# 更深入了解 DOM
+# DOM 元素調查作業
 
-## 指導說明
+## 概述
 
-透過「採用」一個 DOM 元素來進一步研究 DOM。造訪 MDN 的 [DOM 介面列表](https://developer.mozilla.org/docs/Web/API/Document_Object_Model)，選擇一個介面。在網頁上找到它的使用範例，並撰寫一段解釋說明它是如何被使用的。
+現在你已經親身體驗了 DOM 操作的威力，是時候探索更廣泛的 DOM 介面世界了。這個作業將加深你對不同網頁技術如何與 DOM 互動的理解，而不僅僅是拖曳元素。
+
+## 學習目標
+
+完成此作業後，你將能夠：
+- **研究** 並深入理解特定的 DOM 介面
+- **分析** 真實世界中 DOM 操作的實作
+- **連結** 理論概念與實務應用
+- **發展** 技術文件撰寫與分析能力
+
+## 指示
+
+### 步驟 1：選擇你的 DOM 介面
+
+造訪 MDN 的完整[DOM 介面列表](https://developer.mozilla.org/docs/Web/API/Document_Object_Model)，選擇一個你感興趣的介面。你可以考慮從以下分類中挑選以增加多樣性：
+
+**初學者友善選項：**
+- `Element.classList` - 動態管理 CSS 類別
+- `Document.querySelector()` - 進階元素選取
+- `Element.addEventListener()` - 指標事件以外的事件處理
+- `Window.localStorage` - 用戶端資料儲存
+
+**中級挑戰：**
+- `Intersection Observer API` - 偵測元素可見性
+- `MutationObserver` - 監視 DOM 變更
+- `Drag and Drop API` - 我們指標基礎方法的替代方案
+- `Geolocation API` - 存取使用者位置
+
+**進階探索：**
+- `Web Components` - 自訂元素與 Shadow DOM
+- `Canvas API` - 程式化繪圖
+- `Web Workers` - 背景處理
+- `Service Workers` - 離線功能
+
+### 步驟 2：研究並撰寫文件
+
+製作一份全面的分析（300-500 字），內容包含：
+
+#### 技術概述
+- **定義** 你選擇的介面是什麼，使用簡明易懂的語言說明
+- **說明** 它提供的主要方法、屬性或事件
+- **描述** 此介面設計用以解決的問題類型
+
+#### 真實世界的實作
+- **尋找** 一個使用你選擇介面的網站（可透過檢查程式碼或研究範例）
+- **紀錄** 具體的實作方式，若可行附上程式碼片段
+- **分析** 為何開發者會採用這種方法
+- **說明** 它如何提升使用者體驗
+
+#### 實務應用
+- **比較** 你的介面與我們在玻璃罐專案中使用的技術
+- **建議** 你的介面如何增強或擴展玻璃罐功能
+- **指出** 其他適合使用此介面的專案範例
+
+### 步驟 3：程式碼範例
+
+包含一個簡單、可運行的程式碼範例，展示你的介面使用方式，該程式碼應該：
+- **功能完整** - 測試時能正常運作
+- **有註解** - 解釋每個部分的作用
+- **相關** - 與實際使用案例連結
+- **易於初學者理解** - 讓學網頁開發的人易於了解
+
+## 提交格式
+
+以清楚標題結構組織你的提交內容：
+
+```markdown
+# [Interface Name] DOM Investigation
+
+## What It Does
+[Technical overview]
+
+## Real-World Example
+[Website analysis and implementation details]
+
+## Code Demonstration
+[Your working example with comments]
+
+## Reflection
+[How this connects to our terrarium project and future applications]
+```
 
 ## 評分標準
 
-| 評分項目 | 優秀                                           | 合格                                             | 需要改進               |
-| -------- | --------------------------------------------- | ------------------------------------------------ | ----------------------- |
-|          | 提供段落式說明，並附有範例                     | 提供段落式說明，但未附範例                       | 未提供任何說明         |
+| 評分項目 | 優異 (A) | 良好 (B) | 進步中 (C) | 需改進 (D) |
+|----------|----------------|----------------|------------------|------------------|
+| **技術理解** | 展示深入理解，解釋精確且用詞正確 | 展示紮實理解，解釋大致準確 | 基本理解，有部分誤解 | 理解不足，有重大錯誤 |
+| **真實世界分析** | 確實辨認並深入分析具體實作範例 | 找出範例且分析適當 | 有範例但分析不夠深入 | 例子模糊或不準確 |
+| **程式碼範例** | 可運作且註解良好的示範程式碼 | 功能正常且註解適中 | 程式可用但註解較少 | 程式錯誤或解釋不清楚 |
+| **寫作品質** | 文字清楚、有吸引力，結構與技術溝通良好 | 組織佳且技術寫作良好 | 組織與清晰度適中 | 組織差或表達不清 |
+| **批判思考** | 提出深入連結與創新應用建議 | 良好的分析與相關連結 | 部分分析但可更深入 | 缺乏批判思考證據 |
+
+## 成功小撇步
+
+**研究策略：**
+- **從** MDN 文件開始，取得權威資訊
+- **尋找** GitHub 或 CodePen 的程式碼範例
+- **利用** 瀏覽器開發者工具檢視熱門網站
+- **觀看** 教學影片以輔助理解
+
+**寫作指南：**
+- **用** 自己的話取代文件複製
+- **包含** 具體範例與程式碼片段
+- **像對朋友解釋** 談技術概念
+- **將** 你的介面與更廣泛的網頁開發概念連結
+
+**程式碼範例靈感：**
+- **製作** 展示介面主要功能的簡單示範
+- **結合** 玻璃罐專案的概念（如適用）
+- **重點放在** 功能而非視覺設計
+- **測試** 程式碼確保正常運作
+
+## 提交期限
+
+[請在此填寫截止日期]
+
+## 有問題嗎？
+
+如果對本作業的任何部分有疑問，請隨時提問！這個調查將深化你對 DOM 如何實現我們日常互動式網頁體驗的理解。
+
+---
 
-**免責聲明**：  
-本文件使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於關鍵資訊，建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或錯誤解釋不承擔責任。
\ No newline at end of file
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**免責聲明**：
+本文件係使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們致力於確保翻譯的準確性，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應視為權威來源。對於重要資訊，建議採用專業人工翻譯。我們不對因使用本翻譯而導致之任何誤解或誤釋承擔責任。
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->
\ No newline at end of file
diff --git a/translations/tw/3-terrarium/README.md b/translations/tw/3-terrarium/README.md
index 87478afd..12eef142 100644
--- a/translations/tw/3-terrarium/README.md
+++ b/translations/tw/3-terrarium/README.md
@@ -1,43 +1,30 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "7965cd2bc5dc92ad888dc4c6ab2ab70a",
-  "translation_date": "2025-08-23T22:23:15+00:00",
+  "original_hash": "bc5c5550f79d10add90ce419ee34abb3",
+  "translation_date": "2026-01-06T13:21:56+00:00",
   "source_file": "3-terrarium/README.md",
   "language_code": "tw"
 }
 -->
-# 我的微型植物園：一個學習 HTML、CSS 和使用 JavaScript 操控 DOM 的專案 🌵🌱
+## 部署你的 Terrarium
 
-一個小型的拖放程式練習。通過一些 HTML、JS 和 CSS，你將能夠建立一個網頁介面，為其設計樣式，甚至添加多種互動功能。
+你可以使用 **Azure 靜態 Web 應用程式** 在網路上部署或發佈你的 Terrarium。
 
-![我的微型植物園](../../../3-terrarium/images/screenshot_gray.png)
+1. 分叉此儲存庫
 
-# 課程
+2. 按下此按鈕 👇  
 
-1. [HTML 入門](./1-intro-to-html/README.md)
-2. [CSS 入門](./2-intro-to-css/README.md)
-3. [DOM 和 JS 閉包入門](./3-intro-to-DOM-and-closures/README.md)
+[![Deploy to Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/#create/Microsoft.StaticApp)
 
-## 致謝
+3. 按照設定精靈建立你的應用程式。  
+   - 將 **應用程式根目錄** 設定為 `/solution` 或你程式碼庫的根目錄。  
+   - 此應用程式中沒有 API，因此可以跳過 API 配置。  
+   - 系統將自動建立 `.github` 資料夾，以協助 Azure 靜態 Web 應用程式建置並發佈你的應用程式。
 
-由 [Jen Looper](https://www.twitter.com/jenlooper) 用 ♥️ 編寫
-
-通過 CSS 創建的微型植物園靈感來自 Jakub Mandra 的玻璃罐 [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY)。
-
-藝術作品由 [Jen Looper](http://jenlooper.com) 使用 Procreate 手繪完成。
-
-## 部署你的微型植物園
-
-你可以使用 Azure 靜態網頁應用程式將你的微型植物園部署或發佈到網路上。
-
-1. Fork 此儲存庫
-
-2. 按下這個按鈕
-
-[![部署到 Azure 按鈕](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
-
-3. 按照向導步驟建立你的應用程式。請確保將應用程式根目錄設置為 `/solution` 或你的程式碼根目錄。此應用程式中沒有 API，因此不需要添加相關內容。一個 GitHub 資料夾將會在你 Fork 的儲存庫中建立，這將幫助 Azure 靜態網頁應用程式的建置服務，建置並發佈你的應用程式到一個新的 URL。
+---
 
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
 **免責聲明**：  
-本文件使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。應以原始語言的文件作為權威來源。對於關鍵資訊，建議尋求專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或誤讀概不負責。
\ No newline at end of file
+本文件係使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們盡力確保準確性，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件之原文版本應視為具權威性的依據。對於重要資訊，建議尋求專業人工翻譯。我們不對因使用本翻譯所引起的任何誤解或誤譯承擔責任。
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->
\ No newline at end of file
diff --git a/translations/tw/4-typing-game/README.md b/translations/tw/4-typing-game/README.md
index 982d059b..12710aea 100644
--- a/translations/tw/4-typing-game/README.md
+++ b/translations/tw/4-typing-game/README.md
@@ -1,42 +1,290 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "957547b822c40042e07d591c4fbfde4f",
-  "translation_date": "2025-08-24T00:17:01+00:00",
+  "original_hash": "efa2ab875b8bb5a7883816506da6b6d2",
+  "translation_date": "2026-01-06T13:21:04+00:00",
   "source_file": "4-typing-game/README.md",
   "language_code": "tw"
 }
 -->
-# 事件驅動程式設計 - 建立一個打字遊戲
+# 事件驅動程式設計 - 建立一款打字遊戲
 
+```mermaid
+journey
+    title 你的打字遊戲開發歷程
+    section 基礎
+      規劃遊戲結構: 3: Student
+      設計使用者介面: 4: Student
+      設定 HTML 元素: 4: Student
+    section 功能
+      處理使用者輸入: 4: Student
+      記錄時間: 5: Student
+      計算準確度: 5: Student
+    section 功能特色
+      添加視覺反饋: 5: Student
+      實作遊戲邏輯: 5: Student
+      打磨體驗: 5: Student
+```
 ## 簡介
 
-打字是開發者最被低估的技能之一。能夠快速地將腦中的想法轉移到編輯器中，可以讓創意自由流動。而學習的最佳方式之一就是玩遊戲！
+這是每位開發者都知道但很少談論的事：打字快是一種超能力！🚀 想想看 — 你把腦中的想法更快輸入到程式編輯器中，創意就能流暢發揮。這就像在你的思緒與螢幕之間有條直接的管線。
 
-> 那麼，讓我們來建立一個打字遊戲吧！
+```mermaid
+pie title 遊戲特色
+    "即時反饋" : 25
+    "績效追蹤" : 20
+    "互動式介面" : 20
+    "計時系統" : 15
+    "引言管理" : 10
+    "結果顯示" : 10
+```
+想知道提升這項技能的最好方法之一嗎？你猜對了 — 我們要一起做個遊戲！
 
-你將使用到目前為止學到的 JavaScript、HTML 和 CSS 技能來創建一個打字遊戲。遊戲會向玩家展示一段隨機的引言（我們使用的是 [福爾摩斯](https://en.wikipedia.org/wiki/Sherlock_Holmes) 的引言），並計時玩家準確輸入這段文字所需的時間。你將使用到目前為止學到的 JavaScript、HTML 和 CSS 技能來創建這個打字遊戲。
+```mermaid
+flowchart LR
+    A[玩家開始遊戲] --> B[顯示隨機引用]
+    B --> C[玩家輸入字元]
+    C --> D{字元正確嗎？}
+    D -->|是| E[綠色高亮]
+    D -->|否| F[紅色高亮]
+    E --> G[更新準確率]
+    F --> G
+    G --> H{引用完成？}
+    H -->|否| C
+    H -->|是| I[計算每分鐘字數]
+    I --> J[顯示結果]
+    J --> K[再玩一次？]
+    K -->|是| B
+    K -->|否| L[遊戲結束]
+    
+    style A fill:#e1f5fe
+    style D fill:#fff3e0
+    style E fill:#e8f5e8
+    style F fill:#ffebee
+    style I fill:#f3e5f5
+```
+> 讓我們一起打造一款超棒的打字遊戲吧！
 
+準備好將你學過的 JavaScript、HTML 和 CSS 技能派上用場了嗎？我們將建立一款打字遊戲，挑戰來自傳奇偵探 [福爾摩斯](https://en.wikipedia.org/wiki/Sherlock_Holmes) 的隨機語錄。遊戲會記錄你打字的速度與正確性 — 相信我，比你想像中還要上癮！
+
+```mermaid
+mindmap
+  root((打字遊戲開發))
+    User Interface
+      Input Elements
+      Visual Feedback
+      Responsive Design
+      Accessibility
+    Game Logic
+      Quote Selection
+      Timer Management
+      Accuracy Tracking
+      Score Calculation
+    Event Handling
+      Keyboard Input
+      Button Clicks
+      Real-time Updates
+      Game State Changes
+    Performance Metrics
+      Words Per Minute
+      Character Accuracy
+      Error Tracking
+      Progress Display
+    User Experience
+      Immediate Feedback
+      Clear Instructions
+      Engaging Content
+      Achievement System
+```
 ![demo](../../../4-typing-game/images/demo.gif)
 
-## 先決條件
+## 你需要具備的知識
 
-本課程假設你已熟悉以下概念：
+```mermaid
+flowchart TD
+    A[使用者操作] --> B{事件類型?}
+    B -->|按鍵| C[鍵盤事件]
+    B -->|按鈕點擊| D[滑鼠事件]
+    B -->|計時器| E[時間事件]
+    
+    C --> F[檢查字元]
+    D --> G[開始/重設遊戲]
+    E --> H[更新計時器]
+    
+    F --> I{正確嗎?}
+    I -->|是| J[標示綠色]
+    I -->|否| K[標示紅色]
+    
+    J --> L[更新分數]
+    K --> L
+    L --> M[檢查遊戲狀態]
+    
+    G --> N[產生新引用]
+    H --> O[顯示時間]
+    
+    M --> P{遊戲完成?}
+    P -->|是| Q[顯示結果]
+    P -->|否| R[繼續遊戲]
+    
+    style A fill:#e1f5fe
+    style F fill:#e8f5e8
+    style I fill:#fff3e0
+    style Q fill:#f3e5f5
+```
+在開始之前，請確保你熟悉以下概念（如果需要快速複習也沒關係—我們都經歷過！）：
 
-- 建立文字輸入框和按鈕控制項
-- CSS 和使用類別設定樣式
+- 建立文字輸入和按鈕控制項
+- CSS 及使用類別設定樣式  
 - JavaScript 基礎
   - 建立陣列
-  - 生成隨機數
-  - 獲取當前時間
+  - 產生隨機數字
+  - 取得目前時間
+
+如果感覺某些稍微生疏，完全沒問題！有時最好的鞏固方法就是直接動手做專案，邊做邊學。
+
+### 🔄 **教學小檢視**
+**基礎評估**：開始開發前，請確定你了解：
+- ✅ HTML 表單和輸入元素的運作
+- ✅ CSS 類別與動態樣式
+- ✅ JavaScript 事件監聽與處理程序
+- ✅ 陣列操作與隨機選取
+- ✅ 時間測量與計算
+
+**快速自我測試**：你能解釋這些概念如何在互動遊戲中結合嗎？
+- **事件** 在使用者互動時觸發元素
+- **處理程序** 處理事件並更新遊戲狀態
+- **CSS** 提供使用者操作的視覺回饋
+- **時間控制** 支援效能測量和遊戲進度
 
-## 課程
+```mermaid
+quadrantChart
+    title 輸入遊戲技能發展
+    x-axis 初學者 --> 專家
+    y-axis 靜態 --> 互動式
+    quadrant-1 進階遊戲
+    quadrant-2 即時應用程式
+    quadrant-3 基本網頁
+    quadrant-4 互動網站
+    
+    HTML Forms: [0.3, 0.2]
+    CSS Styling: [0.4, 0.3]
+    Event Handling: [0.7, 0.8]
+    Game Logic: [0.8, 0.9]
+    Performance Tracking: [0.9, 0.7]
+```
+## 開始動手做吧！
 
 [使用事件驅動程式設計建立打字遊戲](./typing-game/README.md)
 
-## 致謝
+### ⚡ **你接下來的 5 分鐘可以做什麼**
+- [ ] 開啟瀏覽器主控台，嘗試使用 `addEventListener` 監聽鍵盤事件
+- [ ] 建立簡單的 HTML 頁面，含輸入欄位，測試打字偵測
+- [ ] 練習字串比對，將打字文字與目標文本做比較
+- [ ] 嘗試 `setTimeout`，熟悉計時函數
+
+### 🎯 **下一個小時你可以完成什麼**
+- [ ] 完成課後測驗，理解事件驅動程式設計
+- [ ] 建立簡易版打字遊戲，包括文字驗證
+- [ ] 新增正確與錯誤打字的視覺回饋
+- [ ] 根據速度與正確率實作簡單計分系統
+- [ ] 用 CSS 美化遊戲界面
+
+### 📅 **你的週遊戲開發計劃**
+- [ ] 完成具備所有功能與精緻度的完整打字遊戲
+- [ ] 增加難度等級，詞彙複雜度分級
+- [ ] 實作使用者統計追蹤（每分鐘字數、準確率趨勢）
+- [ ] 製作音效與動畫，提升使用體驗
+- [ ] 讓遊戲響應式並支援觸控裝置
+- [ ] 在線上分享遊戲，收集使用者反饋
+
+### 🌟 **你的月度互動式開發計劃**
+- [ ] 建造多款探索不同互動模式的遊戲
+- [ ] 學習遊戲迴圈、狀態管理及效能優化
+- [ ] 參與開源遊戲開發專案
+- [ ] 精通高級時間控制與流暢動畫製作
+- [ ] 建立展示多種互動應用的作品集
+- [ ] 指導其他對遊戲開發與互動設計有興趣的人
+
+## 🎯 你的打字遊戲專精時程
+
+```mermaid
+timeline
+    title 遊戲開發學習進度
+    
+    section 設置 (10分鐘)
+        專案結構: HTML基礎
+                 : CSS樣式設置
+                 : JavaScript檔案建立
+        
+    section 使用者介面 (20分鐘)
+        互動元素: 輸入欄位
+                 : 按鈕控制
+                 : 顯示區域
+                 : 響應式佈局
+        
+    section 事件處理 (25分鐘)
+        使用者互動: 鍵盤事件
+                  : 滑鼠事件
+                  : 即時回饋
+                  : 狀態管理
+        
+    section 遊戲邏輯 (30分鐘)
+        核心功能: 引言生成
+                 : 角色比較
+                 : 準確度計算
+                 : 計時器實作
+        
+    section 效能追蹤 (35分鐘)
+        指標與分析: 速度（WPM）計算
+                   : 錯誤追蹤
+                   : 進度視覺化
+                   : 結果顯示
+        
+    section 打磨與強化 (45分鐘)
+        使用者體驗: 視覺回饋
+                   : 聲效
+                   : 動畫
+                   : 無障礙功能
+        
+    section 進階功能 (1週)
+        擴充功能: 難度等級
+                 : 排行榜
+                 : 自訂引言
+                 : 多人選項
+        
+    section 專業技能 (1個月)
+        遊戲開發: 效能優化
+                  : 程式架構
+                  : 測試策略
+                  : 部署模式
+```
+### 🛠️ 你的遊戲開發工具總結
+
+完成本專案後，你將掌握：
+- **事件驅動程式設計**：打造對輸入反應靈敏的使用者介面
+- **即時回饋**：瞬時視覺與效能更新
+- **效能測量**：精準的計時與計分系統
+- **遊戲狀態管理**：掌控應用流程與使用者體驗
+- **互動設計**：創造引人入勝、令人上癮的使用體驗
+- **現代網頁 API**：運用瀏覽器功能提升互動豐富度
+- **無障礙設計模式**：確保所有使用者皆能無障礙使用
+
+**實務應用**：這些技能可廣泛應用於：
+- **網頁應用程式**：任何互動介面或儀表板
+- **教育軟體**：學習平台與技能評量工具
+- **生產力工具**：文字編輯器、IDE、協作軟體
+- **遊戲產業**：瀏覽器遊戲與互動娛樂
+- **行動開發**：觸控介面與手勢操作
+
+**下一階段**：你已準備好探究進階遊戲框架、即時多人系統或複雜互動式應用！
+
+## 製作人員名單
+
+由 [Christopher Harrison](http://www.twitter.com/geektrainer) ❤ 撰寫
 
-由 [Christopher Harrison](http://www.twitter.com/geektrainer) 用 ♥️ 撰寫
+---
 
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
 **免責聲明**：  
-本文件使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。應以原始語言的文件作為權威來源。對於關鍵資訊，建議尋求專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或誤讀概不負責。
\ No newline at end of file
+本文件係使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們力求準確，請注意自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應視為權威來源。對於重要資訊，建議採用專業人工翻譯。我們對因使用本翻譯所導致之任何誤解或誤譯概不負責。
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->
\ No newline at end of file
diff --git a/translations/tw/4-typing-game/typing-game/README.md b/translations/tw/4-typing-game/typing-game/README.md
index 9f2d840a..66194cac 100644
--- a/translations/tw/4-typing-game/typing-game/README.md
+++ b/translations/tw/4-typing-game/typing-game/README.md
@@ -1,88 +1,154 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "1b0aeccb600f83c603cd70cb42df594d",
-  "translation_date": "2025-08-29T15:28:22+00:00",
+  "original_hash": "da8bc72041a2bb3826a54654ee1a8844",
+  "translation_date": "2026-01-06T14:09:38+00:00",
   "source_file": "4-typing-game/typing-game/README.md",
   "language_code": "tw"
 }
 -->
 # 使用事件創建遊戲
 
-## 課前測驗
+你是否曾經想過網站如何知道你何時點擊按鈕或在文字框中輸入？這就是事件驅動程式設計的魔力！還有什麼比透過建構一個有用的東西——一個會對你的每個按鍵反應的打字速度遊戲——更好的學習方式呢。
 
-[課前測驗](https://ff-quizzes.netlify.app/web/quiz/21)
+你將親眼看到網頁瀏覽器如何「與」你的JavaScript程式碼「對話」。每次你點擊、輸入或移動滑鼠時，瀏覽器會傳送小訊息（我們稱它們為事件）到你的程式碼，你就會決定如何回應！
 
-## 事件驅動編程
+當我們結束時，你將創建一款真正的打字遊戲，可以追蹤你的速度和準確度。更重要的是，你會理解支撐每個互動式網站的基本概念。讓我們開始吧！
 
-在創建基於瀏覽器的應用程式時，我們會提供一個圖形使用者介面（GUI），讓使用者能夠與我們構建的內容進行互動。與瀏覽器互動最常見的方式是通過點擊和在各種元素中輸入文字。作為開發者，我們面臨的挑戰是無法預測使用者何時會執行這些操作！
+## 講座前小測驗
 
-[事件驅動編程](https://en.wikipedia.org/wiki/Event-driven_programming) 是我們需要用來創建 GUI 的編程方式。如果我們稍微拆解這個詞語，會發現核心詞是 **事件**。根據 Merriam-Webster 的定義，[事件](https://www.merriam-webster.com/dictionary/event) 是指「某件事情發生」。這完美地描述了我們的情況。我們知道某件事情會發生，並希望在其發生時執行一些程式碼，但我們不知道它會在什麼時候發生。
+[講座前小測驗](https://ff-quizzes.netlify.app/web/quiz/21)
 
-我們標記希望執行的程式碼區段的方法是創建一個函數。當我們考慮[程序式編程](https://en.wikipedia.org/wiki/Procedural_programming)時，函數會按照特定的順序被調用。在事件驅動編程中也是如此，不同之處在於函數的調用方式。
+## 事件驅動程式設計
 
-為了處理事件（例如按鈕點擊、輸入文字等），我們需要註冊 **事件監聽器**。事件監聽器是一個函數，用於監聽事件的發生並在事件發生時執行相應的操作。事件監聽器可以更新 UI、向伺服器發送請求，或者執行其他需要根據使用者操作完成的任務。我們可以使用 [addEventListener](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener) 並提供一個函數來添加事件監聽器。
+想想你最喜歡的應用程式或網站——是什麼讓它感覺充滿活力且反應迅速？全在於它如何回應你的操作！每次點擊、點按、滑動或按鍵都會產生所謂的「事件」，這才是網頁開發真正的魔法所在。
 
-> **NOTE:** 值得注意的是，創建事件監聽器有多種方式。你可以使用匿名函數，也可以創建命名函數。你可以使用各種快捷方式，例如設置 `click` 屬性，或者使用 `addEventListener`。在我們的練習中，我們將專注於使用 `addEventListener` 和匿名函數，因為這是網頁開發者最常用的技術之一。它也是最靈活的，因為 `addEventListener` 適用於所有事件，並且事件名稱可以作為參數提供。
+讓網頁程式設計如此有趣的原因是：我們永遠不知道有人什麼時候會點擊按鈕或開始在文本框輸入。他們可能立刻點擊，可能等五分鐘，甚至可能永遠不點擊！這種不可預測性讓我們必須用不同的思維來撰寫程式碼。
 
-### 常見事件
+我們不會寫那種像食譜一樣從上到下執行的程式碼，而是寫那種耐心等待某件事發生的程式碼。就像19世紀的電報操作員坐在機器旁，隨時準備一有訊息即刻回應。
+
+那麼，什麼是「事件」？簡單說，就是發生的事情！當你點擊按鈕，那是一個事件。當你輸入一個字母，那也是事件。當你移動滑鼠，那又是另一個事件。
+
+事件驅動程式設計讓我們能夠設定程式碼聆聽並回應。我們創建特殊的函數，稱為**事件監聽器（event listeners）**，它們耐心等待特定事件發生，然後立即採取行動。
 
-在創建應用程式時，有[數十種事件](https://developer.mozilla.org/docs/Web/Events)可供監聽。基本上，使用者在頁面上執行的任何操作都會觸發事件，這讓你擁有很大的權力來確保使用者獲得你期望的體驗。幸運的是，你通常只需要使用少數幾個事件。以下是一些常見的事件（包括我們在創建遊戲時會使用的兩個事件）：
+你可以把事件監聽器想像成程式碼的門鈴。你設定門鈴（`addEventListener()`），告訴它要傾聽哪種聲音（例如 ‘click’ 或 ‘keypress’），然後指定有人按鈴時該怎麼做（你的自訂函數）。
 
-- [click](https://developer.mozilla.org/docs/Web/API/Element/click_event)：使用者點擊某個元素，通常是按鈕或超連結
-- [contextmenu](https://developer.mozilla.org/docs/Web/API/Element/contextmenu_event)：使用者點擊右鍵
-- [select](https://developer.mozilla.org/docs/Web/API/Element/select_event)：使用者選取了一些文字
-- [input](https://developer.mozilla.org/docs/Web/API/Element/input_event)：使用者輸入了一些文字
+**事件監聽器的工作原理如下：**
+- **監聽**用戶特定的行為，如點擊、按鍵或滑鼠移動
+- **執行**當指定的事件發生時你的自訂程式碼
+- **立即回應**用戶互動，創造無縫的體驗
+- **處理**同一元素上的多重事件，使用不同的監聽器
 
-## 創建遊戲
+> **注意：** 值得強調的是，有很多方法可以建立事件監聽器。你可以使用匿名函數，或創建具名函數。你也可以用許多捷徑，比如設置 `click` 屬性，或使用 `addEventListener()`。在我們的練習中，我們將專注於 `addEventListener()`和匿名函數，因為這可能是網頁開發者最常用的技術。它也最靈活，因為 `addEventListener()` 可用於所有事件，且事件名稱可以作為參數傳入。
 
-我們將創建一個遊戲來探索 JavaScript 中事件的工作原理。我們的遊戲將測試玩家的打字技能，這是所有開發者應該具備的一項非常重要的技能。我們都應該練習打字！遊戲的基本流程如下：
+### 常見事件
+
+雖然網頁瀏覽器提供數十種不同的事件可以監聽，但大多數互動應用通常只依賴幾個基本事件。理解這些核心事件將為你建立複雜的使用者互動打下基礎。
+
+當你建立應用程式時，基本上用戶在頁面上的任何操作都會觸發一個事件，這給了你很大的能力，確保他們獲得你想要的體驗。幸運的是，通常你只需要少量事件。以下是一些常見事件（包括我們製作遊戲時會用到的兩個）：
+
+| 事件 | 描述 | 常見用途 |
+|-------|-------------|------------------|
+| `click` | 使用者點擊了某物 | 按鈕、連結、互動元素 |
+| `contextmenu` | 使用者按了右鍵 | 自訂右鍵選單 |
+| `select` | 使用者標記了部分文字 | 文字編輯、複製操作 |
+| `input` | 使用者輸入了文字 | 表單驗證、即時搜尋 |
+
+**了解這些事件類型：**
+- **在用戶與特定頁面元素互動時觸發**
+- **透過事件物件提供用戶操作的詳細資訊**
+- **讓你創建反應快速且互動性強的網頁應用**
+- **在不同瀏覽器和裝置間一致運作**
+
+## 建立遊戲
+
+現在你已理解事件的運作方式，我們來實際應用：創建一個打字速度遊戲，展示事件處理，同時幫助你培養重要的開發者技能。
+
+我們將創建一個遊戲，探索 JavaScript 裡的事件運作。遊戲會測試玩家的打字技巧，這是所有開發人員都常被低估的重要技能。趣事：我們現在使用的 QWERTY 鍵盤配置實際上是在1870年代為打字機設計的——打字技巧對程式設計師如今仍然相當重要！遊戲大致流程如下：
+
+```mermaid
+flowchart TD
+    A[玩家點擊開始] --> B[顯示隨機引言]
+    B --> C[玩家在文字框中輸入]
+    C --> D{單詞完成了嗎？}
+    D -->|是| E[標記下一個單詞]
+    D -->|否| F{目前正確嗎？}
+    F -->|是| G[保持正常樣式]
+    F -->|否| H[顯示錯誤樣式]
+    E --> I{引言完成了嗎？}
+    I -->|否| C
+    I -->|是| J[顯示成功訊息與時間]
+    G --> C
+    H --> C
+```
+**以下是遊戲的運作方式：**
+- **開始**當玩家點擊開始按鈕並顯示隨機引言
+- **追蹤**玩家的打字進度，逐字即時更新
+- **突出顯示**當前單字，指引玩家專注焦點
+- **提供**打字錯誤的即時視覺反饋
+- **計算**並顯示當引言全部完成的總用時
 
-- 玩家點擊開始按鈕，並看到需要輸入的一段文字
-- 玩家在文本框中盡可能快速地輸入文字
-  - 每完成一個單詞，下一個單詞會被高亮顯示
-  - 如果玩家輸入錯誤，文本框會變成紅色
-  - 當玩家完成整段文字時，會顯示成功訊息以及所用時間
+我們來一起創建這款遊戲，並學習事件吧！
 
-讓我們開始構建遊戲，並學習事件的相關知識！
+### 檔案結構
 
-### 文件結構
+在開始寫程式前，先整理好檔案結構！一開始就有乾淨的檔案結構會減少你日後的困擾，並讓你的專案更專業。😊
 
-我們需要三個文件：**index.html**、**script.js** 和 **style.css**。讓我們先設置好這些文件，讓後續工作更輕鬆。
+我們將保持簡單，僅使用三個檔案：用於頁面結構的 `index.html`、用於遊戲邏輯的 `script.js`，以及用於視覺效果的 `style.css`。這組組合是大多數網頁的經典配置！
 
-- 打開控制台或終端窗口，創建一個新文件夾，並執行以下命令：
+**透過打開命令視窗或終端機執行以下指令，為你的作品創建新資料夾：**
 
 ```bash
-# Linux or macOS
+# Linux 或 macOS
 mkdir typing-game && cd typing-game
 
 # Windows
 md typing-game && cd typing-game
 ```
 
-- 打開 Visual Studio Code
+**這些指令的功能：**
+- **建立**一個名為 `typing-game` 的新目錄，供你放置專案檔案
+- **自動切換**到剛建立的資料夾內
+- **打造**一個乾淨的工作區，方便你開發遊戲
+
+**打開 Visual Studio Code：**
 
 ```bash
 code .
 ```
 
-- 在 Visual Studio Code 中向文件夾添加以下三個文件：
-  - index.html
-  - script.js
-  - style.css
+**此指令的效果：**
+- **啟動** Visual Studio Code 並定位到目前目錄
+- **在編輯器中開啟**你的專案資料夾
+- **提供**所有你需要的開發工具
+
+**在 Visual Studio Code 裡新增三個檔案，命名如下：**
+- `index.html` - 遊戲的結構和內容
+- `script.js` - 遊戲邏輯和事件監聽器
+- `style.css` - 視覺外觀和樣式設定
+
+## 建立使用者介面
 
-## 創建使用者介面
+現在讓我們建構遊戲進行時的舞台！想像這是設計太空船的控制面板——我們必須確保所有玩家需要的東西都放在他們期望的位置。
 
-根據需求，我們知道在 HTML 頁面上需要一些元素。這有點像食譜，我們需要一些材料：
+想想我們的遊戲到底需要什麼。如果你正在玩一個打字遊戲，你希望螢幕上出現什麼？這是必須的介面元素：
 
-- 顯示玩家需要輸入的文字的地方
-- 顯示訊息（例如成功訊息）的地方
-- 用於輸入文字的文本框
-- 開始按鈕
+| UI 元件 | 目的 | HTML 元素 |
+|------------|---------|-------------|
+| 引言顯示區 | 顯示要輸入的文字 | `<p>` 並帶有 `id="quote"` |
+| 訊息區 | 顯示狀態及成功訊息 | `<p>` 並帶有 `id="message"` |
+| 文字輸入框 | 玩家輸入引言的地方 | `<input>` 並帶有 `id="typed-value"` |
+| 開始按鈕 | 開始遊戲 | `<button>` 並帶有 `id="start"` |
 
-每個元素都需要有 ID，以便我們能夠在 JavaScript 中操作它們。我們還需要添加對 CSS 和 JavaScript 文件的引用。
+**介面結構說明：**
+- **合乎邏輯**地從上到下組織內容
+- **給予**元素獨特的 ID，方便 JavaScript 操作
+- **建立**清晰視覺層級，提升用戶體驗
+- **使用**語意化的 HTML 元素，增進無障礙性
 
-創建一個名為 **index.html** 的新文件，並添加以下 HTML：
+每個元素都需要 ID，才能在 JavaScript 中操作。我們也會新增對 CSS 和 JavaScript 檔案的引用。
+
+建立一個名為 `index.html` 的新檔案。加入以下 HTML：
 
 ```html
 <!-- inside index.html -->
@@ -105,26 +171,52 @@ code .
 </html>
 ```
 
+**這個 HTML 結構實現了以下功能：**
+- **在 `<head>` 頁面標頭載入 CSS 樣式表
+- **創建**明確的標題和使用者說明
+- **設置**帶有特定 ID 的占位段落，用於動態內容
+- **包含**帶有無障礙屬性的輸入欄位
+- **提供**一個開始遊戲的按鈕
+- **在檔案尾端**載入 JavaScript，提升效能
+
 ### 啟動應用程式
 
-最好以迭代方式開發，隨時查看效果。讓我們啟動應用程式。Visual Studio Code 有一個很棒的擴展名叫 [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon)，它可以在本地托管你的應用程式，並在每次保存時刷新瀏覽器。
+在開發過程中經常測試應用程式有助於及早捕捉問題，並即時查看進度。Live Server 是一款非常實用的工具，每當你儲存變更時，它會自動刷新瀏覽器，讓開發更加高效。
 
-- 按照連結安裝 [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon)，然後點擊 **Install**
-  - 瀏覽器會提示你打開 Visual Studio Code，然後 Visual Studio Code 會提示你進行安裝
-  - 如果有提示，請重新啟動 Visual Studio Code
-- 安裝完成後，在 Visual Studio Code 中按 Ctrl-Shift-P（或 Cmd-Shift-P）打開命令面板
-- 輸入 **Live Server: Open with Live Server**
-  - Live Server 會開始托管你的應用程式
-- 打開瀏覽器，並導航到 **https://localhost:5500**
-- 你現在應該能看到你創建的頁面！
+最好採用逐步開發的方法查看效果。讓我們啟動應用程式。有個相當棒的 Visual Studio Code 擴充套件叫做 [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon)，它可以在本機架設伺服器，並在你儲存時刷新瀏覽器。
 
-讓我們添加一些功能。
+**按照連結安裝 [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon)，點擊安裝：**
 
-## 添加 CSS
+**安裝過程會有以下動作：**
+- **提示**你的瀏覽器打開 Visual Studio Code
+- **引導你**完成擴充功能安裝流程
+- **可能需要**重啟 Visual Studio Code 以完成設定
 
-在創建 HTML 後，讓我們添加核心樣式的 CSS。我們需要高亮玩家應該輸入的單詞，並在輸入錯誤時將文本框顯示為紅色。我們將使用兩個類來完成這些操作。
+**安裝完成後，在 Visual Studio Code 按 Ctrl-Shift-P（或 Cmd-Shift-P）開啟命令面板：**
 
-創建一個名為 **style.css** 的新文件，並添加以下語法。
+**命令面板說明：**
+- **快速存取**所有 VS Code 指令
+- **輸入時即時搜尋**指令
+- **提供**鍵盤快捷鍵加快開發效率
+
+**輸入「Live Server: Open with Live Server」：**
+
+**Live Server 功能包括：**
+- **啟動**你的專案的本機開發伺服器
+- **在你儲存檔案時**自動刷新瀏覽器
+- **從本機 URL（通常是 `localhost:5500`）提供服務**
+
+**打開瀏覽器並前往 `https://localhost:5500`：**
+
+現在你應該看到剛建立的頁面了！讓我們加入一些功能。
+
+## 加入 CSS
+
+現在讓我們讓畫面好看一點！視覺反饋自電腦早期時代就對使用者介面至關重要。1980年代的研究發現，立即的視覺反饋能顯著提升使用者表現並減少錯誤。這正是我們要創造的效果。
+
+我們的遊戲需要讓玩家一目了然地知道目前狀況。玩家應該立刻知道該輸入哪個單字，如果犯錯，應該立即看到它。我們來創建一些簡單但有效的樣式：
+
+建立一個名為 `style.css` 的新檔案，加入以下語法。
 
 ```css
 /* inside style.css */
@@ -138,40 +230,61 @@ code .
 }
 ```
 
-✅ 關於 CSS，你可以按照自己的喜好佈局頁面。花點時間讓頁面看起來更吸引人：
+**這些 CSS 類別的意義：**
+- **以黃色背景突出顯示**當前單字，幫助視覺聚焦
+- **以淺珊瑚色背景標示**打字錯誤
+- **提供**即時回饋而不干擾使用者輸入流程
+- **使用**對比明顯的色彩，提升無障礙性與視覺溝通效果
+
+✅ CSS 部分，你可以自由安排頁面版面配置，多花點時間讓頁面更吸引人：
 
-- 選擇不同的字體
-- 為標題添加顏色
-- 調整元素大小
+- 選擇不同的字型
+- 讓標題更有色彩
+- 調整元件大小
 
 ## JavaScript
 
-在創建 UI 後，現在是時候專注於提供邏輯的 JavaScript 了。我們將分成幾個步驟：
+現在事情變有趣了！🎉 我們已經有 HTML 結構和 CSS 樣式，但目前遊戲就像一輛漂亮卻沒有引擎的車子。JavaScript 就是那台引擎——它使一切都實際運作並對玩家操作做出回應。
+
+你將看到你的作品活起來。我們會一步步接觸這些內容，避免讓你感到壓力過大：
+
+| 步驟 | 目的 | 你將學到的内容 |
+|------|---------|------------------|
+| [建立常數](../../../../4-typing-game/typing-game) | 設定引言和 DOM 參考 | 變數管理與 DOM 選取 |
+| [開始遊戲的事件監聽器](../../../../4-typing-game/typing-game) | 處理遊戲初始化 | 事件處理和 UI 更新 |
+| [鍵入的事件監聽器](../../../../4-typing-game/typing-game) | 即時處理用戶輸入 | 輸入驗證與動態反饋 |
 
-- [創建常量](../../../../4-typing-game/typing-game)
-- [開始遊戲的事件監聽器](../../../../4-typing-game/typing-game)
-- [輸入文字的事件監聽器](../../../../4-typing-game/typing-game)
+**此結構化方式幫助你：**
+- **整合**程式碼成邏輯且易管理的部分
+- **逐步建立**功能以便輕鬆除錯
+- **理解**應用程式中不同部分如何協同工作
+- **創造**可重複使用的設計模式，便於未來專案
 
-首先，創建一個名為 **script.js** 的新文件。
+不過先建立一個新檔案，名為 `script.js`。
 
-### 創建常量
+### 建立常數
 
-我們需要一些項目來讓編程更輕鬆。類似於食譜，以下是我們需要的內容：
+在深入實作前，讓我們先整合所有資源！就像 NASA 的任務控制中心啟動前會先架設監控系統，有備而來能讓整個過程順利許多，也能減少打錯字的機率。
 
-- 包含所有文字的陣列
-- 用於存儲當前文字的所有單詞的空陣列
-- 用於存儲玩家當前輸入的單詞索引的空間
-- 玩家點擊開始的時間
+我們首先需要設定：
 
-我們還需要引用 UI 元素：
+| 資料類型 | 目的 | 範例 |
+|-----------|---------|--------|
+| Array of quotes | 儲存遊戲中所有可能的引言 | `['Quote 1', 'Quote 2', ...]` |
+| Word array | 將當前引言拆解成單字陣列 | `['When', 'you', 'have', ...]` |
+| Word index | 追蹤玩家正在輸入的單字索引 | `0, 1, 2, 3...` |
+| Start time | 計算計分所需的經過時間 | `Date.now()` |
 
-- 文本框（**typed-value**）
-- 顯示文字的元素（**quote**）
-- 顯示訊息的元素（**message**）
+**我們也需要參考 UI 元素：**
+| Element | ID | 用途 |
+|---------|----|---------|
+| 文字輸入框 | `typed-value` | 玩家輸入文字的位置 |
+| 引言顯示區 | `quote` | 顯示需輸入的引言 |
+| 訊息區 | `message` | 顯示狀態更新訊息 |
 
 ```javascript
-// inside script.js
-// all of our quotes
+// 在 script.js 內部
+// 我們所有的引言
 const quotes = [
     'When you have eliminated the impossible, whatever remains, however improbable, must be the truth.',
     'There is nothing more deceptive than an obvious fact.',
@@ -181,172 +294,320 @@ const quotes = [
     'Nothing clears up a case so much as stating it to another person.',
     'Education never ends, Watson. It is a series of lessons, with the greatest for the last.',
 ];
-// store the list of words and the index of the word the player is currently typing
+// 存放單詞清單和玩家當前輸入的單詞索引
 let words = [];
 let wordIndex = 0;
-// the starting time
+// 起始時間
 let startTime = Date.now();
-// page elements
+// 頁面元素
 const quoteElement = document.getElementById('quote');
 const messageElement = document.getElementById('message');
 const typedValueElement = document.getElementById('typed-value');
 ```
+  
+**解析這段設定程式碼的成果：**
+- 使用 `const` **儲存**一組夏洛克·福爾摩斯的引言，因為引言不會變動  
+- 使用 `let` **初始化**追蹤變數，因為遊戲中這些值會變化  
+- 利用 `document.getElementById()` **擷取** DOM 元素的參照以提高效率  
+- 建立所有遊戲功能的基礎，並且使用清晰、具描述性的變數名稱  
+- 將相關資料和元素邏輯性地組織起來，方便日後維護程式碼  
 
-✅ 為你的遊戲添加更多文字
+✅ 請繼續為你的遊戲新增更多引言
 
-> **NOTE:** 我們可以在程式碼中隨時使用 `document.getElementById` 獲取元素。由於我們會經常引用這些元素，因此使用常量可以避免字符串字面值的拼寫錯誤。像 [Vue.js](https://vuejs.org/) 或 [React](https://reactjs.org/) 這樣的框架可以幫助你更好地集中管理程式碼。
+> 💡 **專家提示**：你可以在程式碼中任何時候使用 `document.getElementById()` 取得元素。由於我們會常常用到這些元素，透過常數避免字串拼寫錯誤是很好的做法。像是 [Vue.js](https://vuejs.org/) 或 [React](https://reactjs.org/) 這類框架可以幫助你更好地集中管理程式碼。
+>
+**這個作法效果好有以下原因：**
+- **避免**多次引用元素時的拼寫錯誤  
+- **提升**程式碼可讀性，使用具描述性的常數名稱  
+- **增強** IDE 的自動完成與錯誤檢查支援  
+- **使得**以後如果元素 ID 改變，重構程式碼更加容易  
 
-花點時間觀看一段關於使用 `const`、`let` 和 `var` 的影片
+花一點時間觀看關於 `const`、`let` 和 `var` 的影片
 
-[![變數類型](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "變數類型")
+[![Types of variables](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Types of variables")
 
-> 🎥 點擊上方圖片觀看有關變數的影片。
+> 🎥 點擊上方圖片觀看變數相關教學影片。
 
-### 添加開始邏輯
+### 新增開始邏輯
 
-為了開始遊戲，玩家需要點擊開始按鈕。當然，我們不知道他們什麼時候會點擊開始。這就是[事件監聽器](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener)的作用。事件監聽器允許我們監聽某件事情的發生（事件），並在事件發生時執行程式碼。在我們的情況下，我們希望在使用者點擊開始時執行程式碼。
+這裡一切就緒！🚀 你即將寫下第一個真正的事件監聽器，看到程式碼對按鈕點擊有反應，那感覺超滿足。
 
-當使用者點擊 **開始** 時，我們需要選擇一段文字，設置使用者介面，並設置當前單詞和計時的追蹤。以下是需要添加的 JavaScript；我們在程式碼塊後進行討論。
+想想看：某個地方，一名玩家正準備點擊「開始」按鈕，你的程式需要準備好。完全不知道他什麼時候會按下去——可能是馬上，也可能喝完咖啡後——但當那刻來臨，你的遊戲便啟動。
+
+當用戶點擊 `start` 時，我們需要選擇一段引言、設定用戶介面，以及初始化當前輸入單字和時間的追蹤。以下是你要加入的 JavaScript 程式碼；我們會在程式碼區塊後面詳細說明。
 
 ```javascript
-// at the end of script.js
+// 在 script.js 的結尾
 document.getElementById('start').addEventListener('click', () => {
-  // get a quote
+  // 取得一個引言
   const quoteIndex = Math.floor(Math.random() * quotes.length);
   const quote = quotes[quoteIndex];
-  // Put the quote into an array of words
+  // 將引言放入一個字詞陣列中
   words = quote.split(' ');
-  // reset the word index for tracking
+  // 重設字詞索引以追蹤
   wordIndex = 0;
 
-  // UI updates
-  // Create an array of span elements so we can set a class
+  // 使用者介面更新
+  // 建立一個 span 元素陣列，以便我們可以設置類別
   const spanWords = words.map(function(word) { return `<span>${word} </span>`});
-  // Convert into string and set as innerHTML on quote display
+  // 轉成字串並設定為引言顯示區的 innerHTML
   quoteElement.innerHTML = spanWords.join('');
-  // Highlight the first word
+  // 強調第一個字詞
   quoteElement.childNodes[0].className = 'highlight';
-  // Clear any prior messages
+  // 清除任何先前的訊息
   messageElement.innerText = '';
 
-  // Setup the textbox
-  // Clear the textbox
+  // 設置文字框
+  // 清空文字框
   typedValueElement.value = '';
-  // set focus
+  // 設定焦點
   typedValueElement.focus();
-  // set the event handler
+  // 設定事件處理器
 
-  // Start the timer
+  // 啟動計時器
   startTime = new Date().getTime();
 });
 ```
+  
+**將程式碼分成邏輯區塊說明：**
+
+**📊 單字追蹤設定：**  
+- 使用 `Math.floor()` 和 `Math.random()` **隨機選擇**一段引言，增加多樣性  
+- 使用 `split(' ')` 將引言 **切割成單字陣列**  
+- 將 `wordIndex` **重置為 0**，因為玩家從第一個單字開始  
+- **準備**遊戲狀態以開始新的回合  
+
+**🎨 UI 佈局與顯示：**  
+- 透過包裹 `<span>` 元素，分別設定單字以便個別樣式調整  
+- 將所有 span 元素合併成一個字串，**有效率地更新 DOM**  
+- 透過加入 `highlight` CSS 類別，**標記第一個單字為高亮**  
+- 清除先前遊戲訊息，讓畫面保持乾淨  
 
-讓我們分解程式碼！
+**⌨️ 文字框準備：**  
+- 清空輸入欄現有文字  
+- 將輸入框設定 **focus**，讓玩家能立刻開始輸入  
+- 為新遊戲回合做好輸入區準備  
 
-- 設置單詞追蹤
-  - 使用 [Math.floor](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math/floor) 和 [Math.random](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math/random) 隨機選擇 `quotes` 陣列中的一段文字
-  - 將 `quote` 轉換為 `words` 陣列，以便追蹤玩家當前輸入的單詞
-  - 將 `wordIndex` 設置為 0，因為玩家將從第一個單詞開始
-- 設置 UI
-  - 創建 `spanWords` 陣列，其中包含每個單詞的 `span` 元素
-    - 這將允許我們高亮顯示文字
-  - 使用 `join` 將陣列轉換為字符串，並更新 `quoteElement` 的 `innerHTML`
-    - 這將向玩家顯示文字
-  - 將第一個 `span` 元素的 `className` 設置為 `highlight`，以高亮顯示為黃色
-  - 通過設置 `messageElement` 的 `innerText` 為 `''` 清空訊息
-- 設置文本框
-  - 清空 `typedValueElement` 的當前 `value`
-  - 將焦點設置到 `typedValueElement`
-- 通過調用 `getTime` 開始計時
+**⏱️ 計時器初始化：**  
+- 使用 `new Date().getTime()` **擷取當前時間戳**  
+- 方便後續準確計算打字速度與完成時間  
+- 開始遊戲計時與效能追蹤  
 
-### 添加輸入邏輯
+### 新增打字邏輯
 
-當玩家輸入時，會觸發 `input` 事件。此事件監聽器將檢查玩家是否正確輸入單詞，並處理遊戲的當前狀態。回到 **script.js**，在末尾添加以下程式碼。我們稍後會進行分解。
+這裡開始處理遊戲核心了！別擔心剛開始看起來複雜，我們會逐一說明每段程式碼，最後你會看到它多麼合邏輯。
+
+我們正在打造的是一套複雜的邏輯：每當玩家輸入一個字母，我們都會查看輸入內容、給予回饋，並決定下一步該怎麼做。它類似 1970 年代早期的文字處理器 WordStar，會即時回饋輸入狀況。
 
 ```javascript
-// at the end of script.js
+// 在 script.js 的結尾
 typedValueElement.addEventListener('input', () => {
-  // Get the current word
+  // 取得當前的單字
   const currentWord = words[wordIndex];
-  // get the current value
+  // 取得當前的值
   const typedValue = typedValueElement.value;
 
   if (typedValue === currentWord && wordIndex === words.length - 1) {
-    // end of sentence
-    // Display success
+    // 句子結尾
+    // 顯示成功
     const elapsedTime = new Date().getTime() - startTime;
     const message = `CONGRATULATIONS! You finished in ${elapsedTime / 1000} seconds.`;
     messageElement.innerText = message;
   } else if (typedValue.endsWith(' ') && typedValue.trim() === currentWord) {
-    // end of word
-    // clear the typedValueElement for the new word
+    // 單字結尾
+    // 清除 typedValueElement 以便輸入新單字
     typedValueElement.value = '';
-    // move to the next word
+    // 移動到下一個單字
     wordIndex++;
-    // reset the class name for all elements in quote
+    // 重設 quote 中所有元素的類別名稱
     for (const wordElement of quoteElement.childNodes) {
       wordElement.className = '';
     }
-    // highlight the new word
+    // 突顯新單字
     quoteElement.childNodes[wordIndex].className = 'highlight';
   } else if (currentWord.startsWith(typedValue)) {
-    // currently correct
-    // highlight the next word
+    // 目前正確
+    // 突顯下一個單字
     typedValueElement.className = '';
   } else {
-    // error state
+    // 錯誤狀態
     typedValueElement.className = 'error';
   }
 });
 ```
-
-讓我們分解程式碼！我們首先獲取當前單詞和玩家目前輸入的值。接著，我們使用瀑布邏輯檢查文字是否完成、單詞是否完成、單詞是否正確，或者（最後）是否有錯誤。
-
-- 文字完成，條件是 `typedValue` 等於 `currentWord`，且 `wordIndex` 等於 `words` 的 `length` 減一
-  - 通過將當前時間減去 `startTime` 計算 `elapsedTime`
-  - 將 `elapsedTime` 除以 1,000，將毫秒轉換為秒
-  - 顯示成功訊息
-- 單詞完成，條件是 `typedValue` 以空格結尾（單詞結束），且 `typedValue` 等於 `currentWord`
-  - 將 `typedElement` 的 `value` 設置為 `''`，以便輸入下一個單詞
-  - 增加 `wordIndex`，移動到下一個單詞
-  - 遍歷 `quoteElement` 的所有 `childNodes`，將 `className` 設置為 `''`，恢復默認顯示
-  - 將當前單詞的 `className` 設置為 `highlight`，以標記為下一個需要輸入的單詞
-- 單詞目前輸入正確（但未完成），條件是 `currentWord` 以 `typedValue` 開頭
-  - 通過清空 `className` 確保 `typedValueElement` 顯示為默認狀態
-- 如果到這裡，則表示有錯誤
-  - 將 `typedValueElement` 的 `className` 設置為 `error`
+  
+**理解除錯邏輯流程：**
+
+此函式採用瀑布式檢查邏輯，從最特定的狀況往較普遍的判斷依序過濾。以下逐步拆解各情境：
+
+```mermaid
+flowchart TD
+    A[玩家輸入字元] --> B[取得目前字詞與輸入值]
+    B --> C{引用完成？}
+    C -->|Yes| D[顯示完成訊息及時間]
+    C -->|No| E{字詞以空白結束？}
+    E -->|Yes| F[清除輸入、移至下一字詞、更新標示]
+    E -->|No| G{目前輸入正確嗎？}
+    G -->|Yes| H[移除錯誤樣式]
+    G -->|No| I[顯示錯誤樣式]
+```  
+**🏁 引言輸入完成（情境 1）：**  
+- 檢查輸入值是否與目前單字相符，且為最後一個單字  
+- 計算經過時間，即用現在時間減去開始時間  
+- 將毫秒轉換成秒，除以 1,000  
+- 顯示恭喜訊息並包含完成時間  
+
+**✅ 單字完成（情境 2）：**  
+- 當輸入字串以空白結尾時，判斷字完成  
+- 確認修剪後的輸入與目前單字精確相符  
+- 清空輸入框以準備輸入下一個  
+- 將 `wordIndex` 增加，前進下一個單字  
+- 移除所有單字的類別，並高亮新單字  
+
+**📝 正在輸入中（情境 3）：**  
+- 確認目前單字以已輸入字串開頭  
+- 移除錯誤樣式，表示目前輸入正確  
+- 允許持續輸入，不中斷  
+
+**❌ 錯誤輸入狀態（情境 4）：**  
+- 輸入字串不符合目前單字開頭時觸發  
+- 加入錯誤 CSS 類別，立刻給予視覺回饋  
+- 幫助玩家迅速辨識並修正錯誤  
 
 ## 測試你的應用程式
 
-你已經完成了！最後一步是確保應用程式正常運行。試試看吧！如果有錯誤，不要擔心；**所有開發者**都會遇到錯誤。檢查訊息並根據需要進行調試。
+看看你都完成了什麼！🎉 你剛剛用事件驅動程式設計從零打造出一個真實可玩的打字遊戲。花點時間好好欣賞這成就——這絕非易事！
+
+接下來是測試階段！它會不會如預期運作？有沒有漏掉什麼？其實如果一開始沒完美運作很正常，即使是資深開發者也常在程式中找到錯誤。這都是開發流程的一部分！
 
-點擊 **開始**，然後開始輸入！它應該看起來像我們之前看到的動畫。
+點擊 `start`，開始打字吧！應該會像之前看到的動畫一樣。
 
-![遊戲運行中的動畫](../../../../4-typing-game/images/demo.gif)
+![Animation of the game in action](../../../../4-typing-game/images/demo.gif)
+
+**你應該測試的重點：**  
+- 點擊 Start 後是否顯示隨機引言  
+- 輸入時當前單字是否正確高亮  
+- 錯誤輸入時是否出現錯誤樣式提示  
+- 完成單字後高亮是否正確往前推進  
+- 完成整段引言後是否顯示完成訊息與計時  
+
+**常見除錯建議：**  
+- 檢查瀏覽器主控台 (F12) 是否有 JavaScript 錯誤  
+- 驗證所有檔案名稱是否完全匹配（含大小寫）  
+- 確認 Live Server 是否正常執行與刷新  
+- 嘗試多段引言以測試隨機選取功能  
 
 ---
 
+## GitHub Copilot Agent 挑戰 🎮
+
+使用 Agent 模式完成以下挑戰：
+
+**描述：** 擴充打字遊戲，實作一個能根據玩家表現調整遊戲難度的系統。這挑戰讓你練習進階事件處理、資料分析與動態 UI 更新。
+
+**提示：** 為打字遊戲創建難度調整系統，要求包括：  
+1. 追蹤玩家的打字速度（每分鐘字數）及準確度百分比  
+2. 自動調整為三種難度：簡單（簡單引言）、中等（現有引言）、困難（包含標點符號的複雜引言）  
+3. 在 UI 顯示當前難度與玩家統計數據  
+4. 實作連勝計數器，連續三次表現良好時提升難度  
+5. 新增視覺回饋（顏色、動畫）指出難度變化  
+
+加入必要的 HTML 元素、CSS 樣式與 JavaScript 函式來實現此功能。包含適當的錯誤處理，並確保遊戲具備適當的 ARIA 標籤以保持無障礙。
+
+更多 agent 模式資訊，參考 [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode)。
+
 ## 🚀 挑戰
 
-添加更多功能
+準備將你的打字遊戲推向新高度？試著實作這些進階功能，深化你對事件處理與 DOM 操控的了解：
+
+**新增功能：**
+
+| 功能 | 描述 | 你將練習的技能 |
+|---------|-------------|------------------------|
+| **輸入控管** | 完成後禁用 `input` 事件監聽器，按鈕點擊時恢復 | 事件管理與狀態控制 |
+| **UI 狀態管理** | 玩家完成引言後停用輸入框 | DOM 屬性操作 |
+| **彈跳視窗** | 使用模態視窗顯示成功訊息 | 進階 UI 模式與無障礙 |
+| **最高分系統** | 使用 `localStorage` 儲存最高分 | 瀏覽器儲存 API 與資料持久性 |
+
+**實作提示：**  
+- 查閱 `localStorage.setItem()` 和 `localStorage.getItem()` 以持久儲存資料  
+- 練習動態添加與移除事件監聽器  
+- 探索 HTML dialog 元素或 CSS 模態視窗樣式  
+- 停用與啟用表單控件時考慮無障礙設計  
 
-- 在完成後禁用 `input` 事件監聽器，並在按鈕被點擊時重新啟用
-- 在玩家完成文字後禁用文本框
-- 顯示一個模態對話框，包含成功訊息
-- 使用 [localStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage) 存儲最高分
-## 課後測驗
+## 課後小考
 
-[課後測驗](https://ff-quizzes.netlify.app/web/quiz/22)
+[課後小考](https://ff-quizzes.netlify.app/web/quiz/22)
+
+---
+
+## 🚀 你的打字遊戲精通路徑
+
+### ⚡ **接下來 5 分鐘能做的事**  
+- [ ] 以不同引言測試打字遊戲，確保運行流暢  
+- [ ] 嘗試修改 CSS 樣式，改變高亮與錯誤顏色  
+- [ ] 打開瀏覽器開發工具（F12），在遊玩時觀察 Console  
+- [ ] 挑戰自己盡快完成一段引言  
+
+### ⏰ **本小時能達成的目標**  
+- [ ] 為陣列新增更多引言（可挑選喜愛的書籍或電影）  
+- [ ] 實作挑戰區中的 localStorage 最高分系統  
+- [ ] 建置每分鐘字數計算器並在遊戲後顯示  
+- [ ] 增加正確輸入、錯誤與完成的音效  
+
+### 📅 **本週冒險任務**  
+- [ ] 製作多人遊戲版本，讓好友並肩競賽  
+- [ ] 創造不同難度層級且引言複雜度不同  
+- [ ] 新增進度條顯示引言輸入進度  
+- [ ] 實作用戶帳號與個人統計追蹤  
+- [ ] 設計自訂主題，讓使用者選擇喜愛的樣式  
+
+### 🗓️ **本月轉變進度**  
+- [ ] 建立漸進式打字課程，教導正確指法  
+- [ ] 製作分析報告，找出最易出錯的字母或單字  
+- [ ] 支援不同語言與鍵盤配置  
+- [ ] 串接教育 API，從文學資料庫取得引言  
+- [ ] 發佈強化版打字遊戲，讓更多人使用和喜愛  
+
+### 🎯 **最終反思檢核**
+
+**在繼續前，花些時間慶祝：**  
+- 製作這款遊戲時，最令人滿意的時刻是什麼？  
+- 相較起初，現在對事件驅動程式設計有什麼感想？  
+- 有什麼功能讓你迫不及待想加進遊戲變得獨一無二？  
+- 你會如何將事件處理概念應用到其他專案？  
+
+```mermaid
+journey
+    title 你的事件程式設計自信之旅
+    section 今天
+      了解事件: 3: 你
+      建立使用者介面: 4: 你
+      編寫事件監聽器: 5: 你
+    section 本週
+      新增功能: 4: 你
+      除錯問題: 5: 你
+      強化使用者體驗: 4: 你
+    section 下個月
+      建立複雜應用程式: 5: 你
+      教導他人: 5: 你
+      創建框架: 5: 你
+```  
+> 🌟 **記得**：你剛掌握了支撐每個互動網站與應用的核心概念。事件驅動程式設計讓網路充滿活力且反應即時。每當你看到下拉選單、即時驗證表單、或是會回應你點擊的遊戲，你現在都會明白背後的魔法。你不只是在學寫程式，你是在學創造直覺且吸引人的體驗！🎉
+
+---
 
-## 回顧與自學
+## 複習與自學
 
-閱讀 [所有可用的事件](https://developer.mozilla.org/docs/Web/Events)，了解網頁瀏覽器提供給開發者的選項，並思考每個事件適合使用的情境。
+閱讀關於瀏覽器可監聽的[所有事件](https://developer.mozilla.org/docs/Web/Events)，並思考何時會用到它們。
 
 ## 作業
 
-[創建一個新的鍵盤遊戲](assignment.md)
+[製作新鍵盤遊戲](assignment.md)
 
 ---
 
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
 **免責聲明**：  
-本文件使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。應以原始語言的文件作為權威來源。對於關鍵資訊，建議尋求專業人工翻譯。我們對因使用此翻譯而產生的任何誤解或錯誤解讀概不負責。
\ No newline at end of file
+本文件係使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們致力於確保翻譯的準確性，但請注意自動翻譯可能包含錯誤或不精確之處。原文文件的母語版本應被視為權威來源。對於關鍵資訊，建議使用專業人工翻譯。我們不對因使用本翻譯內容而產生的任何誤解或誤釋負責。
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->
\ No newline at end of file
diff --git a/translations/tw/4-typing-game/typing-game/assignment.md b/translations/tw/4-typing-game/typing-game/assignment.md
index 2ccb27d6..a054fa95 100644
--- a/translations/tw/4-typing-game/typing-game/assignment.md
+++ b/translations/tw/4-typing-game/typing-game/assignment.md
@@ -1,8 +1,8 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "de5384c118e15e4d1d0eaa00fc01b112",
-  "translation_date": "2025-08-24T00:22:16+00:00",
+  "original_hash": "3eac59d70e2532a677a2ce6bf765485a",
+  "translation_date": "2026-01-06T14:11:29+00:00",
   "source_file": "4-typing-game/typing-game/assignment.md",
   "language_code": "tw"
 }
@@ -11,14 +11,47 @@ CO_OP_TRANSLATOR_METADATA:
 
 ## 說明
 
-創建一個使用鍵盤事件執行任務的小型遊戲。它可以是一種不同類型的打字遊戲，或者是一種藝術型遊戲，透過按鍵在螢幕上繪製像素。發揮創意吧！
+既然你已經掌握了透過打字遊戲學習事件驅動程式設計的基礎，現在是釋放你的創意的時候了！你將設計並製作一個基於鍵盤的遊戲，用以展現你對事件處理、DOM 操作和使用者互動模式的理解。
+
+請創造一款使用鍵盤事件完成特定任務的小型遊戲。這可以是不同類型的打字遊戲、一個在按鍵時向畫面繪製像素的藝術應用、一個用方向鍵控制的簡單街機風格遊戲，或任何你能想像到的創意概念。發揮創意，思考不同按鍵如何觸發不同的行為！
+
+**你的遊戲應包含：**
+
+| 要求 | 說明 | 目的 |
+|-------------|-------------|---------|
+| **事件監聽器** | 對至少 3 種不同的鍵盤事件做出回應 | 展示事件處理的理解 |
+| **視覺回饋** | 即時提供使用者輸入的視覺反應 | 展示精通 DOM 操作 |
+| **遊戲邏輯** | 包含計分、關卡或進度機制 | 練習實作應用狀態 |
+| **使用者介面** | 清楚的說明與直覺的控制 | 發展使用者經驗設計技巧 |
+
+**可考慮的創意專案點子：**
+- **節奏遊戲**：玩家隨音樂或視覺提示按鍵
+- **像素藝術創作者**：不同按鍵繪製不同顏色或圖案
+- **文字組合器**：玩家透過依序輸入字母組成單字
+- **貪吃蛇遊戲**：用方向鍵控制蛇去收集物品
+- **音樂合成器**：不同按鍵播放不同的音符或聲音
+- **快速打字變體**：特定類別主題的打字（程式語言術語、外語）
+- **鍵盤鼓手**：按鍵映射成不同的鼓聲並打節拍
+
+**實作指引：**
+- **從**簡單的概念開始，逐步增加複雜度
+- **著重**於流暢且靈敏自然的控制
+- **包含**明確的視覺指示以顯示遊戲狀態與玩家進度
+- **測試**你的遊戲，確保不同使用者都能直覺操作
+- **用註解**說明你的事件處理策略，撰寫文件化程式碼
 
 ## 評分標準
 
-| 評分項目 | 優秀                     | 合格                     | 需要改進           |
-| -------- | ------------------------ | ------------------------ | ----------------- |
-|          | 提供完整的遊戲           | 遊戲非常簡單             | 遊戲有錯誤         |
-|          |                          |                          |                   |
+| 標準 | 優異 | 足夠 | 需改進 |
+| -------- | --------- | -------- | ----------------- |
+| **功能性** | 完整且精緻的遊戲，具多項功能與流暢的遊戲體驗 | 一個含基本功能且展現鍵盤事件處理的可運行遊戲 | 只有最基本實作，功能有限或有嚴重錯誤 |
+| **程式碼品質** | 結構良好、有註解並遵守最佳實務，有效率的事件處理 | 程式碼乾淨可讀，適當使用事件監聽器與 DOM 操作 | 基本程式結構，組織不佳或實作不佳 |
+| **使用者體驗** | 直覺的控制、清楚的回饋及引人入勝的專業感遊戲體驗 | 功能性介面、足夠的使用指引與靈敏反應控制 | 介面基礎，指示不清楚或反應差 |
+| **創意性** | 原創概念，創新運用鍵盤事件與創意思考解決問題 | 有趣的變體，良好利用事件處理呈現遊戲模式 | 基本的概念實作，缺乏創意元素 |
+
+---
 
-**免責聲明**：  
-本文件使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。應以原始語言的文件作為權威來源。對於關鍵資訊，建議尋求專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或誤讀概不負責。
\ No newline at end of file
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**免責聲明**：
+本文件由 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們致力於翻譯的準確性，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應視為權威來源。對於重要資訊，建議採用專業人工翻譯。我們不對因使用本翻譯所產生的任何誤解或誤讀負責。
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->
\ No newline at end of file
diff --git a/translations/tw/5-browser-extension/1-about-browsers/README.md b/translations/tw/5-browser-extension/1-about-browsers/README.md
index db287421..5c877e54 100644
--- a/translations/tw/5-browser-extension/1-about-browsers/README.md
+++ b/translations/tw/5-browser-extension/1-about-browsers/README.md
@@ -1,182 +1,555 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "2326d04e194a10aa760b51f5e5a1f61d",
-  "translation_date": "2025-08-29T15:18:29+00:00",
+  "original_hash": "00aa85715e1efd4930c17a23e3012e69",
+  "translation_date": "2026-01-06T13:55:08+00:00",
   "source_file": "5-browser-extension/1-about-browsers/README.md",
   "language_code": "tw"
 }
 -->
-# 瀏覽器擴充功能專案第一部分：關於瀏覽器的一切
-
-![瀏覽器手繪筆記](../../../../translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.tw.jpg)
-> 手繪筆記由 [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob) 提供
+# 瀏覽器擴充功能專案第一部分：關於瀏覽器的所有知識
+
+```mermaid
+journey
+    title 您的瀏覽器擴充功能開發旅程
+    section 基礎
+      了解瀏覽器: 3: Student
+      學習擴充功能類型: 4: Student
+      設置開發環境: 4: Student
+    section 開發
+      建立介面: 4: Student
+      新增功能: 5: Student
+      處理資料: 5: Student
+    section 整合
+      在瀏覽器中測試: 5: Student
+      偵錯問題: 4: Student
+      打磨使用體驗: 5: Student
+```
+![瀏覽器速寫筆記](../../../../translated_images/browser.60317c9be8b7f84a.tw.jpg)
+> 速寫筆記由 [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob) 製作
 
 ## 課前測驗
 
 [課前測驗](https://ff-quizzes.netlify.app/web/quiz/23)
 
-### 簡介
-
-瀏覽器擴充功能為瀏覽器增加了額外的功能。但在開始構建之前，您應該先了解一些關於瀏覽器如何運作的知識。
-
-### 關於瀏覽器
-
-在這系列課程中，您將學習如何構建一個可以在 Chrome、Firefox 和 Edge 瀏覽器上運行的瀏覽器擴充功能。在這部分，您將了解瀏覽器的運作方式，並搭建瀏覽器擴充功能的基本結構。
-
-那麼，什麼是瀏覽器？它是一種軟體應用程式，允許終端使用者從伺服器訪問內容並將其顯示在網頁上。
-
-✅ 一點歷史：第一個瀏覽器名為「WorldWideWeb」，由蒂姆·伯納斯-李爵士於 1990 年創建。
-
-![早期瀏覽器](../../../../translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.tw.jpg)
-> 一些早期的瀏覽器，圖片來源：[Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
-
-當使用者使用 URL（統一資源定位符）地址連接到互聯網時，通常通過 `http` 或 `https` 地址使用超文本傳輸協議，瀏覽器會與網頁伺服器通信並獲取網頁。
+### 介紹
+
+瀏覽器擴充功能是增強您網路瀏覽體驗的迷你應用程式。就像 Timothy Berners-Lee 最初對互動式網路的願景一樣，擴充功能將瀏覽器的能力擴展到簡單文件瀏覽之外。從保持帳號安全的密碼管理器，到協助設計師挑選完美色調的色彩選取器，擴充功能解決了日常瀏覽中的挑戰。
+
+在我們建立您的第一個擴充功能之前，讓我們先了解瀏覽器的運作方式。就像亞歷山大·格雷厄姆·貝爾（Alexander Graham Bell）在發明電話之前需要理解聲音的傳播原理一樣，了解瀏覽器的基礎知識將有助於您創建與既有瀏覽器系統無縫整合的擴充功能。
+
+本課結束時，您將能了解瀏覽器架構，並開始構建您的第一個擴充功能。
+
+```mermaid
+mindmap
+  root((瀏覽器架構))
+    Core Components
+      Rendering Engine
+      JavaScript Engine
+      Network Stack
+      Storage APIs
+    User Interface
+      Address Bar
+      Tab Management
+      Bookmarks
+      Extension Icons
+    Extension System
+      Manifest Files
+      Content Scripts
+      Background Pages
+      Popup Windows
+    Security Model
+      Same-Origin Policy
+      Permissions API
+      Content Security
+      Isolated Worlds
+    Development Tools
+      DevTools Integration
+      Debug Console
+      Performance Monitor
+      Extension Inspector
+```
+## 理解網頁瀏覽器
+
+網頁瀏覽器本質上是一個複雜的文件解析器。當您在網址列輸入「google.com」，瀏覽器會執行一連串複雜動作——向全球伺服器請求內容，然後解析並渲染程式碼，呈現出您所見的互動式網頁。
+
+這個流程與第一個網頁瀏覽器 WorldWideWeb 由 Tim Berners-Lee 於 1990 年設計，目的是讓具超連結的文件能被大眾存取的精神相呼應。
+
+✅ **小歷史**：第一個瀏覽器叫做「WorldWideWeb」，由 Sir Timothy Berners-Lee 於 1990 年創建。
+
+![早期瀏覽器](../../../../translated_images/earlybrowsers.d984b711cdf3a42d.tw.jpg)
+> 一些早期瀏覽器，圖片來源 [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
+
+### 瀏覽器如何處理網頁內容
+
+從輸入網址到看到網頁所經歷的過程包含多個協調完成的步驟，這些都在數秒內完成：
+
+```mermaid
+sequenceDiagram
+    participant User
+    participant Browser
+    participant Extension
+    participant DNS
+    participant Server
+    
+    User->>Browser: 輸入網址並按下 Enter
+    Browser->>Extension: 觸發 beforeRequest 事件
+    Extension->>Extension: 檢查網址是否需要修改
+    Browser->>DNS: 查詢伺服器 IP 位址
+    DNS->>Browser: 回傳 IP 位址
+    Browser->>Server: 請求網頁內容
+    Server->>Browser: 傳送 HTML、CSS 與 JavaScript
+    Browser->>Extension: 觸發 beforeResponse 事件
+    Extension->>Extension: 需要時修改內容
+    Browser->>User: 呈現完整網頁
+    Extension->>User: 顯示外掛程式介面更新
+```
+**這個流程完成了以下工作：**
+- **將**人類可讀的網址轉譯成伺服器IP位址（DNS查詢）
+- **建立**與網路伺服器的安全連線，使用HTTP或HTTPS協議
+- **向伺服器請求**特定的網頁內容
+- **接收**伺服器回傳的HTML標記、CSS樣式以及JavaScript程式碼
+- **渲染**所有內容成為您看到的互動式網頁
+
+### 瀏覽器核心功能
+
+現代瀏覽器提供了眾多功能，擴充功能開發者可以利用：
+
+| 功能 | 目的 | 擴充功能機會 |
+|---------|---------|------------------------|
+| **渲染引擎** | 顯示HTML、CSS和JavaScript | 內容修改、樣式注入 |
+| **JavaScript引擎** | 執行JavaScript程式碼 | 客製腳本、API互動 |
+| **本地存儲** | 在地保存資料 | 使用者偏好、緩存資料 |
+| **網路堆疊** | 處理網路請求 | 請求監控、資料分析 |
+| **安全模型** | 保護使用者免受惡意內容 | 內容過濾、安全強化 |
+
+**理解這些功能幫助您：**
+- **辨識**擴充功能能夠在哪些地方加強價值
+- **選擇**合適的瀏覽器API提供擴充功能所需功能
+- **設計**與瀏覽器系統高效協作的擴充功能
+- **確保**您的擴充功能遵循瀏覽器安全最佳實務
+
+### 跨瀏覽器開發注意事項
+
+不同瀏覽器雖然遵循標準，但在實作上有些微差異，就像不同程式語言處理同一演算法會略有不同。Chrome、Firefox 和 Safari 各有特性，開發者在擴充功能開發時必須考慮這些差異。
+
+> 💡 **專業建議**：使用 [caniuse.com](https://www.caniuse.com) 檢查不同瀏覽器對網路技術的支援狀況。這對規劃擴充功能的特性非常有幫助！
+
+**擴充功能開發關鍵考量：**
+- **測試**您的擴充功能在 Chrome、Firefox 和 Edge 瀏覽器的運作
+- **適應**不同瀏覽器擴充功能API和清單格式的差異
+- **處理**不同的效能特性及限制
+- **提供**針對瀏覽器特有功能缺失的替代方案
+
+✅ **分析見解**：您可在您的網頁開發專案中安裝分析套件，查明使用者偏好使用的瀏覽器。此數據有助於您優先支援哪些瀏覽器。
+
+## 理解瀏覽器擴充功能
+
+瀏覽器擴充功能直接在瀏覽器介面中加入功能，解決常見網路瀏覽問題。它們不需額外應用程式或複雜流程，方便立即存取工具與功能。
+
+這種概念呼應早期電腦先驅道格拉斯·英格巴特（Douglas Engelbart）如何藉由技術增加人類能力的想法——擴充功能強化了瀏覽器的基本功能。
+
+```mermaid
+quadrantChart
+    title 瀏覽器擴充功能類別
+    x-axis 簡單 --> 複雜
+    y-axis 個人使用 --> 專業工具
+    quadrant-1 開發者工具
+    quadrant-2 企業解決方案
+    quadrant-3 個人實用工具
+    quadrant-4 生產力應用程式
+    
+    Ad Blockers: [0.3, 0.2]
+    Password Managers: [0.7, 0.3]
+    Color Pickers: [0.4, 0.8]
+    Code Formatters: [0.8, 0.9]
+    Note Taking: [0.6, 0.5]
+    Video Downloaders: [0.5, 0.2]
+    Time Trackers: [0.7, 0.6]
+    Screenshot Tools: [0.4, 0.4]
+```
+**流行擴充功能類別及其效益：**
+- **生產力工具**：任務管理、筆記應用和時間追蹤器，幫您保持組織
+- **安全強化**：密碼管理器、廣告阻擋和隱私工具，保護您的資料
+- **開發者工具**：程式碼格式化、色彩挑選和除錯工具，簡化開發
+- **內容增強**：閱讀模式、影片下載和截圖工具，改善您的網路體驗
+
+✅ **反思問題**：您最喜歡的瀏覽器擴充功能有哪些？它們執行什麼特定工作，如何改善您的瀏覽體驗？
+
+### 🔄 **教學進度檢查**
+**瀏覽器架構理解：** 在進行擴充功能開發前，請確保您能：
+- ✅ 解釋瀏覽器如何處理網路請求及渲染內容
+- ✅ 辨識瀏覽器架構的主要組成部分
+- ✅ 了解擴充功能如何與瀏覽器功能整合
+- ✅ 認識保護使用者的安全模型
+
+**快速自我檢測**：您能追蹤從輸入網址到看到網頁的流程嗎？
+1. **DNS查詢**將網址轉成IP地址
+2. **HTTP請求**從伺服器抓取內容
+3. **解析**處理HTML、CSS和JavaScript
+4. **渲染**展示最終網頁
+5. **擴充功能**可在多個步驟修改內容
+
+## 安裝與管理擴充功能
+
+了解擴充功能安裝流程，能幫助您預期使用者安裝時的體驗。安裝流程在現代瀏覽器中有標準化，介面設計上略有差異。
+
+![Edge瀏覽器截圖，顯示打開的 edge://extensions 頁面和設定選單](../../../../translated_images/install-on-edge.d68781acaf0b3d3d.tw.png)
+
+> **重要提示**：測試自己開發的擴充功能時，請務必開啟開發者模式，並允許來自其他商店的擴充功能。
+
+### 開發階段擴充功能安裝流程
+
+當您自行開發與測試擴充功能時，請遵循此流程：
+
+```mermaid
+flowchart TD
+    A[撰寫程式碼] --> B[建構擴充功能]
+    B --> C{第一次安裝？}
+    C -->|是| D[載入未封裝]
+    C -->|否| E[重新載入擴充功能]
+    D --> F[測試功能]
+    E --> F
+    F --> G{運作正常？}
+    G -->|否| H[除錯問題]
+    G -->|是| I[準備好給使用者]
+    H --> A
+    I --> J[發佈至商店]
+    
+    style A fill:#e1f5fe
+    style F fill:#e8f5e8
+    style I fill:#f3e5f5
+    style J fill:#fff3e0
+```
+```bash
+# 第一步：建立你的擴充功能
+npm run build
+```
 
-此時，瀏覽器的渲染引擎會將網頁顯示在使用者的設備上，這可能是手機、桌面電腦或筆記型電腦。
+**此命令完成的工作：**
+- **編譯**您的原始碼成瀏覽器可用的檔案
+- **打包**JavaScript模組成優化後的封裝
+- **產生**最終擴充功能檔案於 `/dist` 資料夾
+- **準備**您的擴充功能以供安裝與測試
 
-瀏覽器還具有快取內容的能力，這樣就不需要每次都從伺服器檢索內容。它們可以記錄使用者的瀏覽歷史，存儲「Cookies」（小型數據片段，用於保存使用者的活動信息）等。
+**步驟2：前往瀏覽器擴充功能頁面**
+1. **打開**瀏覽器的擴充功能管理頁面
+2. **點擊**右上角「設定與更多」按鈕（三個點 `...`）
+3. **從下拉選單**中選擇「擴充功能」
 
-需要特別記住的是，瀏覽器並不完全相同！每個瀏覽器都有其優勢和劣勢，專業的網頁開發人員需要了解如何讓網頁在不同瀏覽器上都能良好運行。這包括處理像手機這樣的小視窗，以及處理離線使用者的情況。
+**步驟3：載入您的擴充功能**
+- **新安裝**：選擇「載入未封裝擴充功能」，並指定您的 `/dist` 資料夾
+- **更新**：點擊已安裝擴充功能旁的「重新載入」
+- **測試中**：啟用「開發者模式」以使用更多除錯功能
 
-一個非常實用的網站是 [caniuse.com](https://www.caniuse.com)，您應該將其加入您偏好的瀏覽器書籤中。在構建網頁時，使用 caniuse 提供的技術支持列表非常有幫助，這樣您可以更好地支持您的使用者。
+### 正式版擴充功能安裝
 
-✅ 如何判斷哪些瀏覽器在您的網站使用者中最受歡迎？檢查您的分析數據——您可以在網頁開發過程中安裝各種分析工具包，它們會告訴您使用者最常用的瀏覽器。
+> ✅ **注意**：以上開發指示適用於自行建立的擴充功能。要安裝發佈的擴充功能，請前往官方瀏覽器擴充功能商店，如 [Microsoft Edge 附加元件商店](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home)。
 
-## 瀏覽器擴充功能
+**理解差異：**
+- **開發安裝**允許您在開發中測試尚未發佈的擴充功能
+- **商店安裝**提供已審核並發佈的擴充功能，並有自動更新
+- **旁載安裝**可從官方商店外安裝擴充功能（需要開發者模式）
 
-為什麼要構建瀏覽器擴充功能？當您需要快速訪問經常重複的任務時，這是一個非常方便的工具。例如，如果您經常需要檢查網頁上的顏色，您可能會安裝一個顏色選取器擴充功能。如果您難以記住密碼，您可能會使用密碼管理擴充功能。
+## 建立您的碳足跡擴充功能
 
-開發瀏覽器擴充功能也很有趣。它們通常專注於執行少量的特定任務，並且執行得很好。
+我們將創建一款顯示您所在區域能源使用碳足跡的瀏覽器擴充功能。這個專案展示了基本的擴充功能開發概念，同時具備環保意識的實用工具。
 
-✅ 您最喜歡的瀏覽器擴充功能是什麼？它們執行哪些任務？
+此方法遵循約翰·杜威（John Dewey）教育理論中的「做中學」原則——結合技術技能與意義重大的現實應用。
 
-### 安裝擴充功能
+### 專案需求
 
-在開始構建之前，先了解構建和部署瀏覽器擴充功能的過程。雖然每個瀏覽器在管理這項任務時略有不同，但在 Chrome 和 Firefox 上的過程與 Edge 上的示例類似：
+開始開發前，我們先收集所需的資源與相依套件：
 
-![Edge 瀏覽器的截圖，顯示打開的 edge://extensions 頁面和設置菜單](../../../../translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.tw.png)
+**需要的API授權：**
+- **[CO2 Signal API key](https://www.co2signal.com/)**：輸入您的電子郵件地址以免費取得API金鑰
+- **[區域代碼](http://api.electricitymap.org/v3/zones)**：使用 [Electricity Map](https://www.electricitymap.org/map) 查詢您的區域代碼（例如，波士頓使用 'US-NEISO'）
 
-> 注意：請確保切換到開發者模式並允許來自其他商店的擴充功能。
+**開發工具：**
+- **[Node.js 和 NPM](https://www.npmjs.com)**：用於安裝專案依賴的套件管理工具
+- **[起始程式碼](../../../../5-browser-extension/start)**：下載 `start` 資料夾開始開發
 
-基本過程如下：
+✅ **進階學習**：提升您的套件管理技巧，請參考此 [完整學習模組](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-77807-sagibbon)
 
-- 使用 `npm run build` 構建您的擴充功能  
-- 在瀏覽器中通過右上角的「設置及更多」按鈕（`...` 圖標）導航到擴充功能面板  
-- 如果是新安裝，選擇「加載未打包的擴充功能」以從其構建文件夾（在我們的例子中是 `/dist`）上傳新的擴充功能  
-- 或者，如果您正在重新加載已安裝的擴充功能，點擊「重新加載」  
+### 理解專案架構
 
-✅ 這些指導適用於您自己構建的擴充功能；若要安裝已發布到各瀏覽器擴充功能商店的擴充功能，您應該導航到這些 [商店](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home) 並安裝您選擇的擴充功能。
+了解專案架構有助於高效率組織開發流程。就像亞歷山大圖書館（Alexandria Library）為方便知識檢索而組織良好，一個結構清晰的代碼庫讓開發更有效率：
 
-### 開始動手
+```
+project-root/
+├── dist/                    # Built extension files
+│   ├── manifest.json        # Extension configuration
+│   ├── index.html           # User interface markup
+│   ├── background.js        # Background script functionality
+│   └── main.js              # Compiled JavaScript bundle
+├── src/                     # Source development files
+│   └── index.js             # Your main JavaScript code
+├── package.json             # Project dependencies and scripts
+└── webpack.config.js        # Build configuration
+```
 
-您將構建一個顯示您所在地區碳足跡的瀏覽器擴充功能，展示您所在地區的能源使用情況以及能源來源。該擴充功能將包含一個表單，用於收集 API 金鑰，以便訪問 CO2 Signal 的 API。
+**解析各檔案功能：**
+- **`manifest.json`**：**定義**擴充功能的元資料、權限及入口點
+- **`index.html`**：**建立**使用者介面，當使用者點擊擴充功能圖標會看到此畫面
+- **`background.js`**：**處理**背景任務與瀏覽器事件監聽
+- **`main.js`**：**包含**編譯後最終打包的JavaScript
+- **`src/index.js`**：**儲存**您的開發主程式碼，編譯後會生成`main.js`
 
-**您需要：**
+> 💡 **組織小提示**：將API金鑰及區域代碼存放在安全筆記中，方便開發過程中參考。這些資料是測試擴充功能功能時必須的。
 
-- [一個 API 金鑰](https://www.co2signal.com/)；在此頁面輸入您的電子郵件，系統會將金鑰發送給您  
-- 與 [Electricity Map](https://www.electricitymap.org/map) 對應的 [地區代碼](http://api.electricitymap.org/v3/zones)（例如，在波士頓，我使用「US-NEISO」）  
-- [起始代碼](../../../../5-browser-extension/start)。下載 `start` 文件夾；您將在此文件夾中完成代碼  
-- [NPM](https://www.npmjs.com) - NPM 是一個套件管理工具；在本地安裝它，並安裝 `package.json` 文件中列出的套件以供您的網頁資產使用  
+✅ **安全提醒**：切勿將API金鑰或敏感認證提交至您的程式碼庫。我們會在後續步驟教您如何安全處理這些資料。
 
-✅ 在這個 [出色的學習模組](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-77807-sagibbon) 中了解更多關於套件管理的知識。
+## 建立擴充功能介面
 
-花點時間瀏覽代碼庫：
+接著開始建置使用者介面元件。此擴充功能採用雙畫面設計：配置畫面供初次設定，結果畫面則顯示資料。
 
-dist  
-    -|manifest.json（默認設置在此處）  
-    -|index.html（前端 HTML 標記在此處）  
-    -|background.js（背景 JS 在此處）  
-    -|main.js（構建後的 JS）  
-src  
-    -|index.js（您的 JS 代碼在此處）  
+這符合界面設計中的漸進式揭露原則——逐步呈現資訊與選項，避免一次給予過多訊息造成使用者困惑。
 
-✅ 一旦您準備好 API 金鑰和地區代碼，請將它們存儲在某個筆記中以備後用。
+### 擴充功能畫面總覽
 
-### 為擴充功能構建 HTML
+**設定畫面** - 初次使用者配置：
+![完成的擴充功能畫面截圖，顯示包含區域名稱和API金鑰輸入欄的表單。](../../../../translated_images/1.b6da8c1394b07491.tw.png)
 
-這個擴充功能有兩個視圖。一個用於收集 API 金鑰和地區代碼：
+**結果畫面** - 碳足跡資料展示：
+![完成的擴充功能結果畫面截圖，顯示 US-NEISO 區域的碳使用數值及化石燃料占比。](../../../../translated_images/2.1dae52ff08042246.tw.png)
 
-![瀏覽器中打開的已完成擴充功能截圖，顯示帶有地區名稱和 API 金鑰輸入的表單。](../../../../translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.tw.png)
+### 建立設定表單
 
-另一個用於顯示地區的碳使用情況：
+設定表單用於收集初次使用時的用戶資料。設定完成後，資料會儲存在瀏覽器中以供未來使用。
 
-![已完成擴充功能的截圖，顯示 US-NEISO 地區的碳使用值和化石燃料百分比。](../../../../translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.tw.png)
+在 `/dist/index.html` 檔案中，加入以下表單結構：
 
-我們先從構建表單的 HTML 開始，並用 CSS 進行樣式設置。
+```html
+<form class="form-data" autocomplete="on">
+    <div>
+        <h2>New? Add your Information</h2>
+    </div>
+    <div>
+        <label for="region">Region Name</label>
+        <input type="text" id="region" required class="region-name" />
+    </div>
+    <div>
+        <label for="api">Your API Key from tmrow</label>
+        <input type="text" id="api" required class="api-key" />
+    </div>
+    <button class="search-btn">Submit</button>
+</form>
+```
 
-在 `/dist` 文件夾中，您將構建一個表單和一個結果區域。在 `index.html` 文件中，填充表單區域：
+**此表單實現的功能：**
+- **建立**具語意的表單結構，配合適當標籤和輸入欄位關聯
+- **啟用**瀏覽器自動完成，提升使用者體驗
+- **使用** `required` 屬性，要求兩欄必填才能送出
+- **組織**輸入欄位具描述性的類別名稱，便利樣式與JavaScript操作
+- **提供**明確指示，協助首次設定擴充功能的使用者
 
-```HTML
-<form class="form-data" autocomplete="on">
-	<div>
-		<h2>New? Add your Information</h2>
-	</div>
-	<div>
-		<label for="region">Region Name</label>
-		<input type="text" id="region" required class="region-name" />
-	</div>
-	<div>
-		<label for="api">Your API Key from tmrow</label>
-		<input type="text" id="api" required class="api-key" />
-	</div>
-	<button class="search-btn">Submit</button>
-</form>	
-```  
-這是保存信息並將其輸入到本地存儲的表單。
+### 建立結果顯示畫面
 
-接下來，創建結果區域；在最後的表單標籤下方添加一些 div：
+接著，建立顯示碳足跡資料的區域。於表單下方加入此HTML結構：
 
-```HTML
+```html
 <div class="result">
-	<div class="loading">loading...</div>
-	<div class="errors"></div>
-	<div class="data"></div>
-	<div class="result-container">
-		<p><strong>Region: </strong><span class="my-region"></span></p>
-		<p><strong>Carbon Usage: </strong><span class="carbon-usage"></span></p>
-		<p><strong>Fossil Fuel Percentage: </strong><span class="fossil-fuel"></span></p>
-	</div>
-	<button class="clear-btn">Change region</button>
+    <div class="loading">loading...</div>
+    <div class="errors"></div>
+    <div class="data"></div>
+    <div class="result-container">
+        <p><strong>Region: </strong><span class="my-region"></span></p>
+        <p><strong>Carbon Usage: </strong><span class="carbon-usage"></span></p>
+        <p><strong>Fossil Fuel Percentage: </strong><span class="fossil-fuel"></span></p>
+    </div>
+    <button class="clear-btn">Change region</button>
 </div>
-```  
-此時，您可以嘗試構建。確保安裝此擴充功能的套件依賴項：
-
 ```
-npm install
-```  
-
-此命令將使用 npm（Node 套件管理器）來安裝 webpack，用於擴充功能的構建過程。您可以通過查看 `/dist/main.js` 來查看此過程的輸出——您會看到代碼已被打包。
 
-目前，擴充功能應該可以構建，並且如果您將其部署到 Edge 作為擴充功能，您會看到一個整齊顯示的表單。
+**此結構提供的功能拆解：**
+- **`loading`**：**顯示**API資料擷取時的讀取訊息
+- **`errors`**：**展示**API呼叫失敗或資料錯誤時的錯誤訊息
+- **`data`**：**保存**除錯用的原始資料
+- **`result-container`**：**呈現**格式化的碳足跡資訊給使用者
+- **`clear-btn`**：**允許**使用者變更區域並重新設定擴充功能
 
-恭喜您，您已經邁出了構建瀏覽器擴充功能的第一步。在後續課程中，您將使其更加實用和功能強大。
-
----
+### 設定建置流程
 
-## 🚀 挑戰
+現在安裝專案依賴，並測試建置流程：
 
-瀏覽一個瀏覽器擴充功能商店並安裝一個擴充功能到您的瀏覽器。您可以用有趣的方式檢查其文件。您發現了什麼？
+```bash
+npm install
+```
 
-## 課後測驗
+**此安裝流程完成的工作：**
+- **下載**Webpack 及 package.json 指定的其他開發依賴套件
+- **設定**建置工具鏈，編譯現代JavaScript程式碼
+- **準備**開發環境以構建並測試擴充功能
+- **啟用**程式碼打包、優化與跨瀏覽器相容功能
 
-[課後測驗](https://ff-quizzes.netlify.app/web/quiz/24)
+> 💡 **建置流程洞察**：Webpack 會將您 `/src/index.js` 的原始碼打包成 `/dist/main.js`，優化您的程式碼以用於正式環境並確保瀏覽器兼容。
 
-## 回顧與自學
+### 測試您的進度
 
-在本課中，您學習了一些關於網頁瀏覽器歷史的知識；利用這個機會，通過閱讀更多相關歷史來了解萬維網的發明者如何設想它的用途。一些有用的網站包括：
+此時，您可以測試您的擴充功能：
+1. **執行** build 指令以編譯你的程式碼  
+2. **載入** 擴充功能到瀏覽器，使用開發者模式  
+3. **確認** 表單正確顯示且專業美觀  
+4. **檢查** 所有表單元素是否正確對齊且可正常使用  
+
+**你已完成的事項：**  
+- **建立** 擴充功能的基礎 HTML 結構  
+- **創建** 具語義化標記的設定與結果介面  
+- **設置** 使用業界標準工具的現代化開發流程  
+- **準備** 新增互動式 JavaScript 功能的基礎  
+
+### 🔄 **教學檢核**  
+**擴充功能開發進度**：在繼續前確認你的理解：  
+- ✅ 你能說明專案結構中各檔案的用途嗎？  
+- ✅ 你了解建置流程如何轉換原始碼嗎？  
+- ✅ 為什麼要將設定與結果分成不同的 UI 區塊？  
+- ✅ 表單結構如何支援易用性與無障礙？  
+
+**開發流程理解**：你現在應該能夠：  
+1. **修改**擴充功能介面的 HTML 與 CSS  
+2. **執行** build 指令編譯變更  
+3. **重新載入**瀏覽器中的擴充功能以測試更新  
+4. **使用**瀏覽器開發者工具進行除錯  
+
+你已完成瀏覽器擴充功能開發的第一階段。正如萊特兄弟在成功飛行前必須理解空氣動力學，理解這些基礎概念能幫助你在下一課中建造更多複雜的互動功能。  
+
+## GitHub Copilot Agent 挑戰 🚀  
+
+使用 Agent 模式完成以下挑戰：  
+
+**說明：** 透過新增表單驗證與用戶回饋功能來提升擴充功能使用者在輸入 API 金鑰與區域代碼時的體驗。  
+
+**提示：** 建立 JavaScript 驗證函式，檢查 API 金鑰欄位至少含有 20 個字元，並確保區域代碼格式正確（例如 'US-NEISO'）。加入視覺反饋，將輸入框框的邊框顏色改為綠色表示有效，紅色表示無效。另增設切換功能以顯示/隱藏 API 金鑰以確保安全。  
+
+想了解更多 [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode)。  
+
+## 🚀 挑戰  
+
+瀏覽擴充功能商店並安裝一個到你的瀏覽器，觀察其檔案構成，有什麼發現？  
+
+## 課後測驗  
+
+[課後測驗](https://ff-quizzes.netlify.app/web/quiz/24)  
+
+## 複習與自學  
+
+本課你稍微了解了網頁瀏覽器的歷史；趁此機會多讀一些關於萬維網發明者如何設想網路用途的歷史資料。以下幾個網站很有參考價值：  
+
+[網頁瀏覽器歷史](https://www.mozilla.org/firefox/browsers/browser-history/)  
+
+[網路歷史](https://webfoundation.org/about/vision/history-of-the-web/)  
+
+[提姆·柏納斯-李訪談](https://www.theguardian.com/technology/2019/mar/12/tim-berners-lee-on-30-years-of-the-web-if-we-dream-a-little-we-can-get-the-web-we-want)  
+
+### ⚡ **接下來 5 分鐘內可以做的事**  
+- [ ] 開啟 Chrome/Edge 擴充功能頁面（chrome://extensions）並瀏覽已安裝項目  
+- [ ] 載入網頁時檢視瀏覽器開發者工具的 Network 分頁  
+- [ ] 嘗試查看頁面原始碼（Ctrl+U），了解 HTML 結構  
+- [ ] 檢視任何網頁元素並於 DevTools 調整其 CSS  
+
+### 🎯 **本小時可完成的目標**  
+- [ ] 完成課後測驗並理解瀏覽器基礎  
+- [ ] 建立基本的 manifest.json 瀏覽器擴充功能檔案  
+- [ ] 製作簡易的「Hello World」擴充功能，並顯示彈出窗口  
+- [ ] 測試在開發者模式下載入你的擴充功能  
+- [ ] 瀏覽目標瀏覽器的擴充功能文件  
+
+### 📅 **你的週期擴充功能旅程**  
+- [ ] 完成一個具備實用功能的瀏覽器擴充功能  
+- [ ] 了解內容腳本、背景腳本與彈出視窗互動  
+- [ ] 精通瀏覽器 API，如儲存、分頁與訊息傳遞  
+- [ ] 設計使用者友善的擴充功能介面  
+- [ ] 測試你的擴充功能於不同網站與使用情境  
+- [ ] 發布擴充功能到瀏覽器擴充商店  
+
+### 🌟 **你的月度瀏覽器開發目標**  
+- [ ] 建置多個解決不同用戶需求的擴充功能  
+- [ ] 學習進階瀏覽器 API 及安全最佳實踐  
+- [ ] 貢獻開源瀏覽器擴充功能專案  
+- [ ] 精通跨瀏覽器相容性與漸進式增強技巧  
+- [ ] 創造擴充功能開發工具與模板供他人使用  
+- [ ] 成為協助其他開發者的瀏覽器擴充功能專家  
+
+## 🎯 你的瀏覽器擴充功能精通時間表  
+
+```mermaid
+timeline
+    title 瀏覽器擴充功能開發進度
+    
+    section 基礎 (15 分鐘)
+        瀏覽器理解: 核心架構
+                   : 渲染流程
+                   : 擴充功能整合點
+        
+    section 設置 (20 分鐘)
+        開發環境: 專案結構
+                 : 編譯工具配置
+                 : 瀏覽器開發者模式
+                 : 擴充功能載入流程
+        
+    section 介面設計 (25 分鐘)
+        使用者體驗: HTML 結構
+                   : CSS 樣式
+                   : 表單驗證
+                   : 響應式設計
+        
+    section 核心功能 (35 分鐘)
+        JavaScript 整合: 事件處理
+                       : API 互動
+                       : 資料儲存
+                       : 錯誤處理
+        
+    section 瀏覽器 API (45 分鐘)
+        平台整合: 權限系統
+                 : 儲存 API
+                 : 分頁管理
+                 : 內容選單
+        
+    section 進階功能 (1 週)
+        專業擴充功能: 背景腳本
+                    : 內容腳本
+                    : 跨瀏覽器相容性
+                    : 效能優化
+        
+    section 發佈 (2 週)
+        發行: 商店提交
+            : 審核流程
+            : 使用者回饋
+            : 更新管理
+        
+    section 專家級 (1 個月)
+        擴充功能生態系: 進階 API
+                      : 安全最佳實踐
+                      : 企業功能
+                      : 框架整合
+```  
+### 🛠️ 你的擴充功能開發工具箱摘要  
 
-[網頁瀏覽器的歷史](https://www.mozilla.org/firefox/browsers/browser-history/)
+完成本課後，你已具備：  
+- **瀏覽器架構知識**：了解渲染引擎、安全模型與擴充功能整合  
+- **開發環境**：現代化開發工具鏈，包含 Webpack、NPM 與除錯功能  
+- **介面設計基礎**：語義化的 HTML 結構與逐步揭露設計模式  
+- **安全意識**：瀏覽器權限與安全開發實務的理解  
+- **跨瀏覽器概念**：相容性考量與測試方法的知識  
+- **API 整合**：與外部資料來源合作的基礎  
+- **專業工作流程**：業界標準的開發與測試程序  
 
-[網頁的歷史](https://webfoundation.org/about/vision/history-of-the-web/)
+**實務應用範圍**：這些技能直接適用於  
+- **網頁開發**：單頁應用程式（SPA）與漸進式網頁應用（PWA）  
+- **桌面應用**：Electron 與基於網路的桌面軟體  
+- **行動裝置開發**：混合式與網頁行動應用  
+- **企業工具**：內部生產力應用與工作流程自動化  
+- **開源專案**：參與瀏覽器擴充功能與網頁標準開發  
 
-[蒂姆·伯納斯-李的訪談](https://www.theguardian.com/technology/2019/mar/12/tim-berners-lee-on-30-years-of-the-web-if-we-dream-a-little-we-can-get-the-web-we-want)
+**下一階段**：你已準備好新增互動功能、使用瀏覽器 API，並創建解決實際使用者問題的擴充功能！  
 
-## 作業
+## 作業  
 
-[重新設計您的擴充功能](assignment.md)
+[重新設計你的擴充功能](assignment.md)
 
 ---
 
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
 **免責聲明**：  
-本文件使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。應以原始語言的文件作為權威來源。對於關鍵資訊，建議尋求專業人工翻譯。我們對因使用此翻譯而產生的任何誤解或錯誤解讀概不負責。
\ No newline at end of file
+本文件係使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們努力確保翻譯準確，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件之母語版本應視為權威來源。對於關鍵資訊，建議採用專業人工翻譯。本公司對於因使用本翻譯而產生的任何誤解或曲解概不負責。
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->
\ No newline at end of file