作為一個前端工程師來教你如何0基礎開始。

分三部分說：前端基礎，前端進階，職業進階

一。前端基礎

注意：我本人不推薦0基礎就看任何技術書籍！！！

首先前端基礎是 css,html,js

這部分比較簡單，css，html,js都不難 入門到熟練只要多寫多練即可。

學習的話推薦imooc的前端基礎教程，

這個課程免費，且通俗易懂，還能線上邊學邊練。包含了html+css

這部分學完你對html css就有了一個基本的概念。

JS 入門推薦這兩個免費的課程，非常好的課程，

這些學完了，你基本上就能寫一些簡單的靜態網頁了。

可選：jquery

jquery是一個強大的js庫，使用毫無難度，學一下如何使用，然後可以用它寫一些互動網站。

為什麼是可選呢，首先他非常好用，雖然現在主流開發已經不用他了，但是他在一些簡單場景下，他非常的適合。(ps：我雖然工作不用他了，但是做的私活還是會用的）

如果學習了他，那麼就要順便看一下他的原始碼。學習一下實現方式，對你對面試非常有幫助。

可選：瀏覽器渲染原理。

web前端都東西都基於瀏覽器，所以瀏覽器渲染原理要稍作了解，知道什麼是迴流，重繪，瀏覽器如何解析等。只要稍作了解即可。

二:進階

學完基礎代表你已經入了前端的們，但是距離找到工作還非常遠。

1.css3,es6+

你要學習css3的相關知識，這也是基礎，沒啥好說的，學就完了。

而es6 簡單的理解就是js的新版本，因為改動較大，相容性有問題，單獨列出來。多的不說，最少es6要學會，es7,8,9 至少要了解會用。

2. webpack

前端主流打包工具，怎麼說呢，瞭解一下，會用即可滿足工作需求，但是這部分非常重要，有時間還是要學習一下。現代前端開發的前置技能。

3. less scss

css的預編譯工具，會用，高階用法也會。很簡單的東西。

4，主流前端框架

4.1 vue技術棧。

國內用的最多的前端框架，學習資源到官網看文件即可，中文文件通俗易懂。這個入門比較簡單，市場需求也多，但是因為簡單，所以人多，競爭也比較大。

社群資源豐富，以中文資源居多，畢竟主要使用者還是華人，比較有名的如 餓了嗎

如果英文不太好的話建議這個。

4.2 react 技術棧

國內使用者中等，以阿里係為代表。學習資源國內也很多，react入門看官方文件即可，但是react技術棧的其他配套資源需要看英文文件，社群資源國內國外的都有。需要較好的英文水平才能如魚得水。

入門相對來說比vue困難，但是我覺得react核心是他是程式設計思維，react本身並沒有新增什麼新的東西。js基礎好完全沒問題。

4.3 angular 技術棧

國內使用者最少，基本上一線城市才有市場。入門最難，中文資源最少，英文不好寸步難行，不建議0基礎的學習這個技術棧。

5:移動端

既然定位為web前端，移動端也需要會點，比如h5，小程式。但是flutter,react native 這種開發原生應用的就不用學習了。

三大框架都能開發移動端h5的東西。主要說一下小程式，因為各種小程式太多了，不建議學習原生小程式語法，可以學習跨平臺框架，寫一套程式碼編譯到各個小程式中，比如taro之類的。

三，職業進階

上面的學習完成 工作是能找到了，但是想要衝擊中高階職稱就需要學習更多

這個階段就需要看這種書籍了，js類 比如犀牛書，紅寶書之類的。 先推薦2本《你不知道的javascript》 《javascript框架設計》，可以搜一下，網上很多推薦的。

演算法，資料解構，http協議等基礎是一定需要的。

node 一定要會使用。因為有了他，前端才能發生天翻地覆的變化。

webpack 一定要用的很溜，不要只會用腳手架。

canvas/svg/webgl 可選，如果精通，直接能上一個階級。

服務端技術棧如 redis,nginx,docker 等 自己一定要會。高階前端必備技能。

flutter/react native/electron 大前端必備，可選，會能加分加薪

1.先從簡單的編寫靜態html頁面開始，學會各種標籤的使用，直至熟悉運用

2.熟悉第一步以後，開始學習編寫動態頁面，應用javascript語言，原生的javascript語言編寫，可以為你以後應用各種前端框架得心應手，並能很快做到融匯貫通

3.學習css佈局及樣式的編寫，多練習，熟練掌握即可

4.掌握jquery框架，可以快速編寫js指令碼，更加的方便，提升工作效率

5.看些前端的大牛書籍，實時關注行業動態

學習是痛苦的，貴在堅持，痛苦之後的收穫才是人生的意義所在，加油

零基礎的人我建議你找一個比較靠譜的培訓機構，至少你要知道怎麼學習，以及前端的前景和有哪些基本語言以及未來可能會崛起的語言。

前端技術有很多，而且相比於後端來說，前端技術更加的日新月異，需要不斷學習新的技術和語言。

當然網上也有一些免費或者付費的課程，教你從零開始，但是如果沒有人帶著你進門，自己學習的話會很沒有系統，容易因為技術太多太雜而放棄。

你可以去各個學習平臺看一下，先學習下最基礎的html,css,js，看看透過自學能否完成基礎的這些語言的學習。

找一本書，按照書本練習習題，一步一步來，遇到不懂知識點可以先記錄下來，回頭多問一下，為啥要如此設計？解決了什麼問題？我還有那個地方不明白？什麼知識點阻礙自己前進？然後積累一段時間，往前練習一段時間，看看已經解決了那些，還有那些不清楚，不清楚的，停下來查一些資料，或者問一下高手，等解決差不多了，就可以繼續前進，這樣迴圈往復，螺旋式上升，就會變成大拿了。

一定要有恆心毅力，但也要有守心守拙。

系統的學習！

可以選擇自學或者培訓機構！

如果有點程式設計基礎，可以選擇自學，如果沒有，建議培訓機構！

最重要的是多動手，多練習！程式設計重在動手！