練習 01
Bootstrap 網格系統應用
掌握 Row / Col 排版，建立穩定的版面骨架。
動態展示
快速掃過我的練習軌跡
每張輪播都是一次練習筆記，從視覺語言到互動手感，全部都能在這裡找到。
學習亮點
我正在把基礎練到扎實
不只做出畫面，還要理解為什麼這樣設計。每個區塊都在累積判斷力。
結構清楚
用語意化標籤整理版面，讓內容層級清晰、可讀性提升。
RWD 優化
手機、平板、桌機都能保持視覺一致，讓作品自然適配。
互動細節
滑動、hover、漸進動畫，讓作品看起來有節奏、有呼吸感。
學習路線
從拆解到展示的四步流程
把一次練習拆成四個步驟，讓每次輸出都能看見成長。
Step 01
拆解範例
觀察優秀作品，拆出版面結構與視覺規律。
Step 02
模組練習
先完成卡片、按鈕、表單等單元，建立元件庫。
Step 03
整合排版
把模組整合成完整頁面，調整間距與層次。
Step 04
輸出作品
加入互動與說明，輸出能展示的學習成果。
作品精選
最近完成的練習作品
每個作品都附上練習重點，讓練習有節奏、有方向。
練習 01
練習 02
HTML 結構練習
練習 navbar、section、footer 的語意結構。
專題作業
RWD 版面設計練習
調整視覺與互動，確保不同尺寸都保持美感。
關於我
用作品說話的學習者
我是浚潁，正在把前端學習轉化成可展示的作品。每次練習都會記錄流程、標註重點， 讓成長有跡可循，也讓自己更有方向。
- 專注在 HTML/CSS 基礎與元件拆解，建立穩定的版面邏輯。
- 用 Bootstrap 練習 RWD，確保不同裝置都能順暢閱讀。
- 習慣將學習內容整理成筆記，方便復盤與分享。
- 保持每週輸出，逐步累積能展示的作品量。
學習剪影
把過程也變成故事
從視覺靈感、排版嘗試到實作成果，都是我持續練習的軌跡。
視覺靈感牆
把喜歡的配色與排版收集成靈感資料庫。
排版草稿
每次版面都先用草稿驗證節奏，再進入實作。
視覺細節
練習把主視覺、文字與氛圍融合在一起。
版本紀錄
每次調整都有跡可循
記下改動原因，讓每次優化都能清楚回顧。
2026-01-16
版面重構與風格更新
重新排列首頁區塊，加入學習路線、剪影圖文與版本紀錄。
2026-01-16
視覺降噪與色彩調整
降低亮度與對比，改為溫潤色調，提升閱讀舒適度。
2026-01-16
互動與動效補強
加入滑動顯示、浮動裝飾與輪播動畫，讓作品更有節奏。
訂閱 Markup Master
每週整理學習筆記與小技巧，讓前端練習更有方向。
不會寄垃圾信，只有重點整理。