鐵人檔案
為什麼要換圖片？ 想像你在手機上看一張桌機版的橫幅圖，結果圖片被縮到看不清字，或是浪費了流量載入超大檔案，這就是使用同一張圖的問題。解法：根據裝置大小載入不同圖...
切版前的準備工作：格式設定與注意事項 切版（也就是將設計稿轉成網頁）前，我們常常會急著開工，但先做好基本設定，可以省下日後許多麻煩。以下是幾個重要的步驟與觀念：...
為什麼會出現 X 軸？ 當網頁的內容寬度超過了瀏覽器視窗（viewport）的寬度時，就會自動產生 X 軸。這通常是因為以下幾種情況： 元素設定了固定寬度...
1. 擬態類別（Pseudo-class） 這是針對「元素的狀態」來加樣式。想像它像是「條件判斷」，滿足就套用。常見的有： -:hover → 滑鼠移過去時 -...
🔹 Pseudo-class（擬態類別，針對狀態） 選擇器 用途 範例 :hover 滑鼠移到元素上 button:hover { backgro...
🔹 SCSS 是什麼？ SCSS 是 Sass 的一種語法，可以把它理解成「超進階版的 CSS」。平常我們寫 CSS 時，可能會覺得： -樣式重複好多次 -想用...
🔹 傳統打包工具的痛點 像 Webpack、Parcel 這些老工具，啟動專案時會先把所有檔案打包成一坨，再丟給瀏覽器。這就造成： 專案小 → 沒感覺...
Vite 環境安裝教學 要開始用 Vite 開發專案之前，第一步當然是把環境裝起來。別擔心，流程比你想像的簡單很多。 🔹 第一步：安裝 Node.js Vite...
用 GitHub Pages 部署你的網站（初學者教學） 你寫好了自己的網頁，想把它放到網路上讓大家都能看到嗎？GitHub Pages 是一個超棒的免費工具，...
表格與表單設計技巧：讓使用者更好用、更容易理解 在網站或系統中，「表格（Table）」和「表單（Form）」都是常見的資訊呈現與資料輸入方式。如果設計得好，不但...
