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。