GitHub 上有一个很有名的 Roadmap：https://github.com/kamranahmedse/developer-roadmap
想成为一名前端大牛，按照这个路线学习，足以帮助你快速成长。
从一名小白开始入门前端，到前端进阶，再到成长为技术大牛。
首先学习 HTML、CSS 和 JavaScript 的基础知识。你可以在以下几个网站学习这些基础知识：
W3school：http://www.w3school.com.cn/
MDN 官方教程：https://developer.mozilla.org/zh-CN/
W3C 官方文档：https://www.w3.org/
freecodecamp 学习网站：https://www.freecodecamp.com/
之后你就需要学习一些包管理，包括 npm，yarn 等等。
接下来学习 CSS 预处理，CSS 的一些框架的使用，最常见的就是 Bootstrap 等。以及 CSS Architecture。
这里推荐一些好用的前端库：
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，这是以后的发展趋势：
之后学习一些更深入的内容：
当然，学习无止境，最重要的是持续学习，加油吧！
之前看到一篇内容讲：前端学习路径
很符合本回答图中所示的学习路径：大家可以看考着来学习，下面是学习路线和学习资源
开发工具
设计软件
前端工程师最首要的任务就是把设计师的设计图切好并翻译成代码，所以我们要学习一些设计软件的基础操作和切图方法。
Photoshop 运用最广泛的设计软件，大部分人都在用它，很有必要学习一下
前端工程师必备的PS技能——切图篇
Sketch 轻量且功能强大，切图迅速高效，为UI设计而生的Mac App
Sketch切图教程
编辑器
工欲善其事，必先利其器。可以用的编辑器和IDE有很多，在这里我只推荐最棒的两个。
Sublime text 最性感的编辑器，搭配插件各种好用
配置和使用方法
Webstorm 功能强大，学生可以免费用的前端开发IDE
代码管理
不光要学会写代码，也要学会管理你的代码。在工作中你可能会遇到需要自己部署代码的情况；不停地修改迭代重构，当然也需要你掌握版本控制软件。
Linux 你需要学会在命令行打开移动复制文件等最基本的操作
Linux最常用的20条命令
鸟哥的linux私房菜——基础篇
Git 写代码一定会用到的版本控制软件，入门很快就能学会
猴子都能懂的Git入门
测试工具
预览和调试必不可少，编写前端代码的大部分时间都是在编辑器和浏览器之间切来切去。
Chrome Dev Tools 谷歌浏览器开发工具，想要预览调试你的前端页面必须在这里啦
基础知识
HTML
MDN的HTML入门
HTML30分钟快速入门
CSS
MDN的CSS入门教程
学习CSS布局
JavaScript
JavaScript菜鸟教程
慕课网JavaScript入门篇
Web
当你在浏览器中输入google.com并按下回车后发生了什么
互联网协议入门
中级知识
HTML5
MDN的HTML5入门教程
网易云课堂HTML5入门
CSS3
CSS3菜鸟教程
Gitbook的CSS3教程
Style Guide
腾讯alloteam前端代码规范
百度ecomfe前端代码规范
Google HTML/CSS Style Guide
Google JavaScript Style Guide
Responsive Design
响应式设计指南
自适应网页设计——阮一峰
什么是响应式web设计？怎样进行？
Web Animation
CSS动画
Canvas动画教程
Learn to Create Animations in JavaScript
Bootstrap
Bootstrap菜鸟教程
慕课网玩转Bootstrap
jQuery
jQuery菜鸟教程
慕课网jQuery基础
Ajax
jQuery Ajax快速入门
jQuery Ajax全解析
高级知识
w3c标准
Web Platform Docs
ECMA6
阮一峰ECMAScript6入门
测试
FEX前端自动化测试探索
测试框架Mocha实例教程
Karma和Jasmine自动化单元测试
自动化构建
流式自动化构建工具Gulp
前端工程构建工具fis
Web项目脚手架生成工具Yeoman
用Yeoman和AngularJS做Web应用
模块/包管理
npm
npm使用介绍
快速搭建 Node.js 开发环境以及加速 npm
Sea.js
5分钟上手Sea.js
RequireJS
ES6模块
预处理器
Haml
Tutorial
HTML代码简写法：Emmet和Haml
Sass
Sass入门
TypeScript
TypeScript Handbook（中文版）
框架
React
入门实例教程
Vue
vue.js教程
Angular
服务器端
Nodejs
Node入门
7天学会NodeJS
MongoDB
NodeJS与MongoDB交互
技能图谱
StuQ技能图谱
Frontend Knowledge Structure
在线资源
大前端导航
Frontend Stuff
Frontend directory
Frontend Interview Questions
在线教程
菜鸟教程
极客学院Wiki
Mozilla开发者网络
front-end-web-development on Treehouse
Learn to Code Advanced HTML/CSS
在线书籍
Front-end Developer HandBook
Front-end Database
Frontend Notebook
推荐书目
基础
深入浅出HTML与CSS、XHTML
HTML & CSS设计与构建网站
Pro Git中文版
鸟哥的linux私房菜
中级
Head First HTML5 Programming
JavaScript权威指南
JavaScript语言精粹
JavaScript & jQuery交互式Web前端开发
深入浅出Ajax
高级
JavaScript高级程序设计
HTML5高级程序设计
CSS权威指南
深入浅出Node.js