前端自学路线图之前端自学大纲

前端自学路线图如下，前端自学需要耗费的时间和精力不比其他编程的少，近些年企业对前端人才的需求在不断增加，怎么还会有人说自学前端找不到工作？这是出于这样的原因，黑马程序员给想要自学前端的小伙伴整理一整套自学路线图，从自学HTML5到React.Js的项目实战自学只需要看这套前端自学路线图足矣！

在网上看到有很多的前端自学路线图，但大部分的前端自学路线图是很零碎的，没有系统的前端自学目标和重点知识，也不知道自学到什么程度可以找工作。黑马程序员最新版的前端自学路线图是根据主流企业的前端要求不断更新的，黑马程序员视频库能为你提供各个阶段的自学教程。

目前，企业对于前端人才最核心的需求并不是对单纯掌握某种应用型技术，而是希望前端开发者能够通过自己的经验帮助企业解决项目中随时出现的问题。这套自学路线图的出现正是为了解决这样的困局，给自学一份出路。

前端自学路线图

第一阶段：前端自学–HTML5 + CSS3

此阶段的学习目标：

能够独立把美工提供的PSD效果图还原成PC端静态代码页面。

此阶段的市场价值：

具备PC端静态网页开发的能力，还达不到企业用人标准。为后面学习网页编程阶段打下坚实基础。

此阶段的重点知识：

• 掌握 HTML5 常用标签；
• 掌握 CSS 语法及使用技巧；
• 掌握CSS3新增选择器；
• 掌握CSS3新增样式属性；
• 掌握 DIV+CSS 布局方式；
• 掌握常见网页布局技巧；
• 掌握企业级、电商级网页开发基本的流程、规范；
• 掌握语义化、模块化、兼容性的PC端网页开发；
• 掌握 Photoshop 切图以及插件切图；
• 熟练使用调试工具进行页面调试；
• 掌握基本的动画效果。

第二阶段：前端自学–移动Web网页开发

此阶段的学习目标：

能够独立开发移动端页面，并适配不同移动端终端。

此阶段的市场价值：

具备移动端页面开发，但是还不能达到企业的用人标准。为后面学习网页编程阶段打下坚实基础。

此阶段的重点知识：

• 掌握CSS32D、3D变换、动画效果；
• 了解移动端屏幕、移动端浏览器、操作系统的不同；
• 掌握主流移动端调试方法；
• 掌握常用移动端适配方案（流式布局、flex布局、rem适配）；
• 掌握主流移动端页面开发技术选型与解决方案；
• 掌握CSS预处理器less的使用；
• 掌握常用移动端框架使用方法；
• 掌握常见移动端页面开发流程与规范；
• 掌握响应式布局开发；
• 掌握Bootstrap开发响应式页面；
• 掌握适配不同终端的移动端页面开发。

第三阶段：前端自学–JavaScript网页编程

此阶段的学习目标：

能够使用JavaScript/jQuery开发网页特效/网页应用。

此阶段的市场价值：

具备网页开发的基础能力(网页布局和网页应用开发)，但是无法和服务器交互，还达不到企业用人的标准。

此阶段的重点知识：

• 掌握JavaScript基本语法；
• 掌握常见JavaScript算法；
• 掌握DOM的各种操作；
• 熟练使用面向对象思想进行DOM编程；
• 掌握JavaScript的高级语法；
• 熟练使用jQuery操作DOM；
• 熟练使用和编写jQuery插件；
• 独立完成电商网站的页面搭建（包括HTML结构、CSS样式、JavaScript特效）；
• 掌握应对业务编程的能力；
• 掌握JavaScript常见兼容性方案；
• 掌握团队合作开发流程。

第四阶段：前端自学–Node.js与AJAX

此阶段的学习目标：

能够具备开发具有简单交互能力的网站，能够使用源代码管理工具。

此阶段的市场价值：

具备基本的网站开发能力，满足企业对初级前端开发的要求。

此阶段的重点知识：

• 能够建立客户端服务器交互模型，熟悉网络通信相关概念；
• 能够使用Node.js进行Web服务端开发；
• 能够掌握JavaScript异步编程模型；
• 能够掌握JavaScript模块化编程方式；
• 能够使用Node.js操作MySQL数据库；
• 能够理解HTTP协议；
• 熟悉原生Ajax请求流程与细节，并掌握常见跨域技巧；
• 能够基于jQuery的Ajax相关API熟练开发常见的前端功能；
• 能够独立开发基于后台接口的动态网站、Ajax数据交互的项目；
• 能够独立完成企业网站从前台到后台的基本开发工作。

第五阶段：前端自学–Vue.js项目实战

此阶段的学习目标：

• 使用Vue技术栈开发企业级项目
• 掌握前后端分离的开发方式
• 掌握项目的打包和发布

此阶段的市场价值：

理解Vue的开发理念、内部运行原理，梳理使用Vue组件开发常见功能。满足前端开发行业中的常见需求。

此阶段的重点知识：

• 掌握使用Vue技术栈进行项目开发；
• 掌握源代码管理工具的使用；
• 熟练掌握前后端分离开发模式；
• 掌握使用主流框架开发门户网站、管理系统、移动Web等客户端；
• 掌握Webpack项目构建配置流程；
• 掌握Web项目的部署与发布模式；
• 掌握常见网站业务模块开发。
• 掌握使用echarts/d3.js进行大数据可视化交互开发；

第六阶段：前端自学–微信小程序

此阶段的学习目标：

• 掌握整个小程序开发和传统web开发的区别；
• 掌握企业小程序开发、发布和上线的整体流程；
• 拥有解决和实现市场上主流小程序的功能需求。

此阶段的市场价值：

掌握前端行业的小程序发展趋势，熟悉小程序项目的整体运作流程，并且具备独立开发企业级小程序的能力，既可以使用原生小程序也可以使用小程序框架来完成项目。

此阶段的重点知识：

• 掌握小程序的开发基础；
• 能够独立开发小程序项目；
• 掌握小程序的部署与发布；
• 掌握微信支付的使用；
• 掌握小程序开发框架的使用；
• 掌握第三方AI平台的使用。

第七阶段：前端自学–React.js项目实战

此阶段的学习目标：

具备使用React开发能力，配合React内部原理，增强解决项目中复杂业务问题的能力，从项目搭建到项目开发再到项目部署上线，让学员可以完成常见企业级项目的开发。

此阶段的市场价值：

理解React的开发理念、内部运行原理，熟练运用React组件完成项目常见功能开发，配合常用组件库解决项目中的一些共性问题，满足前端开发行业中的常见需求。

此阶段的重点知识：

• 理解React的开发理念；
• 掌握React的基本使用；
• 理解React的内部原理；
• 使用React及其常用组件库进行项目开发；
• 使用React封装项目中用到组件实现复用；
• 掌握React项目中常见问题的解决方案；
• 掌握React-Redux进行状态管理；
• 掌握声明式编程的思想；
• 掌握组件化开发的思想；
• 掌握React项目优化、部署。

前端自学经典资源

不可错过的自学前端经典资源（点击进入）