• 350h

    课程时长

  • 180天

    服务期

  • 无限期

    有效期

课程参数
教学服务
随到随学
随时随地皆可学习，无需等待，使你的学习更灵活，更高效。
学前测试
基本信息调查和基础测试，全面了解学前情况，为你制定更适合的学习内容和方法。
班主任督导
班主任全程跟进，提供全方位暖心服务，为你的学习保驾护航。
新手任务
新手专属任务，带你快速体验线上学习，适应学习节奏，保障后续学习更高效。
每周学习反馈
每周反馈你的学习数据，提供针对性的指导，关注你的每一个进步，使学习更有动力。
闯关式学习
进阶式地达成每一个目标，不断提高成就感，稳扎稳打，完成课程。
答疑辅导
答疑解惑，及时扫清学习过程中的障碍，助你顺利完成学习。
作业批改
批改作业，指出问题，发现你的薄弱环节，提出建议，使你更有重心的学习。
全方位学习测评
小节测试、课后练习，阶段作业多维度测评，有效保障你的学习效果。
源码开放
提供全部课程源码，搭建真实的开发环境，保证你的练习更高效。
就业服务
一对一职业规划，就业指导，为你高薪就业保驾护航。
学习报告
记录学习轨迹和学习掌握情况，真实全面地体现你的综合学习成果。
作业点评
讲解作业设计思路、点评学员作业问题并给出最终解决方案
入学须知
帮助你更快速的进入学习状态。
就业指导
简历指导，面试辅导，帮你解惑面试问题。
课程更新
在服务期内，如果课程有更新，你可以享受更新后的课程内容。
学习计划
个性化制定每天学习任务
单元测试
根据每个小节学习的知识点测试学习情况

随着移动互联网的深入发展，多屏互动和多端兼容友好的界面成为目前系统重要的需求，让前端开发工程师一跃成为目前市场紧俏的人才。 本课程内容包含目前的Vue、React前端框架，把全栈工程师要掌握的前端技术、Node.js相关后台技术、HTML5移动方向开发技术做了系统整合， 致力于培养中高等前端工程师。

学完收获：

熟练掌握前端开发HTML、CSS、JavaScript等核心技术，熟练掌握Vue、React

熟练使用面向对象思想进行编程，掌握应对业务编程的能力以及常见兼容性方案

熟练掌握前后端分工开发流程、原生 Ajax 请求流程与细节，掌握常见跨域技巧

能够基于jQuery相关 API 熟练开发网页功能

熟练运用H5实现项目的开发、运用原生JS开发移动web页面、运用bootstrap和CSS3媒体查询开发响应
式网页

熟练掌握模块化编程方式，熟练使用 Node.js和Express框架对MySQL 数据库进行增删改查操作

熟练掌握artTemplate模板引擎的应用

熟练掌握基于cookie、session、token的持久化和身份验证

熟练掌握前后端分离开发模式

熟练掌握 Webpack 项目打包配置流程

熟练掌握微信小程序项目开发

在校大学生

刚刚毕业的技术小白

零基础 想转行的
非在职IT人员

有基础想转行的
在职IT人员

希望得到技能提
升的IT研发人员

亮点1

七大阶段
五大拓展

提炼七大阶段，
五大拓展课程，紧扣市场需求，
实现全栈开发

亮点2

380+课时

内容系统，贯通前后端，
课程设计循序渐进，
380+课时从理论到实战层层深入

亮点3

11大项目
30+案例

11大实战项目和30+经典案例，
模拟真实企业项目开发

阶段一 : 前端基础

33小时

|

40个
知识要点

HTML

浏览器与浏览器内核、HTML基本结构、HTML常用标签、 【案例】路径和锚点定位、【案例】HTML综合案例、 【案例】表格和列表标签及案例、【案例】表单相关元素及属性、【案例】综合案例-注册页面

CSS

CSS介绍和CSS基本选择器、font字体、文本样式和CSS样式表、【案例】综合案例-新闻页面、chrome调试工具和emmet语法、CSS复合选择器、 【案例】标签显示模式和案例、【案例】CSS背景及应用案例、【案例】综合案例-五彩导航、CSS三大特性、【案例】CSS盒模型及应用案例、 【案例】PS基本操作及综合案例、【案例】综合案例-快报模块、圆角和阴影的应用、【案例】浮动及应用案例、清除浮动、PS常用操作及cutterman插件使用、 【项目】学成网在线项目、【案例】CSS四种定位、淘宝焦点图案例、元素显示和隐藏应用案例、CSS精灵图和字体图标、CSS（问题解决技巧）、CSS（布局技巧）

HTML5和CSS3

HTML5新增标签、CSS3新增选择器

【项目】品优购电商项目

品优购项目介绍及准备工作、导航、头部和底部区域制作、网页主体区域制作、网页列表区域制作、注册页面制作、网站上传

市场价值 : 能够根据PSD文件文件，完成PC端静态网页的开发工作，学完此阶段，尚不能够达到企业用人标准。

阶段二 : 移动Web网页开发

22小时

|

16个
知识要点

H5C3进阶

vscode编辑器基本使用、HTML5新增标签、【案例】CSS3新增选择器及案例、【案例】2D转换及相关案例实现、【案例】3D转换和旋转木马案例

Flex 伸缩布局

移动端基础知识、【案例】移动端电商首页制作、Flex伸缩布局基础知识、【案例】移动端携程网首页制作

移动web开发

媒体查询、less介绍和使用、rem适配及原理、【案例】移动端苏宁首页制作和rem适配、响应式开发介绍、Bootstrap介绍和使用、【案例】阿里百秀响应式页面制作

市场价值 : 能够完成移动Web网页、响应式页面以及炫酷页面的开发工作，学完此阶段，尚不能够达到企业用人标准。

阶段三 : JavaScript网页编程

63小时

|

66个
知识要点

JavaScript基础语法

计算机基础和JavaScript介绍、JavaScript变量、JavaScript数据类型、JavaScript操作符、 【案例】JavaScript流程控制及案例、【案例】JavaScript循环及案例、JavaScript数组和冒泡排序、 JavaScript函数及应用、JavaScript作用域及预解析、JavaScript对象、【案例】JavaScript内置对象及案例、 JavaScript简单类型和复杂类型

WebAPI编程

API 和 Web API、DOM介绍、【案例】事件和样式操作及案例、【案例】百度换肤、【案例】表单全选案例、 【案例】tab栏切换案例、【案例】节点操作及发布留言案例、【案例】动态创建表格案例、【案例】事件详解及案例、 BOM介绍及应用、【案例】定时器和相关案例、this指向和js执行机制、【案例】location、navigator、history对象、 offset、client、scroll三大家族介绍及案例应用、缓动画的原理和封装、【案例】网页轮播图实现、节流阀、 【案例】返回顶部及筋斗云案例、【案例】移动端轮播图实现、【案例】移动端插件使用及轮播图的实现、 【案例】HTML5本地存储及记住用户名案例

jQuery快速开发

jQuery介绍及常用API导读、【案例】jQuery选择器及案例、jQuery链式编程及样式操作、 【案例】jQuery动画及王者荣耀手风琴案例、【案例】jQuery实现购物车案例、【案例】jQuery实现电梯导航案例、 jQuery事件绑定和解绑、jQuery插件的使用、【案例】jQuery实现todolist案例

【项目】 基于ECharts数据可视化项目

ECharts介绍和配置、数据可视化项目适配方案、数据可视化项目-监控区域实现、饼形图和用户统计模块实现、柱形图定制区域实现、销售统计模块实现、渠道分布模块实现、季度进度模块实现、全国热榜模块实现

JavaScript

面向对形象编程介绍、类和对象、【案例】面向对象tab栏切换案例、构造函数和原型对象、forEach、some、 【案例】filter方法及查询商品案例、Object.defineProperty方法、函数进阶、call、apply、bind的使用、 闭包及应用、递归及应用、正则表达式及应用、ES6中的let和const、ES6解构赋值、ES6箭头函数、剩余参数和拓展运算符、 Array实例方法、ES6模板字符串和set数据结构

市场价值 : 能够完成PC端网页、移动Web网页、响应式页面中的功能和特殊效果的开发工作，学完此阶段，具备一定的企业基础用人标准，但尚未达到初级前端开发工程师水平。

阶段四 ： Node与Ajax

50小时

|

75个
知识要点

Ajax+HTTP

ajax介绍、【案例】图书列表案例、【案例】聊天机器人、form表单+案例、【案例】模板引擎+案例、正则与字符串操作、xhr的基本使用、数据交换格式、封装自己的Ajax函数、XHR Level2的新特性、jQuery用法、axios、同源策略、跨域、Jsonp、【案例】淘宝搜索案例、防抖和节流、HTTP协议简介、HTTP请求消息、HTTP响应消息、HTTP响应状态码

Git和github基本使用

关于版本控制、Git基础概念、安装并配置Git、Git的基本操作、开源相关的概念、github、分支

【项目】大事件后台管理项目

准备工作、登录注册、后台主页、基本资料、重置密码、更换头像、文章类别、文章列表、分页、删除文章、发布文章

Node基础

node介绍和环境安装、node-fs模块、node-path模块、【案例】node-时钟案例、node-http模块、node-服务器概念、node-创建基本web服务器、node-根据不同的url响应不同的html内容、【案例】node-时钟web服务器案例、node-模块化

npm+模块加载机制

包、npm、包管理配置文件及解决下包慢的问题、包的分类、开发属于自己的包、发布包、模块的加载机制

Express

express、中间件、【案例】基于express写接口

MySQL数据库

cors+jsonp、数据库的基本概念、sql、mysql模块

身份认证

web开发模式、身份认证+session、jwt

【项目】NodeAPI接口项目

注册新用户、登录、获取和更新用户信息、重置密码、更改头像、获取文章分类列表、新增文章分类、根据Id删除、获取，更新文章分类、发布新文章

市场价值 : 能够完成前后端数据交互、基于前后端分离模式、传统模式的开发的工作，学完此阶段，具备企业基础用人标准，能够达到初级前端开发工程师水平。

阶段五 : Vue.js 项目实战

108小时

|

61个
知识要点

Vue基础

【案例】Vue指令及案例（选项卡案例）、修饰符、样式绑定、v-model底层原理、计算属性、过滤器、侦听器、Vue声明周期、【案例】图书管理综合案例、vue组件、【案例】购物车案例、Promise、Fetch、axios、【案例】基于后台接口的图书管理案例、vue路由、【案例】路由案例、前端工程化和模块化

webpack

前端工程化和模块化、webpack介绍与安装、webpack之loader配置与使用、webpack与vue结合使用

Vue-cli3和Element-UI

Vue-cli3（Vue脚手架）、Element-UI组件库

【项目】Vue电商后台管理系统

电商管理项目介绍和初始化、登录功能、退出功能、首页布局和功能实现、用户列表布局和功能实现、用户添加、修改、删除功能、权限列表、角色列表、分配权限和角色、商品分类、分类参数、商品列表、商品添加、订单列表、Echarts数据统计、项目优化、项目部署上线

Vuex

Vuex基础、【案例】基于Vuex的todos案例

【项目】社交媒体-黑马头条项目

项目初始化、登录注册、个人中心、首页-展示文章列表、频道编辑、文章搜索、文章详情、文章评论、编辑用户资料

【项目】HR-saas中台管理项目

登录、登出、角色管理业务、组织架构业务、角色权限、角色列表、员工管理业务、Echarts 雷达图、审批业务、工作日历、多语言功能、全屏（screenfull）、tabs 页多页签组件、导入导出 Excel、Excel 复杂型表头、图片上传、预览及打印、el-upload 上传第三方云服务器、图片生成二维码

市场价值 : 能够实现基于Vue技术栈项目的开发能力，学完此阶段，具备企业用人标准，能够达到中级前端开发工程师水平。

阶段六 : 微信小程序

30小时

|

41个
知识要点

微信小程序

微信小程序介绍、 微信小程序配置、 微信小程序代码构成、 微信小程序宿主环境、微信小程序协同工作和发布、 微信小程序基础、 微信小程序进阶、微信小程序数据请求和案例、微信小程序页面导航、微信小程序页面事件和上拉触底案例、微信小程序生命周期和wxs、【案例】本地生活综合案例、微信小程序组件和样式、微信小程序数据、方法、属性和数据监听、微信小程序数据监听案例、组件生命周期和插槽、父子组件通信和behaviors、vant 小程序 UI 组件库和API的Promise化、微信小程序全局数据共享、分包、自定义tabBar、微信小程序事件和导航、网络请求

黑马优购商城项目

客户消息、微信支付、微信地址、小程序转发、区域滚动、上拉加载 、下拉刷新 、数据缓存、用户信息、自定义组件、微信登录、意见反馈、上线发布

市场价值 : 能够使用小程序原生框架和uniapp框架进行微信小程序项目开发，学完此阶段，具备企业用人标准，能够达到中级前端开发工程师水平

阶段七：React.js项目实战

48小时

|

21个
知识要点

React基础

React基本使用、JSX语法、React组件基础、React组件进阶、React原理及优化、React路由

【项目】好客租房项目

项目介绍和初始化、项目首页布局+功能实现、百度地图API使用、城市选择和渲染、顶部导航组件封装、CSS Modules、地图找房功能实现、FilterTitle、FilterPicker、FilterMore组件实现、房源筛选及房屋详情功能、用户登录功能实现、房源收藏功能实现、发布房源和搜索房源功能实现、项目打包及项目优化

市场价值 : 能够实现基于React技术栈项目开发能力，配合常用组件库解决项目中的一些共性问题，满足前端开发行业中的常见需求，学完此阶段，具备企业用人标准，能够达到中级前端开发工程师水平

阶段八：面试指导+前端面试题

32小时

|

21个
知识要点

前端-工作面试指导技巧

简历内容篇、求职内容篇、面试内容篇、工作内容篇、市场行情篇、人事内容篇、工作心理篇

Vue面试题精讲(持续更新中……)

Vue核心知识点、Vue-Router知识点、Vue响应式原理、Vue虚拟DOM、Vuex状态管理、Vue服务端渲染

市场价值 : 通过面试指导+就业指导资料+前端面试题+复习，学完此阶段，具备企业用人标准，能够达到中级前端开发工程师水平

01.学成网在线项目

学成在线案例是一个在线教育平台，在该案例中使用HTML+CSS进行页面的布局， 在首页中主要有网页的头部区域、网页的banner区域、课程导航和课程列表。

02. 品优购电商项目

品优购电商项目属于B2C电商平台，类似于京东商城和淘宝，在该项目中使用HTML+CSS/CSS3进行页面的布局和动态效果实现， 主要实现了电商首页、列表页面、详情页面，三个页面之间能够进行相互切切换。

03.ECharts数据可视化项目

是一个数据可视化展示平台， 该项目在企业后台中应用较为广泛，项目中页面布局使用rem+flex+felxible.js进行适配，项目中的地图展示、图表等全部是基于ECharts进行实现。

04.大事件项目

是一个CMS内容管理系统，该项目的布局和交互主要使用Layui实现，实现的功能主要有注册、登录、编写文章、发布文章、修改文章、文章类别管理、删除文章、分页、上传文章图片封面、文章数据可视化、重置密码、更换头像等功能。

05.大事件后端接口项目

是为大事件项目提供后端接口服务，该项目主要使用Express+MySQL+cors+bcryptjs等实现后端接口开发，项目主要实现了登录、注册接口开发、个人中心相关接口开发、文章类别管理相关接口开发、文章管理相关接口开发，通过学习该项目就能够熟悉后端开发大致流程，为今后工作中与后端人员进行数据交互打下扎实的基础，并具备了一定的后端接口开发能力

06.黑马优购商城项目

黑马优购商城是一个小程序电商业务项目，该项目从企业中的经典业务需求入手，涵盖了商品分类、商品列表、 商品详情、购物车、订单、微信支付、客服等核心模块。

07.好客租房项目

好客租房项目采用目前前端的React技术栈进行开发，涵盖了React中最常用的技术以及移动端场景问题的解决方案， 使用React官方脚手架工具提供的工作流快速搭建和开发项目，使用阿里旗下antd-mobile组件库搭建页面结构， 使用React-Router-DOM作为前端路由管理复杂页面，使用百度地图API实现地理定位，在地图中直接查找房源等实用功能。

推荐课程
该学科热门课程