系列文章
# Day01. HTML 基礎：文件骨架與常用標籤入門
HTML（Hypertext Markup Language）--「超文本標記語言」，它是構建網頁的基礎，定義了網頁的結構，主要是在告訴瀏覽器這段文字是什麼東西...
# Day02. HTML 文字標籤大集合：讓文字不只是文字
Day02. HTML 文字標籤大集合：讓文字不只是文字 昨天我們蓋好了 HTML 的基本「骨架」，今天我們要在這棟房子裡擺放第一批家具——文字標籤。 說實話，...
# Day03. HTML 多媒體應用：打造生動頁面
昨天我們複習了各種文字標籤，讓一個單純的 HTML 頁面變得更有「層次感」。但老實說，一個只有文字的網站，確實有點單調。想像一下，如果遊戲裡只有文字敘述，沒有角...
# Day04. CSS 入門：奇蹟✦網頁✦暖暖
昨天我們學了圖片與多媒體，網站開始豐富起來了。但如果你現在打開一個只有 HTML 的網頁，它長什麼樣？──純文字、圖片堆疊在一起，白底黑字，毫無設計感｡ﾟヽ(ﾟ...
# Day05. JavaScript 登場：讓網頁有了靈魂
昨天我們用 CSS 把網頁裝扮得漂漂亮亮，但它依然只是「漫畫」——好看，但還是會讓人有想把它變更生動的想法。今天，終於要迎來前端的第三巨頭：JavaScript...
# Day06. JavaScript：從互動到邏輯 – 控制網頁的「大腦」
昨天，我們讓網頁「活了起來」──讓它會對使用者的點擊做出回應、能改變畫面顏色。但 JS 的世界遠不止如此，今天，我們要更深入學習如何用「邏輯」控制網頁，讓它不只...
# Day07. DOM 操作 & 表單驗證
昨天我們讓網頁開始有「記憶」，會依使用者行為做出反應。今天，我們要走得更進一步：不只回應，還能操控整個網頁內容、並驗證使用者輸入是否正確~。 DOM 是什麼？...
# Day08. 元件化思維 & 事件委派：讓程式更好維護
昨天我們學會用 DOM 操控網頁、驗證表單，體驗到「用程式和使用者對話」的感覺~今天，我們要往「更專業的前端開發」邁進，--元件化思維（Component Th...
# Day09. HTML & CSS 元件設計：按鈕
昨天我們在 JS 的世界裡與 DOM 奮戰太燒腦了，今天稍微「退一步」，回到 HTML & CSS，專注在元件 (Component) 的設計。 如果說...
# Day10. HTML & CSS 元件設計：卡片 (Card Component)
昨天我們談到按鈕元件，今天來做另一個常見的元件：卡片 (Card)。卡片是網站裡最常用的資訊展示方式，如：商品列表、部落格文章、會員資料等，甚至活動宣傳展示。一...