本挑戰將用 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. 更新首...