前言

近期與友人提到前後端定位後，發現友人對於前端的認知不是很清楚，因此我就想要寫一篇文章來介紹一下前端的基本知識，讓大家對於前端有一個基本的認知。

甚麼是前端？

前端是指網頁的前端，也就是網頁的使用者介面，包含了網頁的內容、結構和外觀等等，主要是使用 HTML、CSS 和 JavaScript 來實現。

前端有工作有以下幾種：

  1. 前端設計師 (UI / UX/ RWD)
  2. 前端工程師 (實現畫面、多複雜功能、排版等)

依據工作內容定義上還是有落差，也可以稍微專注 104 資訊上的職缺，來了解前端工程師的工作內容。

網站三兄弟

網站的前端主要由三種技術組成，分別是 HTML、CSS 和 JavaScript，這三種技術各司其職，共同組成了一個完整的網站。

1. HTML

HTML 是 HyperText Markup Language 的縮寫，中文翻譯為超文本標記語言，是一種用於建立網頁的標準標記語言，它描述了網頁的結構，並且使用標籤來標示網頁上的不同內容，包括 元素(Elements)、標籤(Tag)、內容(Content)，例如標題、段落、表格、圖片等等。

2. CSS

CSS 是 Cascading Style Sheets 的縮寫，中文翻譯為層疊樣式表，它是一種用於定義網頁內容樣式的語言，它可以控制網頁的字體、顏色、間距、邊框、背景等等。

3. JavaScript

JavaScript 是一種腳本語言，它可以用來實現網頁上的動態效果和行為，例如網頁上的按鈕點擊、表單驗證、動畫效果等等。

簡單來說

製作網站不用想太複雜，前端就像是一個建築師一樣請告訴程式碼你想要的樣子，程式碼就會幫你實現。

  • HTML : 結構 / 鷹架
  • CSS : 外觀 / 裝潢
  • JavaScript : 行為 / 動作 / 互動

如果多樣性就會依據不同的需求，來使用不同的技術來實現。

後端與前端主要定位

當然很多人會問，前端與後端的定位是什麼？我們可以簡單的來看一下，前端與後端的定位。

1. 前端

前端主要是使用者介面，也就是網頁的使用者看到的畫面。每個建築商都會想把自己的建築物打造的漂亮，因此前端的定位就是把網頁打造的漂亮，讓使用者有好的體驗/舒適感，例如 UI/UX/RWD。

2. 後端

後端主要是網頁的功能，也就是網頁的使用者可以使用進階的功能。後端請像是IOT的智慧家庭，可以控制家電，例如：開燈、關燈、調整溫度等等，不見得一定為這功能去家設定。

總結前後端定位

簡單來說，前端是房屋後端是家電，為了讓屋主可以住得舒適，前端就會把房屋打造的漂亮，後端就會把家電的功能實現讓住家可以達到便利。

總結

照這樣定位有人提問是不是後端不必要加入，這有兩種情況只需要前端就可以：

  1. 介紹、個人網站、行銷網站
  2. 低成本、低預算、低維護

光前端預算上就會比較高，因為前端需要設計師、工程師、維護人員，而後端只需要工程師、維護人員，因此如果是低成本、低預算、低維護的網站，就可以只使用前端。

後面人們都需求越來越多，就會需要用到後端的彈性來解決前端不足的問題，例如：購物網站、社群網站、論壇網站等等。