LESSON-02 · starter
Starter 先完成三個小成果；每次只處理一個 HTML 責任，看到證據後再進下一步。 本頁以 HTML-only 與 href 作為觀察焦點。
環境：只使用 HTML、瀏覽器與 DevTools，不需要 CSS、JavaScript 或框架。
入口：開啟 Starter 可執行入口，先確認頁面能開啟。
本階段只改：index.html；services.html 是連結要前往的頁面。
一次只做一張卡；完成後重新整理，確認結果，再進入下一張。
目的：先建立瀏覽器與讀者都能理解的頁面骨架。
修改檔案：index.html
程式碼位置：文件骨架
現在要做：請在 index.html 的「文件骨架」位置完成：建立 header、main 與唯一的 h1
貼上位置：index.html：文件骨架 區塊，先保留同一檔案的其他內容。
<header>
<p>安心服務商家</p>
</header>
<main>
<h1>讓日常維護變得簡單</h1>
</main>預期結果：Elements 的 body 下出現一個 header、一個 main，而且只有一個 h1。
驗收證據：Elements 展開 body，確認 header、main、h1 各只有一個。
常見錯誤：把 h1 放在 head，或為了補內容又複製一個 main。
第一個檢查：先在 Elements 展開 body，只檢查 header、main、h1 的數量。
目的：讓訪客只讀標題也能理解品牌介紹與服務內容的分區。
修改檔案：index.html
程式碼位置：content-sections
現在要做：請在 index.html 的「content-sections」位置完成：建立兩個有 h2 的內容 section
貼上位置：index.html：content-sections 區塊，先保留同一檔案的其他內容。
<section id="about">
<h2>關於安心服務</h2>
<p>把商家能解決的問題說清楚。</p>
</section>
<section id="services">
<h2>服務內容</h2>
<p>讓訪客知道可以從哪一項服務開始。</p>
</section>預期結果：Elements 顯示兩個 section，每個 section 都有一個 h2。
驗收證據：檢查 section 數量為 2，並確認每個 section 內都有 h2。
常見錯誤：只增加 h2 沒有 section，或把兩個內容塞進同一個 section。
第一個檢查：先搜尋頁面中的 section 與 h2，確認數量和巢狀關係。
目的：把頁面內容接到訪客下一步，並練習同層相對路徑。
修改檔案：index.html
程式碼位置：primary-action
現在要做：請在 index.html 的「primary-action」位置完成：加入通往 services.html 的文字連結
貼上位置：index.html：primary-action 區塊，先保留同一檔案的其他內容。
<a href="services.html">查看服務方案</a>預期結果：點擊主要行動連結後，瀏覽器前往同資料夾的 services.html。
驗收證據：網址列顯示 services.html，Network 對該 HTML 回應 200。
常見錯誤：把連結寫成沒有 href 的文字，或把 services 拼成 service。
第一個檢查：先確認 index.html 與 services.html 在同一個資料夾，再逐字比對 href。
可執行入口與檔案連結：開啟 starter 入口 · index.html · services.html
header/main/section/h1/h2 結構、網址列的 services.html、Network 的 404→200 與鍵盤 focus三個 HTML 小成果完成後，不要直接看 Solution；先到 Checkpoint，自己找出最後一個核心缺口。