Web-Dev-For-Beginners/translations/zh-TW/1-getting-started-lessons/1-intro-to-programming-lang.../assignment.md

# Assignment: 探索現代網頁開發工具

## Instructions

網頁開發生態系統包含數百種專門的工具，幫助開發人員高效地構建、測試和維護應用程式。你的任務是研究並了解能夠補充本課程所涵蓋工具的其他工具。

**你的任務：** 選擇 **三種未在本課程中涵蓋的工具**（避免選擇已列出的程式碼編輯器、瀏覽器或命令列工具）。聚焦於解決現代網頁開發工作流程中特定問題的工具。

**對每個工具，請提供：**

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) 進行翻譯。雖然我們致力於確保準確性，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件之母語版本應視為權威來源。對於重要資訊，建議使用專業人工翻譯。對於因使用本翻譯而產生之任何誤解或誤釋，我們概不負責。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->