适合新手小白学习的web前端学习路线图

Web前端是一个入行门槛较低的开发技术，但更是近几年热门的职业，web前端不仅薪资高发展前景好，是很多年轻人向往的一个职业，想学习web前端，那么你得找到好的学习方法，以下就给大家分享一份适合新手小白学习的web前端学习路线图。

web前端学习线路图
学习阶段	学习内容	知识点细化	可达成学习效果	配套视频教程
第一阶段 (4周)	前端页面重构	PC端网站布局：                                         - HTML基础，CSS基础，CSS核心属性 - CSS样式层叠，继承，盒模型 - 容器，溢出及元素类型 - 浏览器兼容与宽高自适应 - 定位，锚点与透明 - 图片整合 - 表格，CSS属性与滤镜	Web前端开发工程师 前端页面布局与重构工程师                  薪资可以达到：4K-6K	HTML5基础教程（持续更新） https://pan.baidu.com/s/1IiL0feDPp_4bsUZr0foKjg HTML5基础教程-PC及移动端页面布局 https://pan.baidu.com/s/1ZD7WYX_xmQJL-fzIGG9ExA
		HTML5+CSS3基础:                                      - HTML5新增的元素与属性 - 表单域增强元素 - CSS3选择器 - 文字字体相关样式 - CSS3位移与变形处理 - CSS3 2D转换与过度动画 - CSS3 3D转换与关键帧动画 - 弹性盒模型 - 媒体查询 - 响应式设计
		WebApp页面布局:                                      - 移动端页面设计规范 - 移动端切图 - 流式布局（100%布局） - 等比缩放布局（rem布局） - 响应式布局 - viewport - rem/vw的使用 - flexbox详解 - 移动端reset, 1px border, 高清图片 - 淘宝移动端页面适配方案
第二阶段 （8周）	JavaScript高级程序设计	原生JavaScript交互功能开发:                          - 基本语法 - 循环语句 - 函数与数组 - String与Date - BOM与DOM - 事件 - 拖拽效果 - cookie存储 - 正则表达式 - Ajax - 面向对象基础 - 运动与游戏开发	Web前端工程师 高级Web前端工程师 网站开发工程师 移动前端开发工程师                      薪资可达到：6K-10K	HTML5中级教程-Javascript程序设计及PC全栈项目开发 https://pan.baidu.com/s/1bKS5X67WJm6qnxO3BJVNMw
		面向对象进阶与ES5/ES6/ES7应用:                      - Promise - 设计模式（观察者模式等） - 原型链 - 构造函数 - 执行上下文栈与执行上下文 - 变量对象与活动对象 - 作用域链 - 闭包 - this - ES5 - ES6 - ES7
		JavaScript工具库自主研发:                             - DOM库 - 事件库 - AJAX库 - 原型和继承库 - MVVM核心库 - 基于SPA的路由库
	PC端全栈开发	jQuery经典交互特效开发:                               - 时间轴特效 - tab页面切换效果 - 网页定位导航特效 - 滑动门特效 - 焦点图轮播特效 - 导航条菜单效果 - 瀑布流特效 - 弹出层效果 - 倒计时效果 - 抽奖效果
		PHP+MySQL后端基础:                                   - Apache - PHP - MySQL - HTTP(s)协议详解 - Ajax进阶、跨域与Defered - Apache与Nginx 环境搭建与配置 - 接口的定义 - Mock数据 - Restful - 前后端联调 - 前端安全(XSS,CSRF,JSON注入)
		前端工程化与模块化应用:                               - Gulp - Webpack - NPM - Linux命令 - Git/SVN - CommonJS - AMD - CMD - ES6模块化
		PC端全栈开发项目:                                     - 大首页、列表页与详情页 - 展示与交互特效 - 搜索 - 登录与注册 - 购物车 - jQueryUI 与 jQuery EasyUI - Bootstrap(ACE) - Highcharts/Echarts - ArtTemplate - velocity - smarty - 云平台系统前端 - Apache+PHP+MySQL服务器搭建
第三阶段 （8周）	Node.js后端开发	Node.js基础:                                         一、Node.js基础 - Node.js介绍 - 开发环境搭建 - 模块与包管理工具 - CommonJS模块 - URL网址解析 - QueryString参数处理 - HTTP模块 - HTTP小爬虫 - request方法 - 事件 events模块 - 文件 fs模块 - Stream 流模块 - 原生路由与参数接收 - 读取图片文件 - npm scripts - Yarn 与 PM2 二、MongoDB - MongoDB介绍与环境搭建 - 数据库常用命令 - Collection聚集集合 - document文档操作 - 聚集集合查询 - NodeJS连接MongoDB 三、GraphGL - GraphQL初探:从REST到GraphQL - GraphGL安装 - 准备数据源 - 搭建GraphQL服务器 - 数据查询 四、Express - express 介绍 - 安装和创建基于Express的项目 - Express 4.1x 初始化项目详解 - 路由简介 Node.js高级全栈项目:基于M站+Node.js+MongoDB高级全栈项目开发
	Vue.js前端框架	Vue.js开发基础.:                            - WebApp开发基础(Webstorage,移动端事件,UI组件, Zepto, IScroll, Swiper) - MVVM模式 - 前端组件化 - 单文件组件 - 组件间传值 - Vue实例 - E19Vue实例生命周期 - Vue的模版语法 - 计算属性,方法与侦听器 - 计算属性的 getter 和 setter - Vue中的样式绑定 - Vue中的条件渲染 - Vue中的列表渲染 - Vue中的set方法 - 父子组件间的数据传递 - 组件参数校验与非 props 特性 - 给组件绑定原生事件 - 非父子组件间的传值 - 在Vue中使用插槽 - 作用域插槽 - 动态组件与 v-once 指令 - Vue动画 应用Vue.js开发WebApp项目:                              - 环境配置 - 项目代码介绍 - 单文件组件与Vue中的路由 - 单页应用VS多页应用 - Mint UI - Element UI - 项目的联调，测试与发布上线
	React前端框架	React 开发基础:                                      - React简介 - React开发环境准备 - React中的组件 - JSX语法 - 拆分组件与组件之间的传值 - React developer tools 安装及使用 - PropTypes 与 DefaultProps 的应用 - props，state 与 render 函数的关系 - 深入了解React虚拟DOM - 虚拟 DOM 中的 Diff 算法 - React 中 ref 的使用 - React的生命周期函数及使用场景 - 使用Charles实现本地数据mock - React 中实现 CSS 动画效果 - react-transition-group 实现动画 - Redux 概念简述和工作流程 - Action 和 Reducer 的编写 - ActionTypes 的拆分 - 使用 actionCreator 统一创建 action - UI组件和、容器组件及无状态组件 - 使用Redux-thunk 中间件实现ajax数据请求 - Redux-saga 中间件使用 - React-redux 中间件使用	高级Web前端工程师 全栈工程师 移动前端App开发工程师 微信开发工程师 小程序开发工程师 数据可视化开发工程师                         薪资可达到：10K-15K+	HTML5高级教程-移动端WebApp及混合APP开发 https://pan.baidu.com/s/1ltJLMLHEOIlOg1UIGeLj0w
		React Native:                                         - React Native初探 - React Native 项目导航 - React Native 项目文本框 - React Native 项目滚动分页 - React Native 其他组件
		应用Reat开发WebApp项目:                              - Ant Design组件库 - React Router 4 路由 - 项目组件编写 - 使用 Immutable.js 来管理store中的数据 - 项目的联调、测试与发布上线
	混合开发(Hybrid,RN)	微信公众号开发:                                        - 初识微信公众号 - 订阅号的基本功能 - 使用百度BAE实现代码的快速上线 - 使用Git完成线上代码部署 - 公众号开发权限及功能接入 - 微信JSSDK接口API - 微信场景项目开发与接入
		微信小程序开发:                                        - 微信小程序初探 - 小程序入门必学 - 小程序组件体验 - 小程序大功能 - 项目实战带你征服小程序
		各类混合应用开发:                                     - 自主原生Navtive Hybrid(iOS、Android) - 第三方Hybrid框架Cordova/Phone gap - 第三方Hybrid框架MUI + HTML5
		阿里钉钉企业E应用（支付宝小程序）:                   - E应用功开发入门 - E应用开发流程 - E应用开发基础 - E应用开发实战
	Angular前端框架	Angular6基础:                                        - TypeScript 基础与进阶 - 开发环境配置 - Hello World - 架构、模块与组件 - 模板 - 元数据、数据绑定与数据显示 - 表单 - 服务与指令 - 依赖注入 - 路由 - Ionic 3 框架
	大数据可视化	大数据可视化基础与实战:                               - 数据可视化基础 - Echars、Hignchars - D3.js 入门 - D3.js 进阶 - D3.js 选择集与数据 - D3.js 高级应用 - D3.js 应用工具：NVD3、n3-charts

第一：基础的重要性  

无论做什么都一定要有扎实的基础，参加web前端开发培训也不例外，只有基础牢固，才能更深入的学习新技能。作为一名初级的web前端工程师，你必须要具备基础的技术要素：html，CSS和Java。这是作为web前端工程师所必须要掌握的。web前端的入门门槛其实很低的，与其他语言先慢后快的学习节奏相比，他是一个先快后慢的过程。所以在前期的学习过程中，你会很容易的掌握其基础的技能。而随着html5技术的广泛应用，web前端的学习也会变得更加简单。  

第二：细节的重要性  

 有句俗语是这样说的：“细节决定成败”，很多web前端开发者在工作过程中为了追求速度，而忽略了一些细节性的东西。比如：给代码加备注，代码的命名规范，代码的简洁等。所有的这些看似不重要，其实却严重影响了项目的进度以及自身能力的提升。在开发过程中，适当的添加备注，能够加深对技术点的印象，也便于以后在修改的过程中迅速查找;规范的代码命名能够方便团队之间的沟通，提高工作效率;而简洁的代码能够直观的展现某一块代码的作用。  

第三：网站布局的重要性   

做网站的目的除了向大众群体直观的展现公司的形象以外，更重要的还是便于SEO优化，为了提升网站在百度搜索引擎中的排名，以获取更多的浏览量。因为网站没有排名，不能让更多的人了解到公司，盈利从何谈起呢？作为一名web前端培训者，想要进一步提升技能，就一定要研究网站的优化布局。  

第四：学习的重要性 

优秀的web前端工程师之所以优秀，不是因为工作的年限有多久，而是具备快速学习的能力。web前端开发是一个特殊的工作，涵盖的知识面非常广，而且互联网行业技术的更新速度是非常快的，如果没有快速学习的能力，就很难跟上时代的步伐。所以，作为web前端工程师一定要不断的学习，提升技能。