大前端时代盛行，当下应该如何学习web前端融入当中，真正的大前端是指什么？与其对应的是小前端吗？如何才能成为大前端，需要从何学起？下面小编整理了一部分当下大前端所必须掌握的技术，详情如下：
大前端工程师
第一阶段：前端页面重构
- 项目一、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
- 云平台系统前端
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+微信的高级全栈项目开发
大数据可视化
第七阶段：大数据可视化
- 项目二十、大数据可视化化基础与实战
一、数据可视化入门
- 数据可视化基础
- 零编程工具使用：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。但不管是“大前端”，或者是“小前端”，最重要的都是根据公司、项目的情况，更合理的划分职责。
概念终归是概念，以上内容只是单纯的罗列出与前端相关的技术点，并非要求前端人员全部掌握，实际工作中，可能只涉及到其中两三项，请朋友们不要误解！
END
碧茂课堂精彩课程推荐：
1.Cloudera数据分析课；
2.Spark和Hadoop开发员培训；
3.大数据机器学习之推荐系统；
4.Python数据分析与机器学习实战；
详情请关注我们公众号：碧茂大数据-课程产品-碧茂课堂
现在注册互动得海量学币，大量精品课程免费送！