HTML5是Web的未來，不僅在電腦端，而且在移動端也一定會得到廣泛的應用。據統計2013年全球將有10億手機瀏覽器支持HTML5，同時HTML Web開發者數量將達到200萬。毫無疑問，HTML5將成為未來5-10年內，移動互聯網領域的主宰者。因此，想轉型來做Web前端的人越來越多。

本文將以UI設計師轉型做Web前端作為案例，詳細解讀學Web前端該學習哪些專業知識！當然也適用于所有想轉型Web前端的親們！

一、如何學習Web前端知識轉型？

不少UI設計師想要學習Web前端知識，一方面是喜歡那些華麗的網頁特效，另一方面則是想成為全棧式UI設計師。

1、HTML/CSS學習

第一階段，你要從最基礎的HTML/CSS開始，簡單地說，HTML就是一堆非常簡單的標簽，而CSS則是把你畫畫的流程用英語按一定的格式寫出來。然后你需要理解常用HTML標簽的意思，學會各種CSS的屬性，還有CSS的盒模型、優先級、選擇器……

2、JavaScript學習

第二階段，你要是想在網頁上實現交互效果，比如輪播圖、點擊按鈕后播放動畫等等，那么就必須學會JavaScript。JavaScript是一門完整、強大、熱門的編程語言，瀏覽器的各種交互效果都由它來做到的。

你先要了解一些基礎的JavaScript概念(變量、函數、基本類型)后，然后學習 jQuery(JavaScript代碼庫的一種)，并且通過 jQuery繼續使用CSS的選擇器。

二、轉職成為前端重構

專精HTML/CSS的前端從業人員也就是前端重構。千鋒武漢Web前端培訓小編想說，掌握基本HTML/CSS的UI設計師就可以發展到這個方向。

你知道如何寫頁面，也知道怎么做的更好，并且更加理解 Web 世界，做出更“系統化”的設計。

關于CSS 的知識，你需要理解文檔流、浮動流等各種定位的方式與原理，理解 CSS 的繼承復用思想、理解瀏覽器的差異、兼容等。

關于HTML 的知識，你需要學習語義化、可訪問性與結構的合理，以及“結構與樣式的分離”等。

你會愛上CSS 3 的酷炫屬性，可以做出響應式網頁設計，用 transiton 和 animation 做補間動畫與關鍵幀動畫，用 transform 做縮放、旋轉、3D變換，還有圓角、漸變、陰影、彈性盒……

掌握了以上的這些，你完全可以利用你的設計功底和Web前端知識，做出微信的H5頁面、一些有趣的網頁，或者個人的網站。

三、轉職成為前端工程師/全棧式UI設計師

如果你還想做出更厲害的交互效果，越來越喜歡編程，那么小編建議你成為一個前端工程師/全棧式UI設計師。

這時，你必須學會以軟件工程師的角度思考。你需要踏踏實實學習編程語言，深入理解作用域、對象、類、封裝、繼承、面向對象編程、事件偵聽、事件冒泡等一大堆編程概念，需要了解瀏覽器，學習 DOM、BOM、CSSOM 的 API，甚至還有學習一些網絡原理，包括域名、URL、DNS、HTTP 請求……

想要搞定編程沒那么簡單，但是只要肯花功夫就可以做到，那時你收獲到的將是一個新的世界。到了這一階段，你可以做出很多優秀的網站了，購買域名，配置服務器，然后將你的作品掛到網絡上吧;或者你可以做一些JavaScript的小游戲，練練編程能力。

通過以上的分享，相信大家對于轉型做Web前端需要學習的知識點和發展方向已經有了大致了解。當下Web前端的工作無法被替代，發展趨勢是可見的，客戶需求是存在，前景是巨大的。想要入行Web前端的小伙伴可要抓緊機會，相信一定會給你不一樣的收獲！

如今正是Web前端將要爆發的時候，選擇學習Web前端，為你的人生開啟新的方向。