前端自学路线图如下, 前端自学需要耗费的时间和精力不比其他编程的少, 近些年企业对前端人才的需求在不断增加, 怎么还会有人说自学前端找不到工作? 这是出于这样的原因, 黑马程序员给想要自学前端的小伙伴整理一整套自学路线图, 从自学 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 项目优化, 部署.
来源: http://www.jianshu.com/p/86b24b1a045d