商用網站架設實務

LESSON-02 · checkpoint

只修正一個相對路徑

Checkpoint 保留 Starter 的完整骨架,只故意把服務連結寫錯;先看 404,再修正檔名。 本頁以 HTML-onlyhref 作為觀察焦點。

Starter三個小成果
Checkpoint一個路徑缺口
Solution四個驗收結果

開始前確認

  1. 開啟 Checkpoint 可執行入口,點擊服務連結。
  2. 在網址列或 Network 找到故意寫錯的 service.html 404。
  3. 回到 files/index.html,將 href 修正為 services.html
  4. 重新整理並重試,確認服務頁開啟且 Network 回應 200。
限制:只修改主要行動連結的 href;其他 HTML 先不要改。

照這個順序做:先看現象,再修改

CHECKPOINT-1

Network 證據定位 404,再依檔案樹修正檔名。

目的:Network 證據定位 404,再依檔案樹修正檔名。
修改檔案:index.html
程式碼位置:primary-action href

現在要做:請在 index.html 的「primary-action href」位置完成:修正故意寫錯的相對路徑 service.html
貼上位置:index.html:primary-action href 區塊,先保留同一檔案的其他內容。

<a href="services.html">查看服務方案</a>

預期結果:修正後點擊連結會前往 services.htmlNetwork 對該 HTML 回應 200。
驗收證據:先看見 service.html 的 404,再看到 services.html 的 200。

卡住時先看這裡

常見錯誤:只把錯誤頁重新整理,卻沒有對照 href 與實際檔名。
第一個檢查:先查看 Network 的完整 URL,再回到 index.html 比對 href 與檔案樹。

階段檔案

可執行入口與檔案連結:開啟 checkpoint 入口 · index.html · services.html

完成驗收

下一步

修正完成後,先說出 404 的原因,再到 Solution 核對四個結果。

前往 Solution,核對四個結果