从零基础晋升前端全栈工程师课程 - 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(自习有讲师现场辅导)

优惠报名方式

提前报名:即在开班日期通知下来之前报名付款成功者,可享受 16200 元优惠价;

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

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

 我要咨询 
 
 
 
课程大纲
详细课程大纲
 
 
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、页面基本结构、样式表的书写规则及出现的位置:行间样式表,内部样式表,外部样式表
03
04-05
常用标签
常用标签: 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 类 标签 群组 包含 通配符 、优先级:优先级计算规则 基础选择器优先级 包含选择器优先级 群组选择器优先级、标签样式初始化订制方案...
03
04-05
浮动
文档流:可显示对象在排列时所占用的位置。浮动的前世今生:使元素脱离文档流,按照指定方向发生移动,基础语法:float:left | right | none | inherit。浮动的特性:块在一排显示、内联支持宽高、默认内容撑开宽度、脱离文档流、阻止margin叠压、clear。为什么需要清除浮动?清除浮动的几种方法:加高、空标签清浮动、br清浮动、after伪类、BFC...
04
06-07
定位进阶
position:relative,相对定位:不影响元素本身的特性,不使元素脱离文档流(元素移动之后原始位置会被保留),如果没有定位偏移量,对元素本身没有任何影响,提升层级 、偏移量、position:absolute 绝对定位、z-index:[number] 定位层级、position:fixed 固定定位、opacity 透明度、多背景设置、linear-gradient 线性渐变、radial-gradient 径向渐变...
05
06-07
表格和表单
表格标签: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元素定义标注...
06
08-09
结构选择器
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元素中的最后一个子节点...
07
08-09
PC端整站开发
css sprites 精灵/雪碧图(css精灵是我们经常使用的一种图片处理方式,可以把很多小图放在一张大图中,进行加载速度的优化)、 项目文件管理(文件的存放位置,文件夹以及文件的命名规范)、 页面规划(合理的规划页面结构可以方便我们进去代码复用,方便后期管理维护)、 难点解析: 通栏banner处理方案、 电商类网站导航结构分析...
08
10-11
less
less是什么、 less编译: 编译方法、 less 常用语法、 变量 混合、 混合防止编译、 带参数混合: 默认情况下,参数要与传入的数据一一对应、 定义参数的默认值、 给传入的数据起名字、 嵌套,在写包含选择器时,可以直接写在父代码块中、 & 父选择器、 运算,在 less 中 我们可以进行加减乘除等运算、 作用域 ,在代码块中定义的数据...
09
10-11
移动端开发与适配
移动端、 移动端测试环境、 Emulation、 本地服务器配置、 物理分辨率和显示分辨率、 viewport 视口设置、 window.devicePixelRatio 像素比、 清除IOS下按钮的圆角、 移动端链接和按钮的阴影消除、 移动端rem布局、 background-size、 box-sizing 怪异盒模型、 background-origin、 background-clip、 弹性盒模型、 display:flex、 flex-direction...
10
12-13
bootstrap和响应式
Media Queries、 媒体类型、 关键字、 媒体类型、 练习:jQuery响应式官网(头部)、 bootstrap、 font-face和自定义文字图标、 预处理脚、 Bootstrap的特性、 Bootstrap工程环境、 Bootstrap源码、 Bootstrap设计思想、 安装方式、 Bootstrap页面的基本结构、 栅格系统、 栅格大小屏控制、 媒体查询参数说明、 offset 偏移设置、 栅格系统响应式工具...
11
12-13
git 和 github 使用
使用版本控制工具有利于协同合作和版本储存。git 是分布式的版本控制工具,可使用命令行和其提供的 GUI 图形界面操作,分为工作区、暂存区、版本库。SVN 是集成式的版本控制工具,有图形界面。 github 通过 Git 进行版本控制,提供软件源代码托管服务,是开源项目源码托放平台。本章节会交给你 git 的安装和设置 config 用户名邮箱配置...
12
14-15
JavaScript 入门
javascript是用来做什么的、 常见网页特效的原理、 js书写位置、 getELementById()、 什么是事件、 初识函数、 变量、 命名规范、 属性操作的第一种方法、 案例:热身练习讲解、 字符串、 属性操作的第二种方式、 练习:简易留言板、 if判断、 常用运算符"+","-","*","/"、 初始数组、 小例子: 点击按钮 加减数字、 案例:上一张下一张图片切换(数字版)...
13
14-15
数据类型和流程控制
数据类型划分、 不同的数据类型,决定了我们后期可以进行的操作、 基本类型(简单类型)、 引用类型(复合类型,复杂类型)、 传值与传址、 typeof运算符、 强制数据类型转换、 parseInt()、 parseFloat()、 number()、 NaN和isNaN、 String()、 Boolean()、 算术运算符、 赋值运算符、 关系运算符、 逻辑运算法、 条件操作符、运算符优先级...
14
16-17
function 详解
function 函数、 定义函数、 函数调用、 函数传参、 形参、 实参、 arguments 不定参、 函数返回值、 计算后的样式值 getComputedStyle(element)、 计算后样式,元素最终渲染出来的样式、 函数封装、 案例:多个选项卡传参、 练习:修改文本框的值、 预解析机制、 作用域、 全局作用域 局部作用域 作用域链、 闭包、 闭包...
15
16-17
字符串和数组方法
字符串的格式、 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)...
16
18-19
对象
创建对象、 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 圆周率...
17
18-19
定时器和动画帧
setInterval(执行函数,间隔时间) 间隔型定时器、 间隔一定时间,重复执行,执行函数、 返回值是定时器的编号、 setTimeout(执行函数,延迟时间) 延迟型定时器、 延迟一定时间执行,执行函数、 返回值是定时器的编号、 关闭定时器、 clearInterval(定时器编号) 关闭setInterval开启的定时器、 clearTimeout(定时器编号) 关闭setTimeout开启的定时器...
18
20-21
动画函数封装
tween.js tween类来自于flash,在tween中封装了各种各样的动画算法、 tween的动画,主要依赖于t,b,c,d四个参数:、 t 动画当前执行至第几次、 b 需要动画的样式的初始值、 c 需要动画的样式的初始值和结束值的差值、 d 动画执行总次数、 案例: 控制小方块移动、 单个元素,单个属性动画封装、 多个元素,单个属性动画封装、 多个元素...
19
20-21
transform 相关
transoform 变换、 rotate 元素旋转、 角度单位、 scale 元素缩放、 skew、 translate、 transform的执行顺序、 transform-origin、 transoform3D rotate3D、 translate3D、 transform-style 、 perspective 、 perspective-origin 、 backface-visibility 、 案例:3d盒子、 利用transform做动画的好处、 transform在获取时,获取到的是矩阵,不能直接进行计算...
20
22-23
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')...
21
22-23
BOM
BOM (browser object model) 浏览器对象模型,、五大对象:window、navigator、locaation、history、screen window 对象、 window.open(URL,name,features,replace) 打开新窗口、 window.close() 关闭窗口、 页面相关距离获取、 可视区大小、 页面大小、 窗口滚动条距离、 window常用事件、 scroll 监听滚动条滚动、 resize 监听窗口大小发生变化...
22
24-25
事件基础
事件、 事件监听器 、 el.removeEventListener("event",func,事件流)、 事件流、 事件对象、 e.target 事件源,发生事件的元素、 e.type 事件类型、 阻止冒泡、 阻止默认行为、 鼠标位置获取、 e.button 返回用户按下的是鼠标的哪个键、 键盘事件、 滚轮事件、 常用事件汇总:、 鼠标事件、 键盘事件、 keydown 键盘按下、 keyup 键盘抬起...
23
24-25
事件应用
拖拽的原理分析、 事件:mousedown鼠标按下,mousemove 鼠标移动、mouseup 鼠标抬起、 记录信息、 move时获取新的鼠标坐标,计算出move于down之间的位移值、 用down时的鼠标坐标加上位置值求出元素拖拽后的坐标、 案例:限制范围拖拽、 碰撞检测、 检测元素所有不会碰撞的状态,剩余状态便是碰撞了、 综合案例:拖拽图片...
24
26-27
移动端事件
touch事件、 touchEvent、 touches 当前屏幕上的手指列表 targetTouches 当前元素上的手指列表、 changedTouches 触发当前事件的手指列表、 案例:移动端幻灯片效果实现、 orientationchange 事件,监听手机横竖屏切换、 window.orientation 获取当前手机横竖屏状态、 devicemotion 事件,监听手机加速度发生变化、 -accelerationIncludingGravity...
25
26-27
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...
26
28-29
AJAX
ajax全称为Asynchronous JavaScript And XML,即异步的JavaScript和XML,主要用来与服务器进行通信,在不重新加载页面的情况下发送请求给服务器,做到无刷新页面更新数据,接受并使用从服务器发来的数据。创建包含发送请求和响应功能的对象:new XMLHttpRequest。课程包括原生ajax知识点:get,post,状态码status,原生ajax库的封装使用...
27
28-29
DOM
DOM(文档对象模型):DOM树,DOM根据文档结构描绘出的一个层次化的节点树。DOM节点childNodes 子节点、节点的层级关系:parentNode父节点,children子元素、元素相关尺寸及位置获取:offsetLeft / offsetTop,clientLeft / clientTop,getBoundingClientRect() 、元素的属性操作:getAttribute,setAttribute,removeAttribute、元素操作:createElement...
28
30-31
正则表达式
正则表达式,又称规则表达式,查找匹配某些符合规则的字符串,正则表达式就是写这种规则的工具。课程包括创建正则表达式、表达式规则(普通字符,元字符)、修饰符(影响整个正则规则的特殊符号)、正则的方法(执行一个检索,用来查看正则表达式与指定的字符串是否匹配)、字符串的方法:search(),match(),replace()...
29
30-31
面向对象
面向对象编程面向对象编程(oop)是一种编程思想,用抽象方式创建基于现实世界模型的一种编程模式。目的是在编程中促进更好的灵活性和可维护性。JavaScript是基于构造函数(constructor)和原型链(prototype),JavaScript 语言使用构造函数(constructor)作为对象的模板。所谓”构造函数”,就是专门用来生成对象的函数...
30
32-33
jQuery3
jQuery是一个兼容多浏览器的javascript库,核心理念是write less,do more(写得更少,做得更多)。它的语法设计可以使开发更加便捷,例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax、编写和使用jQuery插件以及其他功能。课程包含:选择器jQuery( selector [context ] )、工具方法:$.type()、$.isFunction()、$. isNumeric()...
31
32-33
ECMAScript6
ECMAScript6是目前ECMAScript语言规范的标准,通常被称为"ES2015"。可用var、let、const声明不同类型的关键字。ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构。除此之外还新增了:模板字符串(增强版的字符串)、箭头函数(使用“箭头”(=>)定义函数)、函数的扩展(给形参直接赋值)、数组的扩展...
32
34-35
React+redux 开发
React.js 是一个帮助你构建页面 UI 的库,它不是一个框架,它只是一个库。它只提供 UI (view)层面的解决方案。React.js 将帮助我们将界面分成了各个独立的小块,每一个块就是组件,这些组件之间可以组合、嵌套,就成了我们的页面。组件的显示和行为有可能是由某些数据决定的。内容包括:React.js、react-router-dom...
33
34-35
vue 2.0
Vue是一个构建数据驱动的Web界面的库,通过简单的API提供高效的数据绑定和灵活的组件系统。具有简洁、轻量、快速、数据驱动、组件化等特点,除此之外,还具有上手快,简单易学,学完即用,快速开发的优势。可把页面组件化、模块化,分工明确,互不干涉,低耦合的设计使组件可复用、可测试,更易于维护。响应式编程...
34
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
学前须知 

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

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

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

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

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

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

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

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

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