web前端开发

格宇web前端

适合人群：青少年成人等

开班时间：固定日期

咨询电话：18210289671

在线咨询获取价格

课程简介

WEB前端课纲
Level 1	Level 2	Level 4	知识点清单
	网站布局基础	PhotoShop基础	Adobe公司介绍，版本编号，发展历史，安装过程
			移动工具介绍与操作
			选区工具介绍与操作
			套索工具，磁性套索，框选工具，魔棒工具，快速选择工具介绍与操作
			图层介绍，图层合并
			切片工会介绍与操作
			图片格式，精灵图，图片保存方式
		HTML标签及规范	HTML定义，HTML历史，HTML版本、常用浏览器介绍、HTML整体结构、标签结构、注释
			块级标签介绍，div，h1，h2，h3，h4，h5，h6，p，ul，li，ol，dl，dt，dd，hr
			行内标签介绍，span，a，img，b，strong，i，em，br
			什么是W3C标准，DOCTYPE ，语言编码，嵌套规则，HTML手册查询
		HTML标签属性	class，id，style，title
			属性（align，bgcolor，border，cellpadding，cellspacing，frame，rules，summary，width）tr，td，th，tbody，thead，tbody，表格嵌套
			属性（action，method，name），input标签（type，name，id，value)，button，textarea,select
			属性（align，frameborder，height，name，scrolling，src，width）,iframe嵌套
		CSS基础	CSS介绍，CSS发展历史
			CSS的三种引用方式，CSS基本语法、属性、值、CSS手册查询
			CSS选择器（id、class、标签、属性、后代、伪类等），CSS优先级
			font、font-size、font-family、font-weight、font-style
			color，line-height，letter-spacing，text-align，text-decoration，text-indent，text-shadow，white-space，word-spacing
			background，background-color，background-position，background-size，background-repeat，background-origin，background-image
			list-style
		CSS浮动布局&盒模型	width、height、padding、border、margin
			标准模式是什么、怪异模式是什么
			float，清除浮动常用的三种方法，clear，overflow
		CSS定位布局	定位概述position，相对定位，绝对定位，浮动，left\right\top\bottom，z-index
			双飞翼布局，圣杯布局，侧边栏固定
			什么是BFC、什么是IFC
			什么是CSS hack，hack解决的问题及应用情景，浏览器识别字符标准对应表
	项目实战	纽曼官网项目实战





	HTML5网站开发	HTML5新特性	发展历程（设计目的），特性（语义特性，本地存储特性，设备兼容性，网页多媒体特性），规范，优缺点，移除元素
			常用标签（header、footer、main、section、nav、article、aside、figure）多媒体标签(video、audio、embed、canvas)
			表单标签（email、url、number、color、range、date、search） datalist，progress
			form属性（autocomplete，novalidate） input 属性（autocomplete，autofocus，form， min，max，step，multiple，pattern (regexp)，placeholder，required）
		CSS3新特性学习	通用选择器、属性选择器、伪类选择器
			text-shadow，word-wrap，word-break，text-wrap，text-overflow
			border-radius，box-shadow，border-image
			background-size，background-origin
			RGBA，HSL，HSLA
			线性渐变，径向渐变
			box-sizing
		CSS3基础属性--动画	过渡属性transition，transition-property，transition-duration，transition-timing-function，transition-delay
			trasform，translate，rotate，scale，skew，matrix
			perspective，trasform-style，rotateX，rotateY，rotateZ
			CSS3 动画属性，@keyframes，animation，animation-name，animation-duration，animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-play-state，animation-fill-mode
		CSS3基础属性--布局	display: -webkit-box，box-orient，box-direction，box-pack，box-align，box-flex，box-ordinal-group，box-flex-group，box-lines
			display: flex，flex-direction，flex-wrap，flex-flow，justify-content，align-items，align-self，flex，order，flex-grow，flex-shrink，flex-basis
			媒体查询@media、自适应布局、rem布局
			@font-face、iconfont的使用
	项目实战	纽曼官网移动端项目实战





	网站动效交互开发	Javascript基础	JavaScript介绍、变量命名规则，变量声明
			number，string，boolean，Array，object
			算术运算符，关系运算符，逻辑运算符
			if，for
函数定义语句，参数，返回值
jQuery基础		jQuery介绍、特点、优势、文件下载、引入方式
		id，class，标签，属性
		属性类，css类，html\text\value
		DOM节点插入、删除、修改、复制
jQuery动画以及事件		常用鼠标事件、键盘事件、页面加载事件，事件绑定方式
		animate动画方法、show/hide、fade、slide动画实现、时间控制
项目实战	用户交互实战一

	用户交互实战二

响应式网站开发	Bootstrap	Boostratp介绍、Boostratp文件的下载、引入方式、注意事项
		表单组件、表格组件、导航组件、分页组件、按钮组件
		字体图标的引入、字体图片的使用方式
		栅格系统介绍、使用规则
		JavaScript插件、快速布局工具
	Bootstrap响应式案例实现



第二阶段（逻辑交互）	用户交互开发（逻辑业务开发思想）	Javascript基础语法	JS发展历史，定义，版本
			标识符的命名，命名规范，保留字，关键字
			变量的定义，字面量的使用
			转义字符是什么，空格，大于，小于，版权等转义字符
			算术运算符，赋值运算符，逻辑运算符，条件运算符，位运算符，三目运算符
			字符串（String），数字(Number)，布尔(Boolean)，数组(Array)，对象(Object)，空（Null），未定义（Undefined）
		Javascript流程控制	if，switch
			for，for..in，while，do…while
			break，continue
		Javascript函数	函数常见的定义方式、函数的作用
			函数的调用方式
			函数参数设置
			return
			匿名函数的定义
			变量提升，全局作用域，局部作用域，闭包
			递归函数的定义与使用，算法实现
		Array对象方法	对象的介绍，对象的定义方式，常见对象介绍
			数组的介绍，数组的定义方式
			一维数组，二维数组，对象数组
			concat()，join()，pop()，push()，reverse()，shift()，slice()，sort()，splice()，toSource()，toString()，toLocaleString()，unshift()，valueOf()
			【增】：arr.push()，arr.unshift() 【删】：arr.pop()，arr.shift() 【改】：arr.reverse()，arr.sort()，arr.concat()，arr.join()，arr.slice()，arr.splice()，arr.toString() 【查】：arr.indexOf()
		String，Number，Date对象方法与定时器	anchor()，big()，blink()，bold()，charAt()，charCodeAt()，concat()，indexOf()，italics()，link()，match()，replace()，slice()，small()，split()，sub()，substr()，substring()，sup()，toLocaleLowerCase()，toLocaleUpperCase()，toLowerCase()，toUpperCase()
			toString，toLocaleString，toFixed，valueOf
			Date()，getDate()，getDay()，getMonth()，getFullYear()，getHours()，getMinutes()，getSeconds()，getMilliseconds()，getTime()，setDate()，setMonth()，setFullYear()，setHours()，setMinutes()，setSeconds()，setMilliseconds()，setTime()，toLocaleString()，toLocaleTimeString()，toLocaleDateString()
			setInterval()，clearInterval()，setTimeout()，clearTimeout()
		Math对象方法，正则表达式	abs(x)，ceil(x)，floor(x)，round(x)，max(x,y)，min(x,y)，pow(x,y)，sqrt(x)，random()，sin(x)，cos(x)，tan(x)
			正则表达式介绍、定义、元字符、限定符、定位符
			compile，exec，test，match
		DOM 节点的获取以及增删改	DOM介绍、DOM树
			通过 id ，标签名，类名找到 HTML 元素
			如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。
		DOM 属性操作	document.getElementById，document.getElementByTagName，document.getElementByName ，document.getElementByClassName，document.querySelector
			Elements ，Sources，Console，Network
		BOM 操作	BOM介绍
			window对象介绍
			Location 对象包含有关当前 URL 的信息。
			Screen 对象包含有关客户端显示屏幕的信息。
			Navigator 对象包含有关浏览器的信息。
			History 对象包含用户（在浏览器窗口中）访问过的 URL。
			frames 属性返回窗口中所有命名的框架。
		Javascript基础事件以及Event对象	onabort，onblur，onchange，onclick，ondblclick，onerror，onfocus，onkeydown，onkeypress，onkeyup，onload，onmousedown，onmousemove，onmouseout，onmouseover，onmouseup，onreset，onresize，onselect，onsubmit，onunload
			attachEvent，detachEvent，addEventListener，removeEventListener
			事件自定义方式
			scrollHeight，scrollLeft，scrollTop，scrollWidth，offsetHeight，offsetLeft，offsetTop，event.clientX，event.clientY，event.offsetX，event.offsetY，
			event，鼠标坐标获取，键盘值获取
		Javascript优化(事件委托，懒加载，预加载)与浏览器调错	捕获阶段、处于事件阶段、冒泡阶段
			事件处理程序说明
			事件委托原理
			懒加载是什么，预加载是什么
		案例实战


		HTML5 API	video/audio的Javascript API属性、方法，事件
			touchstart、touchend、touchmove，devicemotion、deviceorientation
			拖放（Drag 和 drop），定位获取
		HTML5 Canvas	canvas 元素用于在网页上绘制图形。
			getContext 上下文、beginPath()，closePath()，lineTo()、moveTo()，rect()，arc()，fill()，stroke()，fillRect()，strokeRect()，clearRect()
		jQuery基础补充	基本筛选器、子元素、表单、可见性
			对象访问、数据缓存、对象筛选查找
			内部插入、外部插入、包裹、替换
			动画队列控制、delay、stop、finish
			事件委托介绍、绑定方式
			each、trim、param
		JQuery高级技能	插件封装方式、封装技巧
swiper.js
介绍、优缺点、移动端zepto方法、组件介绍
商城网站项目




动态数据交互与存储	json/xml ，cookie，本地存储与离线存储



	AJAX交互原理（原生，JQ）	HTTP协议，它规定了在网络中发布，传输和接收html页面的方法。大家都遵循这个协议，就能实现信息的传输。
		AJAX介绍、GET、POST
		XMLHttpRequest声明、兼容处理、数据获取操作
		ajax的属性介绍、数据调用
		axios.create()，get/post方法，属性控制
面向对象开发思想	面向对象编程	基本模式的定义、优缺点
		工厂模式定义、优缺点
		构造模式定义、优缺点
		原型链、原型模式定义、优缺点
		混合模式定义
	面向对象编程应用	原型（prototype）实现继承、构造函数实现继承、call , apply实现继承
		对象封装作用、封装的方式
		浅克隆、深克隆
		原型链介绍、原型链应用
		this的指向说明
	面向对象实际应用

第三阶段（前后端交互）	Node.js	Node.js：基础模块







		Node.js：基础模块





		Node.js：express




		Node.js：mongodb




		自动化工具

	项目实战	项目版本管理工具	git介绍、远程仓库介绍、暂存区介绍、指令配置、初始化指令、仓库添加指令、项目拉取、提交、推送指令、版本控制指令
			github介绍、注册、项目创建、权限配置
			SVN的安装、版本管理操作
		移动端商城项目实战

		移动端商城项目实战

	ECMAScript 6高级语法	ES6基础指令一	babel介绍、安装与检查、转换配置、运行指令
			let变量声明、新增特性、块级作用域
			const常量声明、本质区别
			解构介绍、数组解构、对象解构、字符串解构、函数参数的解构
			字符的 Unicode 表示法、codePointAt()、String.fromCodePoint() 字符串的遍历器接口、at()、normalize()、includes(), startsWith(), endsWith()、repeat()、padStart()，padEnd()、matchAll()、模板字符串
		ES6基础指令二	扩展运算符、Array.from()、Array.of()、copyWithin()、find() 和 findIndex()、fill()、entries()，keys() 和 values()、includes()、数组的空位
			函数参数的默认值、rest 参数、严格模式、箭头函数、双冒号运算符
			属性的简洁表示法、属性名表达式、方法的 name 属性、Object.is()、super 关键字、对象的扩展运算符
		ES6基础指令三	constructor 方法、类的实例对象、Class 表达式、不存在变量提升、私有方法和私有属性、this 的指向、name 属性、Class 的取值函数（getter）和存值函数（setter）、Class 的 Generator 方法、Class 的静态方法、Class 的静态属性和实例属性
			export 命令、import 命令、模块的整体加载、export default 命令
		ES6基础指令四	Promise 的含义、then()、catch()、finally()、all()、race()、resolve()、reject()
			基本用法、async 函数的实现原理、与其他异步处理方法的比较
			介绍、作为属性名的 Symbol、属性名的遍历、Symbol.for()，Symbol.keyFor()、内置的 Symbol 值
	微信开发	微信公众号


		微信小程序快速入门	小程序账号注册、开发工具安装、界面操作、项目搭建、项目配置
		微信小程序界面交互	WXML、WXSS、组件使用、静态页面搭建
		微信小程序接口调用	小程序API介绍、网络、界面、设备、媒体、文件、数据缓存等接口调用
	项目实战	微信小程序案例

第四阶段（框架开发）	Vue.js开发	Vue.js 基础指令	Vue.js介绍、发展历史、特点、文件下载、Vue实例
			插值方式、指令参数、修饰符、代码缩写
			文本、原始HTML、特性、Javascript表达式
			样式绑定、条件渲染、列表渲染、事件绑定
		Vue.js 基础方法	方法介绍、定义方式
			计算属性介绍、定义、比较计算属性和methods方法
			过滤器介绍、使用方式、自定义过滤器
			事件监听、事件处理方式、事件修饰符、按键修饰符
			表单数据绑定、表单修饰符、双向数据绑定
		Vue.js组件开发一	组件介绍、组件定义方式、组件引用

			父子组件数据传输、多级组件数据传输

		Vue.js组件开发二	生命周期介绍、应用
			slot插槽的定义与使用

		Vue.js组件开发三	动态组件介绍、注册动态组件
			Vue动画定义方式、CSS动画设置、自定义动画效果
			数据变化追踪、异步更新队列
		Vue.js插件	Vue-cli介绍、安装与检查、Vue项目搭建流程
			Vue-router介绍、路由、路由守卫
			axios.create()，get/post方法，属性控制
		Vue.js高级语法	Vuex介绍、状态state、项目配置

	项目实战	WEB APP项目实战



	React 开发	React	React介绍、历史发展、安装方式、环境配置
			JSX基础语法、JS表达式使用、样式、注释
			React组件开发、复合组件
		React语法	事件注册、绑定this
			ReactDOM介绍以及使用、render DOM渲染
			表单事件绑定、表单值获取、state修改
		React环境搭建	环境介绍、整体搭建、项目部署
			集成router、路由嵌套、路由参数
		React数据交互	Fetch介绍、get封装、post封装、JSX调用
			React跨域处理，header处理
			React的promise应用
	项目实战	React案例实战分析


	拓展学习：react+native	react+native环境搭建及介绍	React Native介绍
			软件安装，环境配置，环境测试
			服务器搭建，项目搭建
		Angular介绍	Angular框架、MVC思想
		数据可视化介绍	echart.js介绍、基础使用
			D3.js介绍、基础使用
		3D动画框架介绍	Three.js介绍、基础使用
			tween.js介绍、基础使用
		产品经理职责介绍	产品经理职责介绍
		架构师职责介绍	架构师职责介绍

名师团队

邓老师室内讲师

格宇教育高级室内设计讲师，毕业于大连理工大学，土木工程与室内设计专业。大型工装设计为主、家装设计为辅，手绘与软件能力强，设计经验丰富，从事室内设计及教学已有10年，熟悉工艺，装饰材料的品种、规格、特性、擅长根据不同需求设计出不同的风格。专业实操理论强。教学风格：亦师亦友
施老师室内老师

格宇教育高级室内设计讲师，毕业于长沙理工大学，施工管理专业。有丰富的大型项目管理经验，先后参上海轨道交通地铁项目、上海赛车汽车城别墅项目、万科大型住宅项目等。自主创业成立自己的设计公司并担任室内设计讲师，精通工装、家装设计丰富的施工及设计经验，熟悉工艺，装饰材料的品种、规格、特性
江老师教学教研总监

教学教研总监海归硕士，ui高级讲师 10年互联网从业经验，5年团队管理经验，多家上市教育集团管理经验，曾服务于百度集团、达内集团、参与超过30款上线产品研发,拥有非常丰富的实际项目经验及教学经验。
董老师web前端讲师

格宇移动前端开发（HTML5）专业讲师，5年多pc及移动端开发实践经验。曾在深圳，上海等城市做APP、商城网站开发。在多年的实践中总结了实际工作中所需要的技能及技巧，熟练使用原生Js，CSS3，h5，node.js, webpack，ng，vue，react，微信小程序等技术，对
许老师ui讲师

个人简介：格宇教育UI设计讲师，毕业于安徽工程大学服装设计专业。从事设计相关行业五年实践经验。从外包小公司一步步跟着市场走到大型自主研发UI设计。熟悉各种平台设计规范，各种产品设计规则。教学风格：风趣幽默理论与实践结合教学理念：做设计可以天马行空，但是学习我们必须认真！
刘老师教学经理

格宇HTML5学科高级讲师，七年行业工作经验，熟练使用HTML5，CSS3，js等技术，开发多个web和移动端App应用，曾在前程无忧等资深互联网公司任职，并且担任前端的team leader ，负责搭建web前端架构，考虑前端技术选型，带领过三十人左右的团队完成项目，主要涉足媒