鐵人檔案
這個系列將以我喜歡的歌手為主題，透過 HTML、CSS、JavaScript 與 jQuery 等技術，製作一個專屬的歌手介紹網頁。內容將涵蓋：歌手基本資訊、專輯與歌曲列表、隨機播放歌曲、互動式元素，以及簡單的前端美化與動畫效果。
同時，在實作的過程中，我會每天記錄學到的知識點、遇到的問題與解決方式，並整理成技術分享文章，讓讀者不僅能看到成果，也能學習網頁開發的基礎與實務技巧。
1. 什麼是 DOM？ DOM (Document Object Model) 就是 把 HTML 文件轉換成 JavaScript 可以操作的物件。簡單來說，...
今天的主題是 RWD（Responsive Web Design，響應式設計）。其實我會想寫這個，是因為在專輯展示區的程式碼裡，我有看到 @media 的部分，...
前幾天我完成了專輯展示區，今天我想在新增一個區塊：MV 展示區。這個區塊跟專輯區很像，也是用左右箭頭滑動，但不同的是，點擊之後會直接跳到 YouTube 的 M...
今天的進度主要是把專輯的「詳細頁面」完成，讓使用者可以點擊首頁上的專輯，進到專屬的頁面，看到專輯封面、發行年份，以及完整的歌曲清單。 首先新增三個檔案，如下圖...
不知不覺，我的鐵人賽挑戰已經來到第 15 天，等於整整完成了一半。回顧這段時間，其實每天都在跟程式碼、Bug、CSS 排版苦戰，但同時也一步步把腦中的構想變成實...
前幾天我已經完成了專輯展示區，當時是用卡片的形式呈現，每張卡片上都有專輯封面、名稱以及發行年份。不過在實際瀏覽的時候，我覺得卡片的方式雖然清楚，但整體看起來有點...
目標 因為昨天修改了專輯展示區的內容，所以今天要一併修改滑動效果，達到以下效果： 當最後一個專輯或 MV 出現在最右邊時，右邊箭頭不能再點擊。 專輯展示區及...
目標 今天要完成的目標是：製作單曲展示區。結構格式和「專輯展示區」一樣，但不同的是： 專輯展示區 → 點擊後顯示歌曲清單 單曲展示區 → 點擊後會直接跳轉到該...
目標 昨天完成了首頁的「單曲展示區」，今天的任務是：點擊單曲後可以進入「歌詞頁面」，顯示該單曲的歌名、歌詞，並附上對應的 YouTube 按鈕，方便直接收聽歌曲...
目標 1.在歌名後新增 lyrics 按鈕，點擊後跳轉到歌詞頁面。2.完成第一張專輯的歌曲歌詞填寫。 實作過程 修改 album.js，每首歌後面新增 ly...
