CHAPTER 01 · PRACTICE WORKSPACE

網頁、檔案、瀏覽器與開發工具

能從正確資料夾開啟自己的第一個網頁,並提供可點擊的聯絡入口

02 Checkpoint 1 1/3
  1. 01Starter讀懂作品骨架
  2. 02Checkpoint 1加入第一項能力
  3. 03Checkpoint 2累積第二項能力
  4. 04Solution核對完整結果

TASK STATUS

三項任務目前狀態

TASK-01已完成

改成自己的頁面標題

修改檔案:index.html

完成後看見:瀏覽器分頁與主標題顯示自己的作品名稱

TASK-02本階段處理

完成第一段自我介紹

修改檔案:index.html

完成後看見:頁面出現姓名與一句自我介紹

TASK-03稍後處理

寫下學習目標並加入聯絡入口

修改檔案:index.html

完成後看見:頁面出現學習目標,聯絡連結可實際點擊

WORKSPACE

本階段實作區

已完成 TASK-01;先核對可見結果,再前往 TASK-02。

FOCUS TASK · TASK-02

現在只處理:完成第一段自我介紹

修改:index.html

完成後:頁面出現姓名與一句自我介紹

講解時展開:2 個小型比較

文字內容 vs 元素結構|誰承載內容

比較:文字是內容,元素是結構;先找到正確元素,再替換內容,不能只改畫面猜測。

現在做:在編輯器搜尋 id="intro",先指出承載介紹的整個元素,再只替換其中的文字內容;儲存並重新整理,確認元素位置與段落結構沒有被改掉。

看預期與證據

預期:能找到 id="intro" 的介紹元素,只改文字內容就完成替換;元素位置與結構仍保留。

證據:截圖或指出修改前後的 id="intro",說明哪一段是元素結構、哪一段是文字內容。

檔案到瀏覽器|找出真正的入口

比較:修改正確檔案與開啟正確頁面是兩件事;路徑錯了,畫面不會反映修改。

現在做:先關閉目前的 index.html,再從 VS Code 檔案列表重新開啟 Starter 的 index.html;比較編輯器 breadcrumb 與瀏覽器 URL,寫下兩者都應包含的章節資料夾名稱,不修改內容。

看預期與證據

預期:編輯器與瀏覽器都指向同一個章節資料夾;能說明只改正確檔案仍不夠,瀏覽器也必須開啟同一份頁面。

證據:截圖 VS Code breadcrumb 與瀏覽器 URL,圈出兩者共同的章節資料夾名稱。

需要排錯時查看:任務循環(觀察 → 預測 → 實作 → 故障 → 驗收)
  1. A|觀察:在 Checkpoint 1 確認分頁與主標題已個人化,但介紹段落仍顯示姓名與自我介紹的待填提示。
  2. B|預測:重新整理後閱讀自我介紹區,確認姓名與句子都已替換。
  3. C|實作:在 index.html 的 #intro 完成「完成第一段自我介紹」,一次只處理本任務責任。
  4. D|故障:若結果不一致,先依原操作重現,再檢查 #intro 與 index.html,最後重跑原操作。
  5. E|驗收:頁面出現姓名與一句自我介紹

完成條件:DONE-02:頁面出現姓名與一句自我介紹

我的第一個網頁

小安的第一個網頁

請輸入姓名與自我介紹

我的學習目標

請輸入一個可展示的目標

聯絡入口尚未設定

CONTINUE

繼續完成 TASK-02

前往 Checkpoint 2,依要求完成「完成第一段自我介紹」。

前往 Checkpoint 2:完成 TASK-02