鐵人檔案
本挑戰將用 30 天時間，運用 HTML、CSS、JavaScript 等從零打造一個專屬追劇迷的互動網站。網站將包含追劇清單、類型分類、收藏功能，以及心得留言牆，讓使用者能記錄觀後感並與其他人互動。整個過程將逐步完成網站架構、互動效果、樣式優化與功能整合，並分享學習心得與程式碼，適合想練習前端三劍客並完成作品集的參賽者。
你是否常常因為影集太多而猶豫不決，不知道該看哪一部？別擔心，現在就讓我們著手打造一個屬於自己的客製化追劇網站！這個網站的目標，是讓喜歡追劇的人能更方便地瀏覽劇集...
昨天我們完成了網站功能的規劃與草圖設計，今天就來動手把專案的骨架先搭好！雖然今天的進度看起來很簡單，但這一步非常重要，因為一個乾淨的檔案結構可以讓後續的開發更有...
昨天我們完成了網站功能的規劃與草圖設計，今天就來動手把專案的骨架先搭好！雖然今天的進度看起來很簡單，但這一步非常重要，因為一個乾淨的檔案結構可以讓後續的開發更有...
今天目標：把首頁清單做成真正的「劇集卡片結構」（封面／片名／類型／評分／收藏★）。先用假資料排版，之後再改成JS動態渲染。 1. 直接貼上「卡片 HTML」...
1. 在 script.js 加入收藏按鈕切換 （如果你還沒有 script.js，就新增一個檔案並在 HTML <body> 結尾前用 <s...
昨天我們完成了劇集卡片的 HTML 結構，今天就來把「篩選區」變得更好用、更好看！雖然看起來只是一些小互動，但這會大幅提升使用者體驗，之後接上真正的篩選邏輯也更...
昨天我們完成了篩選的 UX（可切換、chips、清除），今天就來做全面檢查與整理！雖然看起來只是小修小補，但這一步會讓後面每一個功能都更省力。 1. 版面檢查...
昨天我們把篩選 UI 做好了，今天就讓它真的動起來！雖然只是基本邏輯，但這是之後加上「搜尋、排序、收藏、LocalStorage 記憶」的關鍵基礎。 1. 在...
昨天我們讓清單用 JS 動起來，今天加上「即時搜尋」。雖然只是幾行 JS，但使用者體驗會大幅提升，也為之後的排序、收藏打好基礎。 1. 在篩選區加入「搜尋欄位...
昨天我們完成了搜尋與類型篩選，今天要把「喜歡」的作品記錄下來。雖然只是幾行 LocalStorage 操作，但它會讓網站從「展示」變成「可用」。 1. 更新首...
