iT邦幫忙

鐵人檔案

2026 iThome 鐵人賽
回列表
Modern Web

從 UI/UX 設計到前端實作:30 天打造專屬的任務學習計時器 系列

作為程式初學者,常常無法精準預估完成作業或階段性任務所需的時間。市面上的計時器大多以「強制專注」為主,有時反而會在進入心流狀態時被番茄鐘硬生生打斷。因此,我希望能打造一款專為紀錄「實際耗時」設計的任務計時器,未來能更精準地評估專案時程。

本系列將以 Local-first(在地優先) 為核心,完全不依賴後端伺服器,並運用目前學到的初階前端技術,挑戰打造一個真正解決自身痛點的產品。

30 天內容將涵蓋完整的產品開發流程:從UI/UX設計、介面切版、前端邏輯、數據視覺化。希望這不只是一系列記錄文章,更是未來陪伴自己持續成長與學習的利器!

參賽天數 10 天 | 共 10 篇文章 | 0 人訂閱 訂閱系列文 RSS系列文
DAY 1

Day 01|為什麼我要為自己打造一款「學習任務計時器」?

關於這個系列:這是一個超超超新手的實戰建構全紀錄!內容包含了從主題發想、介面設計、Bootstrap 5 切版,一路到 JavaScript 動態功能實作的點...

2026-09-14 ‧ 由 aria_carrot 分享
DAY 2

DAY 02 | 定義MVP產品的核心功能與架構

🐥 新手開發日記本系列文章紀錄初學者從零開始建構產品的過程。內容以基礎觀念實作與學習筆記為主,如果發現內容較為簡單,(沒錯!你是對的xD!)還請多多包涵。...

2026-09-15 ‧ 由 aria_carrot 分享
DAY 3

DAY 03 | 運用 Bootstrap 5 快速建構 Mockup:從資訊架構到元件選型

🐥 新手開發日記本系列文章紀錄初學者從零開始建構產品的過程。內容以基礎觀念實作與學習筆記為主,如果發現內容較為簡單,(沒錯!你是對的xD!)還請多多包涵。...

2026-09-16 ‧ 由 aria_carrot 分享
DAY 4

DAY 04 | 流程圖的邏輯梳理

🐥 新手開發日記本系列文章紀錄初學者從零開始建構產品的過程。內容以基礎觀念實作與學習筆記為主,如果發現內容較為簡單,(沒錯!你是對的xD!)還請多多包涵。...

2026-09-17 ‧ 由 aria_carrot 分享
DAY 5

DAY 05 | 切版實作:Bootstrap 5 網格系統與響應式佈局

🐥 新手開發日記本系列文章紀錄初學者從零開始建構產品的過程。內容以基礎觀念實作與學習筆記為主,如果發現內容較為簡單,(沒錯!你是對的xD!)還請多多包涵。...

2026-09-18 ‧ 由 aria_carrot 分享
DAY 6

DAY 06 | 切版實作:Bootstrap 5 List Group 側邊選單搭建

🐥 新手開發日記本系列文章紀錄初學者從零開始建構產品的過程。內容以基礎觀念實作與學習筆記為主,如果發現內容較為簡單,(沒錯!你是對的xD!)還請多多包涵。...

2026-09-19 ‧ 由 aria_carrot 分享
DAY 7

DAY 07 | 切版實作:Bootstrap 5 Tab 頁籤切換與 List Group 整合

🐥 新手開發日記本系列文章紀錄初學者從零開始建構產品的過程。內容以基礎觀念實作與學習筆記為主,如果發現內容較為簡單,(沒錯!你是對的xD!)還請多多包涵。...

2026-09-20 ‧ 由 aria_carrot 分享
DAY 8

DAY 08 | 切版實作:Bootstrap 5 Accordion 手風琴元件與 Shadow 陰影

🐥 新手開發日記本系列文章紀錄初學者從零開始建構產品的過程。內容以基礎觀念實作與學習筆記為主,如果發現內容較為簡單,(沒錯!你是對的xD!)還請多多包涵。...

2026-09-21 ‧ 由 aria_carrot 分享
DAY 9

Day 09 | 切版實用:整合 Accordion、Progress 與 Badge 打造任務進度折疊清單

🐥 新手開發日記本系列文章紀錄初學者從零開始建構產品的過程。內容以基礎觀念實作與學習筆記為主,如果發現內容較為簡單,(沒錯!你是對的xD!)還請多多包涵。...

2026-09-22 ‧ 由 aria_carrot 分享
DAY 10

DAY 10 | 切版實作:用 Collapse 打造獨立折疊的子任務清單

🐥 新手開發日記本系列文章紀錄初學者從零開始建構產品的過程。內容以基礎觀念實作與學習筆記為主,如果發現內容較為簡單,(沒錯!你是對的xD!)還請多多包涵。...

2026-09-23 ‧ 由 aria_carrot 分享