LESSON-23 · checkpoint

專案規劃與設計

主要結構已經完成，只留下本堂一個核心缺口。先預測，再從指定檔案找出它。這頁用可觀察證據和 anchor 指出下一個動作。

Starter4 個小成果

Checkpoint一個核心缺口

Solution5 個差異

開始前確認

這一頁的結果：規劃入口可以開啟

工作方式：先把這一階段複製到自己的工作資料夾，開啟 files/index.html，記下修改前的畫面、Elements、Console、鍵盤 focus 與 brief 內容狀態。

會用到的檔案：index.html、style.css、main.js、project-brief.md、evidence.md

本堂焦點：把服務型商家需求整理成可執行的 project brief

照這個順序做

一次只做一張卡。完成後先重新整理入口，再留下證據，才進入下一張。

目的

把規劃從描述文件收斂成之後可以逐項檢查的交付契約。

修改檔案

project-brief.md

程式碼位置

Acceptance checklist

現在要做：請在 project-brief.md 的「Acceptance checklist」位置完成：補上剩餘三項驗收條件與 evidence.md 證據格式

貼上位置：project-brief.md：Acceptance checklist 區塊，先保留同一檔案的其他內容。

- [ ] 四個頁面檔名與每頁責任已在 sitemap 對照
- [ ] P0 任務都有清楚的訪客動作與預期結果
- [ ] 390px 與純 Tab 操作的觀察方式已寫出
- evidence.md 記錄檔案、操作、預期、實際與結果

預期結果：清單至少涵蓋四頁檔案、主要任務與窄版／鍵盤觀察，且 evidence.md 能記錄預期與實際結果。

驗收證據：project-brief.md 有四項 checklist；evidence.md 有檔案、操作、預期、實際與結果欄位。

卡住時先看這裡

常見錯誤：只寫『完成』『好看』，或把驗收條件藏在講師口頭說明。

第一個檢查：只檢查 Acceptance checklist 是否從一項變成四項，再開 evidence.md 對照欄位。

階段檔案

完整檔案收在可展開的卡片中；先完成上方微步驟，再用這裡查閱與複製。檔案位置要和目前的相對路徑一致。

開啟 checkpoint 的可執行入口

開啟index.html離線預覽入口：將 project brief 的頁面規劃呈現成可觀察清單。
開啟style.css呈現層：控制規劃預覽、按鈕 focus 與窄版可讀性。
開啟main.js觀察腳本：讀取實際 li 數量，更新 status 並留下 Console 證據。
開啟project-brief.md規劃契約：記錄角色、sitemap、user tasks、優先級與驗收條件。
開啟evidence.md驗收紀錄：保存修改檔案、操作、預期、實際與結果。

index.html離線預覽入口：將 project brief 的頁面規劃呈現成可觀察清單。

這段要貼在哪裡：先在自己的工作資料夾建立同名相對位置，再複製內容。

<!doctype html>
<html lang="zh-Hant">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>LESSON-23｜Project brief 規劃練習｜checkpoint</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="page-shell">
    <p class="eyebrow">LESSON-23 · checkpoint</p>
    <h1>Project brief 規劃預覽</h1>
    <p class="page-description">這份入口已能顯示四頁規劃；請回到 project-brief.md 補齊 Acceptance checklist。</p>
    <section class="project-preview" aria-labelledby="preview-title">
      <h2 id="preview-title">網站地圖草稿</h2>
      <p>這是規劃成果的離線預覽，不代表四個正式頁面已完成。</p>
      <ol id="page-plan">
    <li><strong>首頁</strong>｜index.html｜建立信任並引導查看服務</li>
    <li><strong>服務</strong>｜services.html｜讓訪客比較方案</li>
    <li><strong>關於</strong>｜about.html｜說明背景與服務方式</li>
    <li><strong>聯絡</strong>｜contact.html｜收集諮詢需求</li>
      </ol>
    </section>
    <p id="baseline-status" class="status" role="status" aria-live="polite">尚未檢查規劃預覽</p>
    <button id="baseline-action" type="button">檢查預覽項目</button>
  </main>
  <script src="main.js" defer></script>
</body>
</html>

style.css呈現層：控制規劃預覽、按鈕 focus 與窄版可讀性。

這段要貼在哪裡：先在自己的工作資料夾建立同名相對位置，再複製內容。

:root { font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans TC", sans-serif; color: #17324d; background: #f5f8fb; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; line-height: 1.7; }
.page-shell { width: min(100% - 2rem, 760px); margin: 2rem auto; padding: 2rem; border: 1px solid #cbd8e4; border-radius: 20px; background: #fff; }
.eyebrow { color: #176b87; font-weight: 800; letter-spacing: .06em; }
.page-description { color: #52657d; }
.project-preview { margin-top: 1.5rem; }
.project-preview ol { display: grid; gap: .75rem; padding-left: 1.5rem; }
.project-preview li { padding: .75rem; border: 1px solid #d7e0eb; border-radius: .75rem; background: #f8fbfd; }
.status { min-height: 2rem; color: #17643d; font-weight: 700; }
button { padding: .65rem .9rem; border: 0; border-radius: 9px; background: #176b87; color: #fff; font: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 3px; }
@media (max-width: 560px) { .page-shell { margin: 1rem auto; padding: 1rem; } h1 { font-size: 1.65rem; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto; } }

main.js觀察腳本：讀取實際 li 數量，更新 status 並留下 Console 證據。

這段要貼在哪裡：先在自己的工作資料夾建立同名相對位置，再複製內容。

const planList = document.querySelector("#page-plan");
const status = document.querySelector("#baseline-status");
const action = document.querySelector("#baseline-action");

function inspectPlan() {
  const count = planList ? planList.querySelectorAll("li").length : 0;
  if (status) status.textContent = "目前預覽有 " + count + " 個頁面項目";
  console.log("LESSON-23：實際預覽項目數", count);
}

if (action) action.addEventListener("click", inspectPlan);
console.log("LESSON-23：規劃預覽入口已載入");

project-brief.md規劃契約：記錄角色、sitemap、user tasks、優先級與驗收條件。

這段要貼在哪裡：先在自己的工作資料夾建立同名相對位置，再複製內容。

# Project brief｜安心到府服務

## 角色與目標

- 目標商家：安心到府服務
- 訪客：第一次尋找居家維護的屋主
- 目標：理解方案後送出諮詢

## Sitemap table

| 頁面 | URL | 主要責任 | 主要 CTA |
| --- | --- | --- | --- |
| 首頁 | index.html | 建立信任並引導查看服務 | 查看服務方案 |
| 服務 | services.html | 讓訪客比較方案 | 了解適合方案 |
| 關於 | about.html | 說明背景與服務方式 | 認識我們如何協助 |
| 聯絡 | contact.html | 收集諮詢需求 | 送出諮詢 |

## User tasks 與 priority

| 優先級 | User task |
| --- | --- |
| P0 | 當我是第一次訪客，我想理解服務並前往服務頁，以便判斷是否適合。 |
| P0 | 當我找到合適方案，我想送出諮詢，以便開始聯絡。 |
| P1 | 當我想確認商家可信度，我想閱讀關於頁，以便降低疑慮。 |
| P2 | 當我想快速回到服務頁，我想使用主要導覽，以便縮短尋找時間。 |

## Acceptance checklist

- [ ] 規劃入口可以開啟
<!-- CHECKPOINT-1：Acceptance checklist 仍只有一項，請補上四頁、P0 任務、390px／Tab 與 evidence.md 條件。 -->

## 範圍

- 本堂只做 planning-only 規劃，不建立真正四頁、不連外部服務、不部署。

evidence.md驗收紀錄：保存修改檔案、操作、預期、實際與結果。

這段要貼在哪裡：先在自己的工作資料夾建立同名相對位置，再複製內容。

# 驗收證據

| 欄位 | 紀錄 |
| --- | --- |
| 修改檔案 | project-brief.md |
| 操作 | 先數 checklist，再補三項條件，開啟規劃預覽 |
| 預期 | 四項 checklist 可以逐項檢查 |
| 實際 | 請在自己的資料夾填寫 |
| 結果 | 請在自己的資料夾填寫 |

完成驗收

規劃入口可以開啟
先觀察只有一項 checklist 的 brief
補完後四項 checklist 與 evidence.md 欄位可逐項對照
留下入口網址、修改檔案、操作步驟、預期結果與實際觀察。

下一步

Checkpoint 完成後，先說出你修正的原因，再前往 Solution 對照每個檔案差異。

前往 Solution，逐檔對照差異