大前端时代盛行，当下应该如何学习web前端融入当中，真正的大前端是指什么？与其对应的是小前端吗？如何才能成为大前端，需要从何学起？下面小编整理了一部分当下大前端所必须掌握的技术，详情如下：
加下web前端干货分享qqqun：437813258免费领取全套教学视频资料！
大前端工程师
第一阶段：前端页面重构
项目一、PC端网站布局项目
– HTML基础，CSS基础，CSS核心属性
– CSS样式层叠，继承，盒模型
– 容器，溢出及元素类型
– 浏览器兼容与宽高自适应
– 定位，锚点与透明
– 图片整合
– 表格，CSS属性与滤镜
项目二、HTML5+CSS3基础项目
– HTML5新增的元素与属性
– 表单域增强元素
– CSS3选择器
– 文字字体相关样式
– CSS3位移与变形处理
– CSS3 2D转换与过度动画
– CSS3 3D转换与关键帧动画
– 弹性盒模型
– 媒体查询
– 响应式设计
项目三、WebApp页面布局项目
– 移动端页面设计规范
– 移动端切图
– 文字流式/控件弹性/图片等比例/特殊设计的100%布局
– 等比缩放布局
– viewport/meta
– rem/vw的使用
– flexbox详解
– 移动web特别样式处理（reset, 1px border, 高清图片）
第二阶段：JavaScript高级程序设计
项目四、原生JavaScript交互功能开发项目
– 基本语法
– 循环语句
– 函数与数组
– String与Date
– BOM与DOM
– 事件
– 拖拽效果
– cookie存储
– 正则表达式
– Ajax
– 面向对象基础
– 运动与游戏开发
项目五、面向对象进阶与ES5/ES6应用项目
– Promise/A+
– 设计模式（观察者模式等）
– 原型链
– 构造函数
– 执行上下文栈与执行上下文
– 变量对象与活动对象
– 作用域链
– 闭包
– this
– ES5
– ES6
项目六、JavaScript工具库自主研发项目
– DOM库
– 事件库
– AJAX库
– 原型和继承库
– MVVM核心库
– 基于SPA的路由库
第三阶段：PC端全栈项目开发
项目七、jQuery经典交互特效开发
– 时间轴特效
– tab页面切换效果
– 网页定位导航特效
– 滑动门特效
– 焦点图轮播特效
– 导航条菜单效果
– 瀑布流特效
– 弹出层效果
– 倒计时效果
– 抽奖效果
项目八、PHP+MySQL后端基础项目
– PHP
– MySQL
– HTTP(s)协议详解
– Ajax进阶、跨域与Defered
– Apache与Nginx 环境搭建与配置
– 接口的定义
– Mock数据
– Restful
– 前后端联调
– 前端安全(XSS,CSRF,JSON注入)
项目九、前端工程化与模块化应用项目
– Gulp
– Webpack
– NPM
– Git/SVN
– CommonJS
– AMD
– CMD
– ES6模块化
项目十、PC端全栈开发项目
– 大首页、列表页与详情页
– 展示与交互特效
– 搜索
– 登录与注册
– 购物车
– jQueryUI 与 jQuery EasyUI
– Bootstrap(ACE)
– Highcharts/Echarts
– ArtTemplate
– velocity
– smarty
– 云平台系统前端
加下web前端干货分享qqqun：437813258免费领取全套教学视频资料！
JavaScript高级程序设计
第四阶段：移动端WebApp开发
项目十一、应用Vue.js开发WebApp项目
– Vue.js基础
– 模块化
– 单文件组件
– 路由
– 与服务器通信
– 状态管理
– 单元测试与生产发布
– 服务端渲染SSR与Nuxt.js
– 基于Vue.js企业级项目开发(Mint UI, Element UI)
项目十二、应用React.js开发WebApp项目
– ReactJS基础
– JSX语法
– 组件
– flux+Redux
– React
-Router路由
– 动画效果
– 基于React 企业级项目研发( Antd, Antd Mobile)
项目十三、应用Angular开发WebApp项目
– TypeScript 基础与进阶
– 开发环境配置
– Hello World
– 架构、模块与组件
– 模板
– 元数据、数据绑定与数据显示
– 表单
– 服务与指令
– 依赖注入
– 路由
– Ionic 3 MUI框架
– 项目实战
第五阶段：混合(Hybrid,RN)开发
项目十四、微信公众号开发
– 初识微信公众号
– 订阅号的基本功能
– 使用百度BAE实现代码的快速上线
– 使用Git完成线上代码部署
– 公众号开发权限及功能接入
– 微信JSSDK接口API
– 微信场景项目开发与接入
项目十五、微信小程序开发
– 微信小程序初探
– 小程序入门必学
– 小程序组件体验
– 小程序大功能
– 项目实战带你征服小程序
项目十六、React Native
– React Native初探
– React Native 项目导航
– React Native 项目文本框
– React Native 项目滚动分页
– React Native 项目第三方登录
– React Native 其他组件
项目十七、各类混合应用开发
– 自主原生Navtive Hybrid(iOS、Android)
– 第三方Hybrid框架Cordova/Phone gap
– 第三方Hybrid框架MUI + HTML5+
第六阶段：NodeJS全栈开发
项目十八、Node.js基础项目
一、NodeJS基础
– NodeJS介绍
– 开发环境搭建
– 模块与包管理工具
– 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 初始化项目详解
– 路由简介
– 模板引擎EJS
– 模板引擎Pug（Jade）
五、Koa
– Koa入门
– Koa应用
– 中间件
– Context
– async await
– 请求与响应
六、测试框架mocha
– 搭建框架
– 断言assert
– 项目测试
– 运行多个测试
七、socket 即时通信项目
– Socket简介和通讯流程
– 基于net模块实现socket
– WebSocket
– Socket.io
项目十九、Node.js高级全栈项目
– 基于Vue+Node+MongoDB+微信的高级全栈项目开发
加下web前端干货分享qqqun：437813258免费领取全套教学视频资料！
大数据可视化
第七阶段：大数据可视化
项目二十、大数据可视化化基础与实战
一、数据可视化入门
– 数据可视化基础
– 零编程工具使用：ChartBlocks、Infogram、plotly、Raw、Tableau
二、D3.js详解
– D3.js 入门
– D3.js 进阶
– D3.js 选择集与数据
– D3.js 高级应用
– D3.js 应用工具：NVD3、n3
-charts
三、其他JS库
– Highcharts
– FusionCharts
– Polymaps
四、项目实战
总结：可以简单的说大前端包括一切负责展示的端，包括 Web 前端、PC、移动、大数据和 VR。但不管是“大前端”，或者是“小前端”，最重要的都是根据公司、项目的情况，更合理的划分职责。
