鐵人檔案
作為程式初學者，常常無法精準預估完成作業或階段性任務所需的時間。市面上的計時器大多以「強制專注」為主，有時反而會在進入心流狀態時被番茄鐘硬生生打斷。因此，我希望能打造一款專為紀錄「實際耗時」設計的任務計時器，未來能更精準地評估專案時程。
本系列將以 Local-first（在地優先） 為核心，完全不依賴後端伺服器，並運用目前學到的初階前端技術，挑戰打造一個真正解決自身痛點的產品。
30 天內容將涵蓋完整的產品開發流程：從UI/UX設計、介面切版、前端邏輯、數據視覺化。希望這不只是一系列記錄文章，更是未來陪伴自己持續成長與學習的利器！
🐥 新手開發日記本系列文章紀錄初學者從零開始建構產品的過程。內容以基礎觀念實作與學習筆記為主，如果發現內容較為簡單，(沒錯！你是對的xD！)還請多多包涵。...
確立了自身的痛點後，下一步就是進行 MVP（Minimum Viable Product，最小可行性產品） 的功能範疇收斂。為了確保能順利在 30 天內產出，我...
在確定了核心功能和資訊架構後，下一步就是將抽象的頁面階層設計出視覺化的產品雛形（Mockup）。 為了在 MVP 階段快速搭建原型並維持簡潔的風格，我選擇使用...
在完成介面雛形（mockup）後，下一步就是定義應用程式的 Happy Path（理想主流程） 與 視覺反饋。透過梳理流程圖，能幫助我們在動手寫 JavaScr...
在完成了 Mockup 與核心流程圖（Happy Path）後，接下來就要正式進入切版實作階段，我們將運用 Bootstrap 5 的元件與網格系統進行畫面切版...
上一篇我們運用了 Bootstrap 5 的網格系統（Grid System），讓畫面在不同裝置尺寸下（以 768px 為分界點）能呈現響應式的佈局。 接下來，...
在翻閱 Bootstrap 官方文件時，會發現 Components 中的 Navs & Tabs 提供了非常便利的頁籤切換機制，讓使用者點擊選單按鈕時...
完成了側邊選單與 SPA 頁面切換骨架後，接下來我們先來製作 常見 QA 區域。這裡要使用的元件是 Bootstrap 5 的 Accordion（手風琴）。...
在上一篇文章中，介紹了如何運用 Accordion（手風琴） 元件來製作常見 FAQ 的頁面。這個元件同樣非常適合延伸套用在「任務列表頁面」上，讓過長的內容可以...
在上一篇中，使用了 Accordion（手風琴） 來製作主任務列表。接下來，要處理下一層的「子任務與計時紀錄清單」。 在這個區塊中，我選擇直接套用 Collap...
