LESSON-01｜開發環境設置

先理解：這堂課解決什麼問題？

服務型商家的網站剛開始製作，今天只建立一個可以預覽與除錯的三檔案小專案；圖片素材先不加入，避免把尚未教的路徑問題混在一起。

本堂要完成：建立自己的 commercial-site 資料夾，修改商家名稱、title、h1 與品牌介紹，完成 .page-shell 的 padding／border，並留下 JavaScript 載入訊息與按鈕操作結果。

學習邊界：先完成「建立可預覽、可除錯的前端檔案結構」，不提前引入尚未教過的框架或建置工具。

第一次上課環境：先準備四樣東西

編輯器：用來建立與修改純文字檔案；本堂請能看到檔案名稱與資料夾位置。
資料夾：建立 commercial-site/，裡面只放 index.html、css/style.css、js/main.js。
瀏覽器：用來開啟 HTML、顯示畫面並執行 JavaScript；儲存檔案後回到瀏覽器重新整理。
DevTools：在頁面按右鍵選「檢查」，本堂只先使用 Elements、Console、Network；不需要額外安裝工具。

素材選修預告：assets/ 本堂只介紹概念，不建立也不引用本地素材；等真的有圖片任務時，再一起建立可攜的素材路徑。

先做最小實驗：先看見結果

這不是期末網站，而是一個可以直接看到本堂核心結果的最小實驗。先完成一次操作，再回到檔案和名詞卡對照。

開啟本堂最小實驗

入口：開啟 examples/minimal/index.html。
操作：開啟 examples/minimal/index.html，先看畫面，再打開 Console 並重新整理。
預期：標題與品牌介紹出現在畫面，Console 出現本堂訊息，Network 可分別找到 css/style.css 與 js/main.js。
重設：重新整理 examples/minimal/index.html；不要修改這份示範頁。

第一個檢查位置：先確認開啟的是本堂 examples/minimal/index.html，而不是 starter 或自己的檔案。
成功證據：標題與品牌介紹出現在畫面，Console 出現本堂訊息，Network 可分別找到 css/style.css 與 js/main.js。若不同，先檢查：先確認開啟的是本堂 examples/minimal/index.html，而不是 starter 或自己的檔案。

學生練習流程

依序完成每一張卡；目前只聚焦一個步驟，先操作，再用可觀察證據確認結果。

1
最小實驗

先開啟最小實驗，重新整理一次，說出畫面、Console 與 Network 各自看見什麼。
2
名詞

回到檔案地圖，只讀與剛才結果有關的名詞卡，再自己回答互動問答 4 題。
3
Starter

把 Starter 複製到自己的工作資料夾，照 3 張微步驟卡逐一完成；每一步都要看到結果再繼續。
4
Checkpoint

前往 Checkpoint，只處理 1 個真正的 js/missing.js 404；先預測，再用 Network 證據修回 js/main.js。
5
Solution

前往 Solution，先看逐檔差異與修改原因，再決定要不要把完整內容帶回自己的檔案。
6
變體驗收

完成情境變體與獨立挑戰，留下檔案位置、操作、結果與驗收證據，並閱讀下一堂銜接：HTML 語意骨架：下一堂會把可預覽的入口頁整理成可讀的內容結構。

檔案地圖：每個位置負責什麼？

先不要急著背檔名；請把檔案位置和責任連起來。你在階段頁會看到同一份檔案的可執行版本。

commercial-site/index.html網站入口：瀏覽器從這份 HTML 開始載入本機網站。
css/style.css共用樣式：集中管理本堂的版面、色彩與元件規則。
js/main.js互動腳本：處理本堂事件、狀態與 Console 驗收訊息。

先學會這些詞

先從名詞、英文與白話意思開始；每次只展開一張名詞卡，再對照正式定義、範例與驗收證據。專業術語、語法、檔案路徑會使用不同樣式。第一次遇到術語時，先回到這裡，不要靠猜。

本堂 28 個詞先選一組，再展開需要的名詞卡；每次只保留目前的學習焦點。

HTMLHyperText Markup Language 白話意思：描述頁面內容與結構的檔案語言。展開查看正式定義、範例與驗收證據

正式定義: 以元素與屬性描述文件結構，讓瀏覽器建立頁面內容。
什麼時候用: 要建立標題、段落、按鈕或資源引用時。
最小範例: <h1>我的商家</h1> 在 HTML 中表示頁面主標題。
可觀察證據: Elements 面板能看到 HTML 形成的文件樹。
容易混淆: 和 CSS 混淆；HTML 說明有什麼內容，CSS 說明內容長什麼樣子。

CSSCascading Style Sheets 白話意思：控制頁面外觀與版面的檔案語言。展開查看正式定義、範例與驗收證據

正式定義: 以規則選取 HTML 元素並設定呈現樣式的語言。
什麼時候用: 要調整顏色、間距、邊框或寬度時。
最小範例: .page-shell { padding: 2rem; } 讓容器裡面有留白。
可觀察證據: Styles／Computed 能看到規則是否命中與最後值。
容易混淆: 和 JavaScript 混淆；CSS 改外觀，JavaScript 改行為。

JavaScriptJavaScript 白話意思：讓網頁能回應操作並留下程式訊息的語言。展開查看正式定義、範例與驗收證據

正式定義: 在瀏覽器中執行、可讀取與修改 DOM、處理事件的程式語言。
什麼時候用: 要讓按鈕有反應、更新狀態或寫入 Console 時。
最小範例: console.log("已載入") 會在 Console 印出訊息。
可觀察證據: Console 訊息、畫面狀態與 Network 的 JS 請求。
容易混淆: 和 HTML／CSS 混淆；JavaScript 不負責取代整份 HTML 或 CSS。

入口檔案entry file 白話意思：瀏覽器先從它開始讀網站。展開查看正式定義、範例與驗收證據

正式定義: 被瀏覽器直接開啟、再引用其他資源的 HTML 文件。
什麼時候用: 不知道應該先開哪個檔案時。
最小範例: index.html 先放首頁內容，再用 link 與 script 找到 CSS 和 JavaScript。
可觀察證據: 網址列、Elements 樹與 Network 的第一個 HTML 請求。
容易混淆: 和 CSS 或 JavaScript 檔案混淆；它們通常不能單獨代表一個頁面。

相對路徑relative path 白話意思：從目前檔案所在位置計算另一個檔案在哪裡。展開查看正式定義、範例與驗收證據

正式定義: 以目前文件目錄為基準解析資源或連結位置的 URL 表示法。
什麼時候用: HTML 要載入 CSS、JavaScript、圖片或下一頁時。
最小範例: css/style.css 表示從 index.html 所在資料夾進入 css。
可觀察證據: Network 顯示請求的完整 URL，或直接開啟資源網址。
容易混淆: 和絕對網址混淆；/css/style.css 的基準不是目前檔案資料夾。

headHTML head 白話意思：放頁面設定與資源引用的區域，通常不直接顯示在畫面。展開查看正式定義、範例與驗收證據

正式定義: HTML 文件中承載 title、meta 與 link 等文件中繼資料的區塊。
什麼時候用: 要設定分頁名稱或告訴瀏覽器載入 CSS 時。
最小範例: <head><title>首頁</title><link rel="stylesheet" href="css/style.css"></head>。
可觀察證據: 分頁 title 改變，Network 出現 CSS 請求。
容易混淆: 和 body 混淆；head 放設定，body 放訪客看見與操作的內容。

bodyHTML body 白話意思：放頁面上看得到、用得到的內容。展開查看正式定義、範例與驗收證據

正式定義: HTML 文件中承載主要可見內容與互動元素的區塊。
什麼時候用: 要放 h1、品牌介紹、按鈕與 status 時。
最小範例: <body><h1>我的商家</h1><button>開始</button></body>。
可觀察證據: 畫面與 Elements 的 body 內容。
容易混淆: 和 head 混淆；body 不是只放文字，也包含頁面操作元素。

linklink element 白話意思：在 HTML 內接上外部 CSS 檔案的標籤。展開查看正式定義、範例與驗收證據

正式定義: 描述目前文件與外部資源關係的 HTML 元素；本堂用於 stylesheet。
什麼時候用: CSS 不想寫在 HTML 裡，而要放在 css/style.css 時。
最小範例: <link rel="stylesheet" href="css/style.css">。
可觀察證據: Network 有 CSS 請求，Styles 命中 .page-shell。
容易混淆: 和 a 連結混淆；link 載入資源，a 是讓訪客前往另一個網址。

scriptscript element 白話意思：在 HTML 中載入或執行 JavaScript 的標籤。展開查看正式定義、範例與驗收證據

正式定義: 將腳本資源或腳本內容嵌入文件的 HTML 元素。
什麼時候用: 要讓頁面載入 js/main.js 時。
最小範例: <script src="js/main.js"></script>。
可觀察證據: Network 有 JS 請求，Console 出現載入訊息。
容易混淆: 和 style 混淆；script 載入行為，link 通常載入 CSS。

srcsource attribute 白話意思：告訴 script 要去哪裡找 JavaScript 檔案。展開查看正式定義、範例與驗收證據

正式定義: 指定外部腳本資源 URL 的 HTML 屬性。
什麼時候用: 要從 js/ 資料夾載入外部 JavaScript 時。
最小範例: src="js/main.js" 以目前 HTML 位置為基準找檔案。
可觀察證據: Network 的 Request URL 與檔案樹一致。
容易混淆: 和 href 混淆；本堂 link 使用 href，script 使用 src。

titletitle element 白話意思：顯示在瀏覽器分頁上的頁面名稱。展開查看正式定義、範例與驗收證據

正式定義: HTML head 中描述文件標題的元素。
什麼時候用: 要讓訪客與搜尋結果知道這一頁是什麼時。
最小範例: <title>安心到府服務｜首頁</title>。
可觀察證據: 瀏覽器分頁文字改變。
容易混淆: 和 h1 混淆；title 在分頁，h1 在頁面內容。

h1level-one heading 白話意思：頁面內容的主要標題。展開查看正式定義、範例與驗收證據

正式定義: 表示目前文件最主要主題的 HTML 標題元素。
什麼時候用: 要讓訪客一眼知道這頁在介紹什麼時。
最小範例: <h1>讓日常維護變得簡單</h1>。
可觀察證據: 畫面上看到 h1，Elements 可檢查它的文字。
容易混淆: 和 title 混淆；h1 在畫面，title 在分頁。

檔案責任file responsibility 白話意思：每個檔案只處理自己擅長的一類工作。展開查看正式定義、範例與驗收證據

正式定義: 以結構、呈現、行為與素材的責任邊界組織前端專案。
什麼時候用: 專案從一頁變成多頁，或開始需要除錯與共用時。
最小範例: HTML 放標題、CSS 放顏色、JS 放按鈕行為、assets 放圖片。
可觀察證據: 檔案樹與修改某個檔案後只有對應層次改變。
容易混淆: 和把檔案拆得越多越好混淆；拆分要服務於可理解與可維護。

瀏覽器browser 白話意思：把檔案讀成可以看的網頁，並執行 JavaScript。展開查看正式定義、範例與驗收證據

正式定義: 解析 HTML、CSS、JavaScript 並產生使用者介面的用戶端軟體。
什麼時候用: 要預覽結果、點擊操作或觀察載入時。
最小範例: Chrome 或 Firefox 開啟 index.html 後會建立 DOM 與畫面。
可觀察證據: 頁面畫面、Elements、Console 與 Network 四個面板。
容易混淆: 和編輯器混淆；編輯器修改檔案，瀏覽器呈現檔案結果。

編輯器code editor 白話意思：用來建立、修改與儲存純文字程式碼檔案的工具。展開查看正式定義、範例與驗收證據

正式定義: 提供檔案樹、文字編輯與儲存功能的程式碼編輯環境。
什麼時候用: 要建立資料夾、修改 HTML、CSS 或 JavaScript 時。
最小範例: 在編輯器開啟 commercial-site/index.html，修改後按儲存。
可觀察證據: 檔案名稱、資料夾位置與儲存後瀏覽器重新整理的結果。
容易混淆: 和瀏覽器混淆；編輯器改來源，瀏覽器顯示執行結果。

DevToolsDeveloper Tools 白話意思：瀏覽器裡用來查證與除錯的工具箱。展開查看正式定義、範例與驗收證據

正式定義: 提供 Elements、Console、Network 等面板以檢查執行中頁面狀態的開發工具。
什麼時候用: 畫面和預期不同，或需要證明哪個檔案出錯時。
最小範例: 在頁面按右鍵選檢查，從 Network 重新整理確認 CSS 是否 200。
可觀察證據: Elements 的 DOM、Console 訊息、Network 的狀態碼。
容易混淆: 和編輯器的預覽畫面混淆；DevTools 看到的是瀏覽器實際結果。

資源載入resource loading 白話意思：HTML 找到並讀取 CSS、JS、圖片的過程。展開查看正式定義、範例與驗收證據

正式定義: 瀏覽器依文件中的 URL 發出請求並取得外部資源的流程。
什麼時候用: 畫面缺樣式、功能或圖片時。
最小範例: <script src="js/main.js"> 讓瀏覽器請求 JavaScript。
可觀察證據: Network 中資源的 URL、狀態碼與 Response。
容易混淆: 和 JavaScript 執行混淆；檔案載入成功不代表程式一定沒有錯。

ConsoleConsole 白話意思：可以看到 JavaScript 訊息與錯誤的地方。展開查看正式定義、範例與驗收證據

正式定義: DevTools 中呈現腳本輸出、例外與警告的面板。
什麼時候用: 需要知道程式跑到哪裡，或讀取錯誤原因時。
最小範例: console.log("首頁已載入") 會在 Console 留下訊息。
可觀察證據: 重新整理後看到預期文字，或看到紅色錯誤與行號。
容易混淆: 和頁面上顯示的文字混淆；Console 訊息不一定會出現在畫面。

NetworkNetwork panel 白話意思：查看瀏覽器向哪個網址要檔案，以及對方回了什麼狀態。展開查看正式定義、範例與驗收證據

正式定義: DevTools 中呈現頁面資源請求、URL、狀態碼與回應的面板。
什麼時候用: 要確認 CSS／JavaScript 有沒有找到，或定位 404 時。
最小範例: 重新整理後在 Network 搜尋 js/main.js，查看它的狀態碼。
可觀察證據: 請求 URL、200 成功或 404 找不到，以及 Response。
容易混淆: 和 Console 混淆；Network 查檔案請求，Console 查程式執行訊息。

404HTTP 404 Not Found 白話意思：瀏覽器要求的檔案位置不存在。展開查看正式定義、範例與驗收證據

正式定義: 伺服器或靜態檔案服務表示找不到指定資源的 HTTP 狀態碼。
什麼時候用: 畫面缺樣式、JavaScript 沒反應或連結打不開時。
最小範例: js/missing.js 不存在時，Network 會出現 404。
可觀察證據: Network 的 URL、Status Code 404 與檔案樹的實際位置。
容易混淆: 和 JavaScript 語法錯誤混淆；404 是先找不到檔案，尚未進入程式執行。

viewportviewport 白話意思：瀏覽器目前用來顯示頁面的可視範圍。展開查看正式定義、範例與驗收證據

正式定義: 使用者代理程式中呈現文件內容的視窗區域；本堂用 meta 設定窄版預覽基準。
什麼時候用: 要在手機寬度檢查內容是否溢出或仍可操作時。
最小範例: <meta name="viewport" content="width=device-width, initial-scale=1">。
可觀察證據: DevTools 裝置模式切換到窄版後，頁面沒有水平捲軸。
容易混淆: 和整個瀏覽器視窗混淆；viewport 是頁面可見內容的範圍。

DOMDocument Object Model 白話意思：瀏覽器把 HTML 變成 JavaScript 可以找到與修改的樹。展開查看正式定義、範例與驗收證據

正式定義: 代表目前文件節點與階層的程式介面。
什麼時候用: 要讀取或更新畫面上的 status、按鈕或標題時。
最小範例: document.querySelector("#status") 找到畫面上的狀態元素。
可觀察證據: Elements 面板的節點文字和 Console 修改後的畫面同步變化。
容易混淆: 和原始 HTML 混淆；DOM 是瀏覽器執行後的目前狀態。

selectorselector 白話意思：告訴 CSS 或 JavaScript 要找哪一個元素。展開查看正式定義、範例與驗收證據

正式定義: CSS 規則或 DOM 查找語法中，用來匹配文件元素的模式。
什麼時候用: 要替 .page-shell 加樣式，或找到 #status 更新文字時。
最小範例: .page-shell 找 class，#status 找 id；一次先用一個簡單 selector。
可觀察證據: Styles 顯示 CSS 命中，或 Console／畫面證明查找到了元素。
容易混淆: 和 property 混淆；selector 決定對誰作用，property 決定 CSS 改什麼。

idid attribute 白話意思：給頁面中一個元素取的識別名稱。展開查看正式定義、範例與驗收證據

正式定義: HTML 元素上的唯一識別屬性，可被連結、CSS 或 JavaScript 定位。
什麼時候用: 按鈕與狀態文字需要互相連接，或 JavaScript 要找到特定元素時。
最小範例: <p id="status">尚未操作</p> 與 #status 對應。
可觀察證據: Elements 看到 id="status"，JavaScript 執行後該元素文字更新。
容易混淆: 和 class 混淆；id 通常識別單一元素，class 可套用在多個元素。

querySelectorquerySelector 白話意思：依照一個 selector 找到頁面中的第一個元素。展開查看正式定義、範例與驗收證據

正式定義: DOM 提供、以 CSS selector 字串查找文件節點的 JavaScript 方法。
什麼時候用: 要讓 JavaScript 找到 status 或 action 時。
最小範例: document.querySelector("#status") 找到 id 為 status 的元素。
可觀察證據: Console 不出現 null，且 status 文字會更新。
容易混淆: 和 querySelectorAll 混淆；本堂先只找一個元素，不使用 selector list。

事件event 白話意思：使用者或瀏覽器發生的一件事。展開查看正式定義、範例與驗收證據

正式定義: 瀏覽器派送給事件目標、可被監聽與處理的互動通知。
什麼時候用: 按鈕被點擊、頁面載入或表單送出時。
最小範例: 按下 action 按鈕時觸發 click 事件。
可觀察證據: 操作前後的 status 文字與 Console 訊息。
容易混淆: 和函式混淆；事件是發生的時機，函式是發生後執行的步驟。

addEventListeneraddEventListener 白話意思：告訴瀏覽器某件事發生時要執行哪個函式。展開查看正式定義、範例與驗收證據

正式定義: 在事件目標上註冊事件監聽器的 JavaScript 方法。
什麼時候用: 要讓按鈕點擊後執行操作，而不把程式寫進 HTML 屬性時。
最小範例: action.addEventListener("click", showResult)。
可觀察證據: 點擊按鈕後畫面與 Console 出現操作結果。
容易混淆: 和直接呼叫函式混淆；註冊監聽器是在等待事件，不是現在立刻執行。

textContenttextContent 白話意思：讀取或替換元素裡的純文字。展開查看正式定義、範例與驗收證據

正式定義: DOM 元素提供、代表其文字內容的 JavaScript 屬性。
什麼時候用: 要更新 status 或 h1 的文字，又不需要插入 HTML 標籤時。
最小範例: status.textContent = "按鈕操作已執行"。
可觀察證據: 畫面上的 status 文字改變，Elements 也看到新文字。
容易混淆: 和 innerHTML 混淆；textContent 只處理文字，不解析 HTML。

最小例子：先看懂，再複製

這段只保留本堂第一個微成果。先預測結果，再逐行讀；完整檔案請開啟下方最小實驗。

<!-- 01-development-environment：從入口頁開始 -->
<title>安心到府服務｜首頁</title>
<h1>讓日常維護變得簡單</h1>
<link rel="stylesheet" href="css/style.css">
<script src="js/main.js"></script>

Live Lab：逐段讀碼與驗證

每一步只回答五件事：為什麼做、改哪裡、會看到什麼、用什麼證據確認、卡住先查什麼。

Step 1
建立檔案邊界

目的
先讓學生在 Explorer 建立只包含三個責任的 commercial-site。

修改位置
commercial-site/index.html、css/style.css、js/main.js
建立入口、樣式與行為三個檔案，不新增框架或套件

預期結果
檔案樹可對照，入口頁仍能開啟。本堂焦點是「建立可預覽、可除錯的前端檔案結構」。

驗收證據
檔案樹與入口檔案位置

卡住先查
只檢查一件事：commercial-site/index.html、css/style.css、js/main.js 是否存在、檔名是否完全一致，以及瀏覽器目前是否開啟這個入口。
Step 2
修改頁面身份

目的
先讓學生知道 title、品牌名稱、h1 與品牌介紹各自出現在什麼位置。

修改位置
index.html
修改 title、品牌名稱、h1 與一段品牌介紹

預期結果
分頁、品牌、h1 與介紹文字都變成自己的商家內容。本堂焦點是「建立可預覽、可除錯的前端檔案結構」。

驗收證據
分頁、畫面與 Elements

卡住先查
只檢查一件事：index.html 是否存在、檔名是否完全一致，以及瀏覽器目前是否開啟這個入口。
Step 3
完成容器樣式

目的
把呈現責任留在 CSS，讓 .page-shell 的變化可被觀察。

修改位置
css/style.css
在 .page-shell 加入 padding 與 border

預期結果
白色內容盒出現留白與邊框。本堂焦點是「建立可預覽、可除錯的前端檔案結構」。

驗收證據
Network、Styles 與 Computed

卡住先查
只檢查一件事：css/style.css 是否存在、檔名是否完全一致，以及瀏覽器目前是否開啟這個入口。
Step 4
留下 JavaScript 證據

目的
用簡單 id 找到 status 與 action，留下載入和按鈕操作結果。

修改位置
js/main.js、index.html
加入載入訊息，按鈕後更新 status 並寫入 Console

預期結果
重新整理有載入訊息，按鈕後畫面與 Console 都有結果。本堂焦點是「建立可預覽、可除錯的前端檔案結構」。

驗收證據
Console、Network 與 status

卡住先查
只檢查一件事：js/main.js、index.html 是否存在、檔名是否完全一致，以及瀏覽器目前是否開啟這個入口。
Step 5
重現一個 404

目的
示範用證據而不是猜測處理路徑錯誤。

修改位置
index.html 的 script src
暫時改成不存在的 js/missing.js，再改回 js/main.js

預期結果
錯誤狀態與修正狀態可對照。本堂焦點是「建立可預覽、可除錯的前端檔案結構」。

驗收證據
404 狀態碼與檔案樹

卡住先查
只檢查一件事：index.html 的 script src 是否存在、檔名是否完全一致，以及瀏覽器目前是否開啟這個入口。
Step 6
整理可交付證據

目的
把畫面、Console、Network 與檔案位置整理成驗收包。

修改位置
commercial-site/
留下 title、h1、Computed、Console 與 Network 的可重現紀錄

預期結果
別人依檔案位置可以重現你的結果。本堂焦點是「建立可預覽、可除錯的前端檔案結構」。

驗收證據
驗收紀錄與檔案樹

卡住先查
只檢查一件事：commercial-site/ 是否存在、檔名是否完全一致，以及瀏覽器目前是否開啟這個入口。

操作層級Live Lab 段落導覽：切換六個實驗步驟

讀碼順序：先找入口，再找被引用的檔案，最後用畫面、DOM、Console、Network 或資料結果驗證。

互動問答

先回答目前這一題，再展開解析；完成後按下一題，讓每一次回答都回到檔案或瀏覽器完成驗證。

Q1概念理解「HTML（HyperText Markup Language）」在本堂要解決什麼問題？本題線索：HTML；回到名詞卡與 Elements 面板能看到 HTML 形成的文件樹。展開解析收合解析

白話解析：

描述頁面內容與結構的檔案語言。正式來說，以元素與屬性描述文件結構，讓瀏覽器建立頁面內容。

對照位置：

回到名詞卡「HTML」，再看 Elements 面板能看到 HTML 形成的文件樹。

預期觀察：

你應該能用自己的話說出：要建立標題、段落、按鈕或資源引用時。

常見錯誤：

不要只回答「它是HTML」；那是重複名詞，不是說明責任。

立即驗證：

開啟 examples/minimal/index.html，依序做「開啟 examples/minimal/index.html，先看畫面，再打開 Console 並重新整理。」並記下畫面或工具證據。

Q2程式碼閱讀修改指定規則後，你預測畫面會看到什麼？本題線索：commercial-site/index.html、css/style.css、js/main.js；要修改：建立入口、樣式與行為三個檔案，不新增框架或套件；觀察：檔案樹與入口檔案位置展開解析收合解析

白話解析：

先看檔案責任，再預測結果。這一步的目的：先讓學生在 Explorer 建立只包含三個責任的 commercial-site。

對照位置：

對照 Live Lab Step 1，位置是 commercial-site/index.html、css/style.css、js/main.js；範例內容： <title>安心到府服務｜首頁</title> <h1>讓日常維護變得簡單</h1> <link rel="stylesheet" href="css/style.css"> <script src="js/main.js"></script>

預期觀察：

檔案樹可對照，入口頁仍能開啟。本堂焦點是「建立可預覽、可除錯的前端檔案結構」。

常見錯誤：

如果只改了檔案但沒有結果，先不要重寫全部；只檢查一件事：commercial-site/index.html、css/style.css、js/main.js 是否存在、檔名是否完全一致，以及瀏覽器目前是否開啟這個入口。

立即驗證：

實際操作後檢查檔案樹與入口檔案位置。

Q3概念比較「HTML」和「CSS」在本堂的責任有什麼不同？本題線索：比較 HTML 與 CSS；操作位置：index.html 展開解析收合解析

白話解析：

HTML：描述頁面內容與結構的檔案語言。；CSS：控制頁面外觀與版面的檔案語言。

對照位置：

對照兩張名詞卡的正式定義：以元素與屬性描述文件結構，讓瀏覽器建立頁面內容。／以規則選取 HTML 元素並設定呈現樣式的語言。

預期觀察：

你應該能指出兩者分別出現在哪個檔案或工具，以及哪一個結果會改變。

常見錯誤：

不要把「改變畫面」當成所有技術的責任；先說清楚誰負責結構、呈現、行為或驗收。

立即驗證：

在 index.html 做「修改 title、品牌名稱、h1 與一段品牌介紹」，再用分頁、畫面與 Elements 比較前後差異。

Q4除錯驗收如果完成操作後結果不對，你會先從哪一個證據開始查？本題線索：commercial-site/；第一個檢查位置：驗收紀錄與檔案樹展開解析收合解析

白話解析：

先描述症狀，再提出一個最小假設。本堂常見錯誤是：只交一張沒有網址或檔案位置的截圖

對照位置：

對照最後一段 Live Lab：commercial-site/；檢查方式：只檢查一件事：commercial-site/ 是否存在、檔名是否完全一致，以及瀏覽器目前是否開啟這個入口。

預期觀察：

你要能指出一個具體位置，而不是一次修改很多檔案。

常見錯誤：

不要先清快取、重裝工具或複製 Solution；先查看第一個可觀察錯誤。

立即驗證：

重新操作並留下「症狀、證據、假設、單一修正、結果」五項紀錄。

除錯對照表：先看證據，再改一處

看到的症狀	第一個證據	先檢查什麼
畫面沒有樣式	Network 的 CSS URL／狀態碼	確認 `css/style.css` 存在，再看 Styles 是否命中 `.page-shell`。
Console 沒有本堂訊息	Network 的 JS URL／狀態碼	確認 `js/main.js` 成功載入，再重新整理。
看到 404	Network 顯示的完整 URL	逐字比對 `js/missing.js`、檔名大小寫與目前 HTML 位置。
按鈕沒有結果	Elements 的 `id` 與 Console	確認 `status`、`action` 都存在，再只查 JavaScript 的第一個錯誤。

常見誤解

看到畫面沒有變化，不代表程式沒執行；先確認檔案、路徑、元素與狀態證據。
能複製 Solution 不代表理解；請先說出修改哪個檔案、預期哪個結果、用什麼證據確認。
本堂只使用 HTML、CSS、JavaScript 與瀏覽器內建 DevTools；不要提前加入框架、套件或建置工具。

本堂任務與驗收

建立自己的 commercial-site 資料夾，修改商家名稱、title、h1 與品牌介紹，完成 .page-shell 的 padding／border，並留下 JavaScript 載入訊息與按鈕操作結果。

能用分頁 title 留下可重現證據。
能用畫面 h1 留下可重現證據。
能用品牌介紹留下可重現證據。
能用 Computed 的 padding／border 留下可重現證據。
能用 Console 訊息與 Network URL／狀態碼留下可重現證據。
Starter、Checkpoint、Solution 的入口都能開啟並知道三者差異。
遇到問題時能先寫出症狀，再檢查一個最小假設。

情境變體：保留 index.html、css/style.css、js/main.js 三個檔案的責任分工，將內容改成攝影工作室或健身教室；至少替換 title、h1 與一段品牌介紹，不新增框架或套件。
獨立挑戰：不看 Solution，替另一個服務型商家完成「建立可預覽、可除錯的前端檔案結構」，並留下分頁 title、畫面 h1、品牌介紹、Computed 的 padding／border、Console 訊息與 Network URL／狀態碼的驗收證據。

開發環境設置

先理解：這堂課解決什麼問題？

第一次上課環境：先準備四樣東西

先做最小實驗：先看見結果

學生練習流程

最小實驗

名詞

Starter

Checkpoint

Solution

變體驗收

檔案地圖：每個位置負責什麼？

先學會這些詞

最小例子：先看懂，再複製

Live Lab：逐段讀碼與驗證

建立檔案邊界

修改頁面身份

完成容器樣式

留下 JavaScript 證據

重現一個 404

整理可交付證據

互動問答

白話解析：

對照位置：

預期觀察：

常見錯誤：

立即驗證：

白話解析：

對照位置：

預期觀察：

常見錯誤：

立即驗證：

白話解析：

對照位置：

預期觀察：

常見錯誤：

立即驗證：

白話解析：

對照位置：

預期觀察：

常見錯誤：

立即驗證：

除錯對照表：先看證據，再改一處

常見誤解

本堂任務與驗收

官方延伸閱讀