入門者的知識體系包括哪些東西呢，下面是我的個人看法，按照這個流程走不一定立刻成為大牛，至少能讓入門者抓住重點一步步走下去：

1. 基本工具使用
Git/GitHub的熟練使用，編輯器(sublime、webstrom、atom、vscode)的體驗區分與使用，chrome開發除錯工具的使用，Photoshop的簡單使用，FQ軟體、筆記工具、流程圖工具、思維導圖工具的瞭解使用

2. 靜態頁面功底
doctype、亂碼、meta、字型原理、字型圖示、常見標籤的用法、HTML書寫規範、CSS選擇器使用及權重、CSS常見樣式的寫法、雪碧圖、inline-block特性與使用、line-height與vertical-align用法、盒模型種類、浮動的特性與應用(兩欄三欄佈局)、清除浮動clearfix、BFC、定位的特性與使用場景、z-index、浮動與負邊距的應用(聖盃佈局雙飛翼佈局)、常見的CSS Hack、邊框＋偽元素＋定位的應用(做三角、tooltip、繪製簡單的效果)、CSS編碼規範等。
掌握這些功底後力量上你可以用合理規範的方式寫出任何你看的到的靜態頁面，你有底氣把自己寫的HTML CSS程式碼拿給任何一個大牛來評判，給你一個頁面你會無視效果直接審查元素指出原始碼中的不足並提出改進意見。

3. JS與JQuery功底
頁面渲染基本原理、白屏與FOUC、資料型別與型別轉換、引用型別與基礎型別的區別、深淺拷貝、宣告前置、函式宣告與函式表示式、字串的各種操作、正則的各種操作、貪婪模式與非貪婪模式、日期數學函式各種操作、作用域與作用域鏈的概念與應用、閉包的概念與應用、IIFE的封裝性、setTimeout相關概念、事件冒泡捕獲機制、繫結事件的相容性封裝、事件代理、ajax的原理與封裝、跨域的幾種方式與實現、jsonp的封裝、原生js實現常見效果的實現（懶載入、點選載入、回到頂部、導航條、Dialog、Tab等）、jquery的語法與使用、jquery實現各種常見效果（懶載入、點選載入、回到頂部、導航條、Modal模態框、Tab切換、各種輪播、瀑布流佈局、木桶佈局、懶載入＋ajax＋瀑布流的使用等）

做了這些後，你會對程式碼的規範性和美感有一定的認識，會以寫出精簡、好看、複用性高的程式碼為目標而不是以實現效果為目標。分析、拆解未知問題的能力有所提高，習慣於使用google搜尋文件並掌握一些搜尋技巧、習慣看英文文件、熟練使用除錯工具定位錯誤解決問題，嘗試總結紀錄甚至分享心得。
到這裡，你的能力甚至能力超過一些所謂的一兩年甚至兩三年工作經驗的前端開發者。在交流群裡慢慢的以準確、睿智的視角幫初學者解決問題。你開始發現程式碼不管怎麼優化總是沒那麼滿意，你會為別人更優雅的解決方式歎服抱怨自己太笨，你在空餘時間默默實現你在很久以前羨慕的效果，默默的開始美化自己的部落格記錄心得，你開始覺得自己玩High了。對於找工作反而不急了。

4. JS進階
OOP的概念、建構函式建立物件的方式、原型與原型鏈（會畫圖）、繼承的寫法、功能模組化的寫法、常見的設計模式（工廠、單例、釋出訂閱）、面向物件的應用（輪播元件、Tab元件、曝光元件、日曆元件、Dialog元件等）、JQurey外掛的封裝、JQuery核心原始碼解讀、HTTP&webserver相關知識點、CMD&AMD規範、模組化寫法 (Requirejs或者webpack使用)、npm的使用、工程化概念與應用(gulp)、HTML5新功能、純CSS做一些有意思的特效和動畫(如按鈕、漸變特效、loading、CSS3輪播、3D輪播等)、響應式的應用(寫一個bootstrap的柵格系統)、CSS預處理等

到這裡之後，基本功已經很牢靠了，可以去看node教程、去看ES6語法、去嘗試用express搭建個部落格、去跑跑React Angular裡的Demo，在一番體驗後你清楚的知道它們的應用場景與利弊之道哪些需要深入哪些需要了解。

在學的同時在去多關注些大牛部落格前端社群（瞭解跟進新技術），需要找工作的可以多做做筆試面試題（查缺補漏），如果是應屆生需要抽空補一補資料結構演算法。網路上東西太多太雜，在自己有一定判斷力之後在去吸收些精華，否則很容易陷入迷茫不知道如何入手。那些所謂的讓人眼花繚亂的新技術在基礎紮實的前提下很容易快速介入，不要捨本逐末，丟了西瓜撿芝麻。

關於看書
在無人指導的情況下，看書是一種學習途徑。比如《JS高階程式設計》《權威指南》是前端開發者必看書籍。但對於入門的同學來說看著費勁很難看懂、而且太枯燥很難堅持下去。我的建議是好的書籍是學習的補充，在有一定積累後可以把書作為查漏補缺的工具，平時偶爾翻一翻，對知識點不是很清楚可以針對性翻一翻。書是買來看的，不是找心理安慰的，一本一本買，一本一本看。對不喜歡看書的同學，也不要盲目跟風強迫自己做不喜歡的事失去了對前端的樂趣

關於入門學習資料
學習資料和看書一樣，不要上去就收集一大堆自己永遠都不會在看第二眼的資料（雖然裡面有很多精華）。 HTML CSS可以從MDN看起CSS | MDN  。 在學習的時候 心裡一定有個知識體系脈絡圖，參考我上面寫的知識體系。一個知識點一個知識點的去學習去查詢，如果這個資料沒有在去google下一個資料，這個時候很多大牛的部落格很多推薦資料才真的對你有價值，不至於自己在一些無關緊要的地方浪費大量時間和精力而不自知。