網站工程

架設一個網站的工程(這邊講的是網站架設工程，不包含網頁視覺設計)主要分成兩大區塊：前端與後端。

前端工程負責網頁的門面，看得到的文字、顏色、連結、分頁連結、下拉選單、外部連結、文字輸入、甚至動畫技術等，都是前端工程的部分。網頁視覺設計師將設計稿給前端工程師，前端工程師把視覺畫面變成一個可供瀏覽、互動、增減內容的網站(比方說部落格)。

後端工程是使用瀏覽器瀏覽網頁的人(簡稱"使用者")看不到的那部分，像是伺服器處理、資料庫、應用程序等。

Web前端基礎技術

最基礎的前端技術就是HTML、CSS、Javascript。HTML建構了網站的內容與結構，CSS妝點網站的樣式，Javascript可以做到網站的互動。用機器人來比喻的話，HTML作出了骨架，CSS是它的皮膚、衣服，Javascript讓機器人可以跟人互動。

單單用HTML、CSS就可以做出一個很美的靜態網站(單純瀏覽內容，無法互動)，CSS美化網站的強大度可以看 CSS Zen Garden，參考一個靜態網站的不同風格設計。一些企業宣傳網站可能靜態網站就夠用，可是在網路資訊越來越蓬勃發展的情況下，網頁的互動性不可或缺，所以學習Javascript也是必須的。

而樣式框架Bootstrap則能讓網頁視覺架設更便利，我們用CSS調整網頁的樣式，Bootstrp就是樣式框架，是可以套用整個模板。除了Bootstrap官網本身的基礎模板，目前網路上也有很多不同風格模板可供下載使用。

Bootstrap模板除了風格套用之外，也可以拿來做RWD網頁，去適應各種不同螢幕大小的顯示器。點下圖可以看該模板的下載頁面，可以選擇看不同顯示器的套版樣式。

這麼方便？那可不可以都用樣式框架套就好了？

過份依賴樣式框架是危險的。當客戶需要細部修改時，前端工程師必須有能力用CSS指令去蓋掉原本的Bootsrap樣式。

Web前端進階技術

隨著網路使用的需求越來越多樣，網站已經不再停留於過往只有內容(HTML)、美觀(CSS)還有簡單的互動功能(Javascrip)，網站的功能越來越包羅萬象，必須有更多的技術介入。比如JS的函式庫Jquery ;JS框架，最常見的是Vue.js、Angular.js、React.js ;還有加快網站效率的Ajax ;學習webpack時，必須認識Node.js這款跨後端的技術(webpack是在它上面運作的）;還有Git版本控制，來管理團隊開發過程專案的檔案更新及備份。

但我目前也還無法講清楚技術內容在幹嘛...因為還沒有學到那(羞)。

網頁前端工程的技術需求，是隨著當代的網路需求來衡量的，也意味著前端工程師必須不斷的更新自己的技能，注意技術的演進，否則被時代淘汰可是很容易就發生的事。(真是讓人 崩潰 充滿鬥志呢)

關於更多的前端學習內容，也可以參考六角學院的 前端學習地圖。

前端也要會設計嗎？

前端工程師不一定要會設計，專案裡的設計師跟前端工程師通常是兩個不同的職位，但如果你是一個會設計的前端工程師，當然是加分的。

雖然不需要包到設計的技術，但前端工程師作為網頁設計師跟後端工程師的中介，當一個團隊進行專案協作時，前端工程師實現網頁視覺設計師的視覺稿，同時也要能在後端工程師生出API時，跟後端工程師溝通，進行串接API等工作。所以也不能完全沒有概念，否則在溝通撞牆會增加彼此大多工作量。

總而言之，在自學的路上，技術是可以一直學下去的，單看自己想朝什麼方向鑽研。保持求知欲，才能在前端的路上越走越前面囉。

• 有任何錯誤或描述不夠精準之處，歡迎指教，非常感謝。