LESSON-24 · starter
你會依序完成3個本堂專屬微步驟；每一步只修改一個責任，看到結果後才進下一步。 這頁用 可觀察證據 和 anchor 指出下一個動作。
這一頁的結果：入口頁可以開啟
工作方式：先把這一階段複製到自己的工作資料夾，開啟 files/index.html，記下修改前的畫面、DOM、Console 或 Network狀態。
會用到的檔案：index.html、products.html、css/style.css
本堂焦點：建立黃色／鐵灰品牌 shell、首頁與商品入口
一次只做一張卡。完成後先重新整理入口，再留下證據，才進入下一張。
現在要做：請在 css/style.css 的「brand tokens」完成：建立黃色、鐵灰、表面與少量紅色特價 token，並限定 token 的用途
貼上位置：css/style.css：brand tokens 區塊。
:root { --brand-yellow:#f5c400; --iron:#343a40; --surface:#f6f3e8; --sale-red:#c62828; }預期結果：主要 CTA 使用黃色、文字與表面使用鐵灰系，紅色只出現在 .sale-badge／特價文字。
驗收證據：Styles／Computed 的 token 值、全檔紅色 selector 搜尋與對比證據。
常見錯誤：把紅色套在整個 header／按鈕，或在元件內硬編另一組品牌色。
第一個檢查：先搜尋所有紅色值，確認只由 --sale-red 且只命中特價語意。
現在要做：請在 六個 HTML 的「shared shell navigation」完成：在 index、products、cart、checkout、order-success、contact 建立 skip link、header/nav/main/footer 與唯一 aria-current
貼上位置：六個 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 操作。
常見錯誤：只更新首頁、複製後六頁都保留 aria-current，或用 # 代替真實頁面。
第一個檢查：先從 products.html 逐一點四個導覽，再數 [aria-current='page']。
現在要做：請在 index.html 的「hero and featured products entry」完成：完成運動器材 hero、前往 products.html 的主要 CTA 與精選商品入口
貼上位置：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 截圖。
常見錯誤：CTA 指向不存在的 services.html，或用按鈕 click 才能導航。
第一個檢查：先檢查 CTA 是否是有真實 href 的 a，再用 Network 確認 products.html 200。
完整檔案收在可展開的卡片中；先完成上方微步驟，再用這裡查閱與複製。檔案位置要和目前的相對路徑一致。
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 · starter</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><!-- TODO-1：先補上首頁的唯一 h1、主要 CTA 與商品入口責任。 --></p></aside></section></main><footer><p>LESSON-24 starter｜本階段只做 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 · starter</p><h1>商品入口</h1><section class="entry"><h2>商品清單將在 L25 接上 local mock</h2><p>目前不讀 API、不建立購物車。</p></section></main><footer><p>LESSON-24 starter｜本階段只做 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 與 TabStarter 完成後，不要直接看 Solution；先前往 Checkpoint，自己找出最後一個核心缺口。