LESSON-01 · starter
你會依序完成3個本堂專屬微步驟；每一步只修改一個責任，看到結果後才進下一步。 這頁用 可觀察證據 和 anchor 指出下一個動作。
這一頁的結果：入口頁可以開啟
工作方式：先把這一階段複製到自己的工作資料夾，開啟 files/index.html，記下修改前的畫面、DOM、Console 或 Network狀態。
會用到的檔案：index.html、css/style.css、js/main.js
本堂焦點：建立可預覽、可除錯的前端檔案結構
一次只做一張卡。完成後先重新整理入口，再留下證據，才進入下一張。
現在要做：請在 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/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。
現在要做：請在 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"。
完整檔案收在可展開的卡片中；先完成上方微步驟，再用這裡查閱與複製。檔案位置要和目前的相對路徑一致。
index.html入口檔案：從這份 HTML 開始觀察本堂主題結果。css/style.css呈現層：只放本堂實作需要觀察的 CSS 規則。js/main.js行為層：處理本堂操作、狀態與 Console 驗收訊息。index.html入口檔案：從這份 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="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' rx='4' fill='%23176b87'/%3E%3C/svg%3E" type="image/svg+xml">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="site-header"><a class="brand" href="index.html">你的商家名稱</a><span class="single-page-label">本堂單頁練習</span></header>
<main class="page-shell">
<p class="eyebrow">LESSON-01 · 建立可預覽、可除錯的前端檔案結構</p>
<h1>請改成你的服務主題</h1>
<p class="page-description">請改成一段介紹你的商家服務的文字。</p>
<!-- TODO-1：請把商家名稱、title、h1 與品牌介紹改成自己的內容。 -->
<!-- lesson-slot -->
<section class="result-card" aria-labelledby="result-title">
<h2 id="result-title">本堂可觀察結果</h2>
<p id="status" role="status">尚未操作，請依微步驟完成本堂練習。</p>
<button id="action" type="button">執行本堂操作</button>
</section>
</main>
<script src="js/main.js"></script>
</body>
</html>css/style.css呈現層：只放本堂實作需要觀察的 CSS 規則。這段要貼在哪裡：先在自己的工作資料夾建立同名相對位置，再複製內容。
:root { font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans TC", sans-serif; color: #17324d; background: #f5f8fb; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; line-height: 1.7; }
.site-header { width: min(100% - 2rem, 920px); margin: 1rem auto 0; padding: .75rem 0; display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.site-header nav { display: flex; flex-wrap: wrap; gap: .7rem; }
.site-header a { color: #155e75; }
.page-shell { width: min(100% - 2rem, 760px); margin: 2rem auto; border-radius: 20px; background: #fff; }
/* TODO-2：請在 .page-shell 補上 padding 與 border。 */
.eyebrow { color: #176b87; font-weight: 800; }
.page-description { color: #52657d; }
.result-card { padding: 1rem; border: 1px solid #d8e0ea; border-radius: 14px; background: #fbfdff; }
button { padding: .65rem .9rem; border: 0; border-radius: 9px; background: #176b87; color: #fff; font: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 3px solid #f1ab2c; outline-offset: 3px; }
.status { min-height: 2rem; color: #17643d; }
/* lesson-slot */
@media (max-width: 560px) { .site-header { align-items: flex-start; flex-direction: column; } .page-shell { margin: 1rem auto; } h1 { font-size: 1.6rem; } }js/main.js行為層：處理本堂操作、狀態與 Console 驗收訊息。這段要貼在哪裡：先在自己的工作資料夾建立同名相對位置，再複製內容。
const status = document.querySelector("#status");
const action = document.querySelector("#action");
// TODO-3：請留下 JavaScript 載入訊息。
function showResult() {
status.textContent = "按鈕操作已執行";
console.log("LESSON-01：按鈕操作已執行");
}
// lesson-slot
action.addEventListener("click", showResult);Starter 完成後，不要直接看 Solution；先前往 Checkpoint，自己找出最後一個核心缺口。