來到鐵人賽的第 29 天，也就是倒數第二篇！

回顧這一個月來，我們從 VS Code、Figma 觀念對照、HTML/CSS 一路打怪到 JavaScript 與 Tailwind CSS。很多朋友常問我：「非本科或設計系轉前端，到底要怎麼挑選工具才不會迷路？」

今天我就把這陣子在學習與實戰中，覺得最好用、甚至救過我無數次的「神級工具與學習資源清單」一次大公開！

開發與除錯神器（Coding & Debugging）

1. VS Code（Visual Studio Code）：

• 毫無懸念的首選編輯器。強烈推薦安裝 Live Server（即時預覽網頁）、Prettier（自動排版排版美化工具）跟 Tailwind CSS IntelliSense（自動提示類別），直接讓寫程式的速度開掛。

2. 瀏覽器 Developer Tools（F12 / 開發者工具）：

• 前端工程師的好朋友。特別是 Console（主控台） 看錯誤訊息，以及 Elements（元素面板） 即時修改 CSS 樣式、看 Box Model 邊距，這比任何教科書都還直覺！

介面與排版輔助工具（UI & Layout Helpers）

1. Tailwind CSS Play / Documentation：
   寫 Tailwind 時最強大的官網文件。它的搜尋功能極度強悍（只要搜 shadow 或 flex 就會跳出一堆範例），甚至可以直接在線上 Playgound 測試程式碼。

2. Flexbox Froggy / CSS Grid Garden：

• 如果你對排版還是有點障礙，這兩個闖關小遊戲絕對是救星。用玩遊戲的方式把 Flexbox 的對齊跟 Grid 練到滾瓜爛熟！

持續進修與查資料的聖地（Learning Resources）

1. MDN Web Docs (Mozilla Developer Network)：

• 前端界的百科全書。不管是查 HTML 標籤、CSS 屬性還是 JS 的內建方法（例如 .filter()、fetch()），看 MDN 的說明最準確、最權威。

2. CodePen：

• 靈感枯竭時的挖寶天堂。上面有全世界前端大神寫的各種酷炫特效、UI 動畫和元件。你也可以把自己的小作品直接發布到 CodePen 上分享給朋友。

今日小結

工欲善其事，必先利其器。有了這份專屬的工具箱與資源清單，未來就算遇到沒看過的新語法或排版難題，也知道要去哪裡找答案了！

明天的 Day 30，我們就要迎來這場 30 天鐵人賽的最終完賽篇，一起回顧這段從設計走向程式的奇幻旅程！