鐵人檔案
是一場把前端學習化為奇幻冒險的挑戰紀錄。每天的程式錯誤都像潛伏的惡靈，透過不斷練習 HTML、CSS、JavaScript 等技能，就像鍛造魔法道具與煉金法術，一步步驅逐 Bug。文章風格不只是技術筆記，而是結合故事感與實戰心得，讓學習過程更有趣、更有畫面感。這不僅是前端技能的整理，也是成長旅程的冒險日誌，陪伴自己從新手到能揮舞驅魔杖的開發者，見證「寫程式其實也能很中二」的快樂過程。
學習目標 認識常見字體設定：font-family、font-size、font-weight 調整行高（line-height）與字距（letter-sp...
學習目標 認識 border 的基本屬性（寬度、樣式、顏色） 學會設定圓角邊框（border-radius） 掌握 box-shadow 建立立體感效果 嘗試...
學習目標 熟悉多重背景的設定方式 使用 background-attachment 製作視差滾動效果（parallax） 理解 linear-gradient...
學習目標 理解 float 的用途與限制 學會使用 clear 避免元素被浮動影響 練習用浮動製作簡單的圖文排版 知道浮動在現代已漸被 flexbox 取代，...
學習目標 理解 float 的用途與限制 學會使用 clear 避免元素被浮動影響 練習用浮動製作簡單的圖文排版 知道浮動在現代已漸被 flexbox 取代，...
學習目標 理解 Flexbox 的核心概念：主軸（main axis）與交叉軸（cross axis） 熟悉容器屬性：display: flex、flex-d...
學習目標 熟悉主軸（main axis）與交叉軸（cross axis）的對齊控制 掌握 justify-content、align-items、align-...
學習目標 了解 Grid 與 Flexbox 的差異與應用場景 學會使用 display: grid 建立二維布局 練習 grid-template-colu...
學習目標 了解 auto-fit 與 auto-fill 的差異 學會使用 minmax() 實現彈性網格 練習 repeat() 自動生成欄位 使用 gri...
學習目標 理解 RWD（Responsive Web Design）核心概念 學會使用 @media 媒體查詢調整不同裝置版面 使用彈性單位（%, vw, v...
