青島前端工程師web前端培訓(xùn)

苐一階段：PC端

Photoshop

photoshop切圖基礎(chǔ)

HTML/css

1.**ml基本標(biāo)簽/塊級(jí)元素vs內(nèi)聯(lián)元素

2.*SS基礎(chǔ)語(yǔ)法/選擇器/基礎(chǔ)屬性/有效寬度/浮動(dòng)

3.盒模型/文字/背景/列表/

4.定位/顯示/偽類

5.優(yōu)先級(jí)/頁(yè)面布局規(guī)范流程/分組繼承層疊/雪碧圖/表單樣式

JavaScript

1.基礎(chǔ)語(yǔ)法（變量/數(shù)據(jù)類型/運(yùn)算符/typepf/類型轉(zhuǎn)換 )

2.對(duì)象/數(shù)組/函數(shù)/閉包/

3.條件語(yǔ)句/循環(huán)語(yǔ)句/

4.對(duì)象操作方法

5.*OM操作、綁定/移除事件

6.*OM、定時(shí)器

jQuery

1.****ry引用/基礎(chǔ)語(yǔ)法/選擇器/事件/事件委托

2.屬性樣式/DOM樹遍歷/DOM操作

3.****ry動(dòng)畫原理/內(nèi)置動(dòng)畫/自定義動(dòng)畫

4.表單操作/數(shù)據(jù)提交/表單驗(yàn)證

5.常用插件layer/swiper等常用插件

CSS3

1.**S3支持/文字/字體圖標(biāo)/盒模型/背景/邊框/圓角

2.2***************過(guò)渡效果

項(xiàng)目實(shí)戰(zhàn)

PC大型商城項(xiàng)目

第二階段：移動(dòng)端web開(kāi)發(fā)

flex彈性布局

1.傳統(tǒng)布局的局限性、Flex布局優(yōu)勢(shì)、父級(jí)容器常見(jiàn)屬性設(shè)置

2.子級(jí)項(xiàng)目常見(jiàn)屬性設(shè)置

移動(dòng)端布局

1.移動(dòng)端屏幕介紹、移動(dòng)端介紹、移動(dòng)端操作系統(tǒng)介紹、真機(jī)調(diào)試

2.******rt 視口、rem/vw/vh單位的使用、媒體查詢

3.響應(yīng)式適配解決方案、常見(jiàn)移動(dòng)端樣式兼容方案

bootstrap

1.基礎(chǔ)使用、柵格系統(tǒng)、CSS基礎(chǔ)樣式、插件系統(tǒng)

小項(xiàng)目

1.基于媒體查詢的uemo響應(yīng)式網(wǎng)站

HTML5 API

1.***l5支持/新元素/新屬性/拖拽事件/自定義標(biāo)簽

2.****as 基礎(chǔ)繪制語(yǔ)法/canvas動(dòng)畫

3.***L5多媒體相關(guān)（Video/Audio）

4.本地存儲(chǔ)/離線應(yīng)用程序

5.f*****ader對(duì)象/獲取地理位置坐標(biāo)/百度地圖API

6.觸摸事件/hammer.js觸摸插件

項(xiàng)目實(shí)戰(zhàn)

1.移動(dòng)端微商城/web APP

第三階段：Nodejs與AJAX

后端API開(kāi)發(fā)

1.*****js 一天快速入門（安裝/common規(guī)范/npm常用指令）

2.*****ss開(kāi)發(fā)框架--安裝與初始化、靜態(tài)資源處理

3.路由系統(tǒng)、調(diào)試 Express 應(yīng)用、常用 API

4.前后端分離架構(gòu)模式、API接口設(shè)計(jì)、接口測(cè)試工具

5.***QL數(shù)據(jù)庫(kù)環(huán)境搭建、Navicate MySQL界面化工具

6.常用SQL語(yǔ)句、CRUD、關(guān)聯(lián)表查詢

7.***QL包安裝以及使用

AJAX

1.**AX原理分析、同步與異步、GET/POST

2.**ON數(shù)據(jù)/AJAX操作/拓展的XMLHttpRequest API方法

3.****ry 的 AJAX 相關(guān) API 使用

4.前端模板引擎artTemplate

5.跨域請(qǐng)求及解決方案

小項(xiàng)目

基于jQuery+bootstrap的員工、客戶管理系統(tǒng)

第四階段：MVVM框架

ECMAScript新語(yǔ)法

1.E*****ript標(biāo)準(zhǔn)、let/const、解構(gòu)賦值

2.字符串、對(duì)象、函數(shù)、數(shù)組的擴(kuò)展語(yǔ)法

3.面向?qū)ο笏枷搿⒐S模式、構(gòu)造函數(shù)、原型以及原型鏈、原型繼承

4.***ss類、Module模塊

5.回調(diào)函數(shù)、Promise 對(duì)象、Async 函數(shù)

Vue

1.*ue 實(shí)例、Vu**.0新特性、文本與屬性綁定、Class 與 Style 綁定、條件渲染、列表渲染

2.事件處理、表單輸入綁定、計(jì)算屬性 computed

3.*ue 實(shí)例生命周期、Vue 過(guò)渡和動(dòng)畫

4.模塊化開(kāi)發(fā)、Vue組件系統(tǒng)

5.*****LI安裝、創(chuàng)建項(xiàng)目、目錄解析、配置項(xiàng)

6.*SS預(yù)處理器SASS

7.V*****uter基礎(chǔ)路由、路由傳參、嵌套路由

8.編程式導(dǎo)航、路由組件傳參、導(dǎo)航守衛(wèi)、路由元數(shù)據(jù)

9.**AX通信Vue-axios/Vue生命周期/路由跳轉(zhuǎn)獲取數(shù)據(jù)

10******nt UI框架構(gòu)建商品管理后臺(tái)

11***eX倉(cāng)庫(kù)管理，權(quán)限管理

12***eX倉(cāng)庫(kù)管理，權(quán)限管理

項(xiàng)目實(shí)戰(zhàn)

1.基于vue+axios+vue-router+Element UI的商品后臺(tái)管理系統(tǒng)

React

1.***ct 框架介紹、安裝與初始化、create-react-app 腳手架工具

2.***ct 組件系統(tǒng)、JSX 語(yǔ)法、事件處理

3.條件渲染、列表渲染和 key、表單處理

4.***ct Router 路由系統(tǒng)

5.***ux 狀態(tài)管理架構(gòu)

6.***os 請(qǐng)求庫(kù)、生命周期

7.*SS Modules

8.***ct Hooks

項(xiàng)目實(shí)戰(zhàn)

基于react框架的移動(dòng)端商城系統(tǒng)

第五階段：Hybrid APP 開(kāi)發(fā)

微信小程序

1.微信4種平臺(tái)區(qū)別、注冊(cè)流程

2.創(chuàng)建基礎(chǔ)項(xiàng)目、目錄解析、配置文件

3.視圖層-頁(yè)面樣式布局、WXSS

4.邏輯層--數(shù)據(jù)渲染、綁定事件、事件傳參、獲取/修改data

5.調(diào)試面板，調(diào)試

6.網(wǎng)絡(luò)通信配置、封裝AJAX方法、數(shù)據(jù)交互

7.路由組件、路由傳參、編程式導(dǎo)航

8.小程序登錄流程、授權(quán)、獲取用戶信息

9.微信支付流程/打包、發(fā)布版本

項(xiàng)目實(shí)戰(zhàn)

1.基于小程序的購(gòu)物商城