課程大綱：高級(jí)Web前端工程師培訓(xùn)
第一階段（WEB前端布局與交互開發(fā)）
WEB前端
（H5網(wǎng)頁布局） HTML標(biāo)簽梳理
1.5分鐘上手Hbuilder軟件，對(duì)HTML5和CSS3有初步的了解和認(rèn)識(shí)
2.掌握HTML5九大基本標(biāo)簽，包括標(biāo)題、圖像、音頻、視頻等
3.掌握HTML5智能表單基本標(biāo)簽和智能表單擴(kuò)展標(biāo)簽
七組CSS
基本樣式 1.講解CSS三大引用方式，包括行內(nèi)樣式、內(nèi)部樣式表和外部樣式表
2.CSS七類樣式詳解，包括背景、文本、字體、鏈接、列表、表格、邊框樣式
CSS3炫酷特效 1.掌握CSS3四大“變形金剛”，旋轉(zhuǎn)、扭曲、縮放和位移
2.CSS3過渡屬性詳解，通過過渡屬性完成網(wǎng)頁漂亮的交互效果
3.CSS3動(dòng)畫特效講解，通過動(dòng)畫屬性可以做多個(gè)狀態(tài)交互的網(wǎng)頁炫酷特效
選擇器細(xì)解11大類
1.掌握CSS五類常用選擇器，包括通用選擇器、ID選擇器、類選擇器等
2.三代關(guān)系選擇器詳解，包括子元素選擇器、兄弟選擇器、后代選擇器
3.CSS3偽類選擇器和偽元素選擇器詳解，可以多樣化的自由選擇網(wǎng)頁元素對(duì)象
CSS布局
四大技巧
1.掌握多列屬性布局技巧,三種定位方式，絕對(duì)定位、相對(duì)定位和固定定位
2.五句話吃透盒模型，清楚盒模型的計(jì)算和瀏覽器兼容性中的注意事項(xiàng)
3.左浮動(dòng)和右浮動(dòng)的設(shè)置以及如何清除浮動(dòng)以達(dá)到父級(jí)自動(dòng)擴(kuò)高問題
響應(yīng)式雙法則
1.了解媒體查詢的引用方式，包括內(nèi)部樣式表、外部樣式表等
2.掌握媒體查詢使用方法，了解關(guān)鍵詞的使用技巧
3.了解根元素的字號(hào)適配，通過字號(hào)設(shè)置完成響應(yīng)式頁面
兼容性
調(diào)試技巧 1.CSS優(yōu)化減肥技巧，包括圖片優(yōu)化和代碼優(yōu)化，提升網(wǎng)頁的加載速度
2.了解CSS優(yōu)先級(jí)的計(jì)算，解決樣式覆蓋問題
3.掌握兼容性調(diào)試技巧，如何能夠讓代碼兼容各大主流瀏覽器
項(xiàng)目實(shí)戰(zhàn)
提經(jīng)驗(yàn)
1.熟悉PS切圖技巧，如切片切圖、選區(qū)切圖等，以及網(wǎng)頁項(xiàng)目的正規(guī)創(chuàng)建
2.頁面布局規(guī)范講解，從整體到局部的規(guī)劃，先標(biāo)簽后樣式的代碼順序等
3.完成三大項(xiàng)目實(shí)戰(zhàn)，企業(yè)站，商城站和響應(yīng)式頁面，能夠獨(dú)立完成H5靜態(tài)頁面
WEB前端JavaScript 交互
核心語法
1.掌握J(rèn)S的組成和語法,為進(jìn)去代碼的世界做鋪墊,數(shù)據(jù)結(jié)構(gòu),不再看見代碼而發(fā)愁
2.對(duì)象的創(chuàng)建方式和this詳解,提前帶你熟悉企業(yè)中變量的命名規(guī)則和規(guī)范
3.熟悉JS中的數(shù)據(jù)類型,流程控制,循環(huán)語句,輕松讓你在網(wǎng)頁上寫出九九乘法表,計(jì)算器等 136
面向?qū)ο缶幊?
1.掌握面向?qū)ο蠛兔嫦蜻^程,熟悉JS的精髓;深拷貝和淺拷貝,讓你知道更加底層的代碼
2.原型和原型鏈,JavaScript重要的核心,讓你寫的代碼復(fù)用性更強(qiáng)
3.企業(yè)開發(fā)中沙箱模式,了解企業(yè)中是怎么團(tuán)隊(duì)合作開發(fā)
對(duì)象類型 1.基本數(shù)據(jù)類型(number、string、boolean、undefined、null)
2.引用數(shù)據(jù)類型( 數(shù)組 array .. 函數(shù) function ... 對(duì)象 object)
3.掌握不同對(duì)象類型之間的轉(zhuǎn)換
BOM與DOM操作
1.DOM操作和BOM操作大全,輕松操作網(wǎng)頁上的每一個(gè)按鈕等,同時(shí)給他們加上不同的功能
2.利用JavaScript代碼實(shí)現(xiàn)酷炫特效,京東首頁輪播圖升級(jí)版
3.頁面布局,結(jié)合H5代碼,讓你的網(wǎng)頁功能更加全面,可以1:1寫出小米官網(wǎng)首頁及功能
4.熟悉事件處理,讓你的代碼更加嚴(yán)謹(jǐn),相同的頁面效果,寫的代碼更少
5.瀏覽器兼容性處理,讓市面上的不同瀏覽器品牌,打開你的網(wǎng)頁效果不會(huì)有差別
事件編程
1.Javascript的事件機(jī)制,了解底層,才能寫出更嚴(yán)謹(jǐn)?shù)拇a,企業(yè)開發(fā)常見事件的使用詳解
2.offset家族和scroll家族,了解瀏覽器和代碼之間的關(guān)系
3.鍵盤事件及鍵盤碼的屬性,讓你的鍵盤能和鋼琴一樣,按下之后有不同的聲音
正則表達(dá)式
1.創(chuàng)建正則表達(dá)式,從零開始寫表單驗(yàn)證,輕松還原百度注冊(cè)功能
2.正則的3大核心：字符串類元字符、邊界類元字符、量詞類元字符,讓你寫的驗(yàn)證功能更強(qiáng)大
3.正則的使用和替換,隨心所以換校驗(yàn)規(guī)則
4.完整版表單校驗(yàn),提前進(jìn)入企業(yè)實(shí)戰(zhàn)開發(fā)
JQuery交互特效開發(fā) 1.jQuery的優(yōu)勢(shì)介紹,jQuery選擇器,讓你快半個(gè)月搭建一個(gè)簡(jiǎn)單網(wǎng)站
2.jQuery中的動(dòng)畫詳解,讓你的網(wǎng)頁不再單調(diào),貪吃蛇,水果忍者,都能通過代碼寫出來
3.鏈?zhǔn)骄幊毯碗[式迭代,了解jQuery的底層核心
4.JQuery插件使用和制作,自己也能制作酷炫動(dòng)畫插件,使用插件1分鐘做出京東輪播圖效果
Ajax數(shù)據(jù)交互
1.Ajax技術(shù)介紹,json格式與XML格式詳解,現(xiàn)在的技術(shù)和歷史技術(shù)的區(qū)別,教你如何鏈接服務(wù)器
2.Ajax中post與get兩種請(qǐng)求方式詳解,2種方式從后臺(tái)服務(wù)器拿數(shù)據(jù)
3.JSON數(shù)據(jù)分析,了解后端數(shù)據(jù)是怎么寫的,不再盲目的被后端程序員懟
4.解決跨域訪問的方法,讓你的網(wǎng)頁在任何協(xié)議都能訪問,無論是http協(xié)議還是https
5.企業(yè)接口化開發(fā)詳解,提前進(jìn)入實(shí)戰(zhàn)化開發(fā)
HTML5
高級(jí)功能 1.畫布標(biāo)簽canvas.了解如何繪制并填充線條（形狀）,文字及圖片。完成你畫我猜小游戲
2.多媒體（音頻，視頻）標(biāo)簽的實(shí)際使用。開發(fā)并完成自己的網(wǎng)易音樂播放器
3.強(qiáng)化練習(xí)智能化表單以及和完成后臺(tái)的數(shù)據(jù)交互。完成帶有圖片驗(yàn)證碼功能的登錄操作
4.本地存儲(chǔ)（cookies,sessionStorage,localStorage）。一周免登陸是如何實(shí)現(xiàn)的
WEBAPP開發(fā)
1.視口viewport（手機(jī)瀏覽器中的虛擬窗口）為何手機(jī)中的網(wǎng)頁有的能縮放爾有些不能
2.移動(dòng)端的事件交互：觸摸事件（touchstart/mov/end/cancel）。完成京東商城分類頁
3.另一種布局方式：彈性布局（flexbox）
隨堂項(xiàng)目：商城移動(dòng)端首頁、在線答題系統(tǒng)
Bootstrap
1.Bootstrap開發(fā)優(yōu)缺點(diǎn)介紹,如何通過模板搭建網(wǎng)站
2.響應(yīng)式開發(fā)原理,無論電腦、手機(jī)、平板等,都能適應(yīng)屏幕
3.Bootstrap框架的使用,
4個(gè)口訣讓你做出標(biāo)準(zhǔn)官方首頁樣式
4.Bootstrap的柵格系統(tǒng)詳解,不同屏幕尺寸,顯示不同的效果
5.Bootstrap的Javascript插件使用,掌握不同網(wǎng)頁按鈕和輸入框更換樣式和顏色
ECMAScript6
1.ES5中的嚴(yán)格模式,讓代碼自己檢查自己
2.ES6中的新語法詳解,面試必問的語法
3.實(shí)際開發(fā)中常用的箭頭函數(shù),解構(gòu)賦值和字符串模板,讓你代碼更加簡(jiǎn)潔
4.定義變量的新方式LET和const,讓你與企業(yè)開發(fā)同步
第四階段（WEB移動(dòng)端開發(fā)和后臺(tái)交互開發(fā)）
WEB
移動(dòng)端開發(fā)
git版本控制
1.什么是版本控制,為什么用git.了解今后工作中是如何獲取項(xiàng)目源代碼的。
2.git常用指令(建立倉庫，獲取新版本代碼，提交代碼)。
3.使用可視化工具TortoiseGit進(jìn)行g(shù)it的常規(guī)操作。
微信公眾號(hào)
開發(fā)（JSSDK）
1.微信公眾號(hào)介紹與申請(qǐng)開發(fā)賬號(hào)
2.調(diào)用微信官方API接口函數(shù)
3.常見微信分享、投票、掃一掃、定位打卡等的設(shè)計(jì)與實(shí)現(xiàn) 隨堂項(xiàng)目：企業(yè)公眾號(hào)項(xiàng)目實(shí)踐
微信小程序
開發(fā)
1.小程序相關(guān)介紹及賬號(hào)申請(qǐng)\小程序開發(fā)環(huán)境搭建
3.小程序組件開發(fā)、API使用
2.WEUI,有贊Vant使用、云存儲(chǔ)、云數(shù)據(jù)庫 （文件，圖片上傳功能實(shí)戰(zhàn)）
網(wǎng)校實(shí)訓(xùn)項(xiàng)目：
1.建立云開發(fā)環(huán)境
2.網(wǎng)校首頁
3.課程詳情頁
4.日歷組件（課程表）
5.個(gè)人中心（頭像上傳）
6.獲取用戶權(quán)限登錄
7.打卡簽到
8.日程提醒等
獨(dú)立項(xiàng)目實(shí)訓(xùn) 基于MUI實(shí)訓(xùn)中學(xué)員的項(xiàng)目，獨(dú)立開發(fā)
使學(xué)員能夠在自己的微信中進(jìn)行演示，符合就業(yè)要求
階段考核 教師指導(dǎo)你完成階段作品，以備應(yīng)聘時(shí)使用；從立案到素材、材料收集整理，再到風(fēng)格定位、欄目規(guī)劃，獨(dú)立完成項(xiàng)目作品，其中需容入不同的分類信息、作品等；
Node.js★ 基礎(chǔ)介紹★
模塊系統(tǒng)★
事件和接口★ 1.什么是node.js,node.js的介紹,npm使用介紹
2.安裝配置第一個(gè)node.js應(yīng)用.創(chuàng)建模塊.模塊加載
3.事件驅(qū)動(dòng)程序,GET請(qǐng)求與POST請(qǐng)求.獲取請(qǐng)求參數(shù)
web模塊★ 1.什么是 Web 服務(wù)器。使學(xué)員了解我們制作的網(wǎng)頁是怎么被別人訪問到的。
2.使用 Node 創(chuàng)建 Web 服務(wù)器
3.使用 Node 創(chuàng)建 Web 客戶端
mysql基礎(chǔ)語法 1.數(shù)據(jù)庫基本語法與基本操作（增刪改查）
2.利用node.js的mysql模塊進(jìn)行數(shù)據(jù)庫操作實(shí)現(xiàn)接口功能
3.用戶登錄,網(wǎng)易163的10天免登錄功能的真正實(shí)現(xiàn)方式
Express框架★ 1.Express 簡(jiǎn)介與安裝，開始你的第一個(gè)express項(xiàng)目，創(chuàng)建及啟動(dòng)項(xiàng)目
2.請(qǐng)求和響應(yīng)，路由，中間件，文件上傳及cookie管理等。
第五階段（WEB高級(jí)框架）
WEB高級(jí)框架與后臺(tái)交互 Vue.js ★ 1.Vue.js簡(jiǎn)介與安裝,初始化Vue實(shí)例
2.Vue三大基礎(chǔ)語法：數(shù)據(jù)綁定，列表渲染，條件渲染
3.監(jiān)聽屬性與偵聽器?？焖賹?shí)現(xiàn)購物車中的總價(jià)，總數(shù)的計(jì)算
1.生命周期的鉤子函數(shù)（vue頁面的4個(gè)關(guān)鍵階段）
2.自定義組件開發(fā)，數(shù)據(jù)的傳遞與自定義事件
3.過渡與動(dòng)畫,數(shù)據(jù)請(qǐng)求工具axios的使用
隨堂練習(xí)：用戶是怎么把商品加入購物車，Sku商品規(guī)格
1.腳手架vue-cli,搭建項(xiàng)目的基礎(chǔ)骨架.了解大型網(wǎng)站項(xiàng)目是如何誕生的
2.路由router,網(wǎng)站頁面間是如何跳轉(zhuǎn)的.了解為什么現(xiàn)在的網(wǎng)頁都沒有.html了
3.狀態(tài)管理vuex,全局管理及維護(hù)網(wǎng)站的簡(jiǎn)單數(shù)據(jù).讓學(xué)員明白網(wǎng)站為什么可以1個(gè)月都不用自己登錄
4.自動(dòng)打包工具webpack.掌握完成的項(xiàng)目是如何發(fā)布到正式環(huán)境的
1.路由簡(jiǎn)介,兩大常規(guī)路由操作：動(dòng)態(tài)路由，嵌套路由.掌握企業(yè)(電商)后臺(tái)網(wǎng)站的布局及跳轉(zhuǎn)方法
2.編程式導(dǎo)航,實(shí)現(xiàn)頁面跳轉(zhuǎn)的兩種操作方法：聲明式和編程式
3.命名路由與命名視圖,路由的傳參. 掌握從商品列表跳轉(zhuǎn)到商品詳情頁如何顯示對(duì)應(yīng)的數(shù)據(jù)及評(píng)論
4.導(dǎo)航守衛(wèi).掌握淘寶在搜索商品前必須先登錄的功能實(shí)現(xiàn)
1.什么是Vuex,Vue.js的狀態(tài)管理模式
2.Vuex的五個(gè)核心屬性：state, getters, mutations, actions, modules
3.通過學(xué)習(xí)vuex 掌握初步的網(wǎng)站1個(gè)月免登錄功能實(shí)現(xiàn)。
商城項(xiàng)目實(shí)訓(xùn)：1.搭建vue開發(fā)環(huán)境 2.商城首頁 3.商品詳情頁 4.購物車 5.個(gè)人中心 6.商品分類 7.用戶登錄 8.商城打包上線。
1.elment-ui簡(jiǎn)介，安裝element-ui
2.主題設(shè)置，常用組件
3.element-admin 后臺(tái)管理項(xiàng)目系統(tǒng)實(shí)踐
獨(dú)立項(xiàng)目實(shí)訓(xùn)
基于MUI實(shí)訓(xùn)中學(xué)員的項(xiàng)目，獨(dú)立開發(fā)
使學(xué)員能夠在獨(dú)立的服務(wù)器中進(jìn)行演示，符合就業(yè)要求
1.Vue3.0新特新介紹、組合api、setup,reactive,ref等
加入高級(jí)會(huì)員獲得助教答疑
