iT邦幫忙

鐵人檔案

2026 iThome 鐵人賽
回列表
自我挑戰組

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

作為設計系畢業的學生,也曾做過UIUX相關設計工作,過去雖然曾學過前端程式,但隨著時間久沒碰,記憶也漸漸淡忘。這次藉著鐵人賽的機會,希望能找回程式的手感與記憶,從基礎開始重新複習與扎根。不求一步登天,只希望能把前端操作練得比以往更熟悉、更扎實,記錄這 30 天從設計到程式的打怪日常!

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

Day 01:前言|找回消失的程式手感:從 Figma 到 VS Code 設計系的 30 天前端打怪日常

常常覺得學了東西,久不碰它就會漸漸忘記了,這樣是算「會」還是「不會」呢? 大學的時候學了工藝設計+產品設計,因為想要增加自己未來的選擇與競爭力,去學習了數位設計...

2026-09-15 ‧ 由 孫小豬 分享
DAY 2

Day 02:開工第一步!給設計師的 VS Code 安裝清單與快捷鍵對照

上一篇我們提到雖然以前就接觸過前端,但隨著時間久沒碰,便漸漸淡忘......與其沉浸在「學了又忘,到底算會不會」的恐慌,不如著手開始扎實基礎,熟練操作。從設計到...

2026-09-16 ‧ 由 孫小豬 分享
DAY 3

Day 03:網頁世界的角色分工:UI/UX、HTML、CSS、JS 到底分別在幹嘛?

Ok前面都是在講述自己對於「會」與「不會」的困惑與恐懼,以及架設一個好的環境來讓設計系畢業的我對於程式的學習可以更快上手,所以介紹一些從設計到程式的一些輔助外掛...

2026-09-17 ‧ 由 孫小豬 分享
DAY 4

Day 04:第一行程式碼:HTML 的基本骨架長什麼樣子?

上一篇主要介紹了網頁的結構,讓大家更了解網頁各個角色的各自分工與包含的內容。那今天就要正式進入到程式碼的部分,首先從基礎的HTML的基本骨架開始介紹。 剛開始...

2026-09-18 ‧ 由 孫小豬 分享
DAY 5

Day 05:網頁的骨架:用設計圖的「圖層觀念」來理解 HTML 語意化

昨天我們認識了一個網頁最基本的大外框與骨架(head 幕後大腦與 body 實體舞台)。今天,我們要進一步來看看:要把東西放進舞台裡時,該怎麼組織它們? 身為一...

2026-09-19 ‧ 由 孫小豬 分享
DAY 6

Day 06:幫網頁上妝:CSS 選擇器與基本樣式初體驗

昨天我們把 HTML 的骨架和圖層結構梳理好了,不過打開瀏覽器一看一定會覺得好像就只是把文字、圖片甚麼的放上去,好像毫無美感可言。接下來今天這篇將是幫網頁大改造...

2026-09-20 ‧ 由 孫小豬 分享