前端 Frontend

你可能會這樣說

大家一直說前端、後端，到底差在哪？我只想做個網站啊。

前端就是使用者在瀏覽器裡看得到、點得到的那一層：版面、顏色、字體、按鈕、動畫，全部都是前端。你在網站上看到的每一個像素，都歸它管。

跟它相對的是後端——躲在伺服器裡、使用者看不到的部分。一個好記的比喻：前端是餐廳的用餐區，後端是廚房。客人（使用者）只會評論餐桌舒不舒服、菜好不好看；至於冰箱怎麼擺、庫存怎麼算，那是廚房的事。

跟 AI 協作時，你講的「這個按鈕太大」「字換顏色」「選單改成置中」幾乎都是前端的事。這也是為什麼做網站的人，第一個要搞懂的詞就是它。

瀏覽器 · 使用者看得到

加入購物車取消

伺服器 · 使用者看不到

資料庫 · 會員資料 · 訂單紀錄

提示：點上面的按鈕，看看誰負責什麼。

圖 1-1　點切換看看：網站拆開來，哪些東西屬於前端、哪些屬於後端。

前端和後端常常被混在一起講，用「使用者看不看得到」來切分最不容易出錯。

在使用者的瀏覽器裡執行。按鈕、表單、動畫、字體、顏色、選單展開收合——看得到、摸得到的都是。跟 AI 說「畫面」「版面」「操作起來的感覺」，就是在講前端。

在伺服器上執行。會員資料存哪、密碼怎麼驗、訂單送到哪——使用者的眼睛看不到。跟 AI 說「資料」「儲存」「帳號」多半會碰到後端。

中文就可以

我想做一個個人作品集網站，目前只先做「前端」：

1. 不需要會員、不需要資料庫，資料先寫死在頁面裡就好。
2. 首頁要有：大標題、自我介紹、三個作品卡片、頁尾聯絡方式。
3. 樣式請用溫暖一點的色調，電腦和手機都要能正常看。

請先做出靜態版本讓我看畫面，之後再討論要不要加後端功能。

先明確說「這階段只做前端」，AI 就不會自作主張幫你裝資料庫、架伺服器，東西會單純很多。