鐵人檔案
《30天技能樹養成：開啟前端冒險秘境》是一場從零開始的程式旅程~
我們把學習想像成探索秘境，每一天就是點亮技能樹的一個節點。從 HTML 打下基礎、CSS 建立美感，到 JavaScript 賦予互動，再逐步觸碰框架，透過循序漸進的任務，不只是在背語法，而是親手打造屬於自己的冒險裝備。30天後，從中磨練屬於新手冒險者的第一把「程式之劍」。這趟旅程不求速成，而是讓學習變得具體、有趣，藉由一步步打怪升級，進入前端的奇幻世界。
今天讓卡片更有「內容層次」與「狀態」~ 在網頁設計中，卡片並不只是單純的資訊容器，它還需要能夠表達重點訊息和不同情境，這在昨天也有簡單提到。。 例如：有些商品需...
昨天我們在卡片上加了「標籤 (Badge)」，今天要把它做成一個獨立的小元件，以後在網站各個地方都能用，更詳細的說說 1. 什麼是「標籤」？ 標籤 (Tag/...
昨天我們學會了如何做「標籤 (Tag/Badge)」，並且了解了「共用樣式 + 個別樣式」的基本概念。今天要更進一步，討論標籤在不同情境下的應用，以及如何加入互...
昨天我們把標籤 (Badge/Tag) 和卡片 (Card) 元件整合，學會了基本排列與 hover 效果。今天，我們來深入討論 CSS 元件的一些「細節設計」...
昨天我們學會了按鈕的基本元件設計（尺寸、顏色、圓角、hover、disabled），今天要進一步優化按鈕!! 1. 進階按鈕設計 按鈕是網站最常見的互動元件，...
昨天我們完成了按鈕的互動設計，今天要解決另一個 UI 常見問題：「為什麼東西沒要按照預想到預期的位置？」 答案就在 元素的邊界與空間。沒有進行良好的推擠時，很有...
昨天我們學了 margin、padding、border、gap，今天來解決常遇到的怪問題：「為什麼我設了 margin，結果它不見了？」 1. 問題現象：M...
昨天我們學了 margin collapse 和 block/inline 元素的邊界陷阱，今天我們來討論另一個前端常見的「排版魔法」：文字行距與垂直間距控制。...
昨天我們學了文字行高 (line-height) 控制，今天來討論另一個核心技能：CSS 長度單位與大小控制! 1. 為什麼單位很重要？ CSS 的單位決定了...
昨天我們掌握了 CSS 單位（px、em、rem、%、vh、vw），今天要把「元素排列」升級，學會 Flex 與 Grid 排版，這些之前都有多少用到，今天剛好...
