前端工程师(升级版)
前端开发相比其他IT开发岗位,门槛更低,更易上手,更适合初学者学习
近几年的前端职业趋势逐渐走高。薪资可观,前景看好,现在入行刚刚好!
不限期 视频有效期
5 个阶段114 门课 课程内容
560 教学服务期限
包含: 阶段一 140 天 阶段二 130 天 阶段三 120 天 阶段四 130 天 阶段五 40 天
什么是教学服务?
212 小时 视频时长
15002 学习人数
9.99 综合评分

更多选择 > 优惠价¥2899.00

支持花呗 7天可退款 ¥3365.00

立即购买
前端就业前景
能做出什么项目
学习路径 知识体系
企业项目实战
慕课网教学法
教学服务保障
课程大纲
学习周期
返回顶部
15002 人选择在慕课网学前端,万人口碑值得信赖
我们始终以企业的标准看待每一项技术,保证课程所授内容符合当今的市场用人标准

课程标准高

对标一线岗位

全栈工程师
Web前端工程师
WebApp工程师
小程序开发工程师
Node.js工程师

课程效果好

冲击满意的薪资

以2019年北上广深
前端开发薪资为例
前端平均薪资达8-15k

课程内容强

实在有用的技能

前后端分离的全栈开发
PC端Web开发
WebApp开发
小程序开发
网页布局开发

0基础到前端全栈 让前端不止于前端
从0基础到前端全栈,前端技术+工作技巧+全栈开发能力,逐层递进的掌握企业所需核心技术点
前端+多端+全栈 企业用什么我们就讲什么
企业对前端开发者的要求越来越高,掌握前后端的技术是面试中的重大加分项
更贴近企业工作的知识体系,以“实战”带“学习”
慕课网自研课程体系,近210小时前端综合课程,5大阶段,每阶段配套案例实战
有更丰富的阶段案例实战, 25+练手项目,巩固并应用所学知识
25+练手项目 ,涉及医疗、娱乐、教育、服务等多个领域
从静态布局到特效开发

企业静态网页开发
个人静态网页开发
H5动态特效产品展示页

从特效网页到组件化开发

慕淘组件化电商项目
从切图到开发的挂号平台页面
网站登录注册验证网页

从PC网页到移动网页

WebApp外卖项目
新闻阅读小程序项目
Canvas手势解锁案例

主流框架快速构建项目

Vue.js开发去哪儿网WebApp
React.js开发新闻列表页
Sass构建新闻网页

“包含但不限于以上项目”
以企业标准开发阶段项目,拿去面试展示也能拿得出手
与技术点全面配套的阶段核心项目,从Web到全栈,还原企业的真实开发流程
去哪儿网WebApp项目
新闻阅读小程序开发
WebApp 外卖项目
全栈留言板项目
项目访问地址:
http://47.94.168.196/(须注册后登录)
课程技术栈全面升级,更加符合企业真实用人标准
覆盖一线企业所需核心技术栈 结合实战开发让你既能学懂又能会用
HTML/HTML5
CSS/CSS3
JavaScript
ES6
移动WebApp
小程序
语义化标签、属性
选择器
流程控制语句
变量和常量
移动基础
开发环境搭建
HTML5、DIV布局
盒子模型
内置对象
箭头函数
@media媒体查询
常用API
表单验证
定位、浮动
函数、事件
模板字符串
Flex布局
基础组件
H5存储
过渡、动画
变量、作用域
解构赋值
(数组、对象解构赋值…)
响应式布局
列表与条件渲染
音视频
2D、3D转换
DOM、BOM
扩展
(对象、数组、函数扩展…)
移动适配、事件
数据绑定
Canvas
边框、圆角
面向对象
Promise异步编程
终端设备检测
组件与生命周期
高德地图
背景、渐变
正则表达式
Class类
性能优化
路由与事件
Vue.js
React.js
Node.js/Koa2
数据库
Sass
常用库和工具
Webpack环境搭建
环境搭建
npm
环境安装
编译环境配置
Photoshop
Vue组件化思想
虚拟DOM
CommonJS
mongoose
基础语法
jQuery常用库
生命周期
JSX 语法
debug
compass
基本数据类型
JSON
数据绑定
事件绑定
路由
Schema
加减乘除运算
AJAX
事件处理器
生命周期函数
中间件机制
集合collection
伪类继承
Firebug
Chrome调试工具
Vue-vuex缓存
组件
洋葱圈模型
增删改查
嵌套、条件控制
Zepto、Swiper工具包
Vue-router路由
Ant Design 组件库
Cookie
session
数据库设计
内置函数
Sublime Text
WebStorm
有更科学的教学方法,慕课网精研,过万学员实际验证
慕课网根据美国国家训练实验室(National Training Laboratories)的研究成果——学习金字塔
结合IT编程的学习特点,研究实践出适合中国学生的高效学习方法
有更高效的学习保障,慕课网专职教学团在线督促、指导、答疑
“学练测评答”教学闭环-以下内容均是真实学习情境的呈现,所有努力与付出都只为你学得更好、更快
学:视频课程+在线编程
练:配套习题
测:阶段评测
评:1V1作业批改
答:问答专区
面试官讲的面试课,9小时高强度扫盲,解决入职前最后一个问题
课程是讲师多年一线面试经验的总结,是真正能拿来就用的独家一手资料
1张前端知识图

带你把知识串成线,连成面,印在脑中

1套解题方法论

让你实现“会1道题就能解决一类题”

1本前端面试经

带你理清“什么是必会题,什么是加分题”

课程大纲及学习周期安排 (详细版)

为保证课程内容紧跟市场变化,课程章节将逐步开放,直至课程完结

阶段一: 前端零基础入门
  • 步骤1
  • 步骤2
  • 步骤3
  • 步骤4
  • 步骤5
  • 步骤6
页面结构层HTML

HTML是搭建网页结构的第一步。通过学习工作中必备的HTML标签,并结合实际案例,更快更轻松的掌握网页结构搭建方法和技巧。

课程安排:
  1. 步骤大案例:结合表格标签/属性实现企业网页结构搭建
  2. 了解HTML对于网页的意义
  3. 学习常用标签/属性,进行结构搭建
  4. 掌握无序列表/有序列表/自定义列表
  5. 学习表单标签/属性,能创建常见表单结构
  6. 掌握标签嵌套规则/行内元素/块元素的使用
  7. 步骤大作业:结合表格标签实现新闻网页布局
页面化妆师CSS

CSS是网页的“美容师”。通过学习常用的CSS属性并结合HTML标签,独立把效果图还原成静态代码页面,为学习网页编程打下夯实的基础。

课程安排:
  1. 步骤大案例:结合HTML标签与CSS属性实现企业网页布局
  2. 掌握语法,选择器的使用,快速实现样式设置
  3. 学习文字、背景和列表等常见属性
  4. 盒子模型核心知识讲解,深入理解原理
  5. 浮动与定位核心知识,灵活运用实现网页布局
  6. 常见布局方法,解决布局常见问题
  7. 步骤大作业:结合HTML标签与CSS属性实现
页面结构升级HTML5

H5是HTML的高级应用。通过对H5语义化标签的学习,并结合HTML标签搭建网页,有利于增强网页的SEO、可读性和可维护性,提高网页性能。

课程安排:
  1. 步骤大案例:使用语义化标签实现企业网页布局
  2. 了解HTML5与HTML区别
  3. 理解HTML5布局和div布局的不同
  4. 掌握HTML5的新特性和应用
  5. 精通HTML5语义化标签实现方式
  6. 步骤大作业:结合表格标签和css样式完成电商订单系统页面
升级页面化妆师CSS3

CSS3是CSS的高级应用。通过对CSS3属性的学习,并结合HTML标签,能够轻松制作出各种绚丽的效果,为后面动态网页的实现奠定基础。

课程安排:
  1. 步骤大案例:运用CSS3样式和动画知识绘制卡通汉克狗
  2. 掌握CSS3新增选择器/新增样式属性
  3. 如何绘制圆角边框/阴影框/图片边框等特殊图形
  4. 掌握元素扭曲/移位/旋转,更自由的装饰HTML
  5. 运用过渡与动画,实现炫酷效果
  6. 步骤大作业:运用CSS3样式和动画知识绘制蓝天白云
让页面动起来的JS基础部分

JS是网页编程的第一步。通过JS网页编程语言的基础学习,能够独立使用JS知识开发网页特效,来向PC静态页面添加交互行为。

课程安排:
  1. 步骤大案例:结合HTML/CSS/JS开发电商网站的轮播图特效
  2. JS基本语法、DOM操作和BOM
  3. 介绍JS变量声明与类型转换
  4. 讲解JS运算符操作/条件分支语句/循环语句
  5. 掌握JS内置对象与函数基础
  6. 步骤大作业:使用DOM2级事件开发电商网站的轮播图特效
综合实战案例

案例是对前面所学知识的综合运用。增强解决网页开发问题的能力,从网页结构搭建到特效编写,掌握企业常见网页开发。

课程安排:
  1. 步骤大案例:结合CSS3过渡/动画/JS,高效编写H5电商网站宣传页
  2. 了解雪碧图与标注设计图
  3. 掌握 PS切图,并结合编程技术还原设计稿
  4. 掌握CSS3过渡与 animate动画的综合运用
  5. 掌握使Chrome调试工具进行页面调试
  6. 结合CSS3过渡/动画/JS,高效编写H5特效网页
  7. 步骤大作业:结合CSS3过渡/动画/JS,高效编写H5动画传页
阶段二: 组件化网页开发
  • 步骤1
  • 步骤2
  • 步骤3
让页面动起来的JavaScript深入讲解

在JS初级知识的基础上,通过深入学习JS函数和面向对象知识,为后续学习组件化编程奠定基础。

课程安排:
  1. 步骤大案例:使用HTML/CSS/JS/正则实现登录页
  2. 学习变量与作用域,了解作用域的规则
  3. 掌握JS函数的高级应用
  4. 熟练使用面向对象思想进行DOM编程,进行模块化开发
  5. 学习正则表达式,进行常见手机号、邮箱、姓名等功能验证
  6. 掌握JS模块化编程方式,编写高质量代码
  7. 开发具模块化代码的技巧,解决企业级编程协同问题
  8. 步骤大作业:使用HTML/CSS/JS/正则实现慕课订票注册页
一个快速、简洁的JS库--jQuery

jQuery是JS的类库。jQuery提供了丰富的封装好的方法,通过对jQuery的学习,能够缩短配置网站和应用所需的时间,提高开发效率。

课程安排:
  1. 步骤大项目:完成统一挂号平台首页/分类页布局与特效开发
  2. 熟练使用jQuery选择器与DOM知识操作HTML元素
  3. 掌握jQuery动画与事件,开发网页特效
  4. 理解HTTP协议,熟悉网络通信相关概念
  5. 熟悉原生AJAX请求流程与细节,并掌握常见跨域技巧
  6. 基于jQuery的AJAX相关API熟练开发常见的前端功能
  7. 完成统一挂号平台首页/分类页布局与特效开发
  8. 步骤大作业:完成统一挂号平台医院详情/科室页布局与特效开发
一个高大上的思想,开发电商网页

组件化是企业必备的开发思想,通过对组件化综合案例的学习,掌握企业开发核心思想,为学习框架和日后工作奠定基础。

课程安排:
  1. 步骤大项目:结合组件化编程,完成PC端慕淘首页布局与特效开发
  2. 3种(CSS、JS、组件)经典电商网站“站点导航下拉菜单”的实现方法
  3. 下拉菜单封装及用构造函数方法封装下拉模块
  4. 实现按需加载/延迟处理功能
  5. 搜索验证/AJAX自动搜索提示,并封装成组件
  6. 3种(淡入淡出、滑入滑出、按需加载)封装轮播图组件的方法
  7. 经典电商网站的定位导航/Tab组件的开发
  8. 步骤大作业:结合组件化编程,完成PC端慕多多首页布局与特效开发
阶段三: WebAPP开发与小程序
  • 步骤1
  • 步骤2
  • 步骤3
  • 步骤4
HTML5在移动端开发的贡献

H5多媒体技术是自媒体时代的必备技能。通过对H5多媒体技术的学习,轻松应对H5多媒体技术在移动端广泛应用的需求。

课程安排:
  1. 步骤大案例:结合Canvas/JS实现手机解锁案例
  2. HTML5的本地存储方式,了解数据缓存机制
  3. HTML5提供的多媒体标签,进行音视频播放器开发
  4. HTML5 Canvas标签应用,进行特殊图形绘制
  5. 步骤大作业:结合Canvas/JS实现hello kitty猫
移动webApp开发必备基础

移动开发基础是进行webApp开发第一步。通过移动端基础知识的学习,能够独立开发移动端页面,并适配不同移动端终端。

课程安排:
  1. 步骤大案例:完成慕淘移动端首页开发
  2. 了解移动端屏幕、移动端浏览器、操作系统的不同
  3. 常用移动端常用Rem适配方案
  4. 主流移动端页面开发技术选型与解决方案
  5. 响应式布局开发与Flex布局
  6. 不同终端适配与Browsersync多终端同步检测工具的使用
  7. 步骤大作业:结合响应式布局实现慕课舞蹈课程网站首页
webApp美团实战案例

案例是对前面所学知识的综合运用。通过网页布局、适配及业务逻辑处理,掌握WebApp开发技能,为使用框架快速构建WebApp奠定基础。

课程安排:
  1. 步骤大项目:结合Flex布局/Rem适配开发首页/订单页/购物车/个人中心页开发
  2. 步骤大项目:完成首页星级评分功能与搜索功能开发
  3. 步骤大项目:结合模板字符串完成订单列表与详情页数据渲染
  4. 步骤大项目:完成详情页购物车功能开发
  5. 步骤大项目:完成首页和订单页的滚动加载功能
小程序基础与实战案例

小程序是必备技能之一 。通过对小程序知识的学习,能够独立开发企业级小程序,拥有解决主流小程序功能需求的能力。

课程安排:
  1. 步骤大项目:结合Flex/Swiper/Template模板,开发新闻小程序欢迎页/列表页/新闻详情页
  2. 了解小程序注册流程/注册方式/注册主体
  3. 小程序的生命周期ActionSheet组件
  4. 小程序基础语法与常用API
  5. 小程序开发工具的调试办法
  6. 小程序多页面下的开发工作流及目录结构
阶段四: Vue与React高级框架开发
  • 步骤1
  • 步骤2
  • 步骤3
  • 步骤4
学习高级框架的阶梯ES6基础

ES6是必备技能之一。通过对ES6的学习,全面掌握ES6引入的新特性,了解ES6在项目中的使用场景,为后面框架的学习奠定基础。

课程安排:
  1. 步骤大案例:结合ES6知识实现图片切换特效案例
  2. 了解ES6与ES5的区别
  3. 掌握babel转换器的使用
  4. 如何运用ES6 Promise异步编程
  5. 使用Class类,更好的面向对象编程
  6. 掌握数组,对象,字符串函数的扩展
  7. 掌握箭头函数的应用
  8. 步骤大作业:结合ES6实现下拉菜单功能案例
Vue.js基础+仿去哪网电商实战

企业需求热门框架之一。通过对Vue.js基础和项目的学习,具备开发常见功能及快速构建企业级项目的能力,满足行业中的常见需求。

课程安排:
  1. 步骤大项目:结合Flex/Rem/Swiper框架,开发去哪首页/城市选择页/详情页开发
  2. 掌握Webpack项目构建配置
  3. 掌握基础语法与常见API
  4. 组件的使用及组件的生命周期
  5. Axios网络请求及路由使用
  6. Vuex的引入、应用场景及项目中的实现
  7. 使用Vue.js技术栈进行项目开发的方式方法
  8. 步骤大作业:结合Flex/Rem,开发慕课网课程列表页/详情页
React基础知识+实战案例

企业需求热门框架之一 。通过对React基础和项目的学习,具备构建企业级项目和解决核心业务问题的能力,快速接入企业项目。

课程安排:
  1. 步骤大作业:运用React组件完成新闻网站项目常见功能开发
  2. 理解React的开发理念与内部原理
  3. React的基本使用及Ant Design组件库进行项目开发
  4. 使用React封装项目中用到组件,实现复用
  5. React项目中常见问题的解决方案
  6. 如何运用React-Redux进行状态管理
  7. 声明式编程的思想与组件化开发的思想
就业必备的技术面试分析

面试是接入企业的必经之路。通过对必备面试技术的学习,快速掌握企业常见的面试题和技巧,为顺利接入企业奠定基础。

课程安排:
  1. H5语义化/CSS布局/定位/图文样式/响应式面试解题技巧
  2. 原型和原型链的5个原则与面试解题技巧
  3. 变量类型/计算/构造函数的面试解题技巧
  4. 作用域和闭包的执行上下文/this面试解题技巧
  5. 异步和单线程/常见的内置对象面试解题技巧
  6. DOM本质/节点操作/BOM操作面试解题技巧
  7. AJAX与事件解面试题技巧
阶段五: Node.js全栈开发
  • 步骤1
  • 步骤2
Node.js全栈开发基础知识

前端工程师会后端开发已是趋势。从node.js到koa2再到数据库知识,掌握前端必会全栈知识,为后面开发全栈项目蓄力。

课程安排:
  1. 步骤大案例:搭建node.js服务器及创建MongoDB数据库
  2. 了解什么是服务端,服务端与前端的关系
  3. 掌握commonjs模块化与npm插件使用
  4. 掌握inspect调试方法
  5. 了解koa2中间件与洋葱圈模型
  6. 了解关系型数据库与MongoDB基础API详解
  7. 掌握node.js操作MongoDB方法与mongoose规范数据模型
登录实现方案与留言板项目实践

对标企业标准开发流程。从登录实现方案、项目需求分析、接口和数据结构设计到业务开发,帮你打通前后端任督二脉,突破全栈技术瓶颈,为就业加码。

课程安排:
  1. 步骤大案例:运用node.js/koa2/MongoDB完成留言板常见功能开发
  2. 步骤大案例:koa2改写登录注册功能
  3. 了解cookie 和session的关系
  4. 掌握项目需求分析与前后端分离式全栈开发
  5. 掌握接口与数据结构设计方法
  6. 掌握全栈项目开发流程与技巧
查看内容安排
学员专享增值服务
编程环境
指导配置搭建

给你提供精确到动作的本地环境
搭建方法,解决你的第一步难题

教辅材料
扩充知识储备

提供了大量辅助资料,以助你更好的理解知识,并扩充知识面

代码下载
提供完整代码

免费提供课程源码,可自行下载使用,方便你进行练习

常见问题

购买-前端工程师

阶段1

1.前端零基础入门

6步骤 / 42门课 总时长:58 练习题:885道 考试:5次
¥699.00
阶段2

2.组件化网页开发

3步骤 / 20门课 总时长:45 练习题:192道 考试:2次
¥799.00
阶段3

3.WebAPP开发与小程序

4步骤 / 23门课 总时长:54 练习题:175道 考试:2次
¥758.00
阶段4

4.Vue与React高级框架开发

4步骤 / 22门课 总时长:40 练习题:137道 考试:2次
¥743.00
阶段5

5. Node.js全栈开发

2步骤 / 7门课 总时长:15 练习题:7道 考试:0次
¥366.00
购买提示:

阶段一 + 阶段二 + 阶段三 + 阶段四 + 阶段五 购买直降 ¥466

/

阶段二 + 阶段三 + 阶段四 + 阶段五 购买直降 ¥346

优惠后合计: 组合优惠:
去结算
意见反馈 帮助中心 APP下载
官方微信