初級前端
主要學習三個部分：HTML，CSS，JavaScript
一、html + css部分：
這部分特別簡單，到網上搜資料，書籍視頻非常多。
css中盒子模型，流動，block，inline，層疊，樣式優先級等這些自學起來也是非常容易。
推薦視頻：https://www.bilibili.com/video/BV1Q54y1y7RA?ssss
最后再深入了解下瀏覽器差異性，ie9以下兼容簡單了解就行了，ie9以下瀏覽器被淘汰掉是趨勢，低版本沒必要浪費大量時間去學習兼容主流瀏覽器，google chrome瀏覽器、firefox瀏覽器、safari瀏覽器、opera瀏覽器即可。瀏覽器差異內容很多，建議在實踐中多多積累。
推薦視頻：
https://www.bilibili.com/video/BV1p5411w71w?ssss
二、JavaScript部分。
1.基礎學習：
難點，也是重點，要學的內容實在很多，如果沒有其他編程語言的基礎的話，學起來可能要費些力，有很多比較抽象的概念，必須要深入理解，比如閉包、原型、面向對象、封裝等，要理解透徹。
推薦視頻：https://www.bilibili.com/video/BV1W54y1J7Ed?ssss
2.jQuery學習：
這些基礎知識掌握好之后，還需要學jQuery，這是一個非常優秀的Javascript庫，大型開發必備。它簡化了Javascript的復雜操作，消除了Javascript跨平台兼容問題，提供了大量實用方法，有良好的文檔和幫助手冊，是一個非常成熟的Javascript庫。
推薦視頻：https://www.bilibili.com/video/BV1QA411W7s7?ssss
3.進階學習：
有了以上知識，對於大多數小型網站，你應該已經可以寫出能夠工作的代碼了。
但要想成為更專業的前端，你還需繼續努力。
更高的要求大概還有四方面：易維護，可測試，高性能，低流量（移動端）。
推薦視頻：https://www.bilibili.com/video/BV1vt4y1e7W4
中高級前端
1.工具學習：大型項目中，前端代碼構建已經不是簡單的壓縮一下了，依賴管理、模塊合並、各種編譯步步不可缺少，需要學會使用grunt、gulp等前端構建工具，要學習的還有：包管理器bower、npm，代碼優化CSS Lint、JSHint、JSLint，CSS預處理器less、sass,代碼管理及版本控制svn、Git，web框架/服務器Node、Express，代碼規范、HTML模塊化、css模塊化。
推薦視頻：https://www.bilibili.com/video/BV1Jv411b7hQ?ssss
2.布局框架學習如Bootstrap。
https://www.bilibili.com/video/BV1uQ4y1T7kW?ssss
3.新技術html5學習。
4.js框架學習，requireJS、 AngularJS等，往前端架構師靠近。
5.nodejs學習。
在線觀看：https://www.bilibili.com/video/BV1QT4y1A7NR?ssss
下圖非常好的表達了高級前端工程師需要學習的內容：
到招聘網站，參考任聘要求，准沒錯，舉例如下：
1.精通html和css，能制作符合W3C標准的靜態頁面；
2.精通JavaScript編程，對面向對象編程思想有深刻理解；
3.精通主流Javascript庫/框架jQuery；
4.理解並掌握JavaScript語言核心技術DOM、BOM有Javascript性能優化經驗；
5.對瀏覽器兼容性有深入的研究，精通各種瀏覽器問題 ；
6.了解Backbone.js、AngularJs等MVC框架並有實際項目開發經驗；
7.了解asp.net等服務器后台技術和擁有一定的C#編程能力者優先；
8.對交互體驗、可用性、用戶體驗有一定程度的理解；
9.有良好的責任心和團隊合作能力、能承受較大的壓力；
自己動手搜索下吧，確定目你的標和方向。