iT邦幫忙

2026 iThome 鐵人賽

DAY 30
0
自我挑戰組

找回消失的程式手感:從 Figma 到 VS Code 設計系的 30 天前端打怪日常系列 第 30 篇

Day 30:最終完賽心得:從 Figma 走向 VS Code 的這 30 天,我的前端冒險才正要開始!

  • 分享至 

  • xImage
  •  

當你看到這篇文章時,代表我們真的辦到了——我們順利完成了 30 天的鐵人賽挑戰!

回想起第 01 天剛打開 VS Code、看著密密麻麻的程式碼還一頭霧水,到現在我們學會了 HTML 骨架、CSS 盒模型與排版神器 Flexbox/Grid、用 JavaScript 操縱 DOM、點擊互動、串接 API 抓資料、甚至用 Tailwind CSS 快速刻版並部署上線。

這 30 天像是一場高強度的線上馬拉松。今天不寫艱澀的扣(Code),我們來好好沈澱與慶祝這段奇幻的旅程!


回顧這 30 天:我們到底解鎖了什麼?

把這一個月的足跡串起來,其實我們完成了一件很酷的事:

  1. 第一週(基礎骨架與視覺): 搞懂了網頁的角色分工、HTML 語意化、CSS 選擇器,並用 Box Model 與 Flexbox/Grid 征服了排版。
  2. 第二至三週(邏輯與動態互動): 跨入 JavaScript 的世界,學會變數、條件判斷、陣列物件,並透過事件監聽與 DOM 操作,親手做出了 Todo List、計數器與 Modal 彈跳視窗。
  3. 第四至五週(進階實戰與上線): 挑戰了最酷的 Fetch API 資料串接、即時搜尋、LocalStorage 本地儲存、用 Tailwind 快速打造介面,最後成功將作品部署到雲端!
    我們不再只是「只會畫設計稿、卻無法實現」的介面設計師,而是具備實作能力的雙棲前端學習者。

完賽不是終點,而是真正的起跑點

很多人常說,鐵人賽的結束才是前端學習的開始。
雖然 30 天的挑戰告一段落,但前端的世界浩瀚無垠:

  • 接下來,我們可以開始接觸更強大的前端框架(像是 Vue.js 或 React)。
  • 可以動手打造一個真正屬於自己的完整個人作品集網站(Portfolio)。
  • 可以深入研究 Git 版本控制與更複雜的團隊協作流程。
    但不管未來技術怎麼變,這 30 天建立起來的「邏輯思考能力」與「動手解決問題的勇氣」,將會是你身上最珍貴的資產。

給正在看這篇文章的你

如果你也是非本科、設計系出身,或是正準備踏上轉職前端的路上:
請相信自己,那些你在設計排版時累積的直覺與美感,絕對不會白費;而程式碼裡每一個被你除錯成功的 Bug,都在默默讓你變得更強大。

我是孫小豬,我們的 30 天鐵人賽到這裡正式完賽!謝謝一路上堅持不懈的自己,也謝謝持續追看文章的每一個你。


上一篇
Day 29:設計師的專屬前端武器庫:那些年拯救過我的神級工具與學習資源
系列文
找回消失的程式手感:從 Figma 到 VS Code 設計系的 30 天前端打怪日常 共 30 篇
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言