从零基础晋升前端全栈工程师课程 - 2018 年全新升级版

最新开班信息 
  • 火热报名中,报名请点击:  我要报名 
  • 付款方式:官方唯一支付宝【131****4820】
简介 
凝聚妙味讲师 10 年心血、锤炼出最佳前端开发课程体系,今天以全新面貌呈现在大家面前:注重基础修炼与原生方法的剖析是这门课的灵魂,课程包括 7 大学习阶段、33 个章节、2000 多个知识点和丰富的前端开发案例…… 这是国内唯一一家敢于亮出细致入微的课程大纲体系的机构。凭借本套课程体系,最终能让学员们开发出基于 vue 或 react 的工程级全栈项目为结课标准,并以此赢得一份好工作。
课程相关视频 
1-WEB前端开发是做什么的 15:41
WEB 前端开发要做什么:PC 端、移动端各种精美丰富的项目、学前基础和条件、所学的编程语言和软件…
 
2-HTML语言是什么 19:27
什么是 HTML 语言、对话浏览器、标签、标签对、单标签、标准网页结构、快捷键生成标准文档、文本与超文本…
 
3-CSS语言和JS语言介绍及演示 20:43
什么是 CSS 语言、CSS 代码、chrome 谷歌代码检查工具、边框样式… JavaScript 行为、事件、JS 语句…
 
课程价格17200

课程时长:4个半月

讲课方式:周一至周五 讲师全天 现场面授,周六安排值班讲师辅导

上课时间:上午:09:30~12:30 下午:13:50~18:30 自习:18:30~20:00(自习有讲师现场辅导)

优惠报名方式

提前报名:即在 2018年2月26日 ~ 3月7日 期间报名付款成功者,可享受 16200 元优惠价;

参加 3 人团购:在开班前,成功组合成 3 人团报名者,按 16500 元优惠价执行;

参加 2 人团购:在开班前,成功组合成 2 人团报名者,按 16800 元优惠价执行;

特别提醒:

在 2018 年 2 月 11 日之前(春节假期前)报名者,均可享受 2017 年课程优惠价;
 我要咨询 
 
 
 
课程大纲
详细课程大纲
 
 
01-02
课程目录
  • 代码初始03
  • 常用标签04
  • 浮动深度剖析05
  • 定位进阶06
  • 表格和表单07
  • 结构选择器08
  • PC端整站开发09
  • Less 预处理语言10
  • 移动端开发与适配11
  • bootstrap和响应式12
  • git 和 github 使用13
  • javascript入门14
  • 数据类型和流程控制15
  • function详解16
  • 字符串和数组方法17
  • 对象、JSON、Math18
  • 定时器和动画帧19
  • 动画函数封装20
  • transform相关21
  • Date对象22
  • BOM23
  • 事件基础24
  • 事件应用25
  • 移动端事件26
01
03-04
课程目录
  • Node.js、Linux、npm、数据库27
  • AJAX 原理、状态码、数据处理、cookie28
  • DOM 文档、节点、元素操作、综合实例29
  • 正则表达式、修饰符、元字符30
  • 面向对象、构造函数、原型链、继承31
  • jQuery3 架构、常用 API、事件32
  • ECMAScript6、解构赋值、箭头函数33
  • React + Redux 全家桶系列开发34
  • vue 2.0 全家桶系列35
02
03-04
代码初始
前端开发工程师在整个工作流中所处的位置、前端开发工程师的工作内容:工作职责,软素质、前端开发环境及软件: Photoshop 切图、修图、测量 编辑器 WebStorm、HBuilder、Atom、Visual Studio Code、... 浏览器、什么是语言、前端开发语言介绍 html css js、页面基本结构、样式表的书写规则及出现的位置:行间样式表,内部样式表,外部样式表、常见样式汇总:px 像素 计量单位,width 宽度, height 高度, border 边框, background 背景, 文字设置, 文本设置, padding 内边距, margin 外边距, 盒模型 超链接: href, 相关伪类
03
05-06
常用标签
常用标签: header article aside section footer nav div h1-h6标题 p ul ol li ol ul img figure figcaption dl dt dd span base strong em time mark progress 、浅析SEO: SEO搜索引擎优化 部分方法、常用: id 类 标签 群组 包含 通配符 、优先级:优先级计算规则 基础选择器优先级 包含选择器优先级 群组选择器优先级、标签样式初始化订制方案、标签类型、标签类型转换、inline-block、cursor、编码规范、练习:商品推荐横排列表、练习:热卖商品竖排列表
04
05-06
浮动
文档流:可显示对象在排列时所占用的位置、浮动的前世今生:使元素脱离文档流,按照指定方向发生移动,、基础语法:float:left | right | none | inherit;、浮动的特性:块在一排显示 内联支持宽高 默认内容撑开宽度 脱离文档流 阻止margin叠压、clear、为什么需要清除浮动?、清除浮动的几种方法:加高 空标签清浮动 br清浮动 after伪类、BFC:作用 触发BFC的条件 、overflow: hidden | scroll | auto、练习:全球通业务模块、练习:综合性复杂模块
05
07-08
定位进阶
position:relative 相对定位:不影响元素本身的特性 不使元素脱离文档流(元素移动之后原始位置会被保留)如果没有定位偏移量,对元素本身没有任何影响 提升层级 、偏移量、position:absolute 绝对定位、z-index:[number] 定位层级、position:fixed 固定定位、opacity 透明度、多背景设置、linear-gradient 线性渐变、radial-gradient 径向渐变、text-shadow 文字阴影、box-shadow 盒子阴影、filter 滤镜、border-radius 圆角设置、练习:鼠标移入线框变色、练习:大练习-影片标高清图标层
06
07-08
表格和表单
表格标签:table 表格 thead 表格头 tbody 表格主体、表格样式重置、colspan 属性规定单元格可横跨的列数、rowspan 属性规定单元格可横跨的行数、form 表单、input 表单元素:text password radio checkbox submit reset button file hidden email tel url search range number color datetime time date week month、label标签 input元素定义标注、select/option 下拉选框、textarea 文本域、表单元素属性、属性选择器、表单相关伪类、练习:综合表单实例
07
09-10
结构选择器
E>E 找到元素下的第一层子元素、 E+E 相邻元素、 E~E 同级元素、 E:nth-child(n) E父元素中的第n个子节点、 E:nth-last-child(n) E父元素中的第n个子节点,从后向前计算、 E:nth-of-type(n) E父元素中的第n个子节点,且类型为E、 E:nth-last-of-type(n) 、 E:first-child E元素中的第一个子节点、 E:last-child E元素中的最后一个子节点、 E:first-of-type E父元素中的第一个子节点且节点类型是E的、 E:last-of-type E父元素中的最后一个子节点且节点类型是E的、 E:only-childE元素中只有一个子节点、 E:only-of-type
08
09-10
PC端整站开发
课程包含:css sprites 精灵/雪碧图(css精灵是我们经常使用的一种图片处理方式,可以把很多小图放在一张大图中,进行加载速度的优化)、 项目文件管理(文件的存放位置,文件夹以及文件的命名规范)、 页面规划(合理的规划页面结构可以方便我们进去代码复用,方便后期管理维护)、 难点解析: 通栏banner处理方案、 电商类网站导航结构分析、 视频类网站细节处理、特殊布局:左右两列登高布局,圣杯及双飞翼布局、相关扩展:iframe 外联框架,icon 图标设置,meta 常用设置 练习:整页练习
09
11-12
less
less是什么、 less编译: 编译方法、 less 常用语法、 变量、 混合、 混合防止编译、 带参数混合: 默认情况下,参数要与传入的数据一一对应、 定义参数的默认值、 给传入的数据起名字、 嵌套,在写包含选择器时,可以直接写在父代码块中、 & 父选择器、 运算,在 less 中 我们可以进行加减乘除等运算、 作用域 ,在代码块中定义的数据,就只能在该代码块中进行使用、 注释: 单行注释,编译时不会被编译 多行注释,编译时会被保留 merge、 Guards、 循环
10
11-12
移动端开发与适配
移动端、 移动端测试环境、 Emulation、 本地服务器配置、 物理分辨率和显示分辨率、 viewport 视口设置、 window.devicePixelRatio 像素比、 清除IOS下按钮的圆角、 移动端链接和按钮的阴影消除、 移动端rem布局、 background-size、 box-sizing 怪异盒模型、 background-origin、 background-clip、 弹性盒模型、 display:flex、 flex-direction、 row、 row-rever、se justify-content、 align-items、 flex-wrap、 align-content、 flex-flow、 order、 弹性盒模型的margin:auto、 align-self、 flex
11
13-14
bootstrap和响应式
Media Queries、 媒体类型、 关键字、 媒体类型、 练习:jQuery响应式官网(头部)、 bootstrap、 font-face和自定义文字图标、 预处理脚、 Bootstrap的特性、 Bootstrap工程环境、 Bootstrap源码、 Bootstrap设计思想、 安装方式、 Bootstrap页面的基本结构、 栅格系统、 栅格大小屏控制、 媒体查询参数说明、 offset 偏移设置、 栅格系统响应式工具、 bootstrap的默认UI设置、 字体图标、 下拉菜单、 按钮组、 输入框组、 相关导航、 缩略图、 媒体对象、 具有响应式特性的嵌入内容略、 实战:[Ghost中文网]
12
13-14
git 和 github 使用
使用版本控制工具有利于协同合作和版本储存。git 是分布式的版本控制工具,可使用命令行和其提供的 GUI 图形界面操作,分为工作区、暂存区、版本库。SVN 是集成式的版本控制工具,有图形界面。 github 通过 Git 进行版本控制,提供软件源代码托管服务,是开源项目源码托放平台。本章节会交给你 git 的安装和设置 config 用户名邮箱配置,git 常用命令操作,如何使用 git 连接 github 托管本地代码、创建 github 远程仓库、拉取远程仓库、克隆远程仓库到本地 git clone、拉取远程仓库更新本地工作区。
13
15-16
javascript入门
javascript是用来做什么的、 常见网页特效的原理、 js书写位置、 getELementById()、 什么是事件、 初识函数、 变量、 命名规范、 属性操作的第一种方法、 案例:热身练习讲解、 字符串、 属性操作的第二种方式、 练习:简易留言板、 if判断、 常用运算符"+","-","*","/"、 初始数组、 小例子: 点击按钮 加减数字、 案例:上一张下一张图片切换(数字版)、 案例2:上一张下一张图片切换(数组版)、 新的获取元素的方法、 获取一组元素操作、 for循环、 取模、 this关键字、 案例:简易仿select控件、 案例:单选模拟、 选项卡思路讲解
14
15-16
数据类型和流程控制
数据类型划分、 不同的数据类型,决定了我们后期可以进行的操作、 基本类型(简单类型)、 引用类型(复合类型,复杂类型)、 传值与传址、 typeof运算符、 强制数据类型转换、 parseInt()、 parseFloat()、 number()、 NaN和isNaN、 String()、 Boolean()、 算术运算符、 赋值运算符、 关系运算符、 逻辑运算法、 条件操作符 ?:、 、 运算符优先级、 案例:简易计算器、 判断:if、switch(case break default)、 循环:while、for、 跳出:break、continue
15
17-18
function详解
function 函数、 定义函数、 函数调用、 函数传参、 形参、 实参、 arguments 不定参、 函数返回值、 计算后的样式值、 getComputedStyle(element)、 计算后样式,元素最终渲染出来的样式、 函数封装、 案例:多个选项卡传参、 练习:修改文本框的值、 预解析机制、 作用域、 全局作用域 局部作用域 作用域链、 闭包、 闭包,有权访问另一个函数作用域的函数、 常见形式,函数嵌套函数、 闭包的使用、 匿名函数表达式、 递归、 案例:商品累计
16
17-18
字符串和数组方法
字符串的格式、 string.length、 string.charAt(index)、 string.charCodeAt(index)、 string.indexOf("str")、 string.lastIndexOf("str")、 string.slice(start,end)、 string.split(separator)、 string.substr(start,length)、 string.substring(start,end)、 string.toLowerCase()、 string.toUpperCase()、 string.trim()、 模板字符串、 arr.length、 arr.push(data) arr.unshift(da、 arr.pop()、 arr.shift()、 arr.sort()、 arr.concat(arr2)、 arr.reverse()、 arr.join(separator)、 arr.slice(start,end)、 arr.splice()、 arr.forEach()、 arr.map()、 arr.filter()
17
19-20
对象
创建对象、 new Object()、 {}、 in 操作符 for-in语句、 JSON(JavaScript Object Notation)、 Math 对象、 Math.abs() 返回绝对值、 Math.ceil() 返回向上取整后的数值、 Math.floor() 返回向下取整后的数值、 Math.round() 返回四舍五入后的数值、 Math.max(x,y) 、 Math.min(x,y) 、 Math.random() 、 Math.sqrt() 返回平方根、 Math.PI 圆周率、 角度和弧度的相互转换、 Math.sin() 返回正弦值、 Math.cos() 返回余弦值、 Math.tan() 返回正切值、 Math.asin() 返回反正弦值、 Math.acos() 返回反余弦值、 Math.atan() 返回反正切值
18
19-20
定时器和动画帧
setInterval(执行函数,间隔时间) 间隔型定时器、 间隔一定时间,重复执行,执行函数、 返回值是定时器的编号、 setTimeout(执行函数,延迟时间) 延迟型定时器、 延迟一定时间执行,执行函数、 返回值是定时器的编号、 关闭定时器、 clearInterval(定时器编号) 关闭setInterval开启的定时器、 clearTimeout(定时器编号) 关闭setTimeout开启的定时器、 定时器管理、 requestAnimateFrame(function) 动画帧、 CancelAnimationFrame(动画帧编号)、 关闭动画帧、 CancelAnimationFrame的兼容处理、 封装兼容的动画帧处理方法
19
21-22
动画函数封装
tween.js tween类来自于flash,在tween中封装了各种各样的动画算法、 tween的动画,主要依赖于t,b,c,d四个参数:、 t 动画当前执行至第几次、 b 需要动画的样式的初始值、 c 需要动画的样式的初始值和结束值的差值、 d 动画执行总次数、 案例: 控制小方块移动、 单个元素,单个属性动画封装、 多个元素,单个属性动画封装、 多个元素,多个属性动画封装、 添加回调函数、 在动画结束之后,添加callBack() 回调函数、 在动画执行中,添加callIng() 回调函数、 call 修改函数在执行中的this执行
20
21-22
transform相关
transoform 变换、 rotate 元素旋转、 角度单位、 scale 元素缩放、 skew、 translate、 transform的执行顺序、 transform-origin、 transoform3D rotate3D、 translate3D、 transform-style 、 perspective 、 perspective-origin 、 backface-visibility 、 案例:3d盒子、 利用transform做动画的好处、 transform在获取时,获取到的是矩阵,不能直接进行计算、 封装transform获取和设置方法、 把封装好的transform方法引入css方法、 transition过渡 为元素的样式变化时添加动画、 animation、 分析3种动画实现方式的不同
21
23-24
Date对象
Date对象主要用于获取或设置时间,用法 new Date()、 日期获取相关参数: Date() 、 getDate() 、 getDay() 、 getMonth() 、 getFullYear() 、 getHours() 、 getMinutes() 、 getSeconds() 、 getMilliseconds() 、 getTime() 、 Date.now() 、 案例:时钟效果、 日期获取相关参数、 new Date(2018,4,1,0,0,0)、 new Date('June 10,2018 0:0:0')、 new Date(new Date().getTime())、 setDate() 、 setMonth() 、 setFullYear() 、 setYear() 、 setHours() 、 setMinutes() 、 setSeconds() 、 setMilliseconds() 、 setTime()
22
23-24
BOM
BOM (browser object model) 浏览器对象模型,、五大对象:window、navigator、locaation、history、screen window 对象、 window.open(URL,name,features,replace) 打开新窗口、 window.close() 关闭窗口、 页面相关距离获取、 可视区大小、 页面大小、 窗口滚动条距离、 window常用事件、 scroll 监听滚动条滚动、 resize 监听窗口大小发生变化、 location 对象、 href hash search host hostname pathname port protocol reload()、 navigator、 screen、 history
23
25-26
事件基础
事件、 事件监听器 、 el.removeEventListener("event",func,事件流)、 事件流、 事件对象、 e.target 事件源,发生事件的元素、 e.type 事件类型、 阻止冒泡、 阻止默认行为、 鼠标位置获取、 e.button 返回用户按下的是鼠标的哪个键、 键盘事件、 滚轮事件、 常用事件汇总:、 鼠标事件、 键盘事件、 keydown 键盘按下、 keyup 键盘抬起、 表单事件、 change 状态发生改变、 input value发生变化、 blur 失去焦点、 focus 获得焦点、 reset 重置时、 submit 提交时、 submit() 提交表单
24
25-26
事件应用
拖拽的原理分析、 事件:mousedown鼠标按下,mousemove 鼠标移动、mouseup 鼠标抬起、 记录信息、 move时获取新的鼠标坐标,计算出move于down之间的位移值、 用down时的鼠标坐标加上位置值求出元素拖拽后的坐标、 案例:限制范围拖拽、 碰撞检测、 检测元素所有不会碰撞的状态,剩余状态便是碰撞了、 综合案例:拖拽图片,碰撞交换位置、 自定义滚动条、 根据内容高度和外框高度计算滚动条高度、 为滚动条添加限制范围拖拽、 添加滚轮操作移动滚动条位置、 根据滚动条移动距离同步内容移动距离
25
27-28
移动端事件
touch事件、 touchEvent、 touches 当前屏幕上的手指列表、 targetTouches 当前元素上的手指列表、 changedTouches 触发当前事件的手指列表、 案例:移动端幻灯片效果实现、 orientationchange 事件,监听手机横竖屏切换、 window.orientation 获取当前手机横竖屏状态、 devicemotion 事件,监听手机加速度发生变化、 -accelerationIncludingGravity 加速度对象 deviceorientation 事件, 监听手机旋转角度发生变化、 ev.alpha 围绕Z轴的旋转角度、 ev.beta 围绕X轴的旋转角度、 ev.gamma 围绕Y轴的旋转角度
26
27-28
Node.js
node环境搭建、 node模块使用、 commonJS规范、 内置模块、 第三方模块、 使用http模块搭建web server、 nodejs-web开发框架介绍、 express、 sails、 koa、 express.io、 express的安装、 npm init配置安装、 package.json配置安装、 express项目初始化、 项目的创建、 项目的启动运行、 Routing的使用、 路由方法:http method、get、post、body-parse模块、 route paths(路由路径):字符串路由、字符串模式路由、正则路由、 swig模板引擎、 安装swig、 express中使用swig、 数据库
27
29-30
Ajax
ajax全称为Asynchronous JavaScript And XML,即异步的JavaScript和XML,主要用来与服务器进行通信,在不重新加载页面的情况下发送请求给服务器,做到无刷新页面更新数据,接受并使用从服务器发来的数据。创建包含发送请求和响应功能的对象:new XMLHttpRequest。课程包括原生ajax知识点:get,post,状态码status,原生ajax库的封装使用,jQuery中ajax的使用,axios库的使用,ajax文件上传 、跨域产生和解决方案、cookie介绍,http 协议、获取cookie,设置cookie、localStorage介绍。
28
29-30
DOM
DOM(文档对象模型):DOM树,DOM根据文档结构描绘出的一个层次化的节点树。DOM节点childNodes 子节点、节点的层级关系:parentNode父节点,children子元素、元素相关尺寸及位置获取:offsetLeft / offsetTop,clientLeft / clientTop,getBoundingClientRect() 、元素的属性操作:getAttribute,setAttribute,removeAttribute、元素操作:createElement,appendChild/insertBefore,removeChild、表格操作。综合案例:配后端的留言板案例(添加留言、删除留言)
29
31-32
正则表达式
正则表达式,又称规则表达式,查找匹配某些符合规则的字符串,正则表达式就是写这种规则的工具。课程包括创建正则表达式、表达式规则(普通字符,元字符)、修饰符(影响整个正则规则的特殊符号)、正则的方法(执行一个检索,用来查看正则表达式与指定的字符串是否匹配)、字符串的方法:search(),match(),replace()、元字符:\d,\s,\w、边界符:\b,^,$、数词量:{n},{n,m}、分组、字符集合:中文[\u4e00-\u9fa5],ASCII码等。
30
31-32
面向对象
面向对象编程面向对象编程(oop)是一种编程思想,用抽象方式创建基于现实世界模型的一种编程模式。目的是在编程中促进更好的灵活性和可维护性。JavaScript是基于构造函数(constructor)和原型链(prototype),JavaScript 语言使用构造函数(constructor)作为对象的模板。所谓”构造函数”,就是专门用来生成对象的函数。它提供模板,描述对象的基本结构。一个构造函数,可以生成多个对象,这些对象都有相同的结构。面向对象三大特性:封装、 继承、多态。
31
33-34
JQuery3
jQuery是一个兼容多浏览器的javascript库,核心理念是write less,do more(写得更少,做得更多)。它的语法设计可以使开发更加便捷,例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax、编写和使用jQuery插件以及其他功能。课程包含:选择器jQuery( selector [context ] )、工具方法:$.type()、$.isFunction()、$. isNumeric()、DOM/BOM过滤操作,增删改操作、jQuery事件系统、jQuery动画、编写和使用jQuery插件,$.extend()扩展JQuery静态方法,$().extend()扩展JQuery动态方法
32
33-34
ECMAScript6
ECMAScript6是目前ECMAScript语言规范的标准,通常被称为"ES2015"。可用var、let、const声明不同类型的关键字。ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构。除此之外还新增了:模板字符串(增强版的字符串)、箭头函数(使用“箭头”(=>)定义函数)、函数的扩展(给形参直接赋值)、数组的扩展、字符串的扩展(str.repeat(n)返回一个新字符串,表示将原字符串重复n次。)、对象的扩展(函数可省略function关键字)和简写等内容。
33
35-36
React+redux 开发
React.js 是一个帮助你构建页面 UI 的库,它不是一个框架,它只是一个库。它只提供 UI (view)层面的解决方案。React.js 将帮助我们将界面分成了各个独立的小块,每一个块就是组件,这些组件之间可以组合、嵌套,就成了我们的页面。组件的显示和行为有可能是由某些数据决定的。而 React.js 也提供了一种非常高效的方式帮助我们做到了数据和组件显示形态之间的同步。内容包括:React.js、react-router-dom、redux状态管理、webpack...
34
35-36
vue2.0
Vue是一个构建数据驱动的Web界面的库,通过简单的API提供高效的数据绑定和灵活的组件系统。具有简洁、轻量、快速、数据驱动、组件化等特点,除此之外,还具有上手快,简单易学,学完即用,快速开发的优势。可把页面组件化、模块化,分工明确,互不干涉,低耦合的设计使组件可复用、可测试,更易于维护。响应式编程,开发者只需要聚焦在状态的逻辑处理上,让框架来进行DOM操作,不需要自己手动更新视图、官方提供健全的周边工具,例如vue-cli、vue-router、vuex...
35
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
学前须知 

1、熟悉电脑键盘输入、可快速输入 26 个英文字母;

2、可独立下载并安装软件,对 “新建文件夹、重命名” 等电脑文件操作必须熟练;

3、年满 18 周岁、兴趣浓厚 + 肯做练习;

4、学员须自备笔记本电脑;

学员作品 
 
 
课程服务 
报名该课程,您将获得:
 
 
常见问题 
Q
 
一遍学不会的话,还可以重听吗?
学不会当然可以重听,具体请咨询客服 QQ:2852509866
A
 
Q
 
课程可以退费吗?
是的,妙味支持随时退费,详细的退费流程可以让客服为你详细介绍。QQ:2852509866
A
 
Q
 
能分阶段学习吗?
是的,可全套学习,也可根据自身基础分阶段报名学习,具体可咨询 QQ:2852509866
A
 
课程咨询QQ:2852509868、2852509867
课程咨询电话:010-57269690

客服在线时间:周一至周五 9:30-18:00 周六 10:00-17:00

地址:北京海淀区西二旗辉煌国际大厦西6号楼319室

上海市闵行区新龙路399弄1号七宝宝龙城T4号楼9层905

开班信息
课程视频
课程大纲
学前须知
学员作品
我要报名