GitHub 上有一個頗有名的 Roadmap：https://github.com/kamranahmedse/developer-roadmapjavascript
想成爲一名前端大牛，按照這個路線學習，足以幫助你快速成長。php
從一名小白開始入門前端，到前端進階，再到成長爲技術大牛。css
首先學習 HTML、CSS 和 JavaScript 的基礎知識。你能夠在如下幾個網站學習這些基礎知識：html
W3school：http://www.w3school.com.cn/前端
MDN 官方教程：https://developer.mozilla.org/zh-CN/vue
W3C 官方文檔：https://www.w3.org/html5
freecodecamp 學習網站：https://www.freecodecamp.com/java
以後你就須要學習一些包管理，包括 npm，yarn 等等。node
接下來學習 CSS 預處理，CSS 的一些框架的使用，最多見的就是 Bootstrap 等。以及 CSS Architecture。react
這裏推薦一些好用的前端庫：
- Sass: CSS的擴展，能夠聲明變量，引入模塊，嵌套屬性等等。
- Less: 爲CSS添加聲明變量，樣式模塊，命名空間，繼承等特性。
- Stylus: 寫CSS不再用寫煩人的括號啦～
- Bootstrap: 全世界最流行的響應式前端框架。
- Foundation: 提供了不少模版，針對網站、移動端、郵件提供了不少好用的模塊和樣式。
- Semantic UI: 我的很是喜歡的一個前端框架，樣式很是好看，更重要的是就像它語義UI的名稱同樣，類命名特別友好，寫網頁就像和人說話同樣。
- uikit: 漂亮、可定製，即將發佈uikit3版本，感興趣能夠試試看。
以後學習一些構建工具及其餘工具的使用，並儘可能明確其原理。包括但不限於如下工具：
- Grunt: JavaScript自動化工具。
- Gulp: 我的感受是最好用的自動化構建工具。
- webpack：模塊化加載構建一切，CSS/JS連圖片均可以
- npm: NPM雖好，不要太依賴襖。
- Bower: 前端框架包管理工具，各種框架和庫一鍵安裝。
以後進行前端框架的選擇和學習，包括但不限於如下框架：
- Vue：普遍使用的前端框架，認真學。
- React：也是一個普遍使用的前端框架，最好把這個和 Vue 都認真學習好。
- jQuery: 方便快捷，功能強大全面，居家旅行必備，近乎JS的替代品，你能夠不會js，可是不能不會jQuery。
- BackBoneJS: 模型、視圖、集合、事件，讓你的前端代碼更有框架感。
- D3.js: 數據可視化必學必會，只有你想不出來的，沒有D3畫不出來的。
- React: 學會React，再學學React-native，你就能從一個前端化身Web app工程師、IOS/Andorid開發者、桌面應用工程師……
- jQuery UI: 幾行代碼就能寫一個帶動畫帶ajax的Web應用。
- jQuery Mobile: 移動端專用js開發框架，和上面的相似襖。
- Underscore.js: 非入侵式框架，提供了衆多有用的函數方法，彌補jQuery的不足。
- Moment.js: 原生的JS顯示輸出日期時間真的很痛苦，Moment爲你解決了一切啦～
- Lodash: 模塊化且高效，lodash和underscore很類似。
- Ruby on Rails: Ruby on Rails 是一款用ruby語言編寫Web應用的MVC框架，github就是用它寫的！
- AngularJS: Google主導的Web開發框架，數據綁定、MVVM，很惋惜被後來更靈活的React、Vue等框架搶去了風頭。
- Ember.js: 用來開發單頁Web應用的JS前端MVC框架。
- Express: Node.js上的Web框架，搭建網站或API服務只要一秒鐘！
- Meteor: JS全端框架，是的，你只須要學習JavaScript一門語言，就能夠完成Web應用先後端、數據庫的開發。
- Django: Python的Web框架，人生苦短，請用Python.
- Flask: Python的Web框架，聽說只要學好flask就能隨意找到好工做？
- ASP.net: 老一輩人的最愛。
- Laravel: 最優雅性感的PHP Web框架，好用到不能再好用，優雅到不能再優雅，畢竟PHP是全世界最好的語言嘛。
- Phalcon: 用C語言擴展的，聽說是最快的PHP框架。
框架和知識學習好了，要學習如何進行測試，主要包括這部份內容：
以後要學習 PWA，這是之後的發展趨勢：
以後學習一些更深刻的內容：
下面是學習路線和學習資源，有須要的請自取。
入門類
- 前端入門教程
- 瘳雪峯的Javascript教程
- 前端工程師必備的PS技能——切圖篇
- 結合我的經歷總結的前端入門方法
- 做者的簡書地址
- 做者的CSDN地址
- HTML 修真錄------初識"異界"
- HTML 修真錄------"深淵三君王"
- HTML 基礎入門
- HTML 基礎提高
- CSS 基礎入門
- CSS 盒模型
- CSS 浮動
- CSS 定位
HTML 5 部分
- 深刻理解HTML5標籤
- 如何寫出高效率的HTML
- HTML meta標籤總結與屬性使用介紹
- 戲說HTML5
- 編寫高質量的 HTML 代碼
- 如何解決 img 標籤上下出現的間隙
- 五分鐘學會 Canvas 基礎（一）
- 五分鐘學會 Canvas 基礎（二）
- 模仿 LED 燈的滾動文字效果
- 關於 Canvas 的兄弟 SVG 的基礎教程
- HTML 5 動態效果製做方法整理
- Canvas 效果實例
- 細數前端中的一些黑科技
- 前端 Meta 用法大彙總
- HTML5新特性
CSS 3 部分
- CSS 語法參考
- 如何編寫可維護的CSS
- CSS3動畫手冊
- 騰訊css3動畫製做工具
- 志爺css小工具集合
- css3 js 移動大雜燴
- bouncejs 觸摸庫
- animate.css
- 全局CSS的終結
- browserhacks
- CSS3其餘屬性
- 彈性盒模型詳解
- CSS3動畫
- 2D變形&3D變形
- 蒙版mask
JQuery
- YOU MIGHT NOT NEED JQUERY
- jQuery API 中文文檔
- hemin 在線版
- css88 jq api
- css88 jqui api
- 學習jquery
- jquery 源碼查找
- Web前端資源彙總(jQuery,Js,Css3等)
Angular JS
- Angular.js 的一些學習資源
- angularjs中文社區
- Angularjs源碼學習
- Angularjs源碼學習
- angular對bootstrap的封裝
- angularjs + nodejs
- 呂大豹 Angularjs
- AngularJS 最佳實踐
- Angular的一些擴展指令
- Angular數據綁定原理
- 一些擴展Angular UI組件
- Ember和AngularJS的性能測試
- 帶你走近AngularJS - 基本功能介紹
- Angularjs開發指南
- Angularjs學習
- 不要帶着jQuery的思惟去學習AngularJS
- angularjs 學習筆記
- angularjs 開發指南
- angularjs 英文資料
- angular bootstrap
- angular jq mobile
- angular ui
- 整合jQuery Mobile+AngularJS經驗談
- 有jQuery背景，該如何用AngularJS編程思想
- AngularJS在線教程
- angular學習筆記
React
- react.js中文論壇
- react.js官方網址
- react.js官方文檔
- react.jsmaterialUI
- react.jsTouchstoneJSUI
- react.jsamazeuiUI
- React入門實例教程-阮一峯
- ReactNative中文版
- Webpack和React小書-前端亂燉
- Webpack和React小書-gitbook
- webpack
- Webpack，101入門體驗
- webpack入門教程
- 基於webpack搭建前端工程解決方案探索
Vue
- Vue2.0
- Vue
- Vue Router
- Vuex
- Vue-Cli
- Vue 論壇
- Vue 聊天室
- Vue 入門指南
- Vue 的一些資源索引
- awesome-vue
- vue-syntax-highlight
Node JS
- Node.js 包教不包會
- 一個nodejs博客
- 【NodeJS 學習筆記04】新聞發佈系統
- 過年7天樂，學nodejs 也快樂
- 七天學會NodeJS
- Nodejs學習筆記（二）— 事件模塊
- nodejs入門
- angularjs nodejs
- 從零開始nodejs系列文章
- 理解nodejs
- nodejs事件輪詢
- node入門
- nodejs cms
- Node初學者入門，一本全面的NodeJS教程
- NodeJS的代碼調試和性能調優
JS Template
- template-chooser
- artTemplate
- tomdjs
- 淘寶模板juicer模板
- Fxtpl v1.0 繁星前端模板引擎
- laytpl
- mozilla - nunjucks
- Juicer
- dustjs
- etpl
移動端
移動端 API
- 99移動端知識集合
- 移動端前端開發知識庫
- 移動前端的一些坑和解決方法（外觀表現）
- 【原】移動web資源整理
- zepto 1.0 中文手冊
- zepto 1.0 中文手冊
- zepto 1.1.2
- zepto 中文註釋
- jqmobile 手冊
- 移動瀏覽器開發集合
- 移動開發大雜燴
綜合 API
其餘 API
- HTTP API 設計指南
- javascript流行庫彙總
- 驗證api
- underscore 中文手冊
- underscore源碼分析
- underscore源碼分析-亞里士朱德的博客
- underscrejs en api
- lodash - underscore的代替品
- ext4api
- qwrap手冊
- 緩動函數
- svg 中文參考
- svg mdn參考
- svg 導出 canvas
- svg 導出 png
- ai-to-svg
- localStorage 庫
服務器端
技能圖譜
在線資源
在線書籍
推薦書目
-
基礎
-
中級
-
高級
開發工具
設計軟件
前端工程師最首要的任務就是把設計師的設計圖切好並翻譯成代碼，因此咱們要學習一些設計軟件的基礎操做和切圖方法。
-
Photoshop 運用最普遍的設計軟件，大部分人都在用它，頗有必要學習一下
-
Sketch 輕量且功能強大，切圖迅速高效，爲UI設計而生的Mac App
編輯器
工欲善其事，必先利其器。能夠用的編輯器和IDE有不少，在這裏我只推薦最棒的兩個。
-
Sublime text 最性感的編輯器，搭配插件各類好用
-
Webstorm 功能強大，學生能夠免費用的前端開發IDE
代碼管理
不光要學會寫代碼，也要學會管理你的代碼。在工做中你可能會遇到須要本身部署代碼的狀況；不停地修改迭代重構，固然也須要你掌握版本控制軟件。
-
Linux 你須要學會在命令行打開移動複製文件等最基本的操做
-
Git 寫代碼必定會用到的版本控制軟件，入門很快就能學會
測試工具
預覽和調試必不可少，編寫前端代碼的大部分時間都是在編輯器和瀏覽器之間切來切去。
- Chrome Dev Tools 谷歌瀏覽器開發工具，想要預覽調試你的前端頁面必須在這裏啦
最後
說個題外話，我在一線互聯網企業工做十餘年裏，指導過很多同行後輩。幫助不少人獲得了學習和成長。
我意識到有不少經驗和知識值得分享給你們，也能夠經過咱們的能力和經驗解答你們在IT學習中的不少困惑，因此在工做繁忙的狀況下仍是堅持各類整理和分享。
我能夠將最近整理的前端面試題免費分享出來，其中包含HTML、CSS、JavaScript、服務端與網絡、Vue、瀏覽器等等，還在持續整理更新中，但願你們都能找到心儀的工做。
有須要的朋友點擊這裏免費領取題目+解析PDF。