LESSON-24 · checkpoint
主要結構已經完成，只留下本堂一個核心缺口。先預測，再從指定檔案找出它。 這頁用 可觀察證據 和 anchor 指出下一個動作。
這一頁的結果：入口頁可以開啟
工作方式：先把這一階段複製到自己的工作資料夾，開啟 files/index.html，記下修改前的畫面、DOM、Console 或 Network狀態。
會用到的檔案：index.html、products.html、css/style.css
本堂焦點：建立黃色／鐵灰品牌 shell、首頁與商品入口
一次只做一張卡。完成後先重新整理入口，再留下證據，才進入下一張。
現在要做：請在 index.html 的「products CTA href」完成：把錯誤的 product.html 修成 products.html
貼上位置：index.html：products CTA href 區塊。
<a class="button button--primary" href="products.html">選購運動器材</a>預期結果：修正後首頁主要 CTA 開啟 products.html 且 Network 回應 200。
驗收證據：修正前 product.html 404、修正後 products.html 200。
常見錯誤：建立另一個 product.html 掩蓋錯誤，或改成 href=#products。
第一個檢查：只比對實際檔名與首頁主要 CTA 的 href。
完整檔案收在可展開的卡片中；先完成上方微步驟，再用這裡查閱與複製。檔案位置要和目前的相對路徑一致。
index.html鐵刻運動電商頁面或發佈檔案。products.html鐵刻運動電商頁面或發佈檔案。css/style.css黃色與鐵灰共用樣式：包含響應式版面、focus 與可讀狀態。index.html鐵刻運動電商頁面或發佈檔案。這段要貼在哪裡：先在自己的工作資料夾建立同名相對位置，再複製內容。
<!doctype html><html lang="zh-Hant"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>首頁｜鐵刻運動</title><link rel="stylesheet" href="css/style.css"></head><body><a class="skip" href="#main">跳到主要內容</a><header><a href="index.html"><strong>鐵刻運動</strong></a><nav aria-label="主要導覽"><a aria-current="page" href="index.html">首頁</a><a href="products.html">商品</a></nav></header><main id="main"><section class="hero"><div><p>LESSON-24 · checkpoint</p><h1>把每一次訓練，練成你的底氣。</h1><p>黃色與鐵灰的運動器材電商首頁 shell。</p><a class="cta" href="products.html">前往商品入口</a></div><aside class="entry"><h2>本章邊界</h2><p>只完成語意 layout、相對連結、aria-current 與響應式入口；購物車從 L25 開始。</p><p><!-- CHECKPOINT-1：先確認 products.html 的相對路徑與 aria-current，再進入完整 Solution。 --></p></aside></section></main><footer><p>LESSON-24 checkpoint｜本階段只做 shell、首頁與商品入口。</p></footer></body></html>products.html鐵刻運動電商頁面或發佈檔案。這段要貼在哪裡：先在自己的工作資料夾建立同名相對位置，再複製內容。
<!doctype html><html lang="zh-Hant"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>商品入口｜鐵刻運動</title><link rel="stylesheet" href="css/style.css"></head><body><a class="skip" href="#main">跳到主要內容</a><header><a href="index.html"><strong>鐵刻運動</strong></a><nav aria-label="主要導覽"><a href="index.html">首頁</a><a aria-current="page" href="products.html">商品</a></nav></header><main id="main"><p>LESSON-24 · checkpoint</p><h1>商品入口</h1><section class="entry"><h2>商品清單將在 L25 接上 local mock</h2><p>目前不讀 API、不建立購物車。</p></section></main><footer><p>LESSON-24 checkpoint｜本階段只做 shell、首頁與商品入口。</p></footer></body></html>css/style.css黃色與鐵灰共用樣式：包含響應式版面、focus 與可讀狀態。這段要貼在哪裡：先在自己的工作資料夾建立同名相對位置，再複製內容。
:root{font-family:system-ui;color:#20242a;background:#f6f7f8;--yellow:#f6c90e;--iron:#303841}*{box-sizing:border-box}body{margin:0;line-height:1.7}a{color:inherit}.skip{position:absolute;left:-10000px}.skip:focus{left:1rem;top:1rem;background:#fff;padding:.5rem}header,nav{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}header{padding:1rem;color:#fff;background:var(--iron);border-bottom:4px solid var(--yellow)}nav{margin-left:auto}[aria-current=page]{color:#20242a;background:var(--yellow);padding:.35rem .6rem;border-radius:999px}main{width:min(100% - 2rem,72rem);margin:auto;padding:clamp(2rem,7vw,5rem) 0}.hero{display:grid;grid-template-columns:1.4fr 1fr;gap:2rem}.cta{display:inline-block;padding:.7rem 1rem;background:var(--yellow);font-weight:800;text-decoration:none}.entry{padding:1rem;background:#fff;border:1px solid #c7ccd2}:focus-visible{outline:4px solid var(--yellow);outline-offset:3px}@media(max-width:600px){.hero{grid-template-columns:1fr}nav{margin-left:0;width:100%}}h1/商品 CTA、黃色鐵灰 token、紅色只用於特價、390px 與 TabCheckpoint 完成後，先說出你修正的原因，再前往 Solution 對照每個檔案差異。