如果是面向就业的话，建议可以从浅入深的学习，一般学习周期为3-4个月左右就差不多能够胜任前端工程师的岗位了，推荐的前端学习路线如下：
第一阶段 前端基础知识
1、HTML/HTML5（网页结构层）
HTML是搭建网页结构的第一步。通过学习工作中必备的HTML标签，并结合实际案例，更快更轻松的掌握网页结构搭建方法和技巧。
H5是HTML的高级应用。通过对H5语义化标签的学习，并结合HTML标签搭建网页，有利于增强网页的SEO、可读性和可维护性，提高网页性能。
2、CSS/CSS3（网页美化）
CSS是网页的“美容师”。通过学习常用的CSS属性并结合HTML标签，独立把效果图还原成静态代码页面，为学习网页编程打下夯实的基础。
CSS3是CSS的高级应用。通过对CSS3属性的学习，并结合HTML标签，能够轻松制作出各种绚丽的效果，为后面动态网页的实现奠定基础。
3、JavaScript基础（网页交互）
JS是网页编程的第一步。通过JS网页编程语言的基础学习，能够独立使用JS知识开发网页特效，来向PC静态页面添加交互行为。
总结
学完这个阶段，就可以设计一些简单的网页，HTML+CSS+JS 三种语言相互配合，就可以设计出各种带特效的网页了。建议多做几个案例，以便熟练掌握网页设计的技巧，要牢记常用的HTML标签和CSS属性，熟练掌握JS的基础语法。
第二阶段 模块化网页开发
1、JavaScript高级（面向对象的JS）
在JS初级知识的基础上，通过深入学习JS函数和面向对象知识，为后续学习组件化编程奠定基础。
2、JQuery（快速实现JS的一个库）
jQuery是JS的类库。jQuery提供了丰富的封装好的方法，通过对jQuery的学习，能够缩短配置网站和应用所需的时间，提高开发效率。
3、UI库（封装好的CSS和JS库）
这里推荐几个比较常用的UI库，比如：Bootstrap、Layui、JQueryUI，这些都是PC端的。还需要掌握一些移动端的UI库，比如：JQuery Mobile、MUI、WeUI等等。学会了这些UI库的使用，就可以事半功倍的设计网页了。
总结
学习完这个阶段，就可以开发市面上的常见的项目了，而且移动端的UI库可以做WebAPP，还可以把WebAPP通过打包工具打成移动端的安装包。
第三阶段 WebAPP与小程序开发
1、HTML5（多媒体）
H5多媒体技术是自媒体时代的必备技能。通过对H5多媒体技术的学习，轻松应对H5多媒体技术在移动端广泛应用的需求。主要学习的内容有：
- TML5的本地存储方式，了解数据缓存机制
- HTML5提供的多媒体标签，进行音视频播放器开发
- HTML5 Canvas标签应用，进行特殊图形绘制
- 结合Canvas/JS实现手机解锁案例等等
2、常见的移动端配置
移动开发基础是进行webApp开发第一步。通过移动端基础知识的学习，能够独立开发移动端页面，并适配不同移动端终端。主要学习的内容有：
- 了解移动端屏幕、移动端浏览器、操作系统的不同
- 常用移动端常用Rem适配方案
- 主流移动端页面开发技术选型与解决方案
- 响应式布局开发与Flex布局
- 不同终端适配与Browsersync多终端同步检测工具的使用等等
3、小程序开发
小程序是必备技能之一 。通过对小程序知识的学习，能够独立开发企业级小程序，拥有解决主流小程序功能需求的能力。
第四阶段 高级框架
1、ES6语法扩展
ES6是必备技能之一。通过对ES6的学习，全面掌握ES6引入的新特性，了解ES6在项目中的使用场景，为后面框架的学习奠定基础。主要学习内容有：
- 了解ES6与ES5的区别
- 掌握babel转换器的使用
- 如何运用ES6 Promise异步编程
- 使用Class类，更好的面向对象编程
- 掌握数组，对象，字符串函数的扩展
- 掌握箭头函数的应用等等
2、Vue 框架
Vue是目前国内企业需求热门的框架之一。通过对Vue.js基础和项目的学习，具备开发常见功能及快速构建企业级项目的能力，满足行业中的常见需求。
3、React
React也是企业需求热门的框架 。通过对React基础和项目的学习，具备构建企业级项目和解决核心业务问题的能力，快速接入企业项目。
閱讀更多 前端大拿 的文章
