鐵人檔案
本系列將循序漸進帶大家深入現代前端開發。內容涵蓋 HTML5、CSS3、JavaScript ES6+ 的基礎與進階技巧，進一步探討 RWD、效能優化、Web API、PWA、前端安全、測試與部署等主題。
同時，也會帶入前端框架（Vue.js 為主）與工具鏈（Vite、GitHub Actions），並在最後整合成一個小專案，展現完整的 Modern Web 開發流程。讓讀者能逐步累積完整的前端開發能力。
學習目標 建立一個登入表單，並進行即時驗證（必填、格式檢查）。 使用 API 來模擬登入請求。 學習**Token-based Authentication...
學習目標 了解「受保護 API」的概念。 使用 Token 呼叫受保護的 API。 實作「登入 → 顯示會員資料」流程。 加強 Token 檢查與錯誤處理。...
學習目標 了解Access Token與Refresh Token的概念與差異。 實作自動刷新 Token 的流程。 讓登入狀態在 Token 過期後仍可自動...
今天我們要學習如何使用localStorage讓網頁資料在重新整理後依然能保存。這是前端開發中非常實用的功能，例如： 儲存使用者偏好（主題模式、語言設定） 儲...
今天我們要升級前一堂課的作品！你將學會如何讓使用者可以： 勾選任務完成狀態（✔️） 切換「亮色 / 暗黑模式」🌙 保存這些設定在 localStorage，重...
學習目標 在每個任務中加入「建立時間」資訊。 新增「清除全部任務」按鈕。 新增「導出 JSON 檔案」功能。 完整練習Date 物件與Blob 檔案下載技巧。...
今天目標 新增即時搜尋（關鍵字過濾）功能 — 支援模糊比對。 顯示任務統計：總數、已完成、未完成。 在 UI 搜尋時顯示「無符合結果」提示。 使用 debou...
今天目標 搜尋可以同時比對 task.text 與 task.time（模糊比對）。 新增排序選單： 新到舊（Newest） 舊到新（Oldest） 未完成...
今天目標 每個任務可以新增多個標籤（tags）。 搜尋功能支援： 同時搜尋「任務文字」＋「建立時間」＋「標籤名稱」 使用多關鍵字搜尋（空白分隔） 可切換搜尋...
前言 恭喜完成 30 天系列！🎉今天把整個 To-Do 專案收尾成一個更有洞察力的儀表板：標籤統計面板 + 圖表視覺化。透過圖表你可以快速看到各標籤任務數量分布...
