照這個順序做：三個小步驟
一次只做一張卡；完成後重新整理，確認結果，再進入下一張。
目的：先讓頁面有屬於自己的身份，再觀察分頁與畫面文字分別來自哪裡。
修改檔案：files/index.html
程式碼位置：頁面身份。
現在要做：請在 index.html 的「頁面身份」位置完成：修改商家名稱、title、h1 與品牌介紹
貼上位置：index.html：頁面身份 區塊，先保留同一檔案的其他內容。。
<title>安心到府服務｜首頁</title>
<a class="brand" href="index.html">安心到府服務</a>
<h1>讓日常維護變得簡單</h1>
<p class="page-description">我們提供可靠、清楚而且容易開始的到府維護服務。</p>
預期結果：分頁 title、頁首品牌、h1 與品牌介紹都換成自己的商家內容。
驗收證據：分頁文字、畫面 h1、品牌段落與檔案中的內容可以逐一對照。
卡住時先看這裡
常見錯誤：只改畫面上的 h1，忘記同步 title 或品牌介紹。
第一個檢查：只在 index.html 搜尋 title、h1 與 page-description，確認四個位置都已修改。
目的：把呈現責任留在 CSS 檔案，讓盒子有可觀察的外觀變化。
修改檔案：files/css/style.css
程式碼位置：.page-shell。
現在要做：請在 css/style.css 的「.page-shell」位置完成：補上容器的邊框與內距，確認 CSS 確實被載入
貼上位置：css/style.css：.page-shell 區塊，先保留同一檔案的其他內容。。
.page-shell {
padding: 2rem;
border: 1px solid #cbd8e4;
}
預期結果：白色內容盒出現邊框與留白，窄版仍沒有水平捲軸。
驗收證據：Styles 命中 .page-shell，Computed 可看到 padding 與 border。
卡住時先看這裡
常見錯誤：把 CSS 宣告貼進 HTML 文字區，或只看畫面不看 Computed。
第一個檢查：先確認 Network 的 CSS 是成功狀態，再在 Elements 點 .page-shell 查看 Computed。
目的：讓 JavaScript 是否成功載入可以被 Console 與畫面共同證明。
修改檔案：files/js/main.js
程式碼位置：lesson-behavior-slot。
現在要做：請在 js/main.js 的「lesson-behavior-slot」位置完成：留下 JavaScript 載入訊息，並保留按鈕操作結果
貼上位置：js/main.js：lesson-behavior-slot 區塊，先保留同一檔案的其他內容。。
status.textContent = "環境：資源已接通";
console.log("環境：資源已接通");
預期結果：重新整理後 Console 出現「環境：資源已接通」，按鈕後狀態文字與 Console 都有操作結果。
驗收證據：Network 的 js/main.js 成功，Console 有載入訊息與按鈕操作訊息，畫面 status 也更新。
卡住時先看這裡
常見錯誤：只修改檔案卻沒有重新整理入口頁，或把訊息寫到不存在的元素。
第一個檢查：先看 Network 的 js/main.js 是否成功，再確認 index.html 有 id="status" 與 id="action"。