初學前端小白，如何撕去菜鳥標籤，這些學習經驗絕對讓你受益匪淺！

作為前端新人，我們常以菜鳥自居，主要是專業程度不高，還有就是自謙。其實，作為菜鳥的我們也想撕掉這類標籤，我們也努力，可還是學不好前端，是真的不適合做這行還是方法不對，沒人告訴我們？如果你覺得自己還處在菜鳥階段的迷茫區，那可以看看本篇文章，希望看完之後你能得到想要的。如果你要闡述你的想法，請在評論區留下你的文字。

前端路上我們都會碰到這類情景：現有技術體系已經很龐大了，還沒學個遍，新技術又頻繁湧出，發現有太多太多東西要學，隱隱有點學不動的趨勢。不知不覺就在這條路上迷茫了，發現自己原來那麼渺小。正所謂登高極目，知天地之大；置己蒼茫，知寸身之微。

我的邏輯是：現實我們是改變不了了，我們能掌握的是改變自己的學習方法和思維邏輯。我們常說萬變不離其宗，對於前端來說，這個宗我的理解就是 html + css + js。

建體系。將現有知識做個體系架構，然後將市場上前端技術點填入到這個體系架構中，不管新出現的知識是怎樣的，都在這個體系架構內，無非是對架構的補充或完善（新增和修改），我們要做的不就不斷完善這個體系架構，體系架構可參考《8年前端知識點沉澱》；

深入。在每個分類中擇其一，然後深耕；

淺出。用自己的語言將深耕的知識點輸出出來，可以文字，可以聲音（分享）；

不管現在處於初級、中級、高階、資深還是大前端階段，學習的通用方法大抵如此，當然小異部分我會在各個階段單獨指出。以上純屬個人觀點，如有補充和指正可按文章開頭方法在評論區評論（即 github 上登入後評論）。

學習方法

程式碼管理

2.利用 gitbook 庫來打包成小書，然後利用 github 自帶功能生成線上的，然後自己沒事的時候，看看自己學的東西，然後再查缺補漏，不斷完善； 3.學習文件用 markdown 語法來寫，養成寫文件的好習慣，對於為什麼寫文件和專案開發中前端需要寫哪些文件，我會在後續的文章中闡述，這裡不展開； 4.編碼工具可用 Vscode，整個目錄可參考

前端基礎

HTML5 + CSS2.1

這部分建議在 w3school 線上教程或MDN 上學習，邊學邊練，學習過程中請開啟 chrome 瀏覽器除錯工具，輔助學習和除錯。

ECMAScript

這部分學的內容會很多，如果沒有程式語言的基礎的話，會吃些力。建議先在 w3school 線上教程或MDN 上學習。

犀牛書《javascript語言精粹》或紅寶書《Javascript 高階程式設計》，前期看其中的一本就好，這個時候你可以建倉庫 ecmascript-note 了;

資料結構和演算法

實踐開發中，和後端提供的介面。互動以及前端自身的邏輯處理，然後將資料渲染到頁面，往往離不開資料結構和演算法這塊的知識。

前端初級

CSS

有了 CSS 基礎知識，還需要繼續深入，瞭解

css3 規範；

預編譯語言：less 或 sass；

只有經歷這個過程，你才會發現 less 的美。看完這塊，你的瞭解選擇器、盒模型、彈性佈局、媒體查詢等概念。

Zepto.js 或 jQuery.js。完成一些簡單專案，熟悉 API；

推薦小黃書《你不知道的 JS》上中下三冊；

ES5 知識點掌握，能區分 ES5 與 ES3 常用的一些知識點；

ES6 常用的一些知識點，暫時不推薦阮一峰老師的 ES6 教程，太多了，怕你會迷茫和陷入無聊區，找一些總結小書（一些常用的 ES6 語法總結）看看，一直想寫，沒時間；

常用概念（面試也會碰到）弄清楚。比如變數作用域、傳遞方式、執行上下文、閉包、apply/call/bind、this 指向等；

網路程式設計。Ajax、fetch、websocket、cors、jsonp、formData等知識。

瀏覽器

常用跨域；

儲存機制；

效能

常用效能最佳化；

安全

瞭解 XSS 和 CSRF 攻擊；

正規表示式

基礎知識，影片或一些文件，此刻不建議看官方文件；

常用正規表示式會寫；

工程化

npm 常用命令和簡單應用；

git 常用命令和簡單應用；

webpack 能搭建一個應用；

React.js

對於面前前端三大框架，大家都不陌生了。建議擇其一，然後瞭解入門知識。我安利的是 React.js，個人傾向，無外乎其他。主要學習中英文官網入門知識。結合 create-react-app 腳手架。

Node.js

基礎知識；

express 或 koa2 簡單應用；

說明：上面學習內容不求學完都記得，能掌握 70%-80% 就可以了，主要有個先入為主的概念，以後碰到這類問題，知道怎麼去描述問題，培養獨立解決問題的能力。

最後，祝你好運。有什麼補充，請按文章看頭說的方法給出你的想法。

從事全棧6年，專門建立的學習Q-q-u-n ⑦⑧④-⑦⑧③-零①② 分享學習方法和需要注意的小細節，互相交流學習，不停更新最新的教程和學習技巧（從零基礎開始到WEB前端專案實戰教程，學習工具，全棧開發學習路線以及規劃）點：