本文將以UI設計師轉型做web前端作為案例，詳細解讀學web前端該學習哪些專業知識！當然也適用於所有想轉型web前端的親們！ 如何學習web前端知識轉型？ 不少UI設計師想要學習web前端知識，一方面是喜歡那些華麗的網頁特效，另一方面則是想成為全棧式UI設計師。 1、HTML/CSS學習 第一階段， ...
本文將以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 的前端從業人員也就是前端重構。掌握基本 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的小游戲，練練編程能力。
我目前是在職前端開發，如果你現在也想學習前端開發技術，在入門學習前端的過程當中有遇見任何關於學習方法，學習路線，學習效率等方面的問題，你都可以申請加入我的前端學習交流裙：前面：603 中間：985 最後：993。裡面聚集了一些正在自學前端的初學者裙文件裡面也有我做前端技術這段時間整理的一些前端學習手冊，前端面試題， 前端開發工具，PDF文檔書籍教程，需要的話都可以自行來獲取下載。
