LESSON-24 · solution
這一頁不是直接複製答案；先逐檔看差異、修改原因與驗收證據，再把需要的改動帶回自己的資料夾。 這頁用 可觀察證據 和 anchor 指出下一個動作。
這一頁的結果：所有相關檔案可開啟或閱讀；沒有 TODO、CHECKPOINT 或 placeholder；能說明每個檔案為何改動
工作方式：先把這一階段複製到自己的工作資料夾，開啟 files/index.html，記下修改前的畫面、DOM、Console 或 Network狀態。
會用到的檔案：index.html、products.html、css/style.css
本堂焦點：建立黃色／鐵灰品牌 shell、首頁與商品入口
一次只做一張卡。完成後先重新整理入口，再留下證據，才進入下一張。
現在要做：先對照差異，再檢查 在 css/style.css 的「brand tokens」對照這項變更：:root { --brand-yellow:#f5c400; --iron:#343a40; --surface:#f6f3e8; --sale-red:#c62828; }
貼上位置：css/style.css 的 brand tokens 區塊
:root { --brand-yellow:#f5c400; --iron:#343a40; --surface:#f6f3e8; --sale-red:#c62828; }預期結果：主要 CTA 使用黃色、文字與表面使用鐵灰系，紅色只出現在 .sale-badge／特價文字。
驗收證據：Styles／Computed 的 token 值、全檔紅色 selector 搜尋與對比證據。
常見錯誤：只複製完整答案，卻沒有先理解這一項差異的責任。
第一個檢查：只對照目前差異指定的檔案與 anchor。
現在要做：先對照差異，再檢查 在 六個 HTML 的「shared shell navigation」對照這項變更：<nav aria-label="主要導覽"><a href="index.html">首頁</a><a href="products.html">商品</a><a href="cart.html">購物車</a><a href="contact.html">聯絡我們</a></nav>
貼上位置：六個 HTML 的 shared shell navigation 區塊
<nav aria-label="主要導覽"><a href="index.html">首頁</a><a href="products.html">商品</a><a href="cart.html">購物車</a><a href="contact.html">聯絡我們</a></nav>預期結果：六頁互相可達，每頁只有一個 main／h1／aria-current=page，第一次 Tab 可看見 skip link。
驗收證據：六個 URL、Elements landmark 數量、aria-current 數量與純 Tab 操作。
常見錯誤：只複製完整答案，卻沒有先理解這一項差異的責任。
第一個檢查：只對照目前差異指定的檔案與 anchor。
現在要做：先對照差異，再檢查 在 index.html 的「hero and featured products entry」對照這項變更：<h1>把訓練帶回家</h1><a class="button button--primary" href="products.html">選購運動器材</a><section id="featured-products" aria-labelledby="featured-title"><h2 id="featured-title">精選器材</h2></section>
貼上位置：index.html 的 hero and featured products entry 區塊
<h1>把訓練帶回家</h1><a class="button button--primary" href="products.html">選購運動器材</a><section id="featured-products" aria-labelledby="featured-title"><h2 id="featured-title">精選器材</h2></section>預期結果：首頁唯一 h1、主要 CTA 真實指向 products.html，精選區有可辨識標題與本地圖片位置。
驗收證據：畫面、href、Elements heading order、Network 本地資源與 390px 截圖。
常見錯誤：只複製完整答案，卻沒有先理解這一項差異的責任。
第一個檢查：只對照目前差異指定的檔案與 anchor。
現在要做：先對照差異，再檢查 在 index.html 的「products CTA href」對照這項變更：<a class="button button--primary" href="products.html">選購運動器材</a>
貼上位置：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。
常見錯誤：只複製完整答案，卻沒有先理解這一項差異的責任。
第一個檢查：只對照目前差異指定的檔案與 anchor。
完整檔案收在可展開的卡片中；先完成上方微步驟，再用這裡查閱與複製。檔案位置要和目前的相對路徑一致。
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 · solution</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></aside></section></main><footer><p>LESSON-24 solution｜本階段只做 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 · solution</p><h1>商品入口</h1><section class="entry"><h2>商品清單將在 L25 接上 local mock</h2><p>目前不讀 API、不建立購物車。</p></section></main><footer><p>LESSON-24 solution｜本階段只做 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%}}Solution 對照完成後，回到 README 整理證據，並準備下一堂課的先備知識。
開啟 examples/supplement/index.html；自學檔案不混入 Solution files。