這是一份為初學者設計的視覺化與互動式學習指南。透過動態範例與沙盒，讓你一眼看懂設計稿是如何被拆解、建構並轉化為美麗的網頁代碼！
「切版」（Web Slicing，早期也稱切圖）是網頁前端開發的核心流程之一。簡單來說，就是將 UI/UX 設計師製作的視覺設計稿（例如 Figma 或 Photoshop），利用程式碼轉換成能在瀏覽器上呈現的網頁（HTML/CSS/JS）。
在這個過程中，前端工程師的工作就像「拼圖」或「蓋房子」。我們會分析設計稿的結構，將其分割成大大小小的「盒子」（Boxes），然後用 HTML 建立骨架，再用 CSS 來調整其外觀與排版。
拿到設計稿（如 Figma）後，不急著寫程式碼。先觀察排版是由哪些大區塊（Header, Sidebar, Content）與小元件（Card, Button）組成的，並在腦中規劃好 HTML 架構。
從設計軟體中匯出網頁所需要的靜態資源。例如：LOGO 或圖示導出為向量的 SVG 檔案，而照片則導出為壓縮比例較好的 WebP 或 PNG 格式。
使用語意化的 HTML 標籤（例如 <nav>, <article>, <footer>）將先前分析好的頁面骨架搭起來。這一步專注於「內容與層級關係」，先不理會外觀。
使用 CSS 設定背景顏色、字體、圓角與邊距。接著運用現代排版技術（Flexbox 或 CSS Grid）將原本由上而下排列的 HTML 元素排版定位，並加入響應式（RWD）設計。
在現代切版中，Flexbox (彈性盒模型) 是最常被用來對齊和分配空間的排版利器。你可以透過下方這個互動沙盒，點選不同的 CSS 屬性，親眼見證瀏覽器如何動態重新排列「盒子」！
首先必須認識網頁最基本的骨架與外觀。學習如何使用 HTML 描述內容，並使用 CSS 來調整文字、顏色、邊距與基本方格系統（Box Model）。
這個階段著重於解決各種複雜的版面與不同螢幕大小（手機、平板、電腦）的相容問題。你會學到除了 Flexbox 之外的二維排版利器 Grid，以及響應式設計（RWD）。
在實務開發中，為了提升速度與程式碼維護性，我們會使用 CSS 預處理器（如 Sass/SCSS）來組織樣式，或使用當前最主流的原子化 CSS 框架 Tailwind CSS 來進行光速切版。
這是最關鍵的一步。學習如何搭配 Git 版本控制，並使用 Vite 等打包工具，並將寫好的靜態切版專案部署上線，甚至開始學習 JavaScript / JavaScript 框架來完成元件動態渲染。
非常有趣的網頁互動小遊戲，透過寫 CSS 來幫小青蛙回家，或是幫胡蘿蔔澆水，能讓你快速理解 Flexbox 與 Grid 的所有排版指令！
去玩 Flexbox Froggy