鐵人檔案
這系列將紀錄我一個程式小白，用 30 天挑戰成為前端新手工程師的學習歷程。內容會從最基礎的 HTML、CSS、JavaScript 開始，逐步帶到常用的排版工具與套件（如 Tailwind），並實作小專案來驗證學習成果。除了技術筆記，也會分享我使用線上資源（如 Codecademy）的心得，讓初學者能快速找到學習方向。希望能透過這 30 天的實戰分享，讓更多人看到「從零開始學前端」的可能性！
你有沒有遇過這種狀況：排一個橫向的區塊，結果文字或圖片怎麼對都不整齊？以前我們常常用 float 或 inline-block 來處理，結果不是跑版就是空隙很奇...
昨天我們學了 Flexbox，發現它很適合排「一條線上的東西」，像是導覽列或橫向的卡片。但如果今天要排一整個「二維的版面」呢？比如：部落格的主內容 + 側邊欄...
你有沒有遇過這種情況：網頁在電腦上看起來很完美，但拿手機打開卻字太小、圖片爆版、排版全亂？這就是沒有做 RWD（Responsive Web Design，響應...
今天是學習CSS的最後一天！我們就來學習讓網頁從「靜態」變成「動態」，用簡單的動畫與過渡效果，讓畫面更有互動感！ 1. transition（過渡效果） tra...
前兩週我們把房子蓋好（HTML 結構）也裝潢漂亮（CSS 樣式），但它還是「靜態」的。今天，我們要接上電力系統 —— JavaScript (JS)，讓網頁開始...
昨天我們學會了 JavaScript 的「第一步」，成功在網頁上輸出文字，還能加上互動。不過如果每次都要「直接寫死內容」，就會很不方便。 今天，我們要學會 變數...
昨天我們學會了「變數」這個小倉庫，能把資料存起來再拿出來用。但如果我們想要根據不同情況，做出不同的結果呢？這就是 條件判斷 (if/else) 要登場的時候了！...
昨天我們學了 if/else 條件判斷，能讓程式走不同的分支。但有時候我們需要程式 重複做一件事，例如： •把 1 到 100 的數字加總 •顯示 10 次「H...
昨天我們學了 迴圈，能讓程式自動重複做事情。但有時候我們想要「打包一段程式」，以後要用的時候只要叫它名字，它就會乖乖跑。 這個「魔法咒語」就是 —— 函式 (f...
到目前為止，我們已經會用 函式 來打包程式邏輯。但問題來了——要怎麼讓這些函式「自動啟動」？🤔 答案就是：事件 (Event)！ 事件是網頁互動的靈魂 ❤️只要...
