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