大家好，我是 Tanuki，轉職上岸一年的前端工程師。

過去一年可以說是匆匆忙忙、連滾帶爬。專案中，經常碰到使用沒寫過的寫法、沒有處理過的需求。雖然透過 AI 輔助，幾乎所有問題都能迎刃而解。但是總覺得沒有積累起來。知道自己做過什麼，卻無法立即具體說明。所以想要透過文章輸出，有架構的統整知識點，同時回顧寫 code 當下的想法與考量。

參賽目標

本來在主題選擇時，還想要挑戰自我，嘗試研究不熟悉的主題。猶豫之餘，回想起個人多年烙賽的經驗，餅畫越大，越容易落空。於是保守選擇相對熟悉的領域。

這是我第一次參加鐵人賽，過去也沒有連續更新文章的經驗。老實說整個人皮皮 ㄔㄨㄚˋ。希望我能夠藉由這次的鐵人賽，培養輸出創作的習慣。

這系列適合怎樣的人

由於是回顧開發的過程，所以會略過 JavaScript 與 CSS 的基礎知識。

加上部分範例中，有使用 SCSS 與 Vue 分享模組化的思考過程，所以不太適合純新手直接閱讀。如果你符合以下的描述，大大地推薦：

• 對網頁動態、特殊視覺需求有興趣的人
• 與 UI/UX 有著愛恨情仇的前端
• 想讓前端擺出哭哭皮卡丘臉的設計師

初步規劃

本系列預計分享在專案中的實作經驗。將依類型分成四個子題。並在介紹實際案例前，會先釐清基本知識與語法，來加深自己的記憶。撰寫節奏將保持：介紹知識點 → 了解畫面需求 → 實作程式碼 → 說明與回顧。

四個子題如下：

1. 雙軸響應式
   • Grid 介紹
   • Grid 實戰
   • 圖片 RWD， size: contain、外框我全都要
2. SVG 向量圖形，真香！
   • SVG 結構與 CSS 操控原理
   • SVG 實戰
   • SVG 與 JS 應用
3. DOM 動起來
   • transform、animation 介紹
   • 有趣案例分享
4. 主題 UI
   • SCSS 管理架構主題色系
   • 主題動態變色的 UI 元件

應該會邊寫邊調整方向、內容，我也不知道最後發展成怎樣 😂

好耶！Day 1 完成！
明天，我們從前端最常處理的網頁布局開始，同一時間見～