一(yī)個好的Web前端工(gōng)程師在知(zhī)識體(tǐ)系上既要有廣度，又(yòu)要有深度，所以很多大(dà)公司即使出高薪也很難招聘到理想的前端開(kāi)發工(gōng)程師。那麽如何系統的學習企業實用的web前端技術呢？

當大(dà)家有了一(yī)些HTML的靜态布局的基礎，那麽我(wǒ)(wǒ)們學完HTML、CSS這些最簡單的東西就算是有了小(xiǎo)小(xiǎo)的入門，知(zhī)道了Web前端到底是做什麽的，那麽我(wǒ)(wǒ)們入門之後應該學習哪些系統的前端知(zhī)識體(tǐ)系呢？如果我(wǒ)(wǒ)們大(dà)家選擇自學，那麽我(wǒ)(wǒ)們就應該根據個人的學習能力，制定好每天學習“量”，今天技術學派幫大(dà)家梳理了一(yī)條學習路線。

第一(yī)階段 HTMl、CSS、JavaScript

我(wǒ)(wǒ)們學習Web前端開(kāi)發系統知(zhī)識，除了學習JavaScript之外(wài)，其他的千萬不要買書(shū)看，對于html，css看視頻(pín)學習就可以了，看書(shū)完全是在浪費(fèi)時間，而且也不會動手去(qù)寫代碼，w3cschool是我(wǒ)(wǒ)們學習Web前端開(kāi)發的标準，可以随時查閱，爲什麽我(wǒ)(wǒ)說除了學習JavaScript之外(wài)其他的知(zhī)識不用看書(shū)，這個你以後工(gōng)作了之後就會明白(bái)，在這裏推薦JavaScript書(shū)籍《JavaScript權威指南(nán)》。建議沒有基礎的同學可以看看，如果你工(gōng)作了，或許對你用處并不大(dà)。

第二階段 學習框架

Web前端框架都是用JavaScript封裝出來的，所以對于JavaScript一(yī)定要掌握好，一(yī)定要了解es6，和現在比較流行的主流框架如React、Vue、Angular。現在公司都會用框架，但不止于這些，所以不會框架話(huà)，在找工(gōng)作中(zhōng)是很困難的。

第三階段 多做幾個項目練手

當我(wǒ)(wǒ)們有了一(yī)定的基礎後，一(yī)定要多做幾個項目去(qù)練手，這樣我(wǒ)(wǒ)們才會有進步，可以找到身邊從事前端的朋友要一(yī)些完整的項目，然後去(qù)分(fēn)析前端部分(fēn)，自己嘗試去(qù)做項目，因爲我(wǒ)(wǒ)們目前隻會做前端部分(fēn)，所以後端的代碼我(wǒ)(wǒ)們不會，那我(wǒ)(wǒ)們就需要用一(yī)些假的數據來填充頁面了，所以我(wǒ)(wǒ)們不需要從數據庫中(zhōng)獲取，我(wǒ)(wǒ)們練習的時候，寫固定的數據就可以的，多做幾個大(dà)型網站讓自己更加熟練，然後掌握一(yī)些解決問題的能力，如果自己可以獨立完成一(yī)些網站的項目，那麽在一(yī)線城市找個7000-8000的工(gōng)作是沒問題的。

第四階段 全棧發展

如果你覺得自己學習能力可以，接受能力也行，那麽可以在學習一(yī)門後端語言，如：PHP，Java，Python都可以，如果你前後端的知(zhī)識都可以掌握，那麽你就是全棧工(gōng)程師的材料，以後可以慢(màn)慢(màn)發展成爲全棧工(gōng)程師，年薪達到30萬是可以的，站在全棧的角度上，深入的學習前端和後端，可以更好的了解Web系統的開(kāi)發流程以及各個階段的相互作用。

學習建議

必須掌握基本的Web前端開(kāi)發技術，其中(zhōng)包括CSS、HTML、DOM、BOM、Ajax、JavaScript等，在掌握這些技術的同時，還要清楚地了解它們在不同浏覽器上的兼容情況、渲染原理和存在的Bug。

在一(yī)名合格的前端工(gōng)程師的知(zhī)識結構中(zhōng)，網站性能優化、SEO和服務器端的基礎知(zhī)識也是必須掌握的。必須學會運用各種工(gōng)具進行輔助開(kāi)發，如：Webpack、Gulp等。除了要掌握技術層面的知(zhī)識，還要掌握理論層面的知(zhī)識，包括代碼的可維護性、組件的易用性、分(fēn)層語義模闆和浏覽器分(fēn)級支持等等。

代碼的質量是前端開(kāi)發中(zhōng)應該重點考慮的問題之一(yī)。例如，實現一(yī)個網站界面可能會有無數種方案，但有些方案的維護成本會比較高，有些方案會存在性能問題，而有些方案則更易于維護，而且性能也比較好。這裏的關鍵影響因素就是代碼質量。