完成個人介紹標題
修改檔案：index.html
完成後看見：頁面顯示姓名與職涯方向
個人介紹
請輸入姓名與方向
我喜歡把生活中的問題整理成簡單畫面。
認識我
這是我準備網站作品時最常使用的工作桌。
我正在學什麼
請說明觀看這段內容的目的
CHAPTER 02 · PRACTICE WORKSPACE
HTML 結構、圖片路徑與第三方嵌入
完成含文字、圖片、觀看目的、外部連結與嵌入影片的個人介紹頁
01
Starter
0/3
- 01Starter讀懂作品骨架
- 02Checkpoint 1加入第一項能力
- 03Checkpoint 2累積第二項能力
- 04Solution核對完整結果
TASK STATUS
三項任務目前狀態
修正圖片來源與替代文字
修改檔案：index.html
完成後看見：個人照片正常顯示且有可讀的 alt
嵌入影片並補上觀看目的與外部連結
修改檔案：index.html
完成後看見：影片可播放，旁邊有觀看目的與可開啟的外部連結
WORKSPACE
本階段實作區
先確認作品目前能做什麼、還缺什麼，再從 TASK-01 開始修改。
FOCUS TASK · TASK-01
現在只處理：完成個人介紹標題
講解時展開：2 個小型比較
h1 vs p｜語意層級不同責任不同
比較：標題元素表達層級，段落元素承載說明；不要只靠字體大小模擬結構。
現在做：先在 Elements 找到 <h1 id="profile-title"> 與旁邊的 <p> 說明文字；只替換 h1 的姓名與方向，儲存並重新整理，再指出 p 不應承擔主標題層級。
看預期與證據
預期：h1 只承擔姓名與職涯方向，旁邊的 p 保留說明內容；學生能說出兩者的語意責任不同。
證據：截圖或指出 Elements 中的 h1 與 p，說明姓名與方向放在 h1、補充說明放在 p。
佔位文字 vs 真實內容｜先確認替換範圍
比較：看起來像文字不代表已完成；要確認姓名與方向都已替換到正確元素。
現在做：先在 #profile-title 只找出「請輸入姓名與方向」這段佔位文字並替換；不要改 hero__lead。儲存重整後搜尋舊佔位文字，確認只替換目標內容。
看預期與證據
預期：舊佔位文字消失，姓名與具體職涯方向出現在 #profile-title，原本的說明段落仍保留。
證據：截圖前後畫面或搜尋結果，證明佔位文字被替換、hero__lead 未被誤改。
需要排錯時查看：任務循環（觀察 → 預測 → 實作 → 故障 → 驗收）
- A｜觀察：在 Starter 找到「請輸入姓名與方向」主標題，先決定要公開顯示的姓名與一個具體職涯方向。
- B｜預測：重新整理後查看介紹區標題，確認姓名與職涯方向都可讀。
- C｜實作：在 index.html 的 #profile-title 完成「完成個人介紹標題」，一次只處理本任務責任。
- D｜故障：若結果不一致，先依原操作重現，再檢查 #profile-title 與 index.html，最後重跑原操作。
- E｜驗收：頁面顯示姓名與職涯方向
完成條件：DONE-01：頁面顯示姓名與職涯方向
CONTINUE
開始 TASK-01
前往 Checkpoint 1，依要求完成「完成個人介紹標題」。