大連WEB前端工程師課程

Web前端培訓(xùn)課程

階段一：前端基礎(chǔ)入門

1、HTML5基礎(chǔ)語法與標(biāo)簽

這是入門前端的，學(xué)會IDE插件安裝和使用，掌握H5語法和基礎(chǔ)標(biāo)簽的應(yīng)用，學(xué)完這些內(nèi)容可以進行簡單的頁面結(jié)構(gòu)搭建。

課程安排：

1、了解前端行業(yè)發(fā)展

2、了解HTML5對于網(wǎng)頁的意義

3、學(xué)習(xí)常用標(biāo)簽/屬性，進行結(jié)構(gòu)搭建

4、掌握無序列表/有序列表/自定義列表

5、學(xué)習(xí)表單標(biāo)簽/屬性，能創(chuàng)建常見表單結(jié)構(gòu)

6、掌握標(biāo)簽嵌套規(guī)則/行內(nèi)元素/塊元素的使用

7、學(xué)習(xí)VSCode開發(fā)工具使用，能創(chuàng)建簡單網(wǎng)頁

2、CSS3基礎(chǔ)語法與盒模型

CSS3是網(wǎng)頁的"美容師"，開始學(xué)習(xí)CSS3樣式，掌握語法結(jié)構(gòu)、選擇器、盒子模型、文本和字體樣式設(shè)置，能夠?qū)W(wǎng)頁進行簡單的樣式開發(fā)。

課程安排：

1、掌握CSS3基本語法和使用

2、掌握CSS3各類選擇器/樣式屬性，快速進行樣式設(shè)置

3、學(xué)習(xí)文本、字體等常見屬性

4、盒子模型核心知識講解，深入理解原理

5、掌握行內(nèi)元素和塊級元素設(shè)置與轉(zhuǎn)換

3、CSS3浮動定位與背景樣式

簡單的樣式開發(fā)還不夠，通過掌握浮動、定位、邊框、背景樣式以及2D&3D轉(zhuǎn)換，以及布局技巧。能夠進行特殊圖形繪制，開發(fā)更美觀的網(wǎng)頁效果。

課程安排：

1、浮動與定位核心知識，靈活運用實現(xiàn)網(wǎng)頁布局

2、常見布局方法，解決布局常見問題

3、如何繪制圓角邊框/陰影框/圖片邊框等特殊圖形

4、掌握元素扭曲/移位/旋轉(zhuǎn)，更自由的裝飾HTML

5、BFC規(guī)范和瀏覽器差異

4、CSS3動畫與窮游首頁開發(fā)實戰(zhàn)

CSS3也能實現(xiàn)炫酷的網(wǎng)頁動態(tài)效果，結(jié)合企業(yè)級上線“旅游網(wǎng)”項目，綜合運用前面所學(xué)的知識，完成窮游首頁排版布局和CSS3動畫特效開發(fā)。

課程安排：

1、大項目：結(jié)合H5/CSS3，完成PC端仿窮游首頁布局開發(fā)

2、掌握不同布局結(jié)構(gòu)與技巧

3、掌握過渡的使用與緩動效果，實現(xiàn)常見小案例

4、運用動畫效果，實現(xiàn)炫酷動畫效果

5、大作業(yè)：棧家居網(wǎng)頁布局開發(fā)

5、JS基礎(chǔ)語法與表達式

JS是網(wǎng)頁編程，開始學(xué)習(xí)JS編程語言，掌握基礎(chǔ)語法結(jié)構(gòu)、變量聲明和命名規(guī)則、數(shù)據(jù)類型、表達式和操作符，學(xué)完這些內(nèi)容可以進行簡單的JS代碼編寫。

課程安排：

1、掌握JS基本語法使用

2、掌握JS變量聲明與提升的機理

3、掌握JS運算符操作與表達式

4、學(xué)習(xí)基本數(shù)據(jù)類型和復(fù)雜數(shù)據(jù)類型使用

5、深入理解數(shù)據(jù)類型轉(zhuǎn)換與檢測

6、小案例：計算器和表達式綜合運用

6、JS流程控制語句與數(shù)組

繼續(xù)深入學(xué)習(xí)JS編程語言，掌握條件分支語句、循環(huán)語句和數(shù)組，學(xué)完這些內(nèi)容可以用簡潔的代碼實現(xiàn)強大功能。

課程安排：

1、掌握if，if elseif，switch等條件分支語句使用

2、掌握for、while、do while循環(huán)語句使用

3、掌握數(shù)組基本使用和常用方法

4、break和continue語句的特點及應(yīng)用

5、運用數(shù)組知識，學(xué)習(xí)基本算法

6、使用簡單的邏輯實現(xiàn)復(fù)雜業(yè)務(wù)邏輯

7、小案例：常見算法綜合運用

7、JS函數(shù)與DOM

如想實現(xiàn)更炫的動態(tài)效果，那么操控網(wǎng)頁元素很重要，通過掌握函數(shù)編程、DOM操作、事件以及BOM對象，讓你能實現(xiàn)典型的觸發(fā)和動態(tài)交互效果。

課程安排：

1、掌握DOM操作和DOM事件

2、掌握函數(shù)基礎(chǔ)與函數(shù)高級應(yīng)用

3、掌握BOM瀏覽器對象模型，與瀏覽器“對話”

4、掌握函數(shù)封裝，提升編碼質(zhì)量

5、小案例：有趣的動畫效果開發(fā)

8、面向?qū)ο?/h3>

面向?qū)ο笫情_發(fā)中非常重要的思想，我們將開始運用面向?qū)ο笏枷脒M行程序開發(fā)，編寫高質(zhì)量代碼，解決企業(yè)級編程協(xié)同問題。

課程安排：

1、學(xué)習(xí)this規(guī)則與使用

2、掌握構(gòu)造函數(shù)概念以及創(chuàng)建、調(diào)用與使用

3、理解原型和原型鏈的關(guān)系與運用

4、閉包和作用域應(yīng)用

5、熟練使用面向?qū)ο笏枷脒M行DOM編程

6、掌握JS模塊化編程方式，編寫高質(zhì)量代碼

7、掌握模塊化開發(fā)技巧，解決企業(yè)級編程協(xié)同問題

8、小案例：俄羅斯方塊游戲開發(fā)

9、項目實戰(zhàn)：仿窮游JS特效開發(fā)

實戰(zhàn)出真知，綜合運用H5、CSS3和JS所學(xué)知識，從0到1完成一個具備CSS3動畫和JS特效的多特效旅游網(wǎng)頁。掌握企業(yè)常見的網(wǎng)頁開發(fā)方式和各類特效實現(xiàn)方案。

課程安排：

1、結(jié)合H5/CSS3/JS，完成PC端仿窮游首頁特效開發(fā)

2、項目動畫效果分析，幫助更快梳理思路

3、實現(xiàn)典型JS特效效果：Banner圖、返回頂部動畫、垂直菜單

4、學(xué)習(xí)正則表達式，完成常見手機號、郵箱、姓名等功能驗證

3、大作業(yè)：棧家居網(wǎng)頁JS特效開發(fā)

階段二：組件化與移動WebApp開發(fā)

1、ES6基礎(chǔ)入門

ES6是JavaScript新的語法規(guī)范，讓代碼更規(guī)范、可讀性高、方便操作。將開啟ES6的學(xué)習(xí)，這是學(xué)習(xí)前端必備的一步。掌握ES6相關(guān)知識后，能夠更便捷的編寫代碼，提高開發(fā)效率。

課程安排：

1、ES6基本語法與使用

2、掌握ES6中變量和常量的使用與區(qū)別

3、學(xué)習(xí)可以嵌入表達式的字符串字面量--模板字符串

4、掌握箭頭函數(shù)的特點與應(yīng)用

5、掌握如何自動解析數(shù)組或?qū)ο笾械闹?/p>

6、了解對象字面量更加簡潔與靈活的表達方式

7、掌握參數(shù)默認值的使用

2、ES6語法擴展

繼續(xù)學(xué)習(xí)ES6的基礎(chǔ)，通過進一步學(xué)習(xí)ES6引入的新特性，了解ES6的新方法，掌握新的集合類型，更深入的了解數(shù)據(jù)的遍歷。

課程安排：

1、剩余參數(shù)與展開運算符的對比進行學(xué)習(xí)

2、了解如何實現(xiàn)減少邏輯或操作符的使用

3、認識ES6中新增的數(shù)據(jù)結(jié)構(gòu)

4、了解ES6中新增的方法

5、了解遍歷原理，以及學(xué)習(xí)新的循環(huán)方式

3、ES6之Promise與Class類

Promise 和 Class（類）是ES6中非常重要的知識點。Promise 是異步編程的一種解決方案，比傳統(tǒng)的回調(diào)函數(shù)更合理和更強大。Class（類）來作為對象的模板使用，強化面向?qū)ο蟮氖褂谩?/p>

課程安排：

1、學(xué)習(xí)如何高效解決回調(diào)地域問題

2、了解如何運用ES6 Promise進行異步編程

3、掌握Class基本語法的使用

4、掌握更加清晰與便捷的對象繼承方式

5、掌握更高級的面向?qū)ο缶幊趟枷?/p>

4、ES6之Module模塊與Babel編譯

ES6 在語言標(biāo)準(zhǔn)的層面上，實現(xiàn)了模塊功能?？梢詫崿F(xiàn)將一個大程序拆分成互相依賴的小文件。而babel的使用，完美的解決了ES6的兼容性問題，讓ES6有更多可能性，使前后端差異越來越小。

課程安排：

1、了解企業(yè)級的開發(fā)形式——模塊化的使用

2、學(xué)習(xí)將一個復(fù)雜的功能拆分，從而提高復(fù)用率

3、了解如何更好的維護代碼

4、掌握babel轉(zhuǎn)換器的使用，解決ES6的兼容問題

5、學(xué)習(xí)如何將Webpack與配合Babel使用，完成更高效的開發(fā)

6、掌握Webpack項目構(gòu)建配置

5、HTTP 協(xié)議、存儲、Ajax

開啟前后端數(shù)據(jù)交互的學(xué)習(xí)，來理解前后端開發(fā)的區(qū)別，了解網(wǎng)絡(luò)通信的相關(guān)概念，并對與后臺通信、獲取數(shù)據(jù)有一個初體驗。概念比較抽象，先作為了解。在后面項目開發(fā)環(huán)節(jié)，隨著對知識的運用，對概念會有更深一步的理解。

課程安排：

1、了解如何區(qū)分前后端

2、理解HTTP協(xié)議，熟悉網(wǎng)絡(luò)通信相關(guān)概念

3、學(xué)習(xí)本地存儲的多種方式，了解數(shù)據(jù)緩存機制

4、了解JOSN數(shù)據(jù)的幾種書寫格式

5、熟悉原生Ajax請求流程與細節(jié)

6、掌握常見的跨域技巧

7、學(xué)習(xí)如何自己封裝Ajax

8、了解基于promise的Ajax插件——Axios

6、項目實戰(zhàn)：仿窮游組件化開發(fā)

組件化開發(fā)是一種高級編程思想，適用于團隊協(xié)作開發(fā)，是企業(yè)中常見的一種開發(fā)模式。會使用組件化方式來完成“仿窮游商城首頁”的重構(gòu)。掌握組件化開發(fā)能夠更好的促進團隊協(xié)作，提高開發(fā)和調(diào)試效率，可維護性更高。

課程安排：

1、綜合運用H5/CSS3/ES6等知識，使用“組件化的開發(fā)思想”重構(gòu)旅游網(wǎng)首頁

2、了解項目組件化劃分方式

3、了解模塊化與組件化區(qū)別

4、采用模塊化與組件化結(jié)合的開發(fā)方式

5、使用Webpack構(gòu)建項目

6、運用 art-template 模板引擎，高效開發(fā)

7、真實的數(shù)據(jù)接口，實現(xiàn)前后臺聯(lián)動

8、通過自己封裝的Ajax向后端請求數(shù)據(jù)

9、使用Class、Module模塊完成圖的基類，實現(xiàn)模塊化，提高復(fù)用率

7、移動基礎(chǔ)

移動開發(fā)基礎(chǔ)是進行webApp開發(fā)。開啟前端學(xué)習(xí)的新篇章。通過移動端基礎(chǔ)知識的學(xué)習(xí)，能夠獨立實現(xiàn)適配不同移動端終端的頁面。

課程安排：

1、學(xué)習(xí)移動基礎(chǔ)概念

2、理解移動端與pc端web開發(fā)的區(qū)別

3、掌握移動端常用的Rem適配方案

4、掌握Flex布局的使用

5、學(xué)習(xí)響應(yīng)式布局開發(fā)

6、不同的適配方法

7、學(xué)習(xí)柵格系統(tǒng)的使用

8、了解移動端屏幕、移動端瀏覽器、操作系統(tǒng)的不同

8、移動進階之高效開發(fā)

移動端高質(zhì)量的開發(fā)，是移動端開發(fā)的必備技能。繼續(xù)移動端的學(xué)習(xí)，學(xué)習(xí)移動端的事件、開發(fā)中的常見問題，以及如何使項目的性能更加優(yōu)化。

課程安排：

1、掌握移動端常用的事件

2、小案例：移動端幻燈片的實現(xiàn)

3、移動端開發(fā)中常見的問題

4、主流移動端頁面開發(fā)技術(shù)選型與解決方案

5、學(xué)習(xí)如何從HTML、CSS、JavaScript三方面優(yōu)化性能

9、項目實戰(zhàn)：仿窮游移動webapp開發(fā)

接下來的一周，我們將迎來webApp項目的開發(fā)，實現(xiàn)從PC端開發(fā)邁向移動端。從項目分析、組件劃分、結(jié)構(gòu)搭建、功能實現(xiàn)、性能優(yōu)化。體驗真實企業(yè)中移動端項目的開發(fā)流程

課程安排：

1、綜合運用H5/CSS3/ES6/移動知識，重構(gòu)旅游網(wǎng)WebAPP的首頁、目的地頁

2、符合企業(yè)標(biāo)準(zhǔn)的開發(fā)流程，從項目分析、項目搭建、模塊開發(fā)到數(shù)據(jù)對接

3、采用模塊化與組件化結(jié)合的開發(fā)方式

4、使用Webpack構(gòu)建項目

5、運用 art-template 模板引擎，高效開發(fā)。

6、完成 18 個典型組件開發(fā)（搜索、商品、導(dǎo)航等組件）

7、運用Swiper高效移動端插件開發(fā)Banner圖

8、使用Ajax 處理與獲取數(shù)據(jù)

9、如何處理多次請求的解決方案

10、如何運用組件化思維，拆分和復(fù)用組件

11、完成各組件性能的優(yōu)化

階段三：小程序與主流框架開發(fā)

1、小程序基礎(chǔ)與棧程小程序?qū)崙?zhàn)

開始學(xué)習(xí)爆火的輕應(yīng)用開發(fā)技術(shù)——小程序 。通過對小程序知識的學(xué)習(xí)，能夠獨立開發(fā)企業(yè)級小程序，擁有解決主流小程序功能需求的能力。

課程安排：

1、大項目：結(jié)合Flex/Template模板，開發(fā)棧程小程序首頁/活動頁/熱門排行頁

2、了解小程序注冊流程/注冊方式/注冊主體

3、小程序的全局生命周期和頁面級生命周期

4、小程序基礎(chǔ)語法與常用API

5、小程序開發(fā)工具的調(diào)試辦法

6、小程序多頁面下的開發(fā)工作流及目錄結(jié)構(gòu)

2、React.js基礎(chǔ)語法與新聞網(wǎng)站實戰(zhàn)

React.js是企業(yè)開發(fā)熱門框架之一 。通過對React.js基礎(chǔ)和項目的學(xué)習(xí)，具備構(gòu)建企業(yè)級項目和解決核心業(yè)務(wù)問題的能力，快速接入企業(yè)項目。

課程安排：

1、大作業(yè)：運用React組件完成新聞網(wǎng)站項目常見功能開發(fā)

2、理解React的開發(fā)理念與內(nèi)部原理

3、React的基本使用及Ant Design組件庫進行項目開發(fā)

4、使用React封裝項目中用到組件，實現(xiàn)復(fù)用

5、React項目中常見問題的解決方案

6、如何運用React-Redux進行狀態(tài)管理

7、聲明式編程的思想與組件化開發(fā)的思想

3、Sass基礎(chǔ)與Vue.js基礎(chǔ)語法

Vue.js是企業(yè)開發(fā)另一熱門框架，易用、靈活、高效，對于初學(xué)者很友好。通過對Vue.js基礎(chǔ)和Sass布局技術(shù)的學(xué)習(xí)，為后續(xù)的全棧項目開發(fā)打下基礎(chǔ)。

課程安排：

1、大作業(yè)：訂單列表和購物車列表頁

2、掌握Webpack項目構(gòu)建配置

3、掌握基礎(chǔ)語法與常見API

4、組件的使用及組件的生命周期

5、Axios網(wǎng)絡(luò)請求及路由使用

6、Vuex的引入、應(yīng)用場景及項目中的實現(xiàn)

7、使用Vue.js技術(shù)棧進行項目開發(fā)的方式方法

8、掌握Sass布局基礎(chǔ)

4、項目實戰(zhàn)：Vue.js仿京東到家電商全棧項目前端開發(fā)（上）

開始進入到電商全棧項目開發(fā)，首先使用Vue.js前端實戰(zhàn)的首頁和商家詳情頁，還原實際開發(fā)流程，綜合運用所學(xué)知識，完成頁面開發(fā)，掌握開發(fā)中常見問題解決技巧。

課程安排：

1、綜合運用Sass和Vue.js完成登錄頁/注冊頁/首頁/商家詳情頁

2、使用vue-cli4.0創(chuàng)建開發(fā)環(huán)境

3、使用axios發(fā)送Mock請求

4、使用路由守衛(wèi)實現(xiàn)基礎(chǔ)登陸校驗功能

5、動態(tài)路由/異步路由與組件拆分復(fù)用

6、首頁/商家詳情頁數(shù)據(jù)渲染

7、Vue.js項目中常見問題的解決方案

5、項目實戰(zhàn)：Vue.js仿京東到家電商全棧項目前端（下）

Vue.js前端項目實戰(zhàn)的第二部分，實現(xiàn)電商核心業(yè)務(wù)訂單和地址管理模塊，掌握開發(fā)中常見問題解決技巧，真實數(shù)據(jù)訪問，開發(fā)完整的Vue.js電商前端項目。

課程安排：

1、綜合運用Sass和Vue.js完成訂單提交頁/地址列表頁/地址編輯/地址新建頁

2、使用axios發(fā)送Mock 請求

3、動態(tài)路由/異步路由與組件拆分復(fù)用

4、訂單提交頁/地址列表頁數(shù)據(jù)渲染

5、Vue.js項目中常見問題的解決方案

6、步驟大作業(yè)：完成訂單列表頁和購物車列表頁開發(fā)

階段四：Node.js全棧開發(fā)

1、全棧必備基礎(chǔ)Node.js

學(xué)前端不至于前端，開始學(xué)習(xí)服務(wù)端基礎(chǔ)知識，掌握什么是服務(wù)端以及服務(wù)端必備node.js，夯實基礎(chǔ)，邁進前端全棧開發(fā)。

課程安排：

1、案例：搭建node.js服務(wù)器及創(chuàng)建MongoDB數(shù)據(jù)庫

2、了解什么是服務(wù)端，服務(wù)端與前端的關(guān)系

3、掌握commonjs模塊化與npm插件使用

4、掌握inspect調(diào)試方法

2、koa2中間件與MongoDB數(shù)據(jù)庫

真實企業(yè)開發(fā)離不開數(shù)據(jù)庫，Koa2框架有效的提高開發(fā)效率，掌握前端必備的前端全棧開發(fā)知識，為后面開發(fā)全棧項目蓄力。

課程安排：

1、了解koa2中間件與洋蔥圈模型

2、了解關(guān)系型數(shù)據(jù)庫與MongoDB基礎(chǔ)API詳解

3、掌握node.js操作MongoDB方法與mongoose規(guī)范數(shù)據(jù)模型

3、項目實戰(zhàn)：node.js仿京東到家電商全棧項目后端開發(fā)

開始進入到電商全棧項目的后端開發(fā)，對標(biāo)企業(yè)標(biāo)準(zhǔn)開發(fā)流程。從登錄實現(xiàn)方案、項目需求分析、接口和數(shù)據(jù)結(jié)構(gòu)設(shè)計到業(yè)務(wù)開發(fā)，幫你打通前后端任督二脈，突破全棧技術(shù)瓶頸，為就業(yè)加碼。

課程安排：

1、綜合運用Node.js+koa2+MongoDB，實現(xiàn)電商全棧項目的后端

2、掌握企業(yè)的開發(fā)流程與技巧，從0到1一步步實現(xiàn)

3、項目采用前后端分離開發(fā)模式

4、核心業(yè)務(wù)的數(shù)據(jù)庫設(shè)計與實現(xiàn)

5、真實數(shù)據(jù)接口和設(shè)計與實現(xiàn)

6、Koa工作流程及常見Koa中間件使用

7、掌握前后端數(shù)據(jù)聯(lián)調(diào)技巧，打通前后的數(shù)據(jù)交互

8、常見MongoDB與nodejs集成

9、了解cookie 和session的關(guān)系

10、大作業(yè)：訂單和購物車列表頁的數(shù)據(jù)庫和接口設(shè)計

4、就業(yè)必備基礎(chǔ)技術(shù)面試分析

面試是通往成功就業(yè)的關(guān)鍵一步，包含布局基礎(chǔ)以及JS和ES6等常見考點和經(jīng)典面試題分析，帶你把知識串成線，掌握前端面試技巧，順利通過基礎(chǔ)技能面試。

課程安排：

1、H5語義化/CSS布局/定位/圖文樣式/響應(yīng)式面試解題技巧

2、原型和原型鏈的5個原則與面試解題技巧

3、變量類型/計算/構(gòu)造函數(shù)的面試解題技巧

4、作用域和閉包的執(zhí)行上下文/this面試解題技巧

5、異步和單線程/常見的內(nèi)置對象面試解題技巧

6、DOM本質(zhì)/節(jié)點操作/BOM操作面試解題技巧

7、AJAX與事件解面試題技巧

5、就業(yè)必備框架與全棧技術(shù)面試分析

框架、小程序以及全棧相關(guān)內(nèi)容也是面試必考。帶大家梳理的常見考點和經(jīng)典面試題分析，理清面試解題方法，完成最后一厘米的沖刺。

課程安排：

1、Vue.js原理/MVVM面試解題技巧

2、組件生命周期/父子組件傳值面試解題技巧

3、組件異步加載/緩存/抽離公共邏輯面試解題技巧

4、vue-router/data監(jiān)聽面試解題技巧+5道Vue.js真題演練

5、React基礎(chǔ)語法/事件面試解題技巧

6、React組件生命周期/父子組件通訊面試解題技巧

7、React函數(shù)組件與class組件區(qū)別面試解題技巧

8、Redux/react-router面試解題技巧