鐵人檔案
這次挑戰將在30天內，使用 HTML、CSS、JavaScript 以及現代前端工具（例如：React/Vue/SASS）打造一個完全前端的小遊戲網站。
每天記錄設計與開發過程，從遊戲概念發想、版型切割、角色與場景動畫、RWD響應式設計，到最終部署到 GitHub Pages/Netlify，呈現一款可線上遊玩的網頁遊戲。
全程不使用任何後端服務，純粹依靠前端技術實現完整遊戲體驗，展現 Modern Web 的互動魅力。
Day 11建立專案結構：建立資料夾、HTML 骨架今天正式從設計走向開發，目標是為遊戲網站搭建清晰的專案檔案結構，並撰寫第一份HTML基礎骨架。良好的檔案結構...
Day 12版型切版：完成主要版面排版 今天的任務是將前幾天完成的設計規格文件與HTML骨架正式轉換成視覺化的網頁版面，也就是俗稱的「切版」工作。切版的核心是利...
Day 13配色套用：套用配色、字體、背景今天的任務是將前幾天所規劃好的配色方案、字體風格與背景設計正式套用到實際的網頁結構中，讓整個網站從純粹的框架與版型，逐...
Day 14 RWD 設定：手機版、平板版調整 今天的核心工作是讓網站在不同裝置上都能保持良好的使用體驗，正式進入RWD（Responsive Web Desi...
Day 15卡片/遊戲區切版：建立卡片外觀、按鈕樣式 今天的目標是針對遊戲的核心互動區塊進行詳細切版，特別是卡片的視覺設計與按鈕的樣式調整。這個步驟將讓網站的主...
Day 16CSS動畫：翻牌動作初步實作今天的任務是將昨天完成的卡片外觀進一步升級，透過CSS 動畫實現「翻牌」效果，讓遊戲從靜態版面進入更接近實際互動的狀態。...
Day 17主題：JS DOM 操作 — 建立卡片生成與翻牌事件今日目標前幾天完成了介面、切版、配色以及基本動畫，現在正式進入遊戲邏輯的實作。今天的重點是使用...
Day 18主題：基礎邏輯測試 — 翻牌後能翻回、簡單配對測試 今日目標在第 17 天，我們完成了卡片的生成以及翻牌事件，卡片可以翻開，但目前只要點擊就會翻過去...
Day 19主題：音效 / 特效 — 成功或失敗時的動畫與音效今日目標在前幾天，我們已經完成了翻牌邏輯，卡片能夠生成、翻轉，並進行配對判斷。今天的任務就是為遊戲...
