iT邦幫忙

鐵人檔案

2025 iThome 鐵人賽
回列表
佛心分享-IT 人自學之術

30 天體驗:從程式菜鳥到前端新手工程師 系列

這系列將紀錄我一個程式小白,用 30 天挑戰成為前端新手工程師的學習歷程。內容會從最基礎的 HTML、CSS、JavaScript 開始,逐步帶到常用的排版工具與套件(如 Tailwind),並實作小專案來驗證學習成果。除了技術筆記,也會分享我使用線上資源(如 Codecademy)的心得,讓初學者能快速找到學習方向。希望能透過這 30 天的實戰分享,讓更多人看到「從零開始學前端」的可能性!

鐵人鍊成 | 共 30 篇文章 | 0 人訂閱 訂閱系列文 RSS系列文
DAY 21

掌控畫面!DOM 操作 (Day21)

前幾天我們已經學會讓網頁有反應(事件、輸入、點擊),但今天要更進一步 —— 學會「直接操控畫面元素」! DOM(Document Object Model)就是...

2025-10-05 ‧ 由 tingisgood 分享
DAY 22

整合起來吧!小專案開跑 (Day22)

恭喜你!一路從 HTML 到 CSS,再到 JavaScript,你已經掌握了製作網站的三大核心技術 🎉現在,是時候讓它們合體出擊 ——進入我們的第四週主題:小...

2025-10-06 ‧ 由 tingisgood 分享
DAY 23

進化你的網頁-讓清單真的「動起來」!(Day23)

到目前為止,我們已經用 HTML + CSS 做出一個 待辦清單(To-Do List) 的外觀。今天要進入最有趣的部分:讓清單真的可以「互動」🎯 今日目標完成...

2025-10-07 ‧ 由 tingisgood 分享
DAY 24

讓清單「更聰明」— 加入 Enter 快捷鍵 + localStorage 資料儲存 (Day24)

昨天我們做出了會動的待辦清單 ✅但如果你一關掉網頁,清單就不見了對吧? 今天,我們要讓它變成「會記得你的任務」的版本!我們會新增兩個進階功能: 1️⃣ 按下 E...

2025-10-08 ‧ 由 tingisgood 分享
DAY 25

清單再進化 — 加入分類切換 + 一鍵清空功能 (Day25)

到目前為止,我們的 To-Do List 已經能: ✅ 新增任務✅ 標記完成✅ 刪除項目✅ 儲存資料 但現實生活中,我們常會想:• 「我想只看還沒完成的任務」•...

2025-10-09 ‧ 由 tingisgood 分享
DAY 26

打造亮 / 暗色主題切換!讓網站更有設計感 (Day 26)

我們已經成功讓待辦清單可以「新增、刪除、標記完成」任務,甚至能記住資料。今天,我們要幫它換上漂亮的外衣——學會做出 亮色 / 暗色主題切換(Light / Da...

2025-10-10 ‧ 由 tingisgood 分享
DAY 27

前端超好用工具! - 用 Tailwind CSS 打造飛速開發的前端風格 (Day27)

我們已經學習了前端三巨頭-HTML、CSS、JS的基本架構也透過所學製作出一個可愛方便好用的記事本網頁接下來就來教大家一個在寫網頁時非常好用的工具「Tailwi...

2025-10-11 ‧ 由 tingisgood 分享
DAY 28

用 Tailwind 改造你的待辦清單!打造現代感 UI (Day28)

恭喜你走到這裡!這一路從 HTML、CSS、JavaScript,到昨天的 Tailwind 開發環境,你已經具備打造網站的完整基礎囉~ 今天,我們要把之前的「...

2025-10-12 ‧ 由 tingisgood 分享
DAY 29

部署上線!把你的網站放到 GitHub Pages (Day29)

恭喜你走到系列的最後階段 🎊經過前 28 天的努力,我們從零開始學會了:HTML 打地基、CSS 美化外觀、JS 加上互動、Tailwind 快速開發。 而今天...

2025-10-13 ‧ 由 tingisgood 分享
DAY 30

完結篇!我的第一個網站誕生了(Day 30)

恭喜你! 你真的完成了整整 30 天的前端入門學習從一開始的 HTML 架構,到 CSS 美化,再到 JavaScript 互動、Tailwind 快速開發,最...

2025-10-14 ‧ 由 tingisgood 分享