STEP GUIDE · Checkpoint 2

這個步驟要做什麼、改哪裡、怎麼看結果

這一步聚焦 TASK-02；下方只比較「Checkpoint 1 → Checkpoint 2」的真實異動。

01

三項 Task 進度

TASK-01已完成

完成個人介紹標題

預計修改：index.html

完成後：頁面顯示姓名與職涯方向

TASK-02本步驟處理

修正圖片來源與替代文字

預計修改：index.html

完成後：個人照片正常顯示且有可讀的 alt

TASK-03稍後處理

嵌入影片並補上觀看目的與外部連結

預計修改：index.html

完成後：影片可播放，旁邊有觀看目的與可開啟的外部連結

02

HTML、CSS、JavaScript 與文件實際異動

展開檔案卡查看必要差異；只有程式碼區可以橫向捲動。

HTML本步驟有異動

檔案：index.html

修改前

<img id="profile-photo" src="https://placehold.co/800x500?text=wrong-path" alt="">

修改後

<img id="profile-photo" src="https://placehold.co/800x500/png?text=My+Workspace" alt="木桌上放著筆記型電腦與筆記本">
CSS本練習未使用

檔案：style.css

修改前

本練習沒有這個檔案。

修改後

本步驟不需修改此語言。
JavaScript本練習未使用

檔案：script.js

修改前

本練習沒有這個檔案。

修改後

本步驟不需修改此語言。
README／其他文件本練習未使用

檔案：README.md

修改前

本練習沒有這個檔案。

修改後

本步驟不需修改此語言。
03

怎麼看到結果

  1. 準備

    先確認素材檔與網路連線可用，再開啟本階段頁面。

  2. 操作

    重新整理並觀察照片；若沒出現，打開 DevTools Console 檢查路徑錯誤。

  3. 預期

    個人照片正常顯示且有可讀的 alt
Checkpoint 2 TASK-02

修正圖片來源與替代文字

完成後可見：個人照片正常顯示且有可讀的 alt

個人介紹

小安｜前端學習者

我喜歡把生活中的問題整理成簡單畫面。

認識我

木桌上放著筆記型電腦與筆記本

這是我準備網站作品時最常使用的工作桌。

我正在學什麼

請說明觀看這段內容的目的

外部延伸資源尚未設定