STEP GUIDE · Starter

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

先讀完三項任務並預測結果。這一頁不會顯示 Solution 程式碼。

01

三項 Task 進度

TASK-01尚未開始

修正整合頁共同容器與可用錨點

預計修改:index.html、style.css

完成後:四個導覽連結都到正確區塊

TASK-02尚未開始

統一 Hero、內容區與卡片間距

預計修改:style.css

完成後:各來源區塊像同一個網站而非貼上碎片

TASK-03尚未開始

完成手機回歸修正

預計修改:style.css

完成後:320px 下導覽換行、作品一欄且無水平捲動

02

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

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

HTML先自行嘗試

檔案:index.html

修改前

請先閱讀上方任務與預計修改檔案。

修改後

Starter 不顯示完成碼,請先自己動手修改。
CSS先自行嘗試

檔案:style.css

修改前

請先閱讀上方任務與預計修改檔案。

修改後

Starter 不顯示完成碼,請先自己動手修改。
JavaScript本練習未使用

檔案:script.js

修改前

本練習沒有這個檔案。

修改後

本步驟不需修改此類型。
README/其他文件本練習未使用

檔案:README.md

修改前

本練習沒有這個檔案。

修改後

本步驟不需修改此類型。
03

怎麼看到結果

  1. 準備

    先從桌機寬度開啟整合頁,再準備切到 320px。

  2. 操作

    依序點擊四個導覽連結,確認網址雜湊與停留區塊相符。

  3. 預期

    四個導覽連結都到正確區塊

Starter TASK-01

修正整合頁共同容器與可用錨點

完成後可見:四個導覽連結都到正確區塊

小綠作品集

前端學習紀錄

把零件組成真正作品

查看作品

關於我

我用清楚的結構整理每一次學習成果。

作品

活動頁

資訊層級與 CTA。

品牌頁

元件與 RWD。

聯絡

hello@example.com