HTML&JS+前端培訓(xùn)開班

2020年HTML&JS+前端學(xué)科課程大綱

目前課程版本:6.5   升級時間:2019.06.01   查看詳細(xì)

HTML&JS+前端課程設(shè)計理念

  •  

    前沿應(yīng)用型技術(shù)

    課程設(shè)計之初就對目前企業(yè)中最流行的技術(shù)及知識點進行過多次調(diào)研,整套課程設(shè)計完成后,又進一步對課程中的技術(shù)點進行了100+項的增加與優(yōu)化,全面覆蓋以 React.js、Vue.js 和 Angular 為首的三大框架,最新的數(shù)據(jù)流方案、服務(wù)端渲染方案,當(dāng)下非常熱門的移動端開發(fā)技術(shù):Flutter、React Native、微信小程序,讓學(xué)員能夠輕松應(yīng)對前端在不同領(lǐng)域、不同行業(yè)的技術(shù)難題。

  •  

    真實企業(yè)級項目庫

    學(xué)員的最終訴求就是能夠靈活運用所學(xué)知識進行企業(yè)項目開發(fā),所以真實的企業(yè)級項目是傳統(tǒng)培訓(xùn)中最最稀缺的。此次課程核心定位更接近真實企業(yè)需求,所以我們從項目選題開始全部以真實就業(yè)情況為出發(fā)點,橫跨電商、金融、在線教育、社交、租房、旅游六大行業(yè),構(gòu)建真實企業(yè)級項目庫,,通過超長的項目課程培養(yǎng)學(xué)員在真實工作場景中攻克技術(shù)難題的的技術(shù)實戰(zhàn)能力,以及從容應(yīng)對不同企業(yè)需求的業(yè)務(wù)能力。

  •  

    超全的解決方案庫

    企業(yè)對于人才最核心的需求并不是對單純掌握某種應(yīng)用型技術(shù),而是希望開發(fā)者能夠通過自己的經(jīng)驗幫助企業(yè)解決項目中隨時出現(xiàn)的問題。所以本次課程除了升級應(yīng)用型技術(shù)的相關(guān)課程,更多的還是提供海量商業(yè)項目解決方案,構(gòu)建超全的解決方案庫,讓學(xué)員在日后的項目中可以靈活復(fù)用,做到企業(yè)有問題,我們有方案。

  •  

    商業(yè)項目團隊實戰(zhàn)

    新增了學(xué)員自主團隊開發(fā)的階段,完全模擬企業(yè)中的真實開發(fā)場景,從交互稿、設(shè)計稿、接口文檔,到項目打包工具,源代碼管理工具,在項目經(jīng)理的帶領(lǐng)下完成真實企業(yè)級項目的繼續(xù)開發(fā),讓學(xué)員真正體驗并掌握從需求到開發(fā)再到上線的方方面面,無需過渡期直接適應(yīng)真正的企業(yè)開發(fā)。

HTML&JS+前端基礎(chǔ)班課程大綱

學(xué)習(xí)對象

1.0基礎(chǔ)0經(jīng)驗的小白人員,想轉(zhuǎn)型到高薪編程行業(yè)或?qū)Υ诵袠I(yè)有濃厚興趣的人員;
2.在校大學(xué)生,希望充實自身技能,畢業(yè)后能順利就業(yè)并有更強的市場競爭力;
3.不滿足目前工作現(xiàn)狀,想要得到更好的發(fā)展空間。

注:獲取更多免費學(xué)習(xí)視頻+資料+筆記,請加QQ:2632311208。

上課方式

全日制脫產(chǎn),每周5天上課(實際培訓(xùn)時間可能因法定節(jié)假日等因素發(fā)生變化)

培訓(xùn)時間

部分校區(qū)可能會根據(jù)實際情況有所調(diào)整,詳情可詢咨詢老師   點擊咨詢


培訓(xùn)要求

自帶筆記本

 

HTML&JS+前端基礎(chǔ)班課程大綱
所處階段主講內(nèi)容技術(shù)要點學(xué)習(xí)目標(biāo)
第一階段:
HTML5 + CSS3
HTML51、 瀏覽器與瀏覽器內(nèi)核2、語法及使用、3、 常用標(biāo)簽4. 語義化5、 表單元素6、 HTML 、7 新增標(biāo)簽可掌握的核心能力:

掌握 HTML5 常用標(biāo)簽;
掌握 CSS 語法及使用技巧;
掌握CSS3新增選擇器;
掌握CSS3新增樣式屬性;
掌握 DIV+CSS 布局方式;
掌握常見網(wǎng)頁布局技巧;
掌握企業(yè)級、電商級網(wǎng)頁開發(fā)基本的流程、規(guī)范;
掌握語義化、模塊化、兼容性的PC端網(wǎng)頁開發(fā);
掌握 Photoshop 切圖以及插件切圖;
熟練使用調(diào)試工具進行頁面調(diào)試;
掌握基本的動畫效果。


可解決的現(xiàn)實問題:

能夠獨立把美工提供的PSD效果圖還原成PC端靜態(tài)代碼頁面。

市場價值:

具備PC端靜態(tài)網(wǎng)頁開發(fā)的能力,還達(dá)不到企業(yè)用人標(biāo)準(zhǔn)。為后面學(xué)習(xí)網(wǎng)頁編程階段打下堅實基礎(chǔ)。
CSS3基礎(chǔ)1、CSS基本語法規(guī)范2、 常用的選擇器用法與技巧 3、復(fù)合選擇器使用4、 數(shù)值與單位5、文字文本樣式 6、 CSS3新增選擇器
CSS3進階1、 CSS盒子模型 2、 CSS背景技巧 3、 圓角/陰影/過渡  4、 定位和浮動 5、 偽類和偽元素  6、chrome調(diào)試工具  7、CSS高級技巧(精靈圖、CSS三角、圖標(biāo)字體等)8、. CSS常見布局技巧大全 9、 網(wǎng)頁開發(fā)規(guī)范以及流程 10、CSS企業(yè)級網(wǎng)頁開發(fā) 11、網(wǎng)頁開發(fā)常見問題以及解決方案 12、 CSS常見兼容性問題以及解決方案   13、CSS3新增屬性 14、 Photoshop 切圖 15、cutterman插件一鍵切圖
電商項目1、代碼組織原則 2、項目開發(fā)實戰(zhàn)流程 3、 電商類復(fù)雜頁面布局規(guī)范 4、CSS初始化技術(shù)選擇(Normalize.css使用)5、 CSS字體圖標(biāo)使用 6、CSS 屬性書寫順序規(guī)范7、完整的多頁面開發(fā) 8、 網(wǎng)頁語義化設(shè)計 9、 CSS頁面模塊化開發(fā) 10、favicon圖標(biāo)制作 11、復(fù)雜網(wǎng)頁結(jié)構(gòu)排版技巧 12、 常見動畫過渡特效 13、電商類常見布局問題解決方案 14. 將電商項目部署到web服務(wù)器

HTML&JS+前端就業(yè)班課程大綱

學(xué)習(xí)對象

本課程適合于計算機專業(yè),有一定css+div基礎(chǔ)、通過入學(xué)考核的未就業(yè)人士。

上課方式

培訓(xùn)時間及周期:全日制脫產(chǎn),每周5天上課(實際培訓(xùn)時間可能因法定節(jié)假日等因素發(fā)生變化)

培訓(xùn)要求

自帶筆記本

培訓(xùn)時間

部分校區(qū)可能會根據(jù)實際情況有所調(diào)整,詳情可詢咨詢老師   點擊咨詢


 

HTML&JS+前端就業(yè)班課程大綱
所處階段主講內(nèi)容技術(shù)要點學(xué)習(xí)目標(biāo)
第二階段:
移動Web網(wǎng)頁開發(fā)
CSS3動畫1、CSS3的2D和3D變換2、animation動畫3、炫酷頁面開發(fā)(地圖大數(shù)據(jù)熱點圖、大風(fēng)車、旋轉(zhuǎn)木馬輪播圖等)學(xué)員能力體現(xiàn):


掌握CSS32D、3D變換、動畫效果;
了解移動端屏幕、移動端瀏覽器、操作系統(tǒng)的不同;
掌握主流移動端調(diào)試方法;
掌握常用移動端適配方案(流式布局、flex布局、rem適配);
掌握主流移動端頁面開發(fā)技術(shù)選型與解決方案;
掌握CSS預(yù)處理器less的使用;
掌握常用移動端框架使用方法;
掌握常見移動端頁面開發(fā)流程與規(guī)范;
掌握響應(yīng)式布局開發(fā);
掌握Bootstrap開發(fā)響應(yīng)式頁面;
掌握適配不同終端的移動端頁面開發(fā)。

可解決的現(xiàn)實問題:

能夠獨立開發(fā)移動端頁面,并適配不同移動端終端。

市場價值:

具備移動端頁面開發(fā),但是還不能達(dá)到企業(yè)的用人標(biāo)準(zhǔn)。為后面學(xué)習(xí)網(wǎng)頁編程階段打下堅實基礎(chǔ)。
移動端頁面開發(fā)1、傳統(tǒng)布局的局限性2、移動端屏幕介紹3、移動端瀏覽器介紹4、物理像素&物理像素比5、真機調(diào)試、6、viewport視口、7、移動端技術(shù)選型、8、移動端主流適配解決方案、9、移動端特殊樣式、10、百分比布局&流失布局、11、Flex布局優(yōu)勢、12、盒子父級常見屬性設(shè)置、13、盒子子級常見屬性設(shè)置、14、攜程網(wǎng)Flex移動端頁面開發(fā)、15、rem單位使用、16、rem適配、17、預(yù)處理器less、18、media媒體查詢、19、淘寶flexible.js移動端適配、20、cssrem插件使用、21、cutterman二倍圖三倍圖切圖、22、移動端頁面開發(fā)流程與規(guī)范、23、京東移動端首頁開發(fā)
Bootstrap1. Bootstrap框架的優(yōu)勢、2. 準(zhǔn)備工作、3. 如何引入包、4. 最常用的樣式模塊、5. 什么是柵格系統(tǒng)、6. 常見的柵格參數(shù)、7. 柵格系統(tǒng)的預(yù)定義類、8. 響應(yīng)式工具、9. 阿里百秀響應(yīng)式頁面開發(fā)
第三階段:
JavaScript網(wǎng)頁編程
JavaScript基礎(chǔ)1、基本輸入輸出方法2、變量3、數(shù)據(jù)類型4、類型轉(zhuǎn)換5、運算符6、流程控制語句7、數(shù)組8、函數(shù)9、自定義對象10、內(nèi)置對象和常用方法11、網(wǎng)頁版小娜小項目學(xué)員能力體現(xiàn):

能夠掌握J(rèn)avaScript基本語法;
掌握常見JavaScript算法;
掌握DOM的各種操作;
熟練使用面向?qū)ο笏枷脒M行DOM編程;
掌握J(rèn)avaScript的高級語法;
熟練使用jQuery操作DOM;
熟練使用和編寫jQuery插件;
獨立完成電商網(wǎng)站的頁面搭建(包括HTML結(jié)構(gòu)、CSS樣式、JavaScript特效);
掌握應(yīng)對業(yè)務(wù)編程的能力;
掌握J(rèn)avaScript常見兼容性方案;
掌握團隊合作開發(fā)流程。

可解決的現(xiàn)實問題:

能夠使用JavaScript/jQuery開發(fā)網(wǎng)頁特效/網(wǎng)頁應(yīng)用。

市場價值:

具備網(wǎng)頁開發(fā)的基礎(chǔ)能力(網(wǎng)頁布局和網(wǎng)頁應(yīng)用開發(fā)),但是無法和服務(wù)器交互,還達(dá)不到企業(yè)用人的標(biāo)準(zhǔn)。
WebAPIs編程1、獲取頁面元素的常用方法2、頁面中的事件和事件機制3、操作元素的樣式和屬性4、新增元素和移除元素5、BOM操作大全
網(wǎng)頁應(yīng)用/網(wǎng)頁特效1、輪播圖2、頁面放大鏡3、待辦事項列表4、購物車5、tabs6、JSON7、其它常用網(wǎng)頁特效
jQuery快速開發(fā)1、jQuery的優(yōu)勢2、jQuery選擇器3、jQuery中的動畫4、jQuery中的DOM操作5、鏈?zhǔn)骄幊毯碗[式迭代6、插件使用和制作7、常見網(wǎng)頁特效制作大全
面向?qū)ο缶幊?/td>1、面向?qū)ο笏枷搿?、創(chuàng)建對象、3、JavaScript中的對象深入理解、4、閉包原理以及使用場景、5、原型以及原型鏈深入剖析、6、作用域鏈深入分析、7、函數(shù)的調(diào)用方式及this指向總結(jié)、8、Class類、constructor、super
第四階段:
Node.js與AJAX
AJAX編程1、AJAX的作用2、原生AJAX3、同步與異步4、http協(xié)議5、AJAX的封裝6、jQuery的AJAX7、緩存問題及解決方案8、跨域請求及解決方案9、前端模板引擎學(xué)員能力體現(xiàn):

能夠建立客戶端服務(wù)器交互模型,熟悉網(wǎng)絡(luò)通信相關(guān)概念;
能夠使用Node.js進行Web服務(wù)端開發(fā);
能夠掌握J(rèn)avaScript異步編程模型;
能夠掌握J(rèn)avaScript模塊化編程方式;
能夠使用Node.js操作MySQL數(shù)據(jù)庫;
能夠理解HTTP協(xié)議;
熟悉原生Ajax請求流程與細(xì)節(jié),并掌握常見跨域技巧;
能夠基于jQuery的Ajax相關(guān)API熟練開發(fā)常見的前端功能;
能夠獨立開發(fā)基于后臺接口的動態(tài)網(wǎng)站、Ajax數(shù)據(jù)交互的項目;
能夠獨立完成企業(yè)網(wǎng)站從前臺到后臺的基本開發(fā)工作。

可解決的現(xiàn)實問題:

能夠具備開發(fā)具有簡單交互能力的網(wǎng)站,能夠使用源代碼管理工具。

市場價值:

具備基本的網(wǎng)站開發(fā)能力,滿足企業(yè)對初級前端開發(fā)的要求。
git1、git歷史2、git與svn3、git基本使用4、git分支5、git遠(yuǎn)程倉庫6、git沖突及解決方案
綜合項目:
阿里百秀
1、項目初始化2、前后端分離開發(fā)3、Postman工具使用4、用戶注冊/登錄/退出5、文章管理模塊6、評論管理模塊7、用戶中心模塊8、項目部署與發(fā)布
ES61、es6簡介2、新增語法3、內(nèi)置對象擴展4、Promise5、Async函數(shù)6、解構(gòu)7.展開運算
Node.js基礎(chǔ)1、node.js環(huán)境安裝2、如何用node.js運行代碼3、Commonjs4、模塊化5、模塊與包6、NPM7、CNPM和Yarn8、核心模塊使用9、第三方模塊使用10、RESTFulAPI
服務(wù)端開發(fā)(Node.js)1、靜態(tài)和動態(tài)網(wǎng)站2、http模塊使用3、請求響應(yīng)原理4、HTTP協(xié)議5、處理頁面請求6、處理表單7、會話技術(shù)(Cookie、Session)
MySQL1、MySQL的概念2、MySQL安裝3、建庫和建表4、增刪改查語句5、Node.js操縱MySQL
Express1、express的概念2、express的安裝3、后端路由4、靜態(tài)資源托管5、中間件的原理6、常用中間件7、模板引擎8、異常處理9、Express常用API10、RESTFulAPI
第五階段:
Vue.js項目實戰(zhàn)
Vue.js基礎(chǔ)1、Vue實例2、文本與屬性綁定3、計算屬性computed4、偵聽器watch5、Class與Style綁定6、條件渲染7、列表渲染8、事件處理9、表單輸入綁定10、Vue實例生命周期11、開發(fā)Vue插件和模板過濾器12、自定義指令13、Vue組件系統(tǒng)14、Vue過渡和動畫15、VueRouter路由系統(tǒng)16、組件通信17、axios請求庫18、VueCLI腳手架工具19、VueDevTools調(diào)試工具20、在Vue中操作DOM可掌握的核心能力:

能夠掌握使用Vue技術(shù)棧進行項目開發(fā);
能夠掌握源代碼管理工具的使用;
能夠熟練掌握前后端分離開發(fā)模式;
能夠掌握使用主流框架開發(fā)門戶網(wǎng)站、管理系統(tǒng)、移動Web等客戶端;
能夠掌握Webpack項目構(gòu)建配置流程;
能夠掌握Web項目的部署與發(fā)布模式;
能夠掌握常見網(wǎng)站業(yè)務(wù)模塊開發(fā)。
掌握使用echarts/d3.js進行大數(shù)據(jù)可視化交互開發(fā);

可解決的現(xiàn)實問題:

使用Vue技術(shù)棧開發(fā)企業(yè)級項目
掌握前后端分離的開發(fā)方式
掌握項目的打包和發(fā)布

市場價值:

理解Vue的開發(fā)理念、內(nèi)部運行原理,梳理使用Vue組件開發(fā)常見功能。滿足前端開發(fā)行業(yè)中的常見需求。
社交媒體-
黑馬頭條自媒體管理系統(tǒng)
1、使用VueCLI初始化項目2、使用Git+Github管理項目源代碼3、使用echarts開發(fā)數(shù)據(jù)可視化4、使用axios與服務(wù)端交互5、使用VueRouter管理項目中的路由6、使用ElementUI框架7、使用Sass預(yù)處理器8、基于JWT的前后端token鑒權(quán)9、富文本編輯器解決方案10、項目打包發(fā)布上線
webpack1、安裝與基本配置2、打包JavaScript模塊3、打包CSS模塊4、打包圖片和字體文件模塊5、打包less/sass資源模塊6、ES6轉(zhuǎn)ES57、打包.vue資源模塊8、配置ESLint代碼校驗工具9、使用clean-webpack-plugin插件清除打包結(jié)果目錄10、使用HtmlWebpackPlugin打包HTML資源11、處理打包結(jié)果的Sourcemaps12、監(jiān)視打包模式13、使用webpack-dev-server14、模塊打包熱更新15、treeshaking打包優(yōu)化16、生產(chǎn)環(huán)境和開發(fā)環(huán)境分離打包17、打包優(yōu)化之CodeSplitting代碼分割18、打包優(yōu)化之模塊懶加載19、打包優(yōu)化之緩存
社交媒體-
黑馬頭條
1、使用VueCLI初始化項目2、使用Git+Github管理項目源代碼3、使用axios與服務(wù)端交互4、使用VueRouter管理項目中的路由5、使用VantUI框架6、使用Vuex管理組件狀態(tài)7、使用Sass預(yù)處理器8、基于JWT的前后端token鑒權(quán)9、使用Socket.io進行實時通信10、移動端富文本編輯器解決方案11、使用Cordova打包移動App12、項目打包發(fā)布上線
Vue進階1、組件封裝進階2、MVVM數(shù)據(jù)綁定原理3、Render方法原理4、$nextTick方法的使用5、發(fā)布訂閱模式
服務(wù)端渲染1、SSR核心概念2、SSR基本用法3、編寫通用代碼4、路由和代碼分割5、構(gòu)建配置6、Nuxt.js
大數(shù)據(jù)可視化1、數(shù)據(jù)庫可視化基礎(chǔ)2、echarts/d3.js入門3、其它可視化庫4、大數(shù)據(jù)可視化實戰(zhàn)項目:組件開發(fā)
第六階段:
微信小程序
小程序基礎(chǔ)1、小程序注冊2、小程序開發(fā)者工具使用教程3、小程序配置文件4、小程序常用組件5、小程序的模板語法6、小程序中的樣式編寫7、小程序中的JavaScript8、小程序應(yīng)用及頁的生命周期9、小程序常用API10、小程序中的自定組件11、小程序插件開發(fā)12、小程序分包加載13、小程序基礎(chǔ)庫版及兼容處理14、小程序運行機制15、小程序性能分析及優(yōu)化16、小程序云開發(fā)、云函數(shù)、云數(shù)據(jù)庫17、小程序上線和發(fā)布可掌握的核心能力:

能夠掌握小程序的開發(fā)基礎(chǔ);
能夠獨立開發(fā)小程序項目;
能夠掌握小程序的部署與發(fā)布;
能夠掌握微信支付的使用;
能夠掌握小程序開發(fā)框架的使用;
掌握第三方AI平臺的使用。


可解決的現(xiàn)實問題:

掌握整個小程序開發(fā)和傳統(tǒng)web開發(fā)的區(qū)別;
掌握企業(yè)小程序開發(fā)、發(fā)布和上線的整體流程;
擁有解決和實現(xiàn)市場上主流小程序的功能需求。

市場價值:

掌握前端行業(yè)的小程序發(fā)展趨勢,熟悉小程序項目的整體運作流程,并且具備獨立開發(fā)企業(yè)級小程序的能力,既可以使用原生小程序也可以使用小程序框架來完成項目。
小程序項目:
黑馬優(yōu)購商城
1、原生框架的搭建2、商品首頁模塊3、分類商品模塊4、商品列表模塊5、商品詳情模塊6、支付和登錄模塊7、收藏模塊8、購物車模塊9、訂單模塊10、搜索頁面模塊11、個人中心模塊12、意見反饋模塊13、項目的優(yōu)化和發(fā)布上線
第七階段:
React.js項目實戰(zhàn)
React.js基礎(chǔ)1、create-react-app腳手架工具2、JSX語法3、條件渲染4、列表渲染和key5、React組件系統(tǒng)6、PureComponent7、setState()8、事件處理9、表單處理10、組件通訊11、render-props12、高階組件13、虛擬DOM和Diff算法14、ReactRouter路由系統(tǒng)15、Redux狀態(tài)管理架構(gòu)16、axios請求庫17、AntDesign組件框架、18、CSSModules可掌握的核心能力:

能夠理解React的開發(fā)理念;
能夠掌握React的基本使用;
能夠理解React的內(nèi)部原理;
能夠使用React及其常用組件庫進行項目開發(fā);
能夠使用React封裝項目中用到組件實現(xiàn)復(fù)用;
能夠掌握React項目中常見問題的解決方案;
能夠掌握React-Redux進行狀態(tài)管理;
能夠掌握聲明式編程的思想;
能夠掌握組件化開發(fā)的思想;
能夠掌握React項目優(yōu)化、部署。

可解決的現(xiàn)實問題:

具備使用React開發(fā)能力,配合React內(nèi)部原理,增強解決項目中復(fù)雜業(yè)務(wù)問題的能力,從項目搭建到項目開發(fā)再到項目部署上線,讓學(xué)員可以完成常見企業(yè)級項目的開發(fā)。

市場價值:

理解React的開發(fā)理念、內(nèi)部運行原理,熟練運用React組件完成項目常見功能開發(fā),配合常用組件庫解決項目中的一些共性問題,滿足前端開發(fā)行業(yè)中的常見需求。
好客租房
PC端項目
1、項目初始化2、管理員登錄退出3、用戶管理4、用戶已發(fā)布房源查看5、房源列表6、房源列表檢索等功能7、使用redux進行狀態(tài)管理
好客租房
移動Web項目
1、項目初始化2、首頁搭建3、地理定位4、城市選擇5、地圖找房6、房源搜索7、關(guān)鍵詞搜索8、房源詳情9、個人中心10、用戶登錄/注冊/退出11、房源收藏12、查看用戶收藏房源列表13、房源發(fā)布14、已發(fā)布房源列表查看15、權(quán)限路由組件封裝16、移動端長列表性能優(yōu)化17、React復(fù)雜表單處理18、React動畫等常見解決方案

HTML&JS+前端中級進修課課程大綱

學(xué)習(xí)對象

初入前端開發(fā)行業(yè)的初級、中級前端開發(fā)者。

注:獲取更多免費學(xué)習(xí)視頻+資料+筆記,請加QQ:2632311208。

上課方式

在線學(xué)習(xí)

培訓(xùn)時間

隨到隨學(xué),詳情可詢咨詢老師   點擊咨詢



HTML&JS+前端中級進修課課程大綱
所處階段主講內(nèi)容技術(shù)要點學(xué)習(xí)目標(biāo)
第八階段:
框架原理與進階
前端工程化工程化概念、模塊化開發(fā)及常用工具(Webpack4、Parcel、Rollup)、項目規(guī)范化及常用工具(ESLint、StyleLint)、前端自動化及常用工具、自動化測試及常用工具(istanbul、jest、benchmark)
學(xué)員能力體現(xiàn):
- 能夠輕松運用目前市場主流工具應(yīng)對工程化項目需求;
- 能夠基于無服務(wù)端平臺快速開發(fā)應(yīng)用并了解國內(nèi)主流的平臺服務(wù);
- 能夠使用靜態(tài)站點構(gòu)建方案快速開發(fā)企業(yè)站;
- 能夠使用 Flow、TypeScript 完成復(fù)雜應(yīng)用業(yè)務(wù)代碼的編寫;
- 能夠掌握使用 Angular 技術(shù)棧進行項目開發(fā);
- 能夠理解 React.js / Vue.js 一類的 MVVM 框架的實現(xiàn)原理;
- 能夠使用不同的數(shù)據(jù)流框架應(yīng)對不同技術(shù)棧在大型項目中的數(shù)據(jù)狀態(tài)管理;
- 能夠使用服務(wù)端渲染解決方案解決 React.js / Vue.js / Angular 框架在 SEO 方面的問題;
- 能夠掌握不同框架的服務(wù)端渲染的實現(xiàn)及運用;
- 能夠使用 React16 + Redux4 + ReactRouter4 + Next.js 完成社交類項目的開發(fā)。

關(guān)鍵詞:
工程化、自動化、無服務(wù)端、Gatsby、TypeScript、Flow、Angular、MVVM 框架原理、Mobx、RxJS、SSR、Next.js、Nuxt.js、Universal
閑云旅游項目無服務(wù)端方案(LeanCloud)、靜態(tài)站點生成工具(Gatsby、React Static、VuePress)、旅游類項目業(yè)務(wù)
JavaScript 進階Flow 類型檢查、TypeScript 適應(yīng)超大型的應(yīng)用編碼
Angular 實戰(zhàn)開發(fā)Angular 組件的定義及使用、Angular 服務(wù)、Angular 路由、表單、依賴注入
MVVM 框架進階與實現(xiàn)Vue.js 原理、Vue.js 使用進階、模擬實現(xiàn) Vue.js 框架
數(shù)據(jù)流框架的應(yīng)用Redux、Mobx、Vuex、RxJS、ngrx
服務(wù)端渲染 SSR 專題React.js 服務(wù)端渲染方案及 Next.js 框架、Vue.js 服務(wù)端渲染方案及 Nuxt.js、Angular 服務(wù)端渲染方案及 Universal Angular
學(xué)成在線項目React16、Redux4、ReactRouter4、Next.js
跨平臺桌面應(yīng)用開發(fā)Electron、Vue.js / React.js 在 Electron 中的使用
第九階段:
移動 App 開發(fā)
混合式 App 開發(fā)框架Cordova、Phonegap、Ionic
學(xué)員能力體現(xiàn):
- 能夠使用混合式 App 開發(fā)框架快速開發(fā)移動 App;
- 能夠配合原生應(yīng)用開發(fā) App 內(nèi)嵌 H5 頁面并可以通過 JSBridge 調(diào)用原生接口;
- 能夠使用 wepy / mpvue 框架開發(fā)小程序或快應(yīng)用項目;
- 能夠使用 taro 多端統(tǒng)一解決方案同時完成移動 App、移動 Web、小程序的開發(fā);
- 能夠獨立使用 React Native 開發(fā)原生 App;
- 了解 Weex / Flutter 等其他原生應(yīng)用的前端技術(shù)開發(fā)方式。

關(guān)鍵詞:
Cordova、Ionic、Webview + H5、JSBridge、mpvue、taro、Weex、Flutter
H5 配合原生開發(fā) AppWebview + H5、JSbridge、NativeScript
黑馬證券 App 項目Vue.js 開發(fā)移動H5、配合原生 Webview 構(gòu)建 App、金融業(yè)務(wù)項目
小程序/快應(yīng)用開發(fā)框架WEPY、MPVUE、Taro 統(tǒng)一開發(fā)解決方案
原生應(yīng)用開發(fā)框架Flutter、React Native、Weex
好客租房 App 項目React Native 構(gòu)建租房類 App 項目
第十階段:
Node.js 進階
Node.js 網(wǎng)絡(luò)通信TCP 協(xié)議、net 模塊、Socket
學(xué)員能力體現(xiàn):
- 能夠基于 net 模塊開發(fā) Socket 應(yīng)用并深度理解 HTTP 協(xié)議;
- 徹底理解 Node.js 中的事件循環(huán)特性;
- 能夠使用 Cluster 開發(fā)多進程應(yīng)用充分發(fā)揮多核 CPU;
- 能夠操作常見的 NoSQL 數(shù)據(jù)庫并能夠通過 Node.js 操作;
- 能夠掌握主流的 MVC Web 應(yīng)用開發(fā)框架 Adonis、Egg;
- 能夠升入理解基于 GraphQL 標(biāo)準(zhǔn)開發(fā)現(xiàn)代化的應(yīng)用層接口;
- 能夠掌握 Node.js 中途島在企業(yè)級項目中的應(yīng)用;
- 能夠使用 Node.js 開發(fā)基本的網(wǎng)絡(luò)爬蟲應(yīng)用。

關(guān)鍵詞:
Socket、EventLoop、Cluster、Redis、MongoDB、Memcached、Adonis.js、Egg.js、GraphQL、微服務(wù)、Nightmare、Puppeteer
Node.js 事件循環(huán)與多進程EventLoop、Cluster
NoSQL 數(shù)據(jù)庫Redis / MongoDB / Memcached 基本使用及如何通過 Node.js 操作
Web 應(yīng)用開發(fā)框架Adonis.js、Egg.js、Koa
BaaS 接口標(biāo)準(zhǔn)GraphQL
十次方項目Node.js 中間層、社交類業(yè)務(wù)項目
網(wǎng)絡(luò)爬蟲開發(fā)Cheerio、Nightmare、Puppeteer
第十一階段:
可視化與游戲
網(wǎng)頁游戲開發(fā)基礎(chǔ)Canvas
學(xué)員能力體現(xiàn):

- 能夠使用 HTML5 技術(shù)開發(fā)網(wǎng)頁游戲;
- 能夠使用 WebGL 技術(shù)完成炫酷 3D 類圖形效果;
- 能夠掌握常用的可視化庫的應(yīng)用;
- 能夠使用 Three.js 開發(fā)簡單的 3D 網(wǎng)頁游戲;
- 能夠使用 HTML5 游戲引擎開發(fā)網(wǎng)頁游戲。

關(guān)鍵詞:
WebGL、Three.js、H5 游戲、游戲引擎、Cocos2d-x、Egret
網(wǎng)頁高性能圖形編程WebGL
圖形化開發(fā)庫Three.js、D3.js
HTML5 游戲引擎Cocos2d-x、Egret
第十二階段:
架構(gòu)與運維
前端性能優(yōu)化JSPerf、YSlow、PageSpeed
學(xué)員能力體現(xiàn):

- 能夠通過不同的工具發(fā)現(xiàn) Web 項目的性能瓶頸并加以解決;
- 能夠掌握使用不同的工具和平臺對項目及代碼進行質(zhì)量監(jiān)測;
- 能夠使用不同的自動化測試框架完成項目的單元測試和集成測試;
- 能夠使用 Jenkins、TravisCI 等工具對項目進行持續(xù)集成和持續(xù)部署;
- 能夠掌握基本的 Linux 服務(wù)器操作與維護;
- 能夠掌握 Nginx Web 服務(wù)器的搭建與配置;
- 了解 Docker 容器化平臺的基本操作。

關(guān)鍵詞:
JSPerf、YSlow、PageSpeed、E2E、QA、Jest、AVA、Nightmare、持續(xù)集成、持續(xù)部署、Jenkins、Nginx、Docker
項目質(zhì)量監(jiān)測Lint、e2e test、codecov、Benchmark
自動化測試Mocha、Jest、AVA、Karma、Nightmare
持續(xù)集成與持續(xù)部署Jenkins、TravisCI、CircleCI
Linux 服務(wù)器Nginx、HTTP(s)、ECS、RDS、SLB 云服務(wù)
容器化運維操作Docker 操作、部署、運維

備注:該課程大綱僅供參考,實際課程內(nèi)容可能在授課過程中發(fā)生更新或變化,具體授課內(nèi)容最終以各班級課表為準(zhǔn)。

基礎(chǔ)差? 可免費學(xué)基礎(chǔ)班

申請試讀名額

基礎(chǔ)過關(guān)? 可直接就讀就業(yè)班

基礎(chǔ)測試

HTML&JS+前端學(xué)科項目介紹

  • 京東項目

    項目簡介:

    京東項目是通過電子商務(wù)模式為主導(dǎo)開展起來的項目。該項目涵蓋了基本的DOM操作、面向?qū)ο笏枷牒褪录幚砑疤匦?nèi)容。

    項目特色:

    項目基于HTML+CSS+JavaScript搭建動態(tài)頁面實現(xiàn),包含網(wǎng)頁布局,網(wǎng)頁特效,瀏覽器兼容性處理。其中包括JavaScript基本操作和DOM基本元素操作及常見事件處理,涵蓋頁面常見效果輪播圖、放大鏡、tab欄切換等基本特效實現(xiàn),完成此項目基本可以獨立

  • 博學(xué)谷后臺管理系統(tǒng)

    項目簡介:

    該項目主要實現(xiàn)在線教育平臺相關(guān)資源數(shù)據(jù)的管理功能,主要實現(xiàn)講師、課程等數(shù)據(jù)資源的增刪改查等相關(guān)操作。

    項目特色:

    該項目緊密聯(lián)系實際工作場景,整合了很多常用的前端插件,融入真實的業(yè)務(wù)場景,并且包含了前端相關(guān)的jQuery、Ajax,文件上傳、后臺接口對接等大量的知識點,可以在強化知識點掌握的同時進一步培養(yǎng)實踐能力

  • 移動端宣傳頁

    項目簡介:

    如何快速抓住用戶眼球:二維碼掃描->跳轉(zhuǎn),朋友圈分享->跳轉(zhuǎn)。移動設(shè)備這類操作在頻繁不過了.跳轉(zhuǎn)之后看到的都是一個酷炫的宣傳頁面,有聲音,有動畫,可能還會有定位等功能,那么這個頁面在移動端如何通過HTML5 & CSS3等技術(shù)去實現(xiàn)呢

    項目特色:

    使用HTML5原生技術(shù)實現(xiàn)媒體播放功能,結(jié)合第三方地圖API實現(xiàn)定位及地圖繪制,使用CSS3實現(xiàn)酷炫的過渡,動畫效果,運用動畫框架來制作一些更有靈性的動畫;頁面之間的滑動切換效果,原生跟框架的實現(xiàn)方式,咱們都來一遍,讓大伙真實體驗到公司中此類頁面的開發(fā)“姿勢”

  • 樂乎(輕博客)

    項目簡介:

    人們溝通的方式增多了,但是如何找到志同道合的人呢,輕博客正越來越受到咱們年輕人的歡迎,可以分享生活,分享心得,通過發(fā)現(xiàn)以及創(chuàng)建圈子快速找到感興趣的話題.如果不想分享內(nèi)容,也可以做一個安靜的觀眾,靜靜地看著他人分享的精彩生活;無論哪種方式都能夠讓你收獲精彩的內(nèi)容.

    項目特色:

    :體驗移動端webAPP的開發(fā)方式,掌握如何在種類繁多的屏幕中實現(xiàn)顯示效果統(tǒng)一,如何在不同的移動操作系統(tǒng)下處理諸如字體設(shè)置,圖片設(shè)置等問題.喜歡原生,沒問題,我們一起來手寫頁面;想要快速開發(fā),沒問題,我們一同體驗框架開發(fā)的簡單與高效。CSS代碼增多,維護與編寫成本增加,我們有CSS預(yù)處理程序來幫忙。多角度,多方向讓大伙感受移動端webAPP的開發(fā)"姿勢"

  • 電商項目

    項目簡介:

    該項目是基于鞋類的垂直電商平臺,改項目包含整個電商核心模塊,用戶模塊,購物車模塊,分類模塊,商品模塊,產(chǎn)品模塊。報表模塊.. 系統(tǒng)前臺是面向網(wǎng)站用戶訪問的,用戶可以通過移動端進行注冊,修改個人的一些信息,商品搜索,把商品保存到自己的購物車。系統(tǒng)后臺是面向電商后臺管理人員使用的,主要功能包含用戶管理,分類管理,品牌管理,商品管理,報表統(tǒng)計等功能。

    項目特色:

    1:該項目移動端采用當(dāng)前流行的mui移動框架搭建而成,使移動端的開發(fā)變得簡單高效;2:獨立頁面里面采用流式布局,rem,以及伸縮布局來搭建內(nèi)層網(wǎng)頁;3:該項目所有的交互都采用前后端分離,移動端使用各種交互特效,下拉刷新,滾動加載等特效; 4:后臺采用bootstrap 進行頁面布局,后臺開發(fā)迅速方便維護,使用bootstrap 的常見的插件;5:后臺使用jQuery fileupload 上傳組件,支持多文件上傳,以及預(yù)覽的功能;6:使用echart 技術(shù)做相關(guān)的報表統(tǒng)計技術(shù)"

  • cms系統(tǒng)

    項目簡介:

    整個項目使用webpack打包工具集合Vue.js框架完成一個移動版的webapp,整個項目完全從0起步一步步帶領(lǐng)學(xué)員完成腳手架的搭建,單頁程序的架構(gòu)以及新聞資訊,圖片分享,商品購買,購物車,登錄等功能,并且整個項目開發(fā)流程完全模擬團隊協(xié)作,使用git進行版本管理

    項目特色:

    純手工實現(xiàn)一個個功能,主要邏輯拒絕拷貝代碼。以真實項目作為原型來實現(xiàn)其中的一部分功能,業(yè)務(wù)都是公司常用的。教會學(xué)員如何去查找開源組件,并且用在項目中滿足業(yè)務(wù)的開發(fā),授人以魚不如授人以漁。項目的講解過程幾乎接近于公司真實項目的開發(fā)和協(xié)作流程,例如:交互稿,UI設(shè)計稿都有

 

HTML&JS+前端面授視頻試聽

  • 二維碼圖片的方式(上)

  • 二維碼圖片的方式(下)

  • ifelse和代碼的調(diào)試

  • 表單元素(一)

  • 表單元素(二)

  • 數(shù)組

申請免費線下基礎(chǔ)班試聽名額

教學(xué)服務(wù)

  • 每日測評

    每晚對學(xué)員當(dāng)天知識的吸收程度、老師授課內(nèi)容難易程度進行評分,老師會根據(jù)學(xué)員反饋進行分析,對學(xué)員吸收情況調(diào)整授課內(nèi)容、課程節(jié)奏,最終讓每位學(xué)員都可以跟上班級學(xué)習(xí)的整體節(jié)奏。

  • 技術(shù)輔導(dǎo)

    為每個就業(yè)班都安排了一名優(yōu)秀的技術(shù)指導(dǎo)老師,不管是白天還是晚自習(xí)時間,隨時解答學(xué)員問題,進一步鞏固和加強課上知識。

  • 學(xué)習(xí)系統(tǒng)

    為了能輔助學(xué)員掌握所學(xué)知識,黑馬程序員自主研發(fā)了6大學(xué)習(xí)系統(tǒng),包括教學(xué)反饋系統(tǒng)、學(xué)習(xí)難易和吸收分析系統(tǒng)、學(xué)習(xí)測試系統(tǒng)、在線作業(yè)系統(tǒng)、學(xué)習(xí)任務(wù)手冊、學(xué)員綜合能力評定分析等。

  • 末位輔導(dǎo)

    末位輔導(dǎo)隊列的學(xué)員,將會得到重點關(guān)心。技術(shù)輔導(dǎo)老師會在學(xué)員休息時間,針對學(xué)員的疑惑進行知識點梳理、答疑、輔導(dǎo)。以確保知識點掌握上沒有一個學(xué)員掉隊,真正落實不拋棄,不放棄任何一個學(xué)員。

  • 生活關(guān)懷

    從學(xué)員學(xué)習(xí)中的心態(tài)調(diào)整,到生活中的困難協(xié)助,從課上班級氛圍塑造到課下多彩的班級活動,班主任360度暖心鼓勵相伴。

  • 就業(yè)輔導(dǎo)

    小到五險一金的解釋、面試禮儀的培訓(xùn);大到500強企業(yè)面試實訓(xùn)及如何針對性地制定復(fù)習(xí)計劃,幫助學(xué)員拿到高薪Offer。

和我們在線交談!