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

那在正式進入程式碼之前，首先需要先了解網頁的結構，了解一下我們平常看到的網頁，背後到底是由哪些角色組成的?
之前在學的時候總是，老師說:現在寫HTML，我們就寫HTML，老師說寫CSS，我們就寫CSS...等等，甚至也有同學是沒有運用，UIUX設計網頁，就直接撰寫程式碼。感覺對於網頁的結構好像沒有一個很明確的認知，知道HTML、CSS、JS的差異。所以想要藉由這個機會來去好好了解，才能更好的去撰寫與製作出好的網頁，而不是單純為了做而做。

UIUX

• 角色定位:網頁的視覺美術設計
• 主要工具:Figma、Illustrator 等
• 功用:在開始製作網頁前，我們會先設計、決定網頁的大概樣式，就像是設計圖稿一樣，像是使用者會怎麼用這個產品、按鈕要放哪裡、字體大小、色彩配置，以及整體的互動流程。沒有 UI/UX，工程師就不知道要刻出什麼長相的畫面，只能頻空想像。

HTML

• 角色定位:網頁的結構與內容
• 主要工具:VS Code等
• 功用:當設計藍圖畫好後，HTML 負責把文字、圖片、標題、表格這些「內容」放到網頁上。它不管好看不好看，只負責定義「這是什麼東西」（例如：這是一個標題、這是一張圖片、這是一個按鈕）。
• 設計的視角:就像是在 Figma 裡拉出一個個 Frame 和文字圖層，先把東西定位出來。

CSS

• 角色定位:網頁的視覺與樣式
• 主要工具:VS Code等
• 功用:光有骨架的網頁會醜得像 90 年代的小白板。CSS 負責幫 HTML 上妝、調整顏色、排版、設定陰影、甚至做響應式設計（RWD），讓網頁在手機跟電腦上都好看。
• 設計的視角:也就是你平常在 Figma 調整的那些數值：填色（Fill）、外框（Stroke）、特效（Effects）和自動佈局（Auto Layout）。

JS(JavaScript)

• 角色定位:網頁的邏輯與動態行為
• 主要工具:VS Code等
• 功用:只有 HTML 跟 CSS 的網頁是「靜態」的。如果今天使用者點了一個按鈕，要跳出彈跳視窗（Modal）、或者是資料要即時更新、滑動輪播圖，就要靠 JavaScript 來賦予網頁「動態反應」的能力。
• 設計的視角:就像是 Figma 裡的 Prototype（互動原型設定），串連起「點擊 A 就要展開 B」的邏輯。