鐵人檔案
本挑戰將用 30 天時間，運用 HTML、CSS、JavaScript 等從零打造一個專屬追劇迷的互動網站。網站將包含追劇清單、類型分類、收藏功能，以及心得留言牆，讓使用者能記錄觀後感並與其他人互動。整個過程將逐步完成網站架構、互動效果、樣式優化與功能整合，並分享學習心得與程式碼，適合想練習前端三劍客並完成作品集的參賽者。
目標：把整站顏色與陰影統一到設計 Token，之後改色只改一處。檔案：style.css步驟 1. 在 :root 補齊/微調 Token（已內建，可調整飽和度...
目標：建立字體階層（H1/H2/內文/輔助），提高年輕感與可讀性。檔案：index.html、style.css步驟 1. 已載入 Google Fonts（O...
目標：統一按鈕形狀、大小、狀態（hover/active/disabled）+ 微光澤。檔案：style.css步驟 1. 整合 .btn、.btn-warn、...
1. 色票微調（放在 :root{...} 後面即可） /* Day24 tokens tweak */ :root{ --y2k-blur: 10px;...
目標：使用 IntersectionObserver 做卡片入場動畫（已在 app.js 內建，這天微調節奏）。檔案：js/app.js、style.css步驟...
目標：提升心得牆表單的使用體驗： 輸入即時驗證（聚焦到錯誤欄位） 送出後有柔和提示 自動草稿保存（LocalStorage），誤關頁面不怕內容消失 要改的檔...
目標：重要操作都有一致的「小提示泡泡」（收藏/取消、送出、清空）。 要改的檔案：index.html、favorite.html、review.html、sty...
目標：把網站整理成「可分享、有預覽圖」並部署至 GitHub Pages / Netlify。 要改的檔案：index.html、favorite.html、r...
目標：不同裝置/瀏覽器表現穩定，基本 a11y 與效能良好。 要改的檔案：三個 HTML <head>、style.css 1.字體預連線（加速）...
作品簡介 這 30 天，我把腦中一直想做的「追劇管理＋心得記錄」變成了可用的網站——DramaWeb。它不靠後端、安裝零門檻，用瀏覽器就能完成「找劇 → 收藏...
