&

格宇web前端

適合人群：青少年成人等

開班時間：固定日期

咨詢電話：18210289671

在線咨詢獲取價格

課程簡介

WEB前端課綱
Level 1	Level 2	Level 4	知識點清單
	網(wǎng)站布局基礎(chǔ)	PhotoShop基礎(chǔ)	Adobe公司介紹，版本編號，發(fā)展歷史，安裝過程
			移動工具介紹與操作
			選區(qū)工具介紹與操作
			套索工具，磁性套索，框選工具，魔棒工具，快速選擇工具介紹與操作
			圖層介紹，圖層合并
			切片工會介紹與操作
			圖片格式，精靈圖，圖片保存方式
		HTML標(biāo)簽及規(guī)范	HTML定義，HTML歷史，HTML版本、常用瀏覽器介紹、HTML整體結(jié)構(gòu)、標(biāo)簽結(jié)構(gòu)、注釋
			塊級標(biāo)簽介紹，div，h1，h2，h3，h4，h5，h6，p，ul，li，ol，dl，dt，dd，hr
			行內(nèi)標(biāo)簽介紹，span，a，img，b，strong，i，em，br
			什么是W3C標(biāo)準(zhǔn)，DOCTYPE ，語言編碼，嵌套規(guī)則，HTML手冊查詢
		HTML標(biāo)簽屬性	class，id，style，title
			屬性（align，bgcolor，border，cellpadding，cellspacing，frame，rules，summary，width）tr，td，th，tbody，thead，tbody，表格嵌套
			屬性（action，method，name），input標(biāo)簽（type，name，id，value)，button，textarea,select
			屬性（align，frameborder，height，name，scrolling，src，width）,iframe嵌套
		CSS基礎(chǔ)	CSS介紹，CSS發(fā)展歷史
			CSS的三種引用方式，CSS基本語法、屬性、值、CSS手冊查詢
			CSS選擇器（id、class、標(biāo)簽、屬性、后代、偽類等），CSS優(yōu)先級
			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
			標(biāo)準(zhǔn)模式是什么、怪異模式是什么
			float，清除浮動常用的三種方法，clear，overflow
		CSS定位布局	定位概述position，相對定位，絕對定位，浮動，left\right\top\bottom，z-index
			雙飛翼布局，圣杯布局，側(cè)邊欄固定
			什么是BFC、什么是IFC
			什么是CSS hack，hack解決的問題及應(yīng)用情景，瀏覽器識別字符標(biāo)準(zhǔn)對應(yīng)表
	項目實戰(zhàn)	紐曼官網(wǎng)項目實戰(zhàn)





	HTML5網(wǎng)站開發(fā)	HTML5新特性	發(fā)展歷程（設(shè)計目的），特性（語義特性，本地存儲特性，設(shè)備兼容性，網(wǎng)頁多媒體特性），規(guī)范，優(yōu)缺點，移除元素
			常用標(biāo)簽（header、footer、main、section、nav、article、aside、figure）多媒體標(biāo)簽(video、audio、embed、canvas)
			表單標(biāo)簽（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新特性學(xué)習(xí)	通用選擇器、屬性選擇器、偽類選擇器
			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基礎(chǔ)屬性--動畫	過渡屬性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基礎(chǔ)屬性--布局	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、自適應(yīng)布局、rem布局
			@font-face、iconfont的使用
	項目實戰(zhàn)	紐曼官網(wǎng)移動端項目實戰(zhàn)





	網(wǎng)站動效交互開發(fā)	Javascript基礎(chǔ)	JavaScript介紹、變量命名規(guī)則，變量聲明
			number，string，boolean，Array，object
			算術(shù)運算符，關(guān)系運算符，邏輯運算符
			if，for
函數(shù)定義語句，參數(shù)，返回值
jQuery基礎(chǔ)		jQuery介紹、特點、優(yōu)勢、文件下載、引入方式
		id，class，標(biāo)簽，屬性
		屬性類，css類，html\text\value
		DOM節(jié)點插入、刪除、修改、復(fù)制
jQuery動畫以及事件		常用鼠標(biāo)事件、鍵盤事件、頁面加載事件，事件綁定方式
		animate動畫方法、show/hide、fade、slide動畫實現(xiàn)、時間控制
項目實戰(zhàn)	用戶交互實戰(zhàn)一

	用戶交互實戰(zhàn)二

響應(yīng)式網(wǎng)站開發(fā)	Bootstrap	Boostratp介紹、Boostratp文件的下載、引入方式、注意事項
		表單組件、表格組件、導(dǎo)航組件、分頁組件、按鈕組件
		字體圖標(biāo)的引入、字體圖片的使用方式
		柵格系統(tǒng)介紹、使用規(guī)則
		JavaScript插件、快速布局工具
	Bootstrap響應(yīng)式案例實現(xiàn)



第二階段（邏輯交互）	用戶交互開發(fā) （邏輯業(yè)務(wù)開發(fā)思想）	Javascript基礎(chǔ)語法	JS發(fā)展歷史，定義，版本
			標(biāo)識符的命名，命名規(guī)范，保留字，關(guān)鍵字
			變量的定義，字面量的使用
			轉(zhuǎn)義字符是什么，空格，大于，小于，版權(quán)等轉(zhuǎn)義字符
			算術(shù)運算符，賦值運算符，邏輯運算符，條件運算符，位運算符，三目運算符
			字符串（String），數(shù)字(Number)，布爾(Boolean)，數(shù)組(Array)，對象(Object)，空（Null），未定義（Undefined）
		Javascript流程控制	if，switch
			for，for..in，while，do…while
			break，continue
		Javascript函數(shù)	函數(shù)常見的定義方式、函數(shù)的作用
			函數(shù)的調(diào)用方式
			函數(shù)參數(shù)設(shè)置
			return
			匿名函數(shù)的定義
			變量提升，全局作用域，局部作用域，閉包
			遞歸函數(shù)的定義與使用，算法實現(xiàn)
		Array對象方法	對象的介紹，對象的定義方式，常見對象介紹
			數(shù)組的介紹，數(shù)組的定義方式
			一維數(shù)組，二維數(shù)組，對象數(shù)組
			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 節(jié)點的獲取以及增刪改	DOM介紹、DOM樹
			通過 id ，標(biāo)簽名，類名找到 HTML 元素
			如需向 HTML DOM 添加新元素，您必須首先創(chuàng)建該元素（元素節(jié)點），然后向一個已存在的元素追加該元素。
		DOM 屬性操作	document.getElementById，document.getElementByTagName，document.getElementByName ，document.getElementByClassName，document.querySelector
			Elements ，Sources，Console，Network
		BOM 操作	BOM介紹
			window對象介紹
			Location 對象包含有關(guān)當(dāng)前 URL 的信息。
			Screen 對象包含有關(guān)客戶端顯示屏幕的信息。
			Navigator 對象包含有關(guān)瀏覽器的信息。
			History 對象包含用戶（在瀏覽器窗口中）訪問過的 URL。
			frames 屬性返回窗口中所有命名的框架。
		Javascript基礎(chǔ)事件以及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，鼠標(biāo)坐標(biāo)獲取，鍵盤值獲取
		Javascript優(yōu)化(事件委托，懶加載，預(yù)加載)與瀏覽器調(diào)錯	捕獲階段、處于事件階段、冒泡階段
			事件處理程序說明
			事件委托原理
			懶加載是什么，預(yù)加載是什么
		案例實戰(zhàn)


		HTML5 API	video/audio的Javascript API屬性、方法，事件
			touchstart、touchend、touchmove，devicemotion、deviceorientation
			拖放（Drag 和 drop），定位獲取
		HTML5 Canvas	canvas 元素用于在網(wǎng)頁上繪制圖形。
			getContext 上下文、beginPath()，closePath()，lineTo()、moveTo()，rect()，arc()，fill()，stroke()，fillRect()，strokeRect()，clearRect()
		jQuery基礎(chǔ)補充	基本篩選器、子元素、表單、可見性
			對象訪問、數(shù)據(jù)緩存、對象篩選查找
			內(nèi)部插入、外部插入、包裹、替換
			動畫隊列控制、delay、stop、finish
			事件委托介紹、綁定方式
			each、trim、param
		JQuery高級技能	插件封裝方式、封裝技巧
swiper.js
介紹、優(yōu)缺點、移動端zepto方法、組件介紹
商城網(wǎng)站項目




動態(tài)數(shù)據(jù)交互與存儲	json/xml ，cookie，本地存儲與離線存儲



	AJAX交互原理（原生，JQ）	HTTP協(xié)議，它規(guī)定了在網(wǎng)絡(luò)中發(fā)布，傳輸和接收html頁面的方法。大家都遵循這個協(xié)議，就能實現(xiàn)信息的傳輸。
		AJAX介紹、GET、POST
		XMLHttpRequest聲明、兼容處理、數(shù)據(jù)獲取操作
		ajax的屬性介紹、數(shù)據(jù)調(diào)用
		axios.create()，get/post方法，屬性控制
面向?qū)ο箝_發(fā)思想	面向?qū)ο缶幊?/span>	基本模式的定義、優(yōu)缺點
		工廠模式定義、優(yōu)缺點
		構(gòu)造模式定義、優(yōu)缺點
		原型鏈、原型模式定義、優(yōu)缺點
		混合模式定義
	面向?qū)ο缶幊虘?yīng)用	原型（prototype）實現(xiàn)繼承、構(gòu)造函數(shù)實現(xiàn)繼承、call , apply實現(xiàn)繼承
		對象封裝作用、封裝的方式
		淺克隆、深克隆
		原型鏈介紹、原型鏈應(yīng)用
		this的指向說明
	面向?qū)ο髮嶋H應(yīng)用

第三階段（前后端交互）	Node.js	Node.js：基礎(chǔ)模塊







		Node.js：基礎(chǔ)模塊





		Node.js：express




		Node.js：mongodb




		自動化工具

	項目實戰(zhàn)	項目版本管理工具	git介紹、遠(yuǎn)程倉庫介紹、暫存區(qū)介紹、指令配置、初始化指令、倉庫添加指令、項目拉取、提交、推送指令、版本控制指令
			github介紹、注冊、項目創(chuàng)建、權(quán)限配置
			SVN的安裝、版本管理操作
		移動端商城項目實戰(zhàn)

		移動端商城項目實戰(zhàn)

	ECMAScript 6高級語法	ES6基礎(chǔ)指令一	babel介紹、安裝與檢查、轉(zhuǎn)換配置、運行指令
			let變量聲明、新增特性、塊級作用域
			const常量聲明、本質(zhì)區(qū)別
			解構(gòu)介紹、數(shù)組解構(gòu)、對象解構(gòu)、字符串解構(gòu)、函數(shù)參數(shù)的解構(gòu)
			字符的 Unicode 表示法、codePointAt()、String.fromCodePoint() 字符串的遍歷器接口、at()、normalize()、includes(), startsWith(), endsWith()、repeat()、padStart()，padEnd()、matchAll()、模板字符串
		ES6基礎(chǔ)指令二	擴展運算符、Array.from()、Array.of()、copyWithin()、find() 和 findIndex()、fill()、entries()，keys() 和 values()、includes()、數(shù)組的空位
			函數(shù)參數(shù)的默認(rèn)值、rest 參數(shù)、嚴(yán)格模式、箭頭函數(shù)、雙冒號運算符
			屬性的簡潔表示法、屬性名表達式、方法的 name 屬性、Object.is()、super 關(guān)鍵字、對象的擴展運算符
		ES6基礎(chǔ)指令三	constructor 方法、類的實例對象、Class 表達式、不存在變量提升、私有方法和私有屬性、this 的指向、name 屬性、Class 的取值函數(shù)（getter）和存值函數(shù)（setter）、Class 的 Generator 方法、Class 的靜態(tài)方法、Class 的靜態(tài)屬性和實例屬性
			export 命令、import 命令、模塊的整體加載、export default 命令
		ES6基礎(chǔ)指令四	Promise 的含義、then()、catch()、finally()、all()、race()、resolve()、reject()
			基本用法、async 函數(shù)的實現(xiàn)原理、與其他異步處理方法的比較
			介紹、作為屬性名的 Symbol、屬性名的遍歷、Symbol.for()，Symbol.keyFor()、內(nèi)置的 Symbol 值
	微信開發(fā)	微信公眾號


		微信小程序快速入門	小程序賬號注冊、開發(fā)工具安裝、界面操作、項目搭建、項目配置
		微信小程序界面交互	WXML、WXSS、組件使用、靜態(tài)頁面搭建
		微信小程序接口調(diào)用	小程序API介紹、網(wǎng)絡(luò)、界面、設(shè)備、媒體、文件、數(shù)據(jù)緩存等接口調(diào)用
	項目實戰(zhàn)	微信小程序案例

第四階段（框架開發(fā)）	Vue.js開發(fā)	Vue.js 基礎(chǔ)指令	Vue.js介紹、發(fā)展歷史、特點、文件下載、Vue實例
			插值方式、指令參數(shù)、修飾符、代碼縮寫
			文本、原始HTML、特性、Javascript表達式
			樣式綁定、條件渲染、列表渲染、事件綁定
		Vue.js 基礎(chǔ)方法	方法介紹、定義方式
			計算屬性介紹、定義、比較計算屬性和methods方法
			過濾器介紹、使用方式、自定義過濾器
			事件監(jiān)聽、事件處理方式、事件修飾符、按鍵修飾符
			表單數(shù)據(jù)綁定、表單修飾符、雙向數(shù)據(jù)綁定
		Vue.js組件開發(fā)一	組件介紹、組件定義方式、組件引用

			父子組件數(shù)據(jù)傳輸、多級組件數(shù)據(jù)傳輸

		Vue.js組件開發(fā)二	生命周期介紹、應(yīng)用
			slot插槽的定義與使用

		Vue.js組件開發(fā)三	動態(tài)組件介紹、注冊動態(tài)組件
			Vue動畫定義方式、CSS動畫設(shè)置、自定義動畫效果
			數(shù)據(jù)變化追蹤、異步更新隊列
		Vue.js插件	Vue-cli介紹、安裝與檢查、Vue項目搭建流程
			Vue-router介紹、路由、路由守衛(wèi)
			axios.create()，get/post方法，屬性控制
		Vue.js高級語法	Vuex介紹、狀態(tài)state、項目配置

	項目實戰(zhàn)	WEB APP項目實戰(zhàn)



	React 開發(fā)	React	React介紹、歷史發(fā)展、安裝方式、環(huán)境配置
			JSX基礎(chǔ)語法、JS表達式使用、樣式、注釋
			React組件開發(fā)、復(fù)合組件
		React語法	事件注冊、綁定this
			ReactDOM介紹以及使用、render DOM渲染
			表單事件綁定、表單值獲取、state修改
		React環(huán)境搭建	環(huán)境介紹、整體搭建、項目部署
			集成router、路由嵌套、路由參數(shù)
		React數(shù)據(jù)交互	Fetch介紹、get封裝、post封裝、JSX調(diào)用
			React跨域處理，header處理
			React的promise應(yīng)用
	項目實戰(zhàn)	React案例實戰(zhàn)分析


	拓展學(xué)習(xí)：react+native	react+native環(huán)境搭建及介紹	React Native介紹
			軟件安裝，環(huán)境配置，環(huán)境測試
			服務(wù)器搭建，項目搭建
		Angular介紹	Angular框架、MVC思想
		數(shù)據(jù)可視化介紹	echart.js介紹、基礎(chǔ)使用
			D3.js介紹、基礎(chǔ)使用
		3D動畫框架介紹	Three.js介紹、基礎(chǔ)使用
			tween.js介紹、基礎(chǔ)使用
		產(chǎn)品經(jīng)理職責(zé)介紹	產(chǎn)品經(jīng)理職責(zé)介紹
		架構(gòu)師職責(zé)介紹	架構(gòu)師職責(zé)介紹

名師團隊

鄧?yán)蠋?/a>室內(nèi)講師

格宇教育高級室內(nèi)設(shè)計講師，畢業(yè)于大連理工大學(xué)，土木工程與室內(nèi)設(shè)計專業(yè)。大型工裝設(shè)計為主、家裝設(shè)計為輔，手繪與軟件能力強，設(shè)計經(jīng)驗豐富，從事室內(nèi)設(shè)計及教學(xué)已有10年，熟悉工藝，裝飾材料的品種、規(guī)格、特性、擅長根據(jù)不同需求設(shè)計出不同的風(fēng)格。專業(yè)實操理論強。教學(xué)風(fēng)格：亦師亦友

江老師教學(xué)教研總監(jiān)

教學(xué)教研總監(jiān) 海歸碩士，ui高級講師 10年互聯(lián)網(wǎng)從業(yè)經(jīng)驗，5年團隊管理經(jīng)驗，多家上市教育集團管理經(jīng)驗，曾服務(wù)于百度集團、達內(nèi)集團、參與超過30款上線產(chǎn)品研發(fā),擁有非常豐富的實際項目經(jīng)驗及教學(xué)經(jīng)驗。
施老師室內(nèi)老師

格宇教育高級室內(nèi)設(shè)計講師，畢業(yè)于長沙理工大學(xué)，施工管理專業(yè)。有豐富的大型項目管理經(jīng)驗，先后參上海軌道交通地鐵項目、上海賽車汽車城別墅項目、萬科大型住宅項目等。自主創(chuàng)業(yè)成立自己的設(shè)計公司并擔(dān)任室內(nèi)設(shè)計講師，精通工裝、家裝設(shè)計豐富的施工及設(shè)計經(jīng)驗，熟悉工藝，裝飾材料的品種、規(guī)格、特性
許老師ui講師

個人簡介：格宇教育UI設(shè)計講師，畢業(yè)于安徽工程大學(xué)服裝設(shè)計專業(yè)。從事設(shè)計相關(guān)行業(yè)五年實踐經(jīng)驗。從外包小公司一步步跟著市場走到大型自主研發(fā)UI設(shè)計。熟悉各種平臺設(shè)計規(guī)范，各種產(chǎn)品設(shè)計規(guī)則。教學(xué)風(fēng)格：風(fēng)趣幽默理論與實踐結(jié)合教學(xué)理念：做設(shè)計可以天馬行空，但是學(xué)習(xí)我們必須認(rèn)真！
董老師web前端講師

格宇移動前端開發(fā)（HTML5）專業(yè)講師，5年多pc及移動端開發(fā)實踐經(jīng)驗。曾在深圳，上海等城市做APP、商城網(wǎng)站開發(fā)。在多年的實踐中總結(jié)了實際工作中所需要的技能及技巧，熟練使用原生Js，CSS3，h5，node.js, webpack，ng，vue，react，微信小程序等技術(shù)，對
劉老師教學(xué)經(jīng)理

格宇HTML5學(xué)科高級講師，七年行業(yè)工作經(jīng)驗，熟練使用HTML5，CSS3，js等技術(shù)，開發(fā)多個web和移動端App應(yīng)用，曾在前程無憂等資深互聯(lián)網(wǎng)公司任職，并且擔(dān)任前端的team leader ，負(fù)責(zé)搭建web前端架構(gòu)，考慮前端技術(shù)選型，帶領(lǐng)過三十人左右的團隊完成項目，主要涉足媒