• 在線(xiàn)客服

長(zhǎng)沙源碼時(shí)代教育

Java培訓(xùn)、UI設(shè)計(jì)培訓(xùn)、產(chǎn)品經(jīng)理培訓(xùn)、軟件測(cè)試培訓(xùn)、新媒體+短視頻培訓(xùn)、全棧培訓(xùn)...

咨詢(xún)本校課程:
25018715784000-757-730
首頁(yè) >IT技術(shù) >前端開(kāi)發(fā) >html5
更新時(shí)間:2025-02-25 15:28:22

長(zhǎng)沙源碼時(shí)代H5前端訓(xùn)練營(yíng)

H5前端培訓(xùn)學(xué)校地址

授課機(jī)構(gòu) 長(zhǎng)沙源碼時(shí)代教育
上課地點(diǎn) 長(zhǎng)沙岳麓汽車(chē)西站|詳細(xì)地圖
成交/評(píng)價(jià) 5.0分
聯(lián)系電話(huà) 4000-757-730

課程詳情

什么是H5前端?
H5大前端是干什么的？
前端，即視覺(jué)交互是所有信息化軟件離不開(kāi)的話(huà)題。H5大前端是一個(gè)多元的綜合體，它主要包括 HTML、CSS 和JavaScript，以及由它們衍生出來(lái)的一個(gè)龐大的生態(tài)圈。
學(xué)科前景
有10億手機(jī)瀏覽器支持Web前端,同時(shí)HTML Web開(kāi)發(fā)者數(shù)量將達(dá)到200萬(wàn),HTML5將成為未來(lái)5年內(nèi),移動(dòng)互聯(lián)網(wǎng)領(lǐng)域的主宰者。據(jù)IDC的調(diào)查報(bào)告統(tǒng)計(jì),截至2015年底,有84%的移動(dòng)開(kāi)發(fā)商已經(jīng)決定要在其應(yīng)有程序中整合HTML5技術(shù)。
Web前端中的HTML5技術(shù)更是日趨成熟,HTML5是移動(dòng)互聯(lián)網(wǎng)前端的主流開(kāi)發(fā)語(yǔ)言，目前還沒(méi)有任何一種前端開(kāi)發(fā)技術(shù)能夠取代HTML5。
為什么要學(xué)H5大前端?
H5?大前端的就業(yè)方向是非常廣泛的，可以從事的工作，包含全行業(yè)涉及領(lǐng)域，UI 設(shè)計(jì)、網(wǎng)站管理、網(wǎng)頁(yè)設(shè)計(jì)、管理系統(tǒng)設(shè)計(jì)、交互平臺(tái)設(shè)計(jì)、APP 移動(dòng)界面設(shè)計(jì)、小程序開(kāi)發(fā)、用戶(hù)體驗(yàn)、產(chǎn)品設(shè)計(jì)、項(xiàng)目管理等。很多人對(duì) H5大前端工程師的印象可能還留在做做網(wǎng)頁(yè)的階段，其實(shí)H5 大前端行業(yè)已經(jīng)開(kāi)始發(fā)生變化了，出現(xiàn)了很多細(xì)分方向。
國(guó)內(nèi)外眾多大型IT 企業(yè) (如:百度、騰訊、微軟、Yahoo、中國(guó)移動(dòng)等)均已成立專(zhuān)業(yè)的前端開(kāi)發(fā)部門(mén)，但專(zhuān)業(yè)人才稀缺，人才資源爭(zhēng)奪激烈，就業(yè)市場(chǎng)供不應(yīng)求。H5大前端工程師工作的年薪基本保持在12到18 萬(wàn)，經(jīng)驗(yàn)豐富者可以達(dá)到25 萬(wàn)以上，資深的H5大前端工程師年薪還能更高。
了解詳情
我們的H5前端課程更適合哪些人？

  • 應(yīng)屆大學(xué)生初入職場(chǎng)

    為剛畢業(yè)學(xué)員提供初入職場(chǎng)的通道，還原真實(shí)企業(yè)工作場(chǎng)景讓其快速融入正式工作中


  • 互聯(lián)網(wǎng)從業(yè)者轉(zhuǎn)崗

    原從事后臺(tái)開(kāi)發(fā)，想完美轉(zhuǎn)型全棧開(kāi)發(fā)的工程師


  • 0-1小白進(jìn)階

    沒(méi)有計(jì)算機(jī)基礎(chǔ)，愿意從事IT開(kāi)發(fā)，改變生活現(xiàn)狀，改變命運(yùn)的學(xué)員。


  • 自由職業(yè)者、創(chuàng)業(yè)者

    可以沒(méi)有任何的計(jì)算機(jī)和編程基礎(chǔ)，但希望通過(guò)自己的付出打破現(xiàn)狀的人

H5前端課程大綱
階段 web網(wǎng)頁(yè)基礎(chǔ)
HTML5+CSS3基礎(chǔ)入門(mén)
課程內(nèi)容
熟悉HTML5入門(mén)基本內(nèi)容，掌握CSS3的基礎(chǔ)入門(mén)知識(shí)，可以實(shí)現(xiàn)任意網(wǎng)頁(yè)布局。
項(xiàng)目實(shí)戰(zhàn)
京東登錄布局設(shè)計(jì)開(kāi)發(fā) 、京東注冊(cè)布局設(shè)計(jì)開(kāi)發(fā)
Photoshop
課程內(nèi)容
掌握Photoshop基本操作；能夠獨(dú)立的進(jìn)行網(wǎng)頁(yè)切圖
項(xiàng)目實(shí)戰(zhàn)
博客項(xiàng)目網(wǎng)頁(yè)切圖、量尺寸 ；企業(yè)多方案綜合項(xiàng)目切圖、量尺寸、標(biāo)注像素
HTML5+CSS3進(jìn)階
課程內(nèi)容
掌握繼承與優(yōu)先級(jí)；HTML表格與表單；掌握css3新特性；能夠進(jìn)行合理的網(wǎng)頁(yè)布局
項(xiàng)目實(shí)戰(zhàn)
企業(yè)網(wǎng)站多方案綜合項(xiàng)目實(shí)踐、完整的多個(gè)企業(yè)網(wǎng)站開(kāi)發(fā)
第2階段 web編程基礎(chǔ)
JavaScript基礎(chǔ)語(yǔ)法
課程內(nèi)容
掌握J(rèn)S基礎(chǔ)基本語(yǔ)法和基本語(yǔ)句，培養(yǎng)編程邏輯思維，實(shí)現(xiàn)網(wǎng)頁(yè)的動(dòng)態(tài)交互
項(xiàng)目實(shí)戰(zhàn)
H5音樂(lè)播放器、實(shí)現(xiàn)H5小游戲
BOM編程
課程內(nèi)容
掌握window、location、history、navigator、screen等對(duì)象的使用，掌握事件處理和DOM節(jié)點(diǎn)BOM組成
項(xiàng)目實(shí)戰(zhàn)
倒計(jì)時(shí)秒表、商品搶購(gòu)倒計(jì)時(shí)案例
DOM編程
課程內(nèi)容
DOM節(jié)點(diǎn)操作(增刪改查) 操作文本節(jié)點(diǎn) 事件四要素 事件綁定 事件處理函數(shù)返回值
項(xiàng)目實(shí)戰(zhàn)
DOM元素移動(dòng)動(dòng)畫(huà)案例
Javascript實(shí)現(xiàn)交互效果
課程內(nèi)容
用JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)上常見(jiàn)的各種交互動(dòng)畫(huà)效果
項(xiàng)目實(shí)戰(zhàn)
回到頂部、在線(xiàn)客服、選項(xiàng)卡效果：導(dǎo)航二級(jí)菜單、商品分類(lèi)二級(jí)菜單、手風(fēng)琴效果、輪播圖效果
版本控制工具Git/SVN
課程內(nèi)容
掌握SVN/GIT版本控制工具來(lái)維護(hù)項(xiàng)目的整個(gè)藍(lán)圖；熟練使用github、碼云等平臺(tái)來(lái)管理云端代碼倉(cāng)庫(kù)，完成多人協(xié)作項(xiàng)目。
項(xiàng)目實(shí)戰(zhàn)
源碼大數(shù)據(jù)
第3階段 H5進(jìn)階和JS中級(jí)進(jìn)階和前端工程化
HTML5+CSS3高級(jí)新特性
課程內(nèi)容
掌握LocalStorage和SessionStorage、視頻和音頻，Web字體的使用，掌握過(guò)渡，動(dòng)畫(huà)，變形等實(shí)現(xiàn)各種絲滑流暢的*交互
項(xiàng)目實(shí)戰(zhàn)
搜索歷史記錄功能模塊、手寫(xiě)一個(gè)視頻播放器
Flex布局和移動(dòng)端適配
課程內(nèi)容
Flex布局完美適配各個(gè)終端，掌握業(yè)界主流的響應(yīng)式布局方案
項(xiàng)目實(shí)戰(zhàn)
京東移動(dòng)端 、淘寶移動(dòng)端 、攜程移動(dòng)端
JS中級(jí)進(jìn)階
課程內(nèi)容
深入函數(shù)細(xì)節(jié)、突破JS數(shù)組的20個(gè)常用方法、玩轉(zhuǎn)合并對(duì)象和各種循環(huán)對(duì)象、深入BOM的hashchange和pushState
項(xiàng)目實(shí)戰(zhàn)
排序、過(guò)濾、率先的復(fù)雜動(dòng)態(tài)表格JS實(shí)現(xiàn)；復(fù)雜表單的正則驗(yàn)證綜合實(shí)踐
Node模塊化和npm和yarn包管理
課程內(nèi)容
node模塊化，包管理npm和yarn，打包工具webpack，為前端工程化鋪墊
項(xiàng)目實(shí)戰(zhàn)
從零實(shí)現(xiàn)一個(gè)多頁(yè)面打包項(xiàng)目腳手架
Webpack5自動(dòng)構(gòu)建和前端工程化
課程內(nèi)容
webpack5完整學(xué)習(xí)，完成從0到1搭建項(xiàng)目工程目錄，支持切換開(kāi)發(fā)和生產(chǎn)環(huán)境，啟動(dòng)開(kāi)發(fā)服務(wù)器，打包上線(xiàn)。
項(xiàng)目實(shí)戰(zhàn)
從零實(shí)現(xiàn)一個(gè)多頁(yè)面打包項(xiàng)目腳手架
數(shù)據(jù)可視化Echart
課程內(nèi)容
掌握echarts的各種玩法，高度自定義echarts，實(shí)現(xiàn)常見(jiàn)的前端數(shù)據(jù)可視化
項(xiàng)目實(shí)戰(zhàn)
移動(dòng)端餅圖、折線(xiàn)圖、堆疊條形圖、柱狀圖綜合案例
高德地圖API
課程內(nèi)容
掌握高度地圖API的正確使用方式，實(shí)現(xiàn)定位，繪制圖標(biāo)，繪制線(xiàn)條，實(shí)時(shí)繪制運(yùn)動(dòng)軌跡等復(fù)雜交互
項(xiàng)目實(shí)戰(zhàn)
跑步定位和運(yùn)動(dòng)軌跡繪制
Ajax前后端數(shù)據(jù)交互
課程內(nèi)容
前后端數(shù)據(jù)交互技術(shù)ajax，原生Ajax、axios，同步和異步、局部刷新瀏覽器，增強(qiáng)用戶(hù)體驗(yàn)
項(xiàng)目實(shí)戰(zhàn)
Fitness App
第4階段 JavaScript高級(jí)編程和框架核心思想
JavaScript高級(jí)編程
課程內(nèi)容
JavaScript面向?qū)ο缶幊趟枷?，深入理解作用域、閉包、原型和原型鏈、繼承、this、IIFE、構(gòu)造函數(shù)，類(lèi)和實(shí)例對(duì)象等知識(shí)
項(xiàng)目實(shí)戰(zhàn)
手寫(xiě)深拷貝和淺拷貝、手寫(xiě)ES5寄生組合式繼承
ES6、ES7
課程內(nèi)容
ES6新特性解構(gòu)、擴(kuò)展運(yùn)算符、模板字符串、箭頭函數(shù)、對(duì)象的簡(jiǎn)潔寫(xiě)法、類(lèi)、靜態(tài)屬性、原型方法、實(shí)例對(duì)象、ES6的模塊化、Promise和Async。Await異步編程。
項(xiàng)目實(shí)戰(zhàn)
解決回調(diào)地獄、async和await異步編程
組件化、模塊化開(kāi)發(fā)
課程內(nèi)容
模塊化歷史,AMD/CMD/COMMONJS/ESMODULE, ES6模塊化的導(dǎo)入和導(dǎo)出，模塊化開(kāi)發(fā)的好處
項(xiàng)目實(shí)戰(zhàn)
模塊化代碼實(shí)現(xiàn)一個(gè)抽獎(jiǎng)程序綜合實(shí)踐
WebSocket雙向通信
課程內(nèi)容
掌握HTTP協(xié)議、客戶(hù)端數(shù)據(jù)傳輸方式，掌握WebSocket 在HTML5 領(lǐng)域的應(yīng)用場(chǎng)景，用于實(shí)現(xiàn)客戶(hù)端和服務(wù)器的長(zhǎng)鏈接
項(xiàng)目實(shí)戰(zhàn)
實(shí)現(xiàn)多人在線(xiàn)聊天室
第5階段 Vue2和Vue3全家桶與多端應(yīng)用開(kāi)發(fā)
Vue2、Vue-router框架編程
課程內(nèi)容
掌握Vue的單文件組件，指令、雙向數(shù)據(jù)綁定、生命周期、胡須表達(dá)式Mustach、插槽、混入、全局指令，全局組件、組件封裝、計(jì)算屬性、過(guò)濾器等特性和路由的使用。
項(xiàng)目實(shí)戰(zhàn)
商家后臺(tái)管理系統(tǒng)
Vuex狀態(tài)管理
課程內(nèi)容
Vuex的核心state/mutations/actions/getters/module,輔助函數(shù)mapState/mapGetters/mapActions/mapMutations，命名空間拆分倉(cāng)庫(kù)等
項(xiàng)目實(shí)戰(zhàn)
商家后臺(tái)管理系統(tǒng)
Elementui/Iview/ VantUI ui框架的使用
課程內(nèi)容
使用PC端ui框架element-ui/ivew或移動(dòng)端ui框架vantui，完成項(xiàng)目的組件化開(kāi)發(fā)
項(xiàng)目實(shí)戰(zhàn)
商家后臺(tái)管理系統(tǒng) 、商家移動(dòng)端App
DataV數(shù)據(jù)大屏
課程內(nèi)容
數(shù)據(jù)可視化方案、Vue中的數(shù)據(jù)可視化方案、基于echarts封裝的數(shù)據(jù)可視化倉(cāng)庫(kù) dataV
項(xiàng)目實(shí)戰(zhàn)
物流數(shù)據(jù)大屏
Vue3框架編程
課程內(nèi)容
掌握Vue3的Proxy，新的響應(yīng)式ref和reactive，組合式CompositionApi的使用，以及Hooks的使用，使用Vue3完成大型項(xiàng)目開(kāi)發(fā)
項(xiàng)目實(shí)戰(zhàn)
vite+Vue3家修管理后臺(tái)系統(tǒng)
@vue/cli 和 Vite
課程內(nèi)容
搭建項(xiàng)目腳手架，基于TS的配置和JS的配置，Vue2的版本和Vue3的版本;新一代構(gòu)建工具，搭建Vue3項(xiàng)目，極速啟動(dòng)打包，實(shí)現(xiàn)大型項(xiàng)目秒刷，等待編譯
項(xiàng)目實(shí)戰(zhàn)
vite+Vue3家修管理后臺(tái)系統(tǒng)
TypeScript
課程內(nèi)容
TypeScript基礎(chǔ)類(lèi)型、變量聲明、接口、類(lèi)、函數(shù)、泛型、枚舉、類(lèi)型推導(dǎo)、交叉類(lèi)型、聯(lián)合類(lèi)型、類(lèi)型保護(hù)、裝飾器、tsconfig等
項(xiàng)目實(shí)戰(zhàn)
TypeScript+Vue3實(shí)現(xiàn)后臺(tái)管理系統(tǒng)
MVVM源碼解析
課程內(nèi)容
MVC和MVVM源碼解析，深入Vue2和Vue3的底層原理，手寫(xiě)實(shí)現(xiàn)Vue2和Vue3的響應(yīng)式系統(tǒng)，雙向數(shù)據(jù)綁定，發(fā)布訂閱等。
項(xiàng)目實(shí)戰(zhàn)
手寫(xiě)實(shí)現(xiàn)mini版本Vue
uniapp微信小程序
課程內(nèi)容
微信小程序開(kāi)發(fā)、uniapp跨多端開(kāi)發(fā)、編譯到H5、IOS、Android和各個(gè)小程序平臺(tái)。
項(xiàng)目實(shí)戰(zhàn)
四海香微信小程序、尚體電商小程序
第6階段 React18全家桶與多端應(yīng)用開(kāi)發(fā)
React18基礎(chǔ)和進(jìn)階、React-router
課程內(nèi)容
React基礎(chǔ)，受控組件、非受控組件、生命周期、setState、React進(jìn)階SCU 優(yōu)化，PureComponent，React Hooks、React-router
項(xiàng)目實(shí)戰(zhàn)
源碼電影App
React Hooks
課程內(nèi)容
React新特性StateHooks和EffectHooks，類(lèi)組件和函數(shù)組件寫(xiě)法，對(duì)比，優(yōu)劣勢(shì)、生命周期、ui框架Ant Design 全家桶。
項(xiàng)目實(shí)戰(zhàn)
基于react全家桶的社交電商后臺(tái)管理系統(tǒng)
AntV數(shù)據(jù)可視化
課程內(nèi)容
螞蟻家族數(shù)據(jù)可視化庫(kù)的使用、大屏數(shù)據(jù)實(shí)施展示。
項(xiàng)目實(shí)戰(zhàn)
電商數(shù)據(jù)大屏
React Native 和 Flutter
課程內(nèi)容
基于React的移動(dòng)端混合式開(kāi)發(fā)框架
項(xiàng)目實(shí)戰(zhàn)
基于IOS和Android 的源碼本地生活A(yù)pp
第7階段 就業(yè)服務(wù)
就業(yè)指導(dǎo)
課程內(nèi)容
企業(yè)通用面試技巧、知識(shí)點(diǎn)面試技巧、模擬面試、項(xiàng)目面試技巧....
面試直通車(chē)
課程內(nèi)容
面試經(jīng)驗(yàn)交流、面試技術(shù)解惑、面試項(xiàng)目跟蹤。
售后服務(wù)
課程內(nèi)容
隨時(shí)隨地為同學(xué)們提供工作問(wèn)題解決方案！源碼時(shí)代是具有售后的服務(wù)機(jī)構(gòu)！
第8階段 贈(zèng)送課程
React18基礎(chǔ)和進(jìn)階、React-router
課程內(nèi)容
React基礎(chǔ)，受控組件、非受控組件、生命周期、setState、React進(jìn)階SCU 優(yōu)化，PureComponent，React Hooks、React-router
項(xiàng)目實(shí)戰(zhàn)
源碼電影App
React Hooks
課程內(nèi)容
React新特性StateHooks和EffectHooks，類(lèi)組件和函數(shù)組件寫(xiě)法，對(duì)比，優(yōu)劣勢(shì)、生命周期、ui框架Ant Design 全家桶。
項(xiàng)目實(shí)戰(zhàn)
基于react全家桶的社交電商后臺(tái)管理系統(tǒng)
AntV數(shù)據(jù)可視化
課程內(nèi)容
螞蟻家族數(shù)據(jù)可視化庫(kù)的使用、大屏數(shù)據(jù)實(shí)施展示。
項(xiàng)目實(shí)戰(zhàn)
電商數(shù)據(jù)大屏

源碼時(shí)代學(xué)習(xí)環(huán)境
課程評(píng)價(jià)
聚劃算

機(jī)構(gòu)相關(guān)課程查看更多 >

長(zhǎng)沙h5技術(shù)培訓(xùn)-IT高級(jí)工程師培訓(xùn)
長(zhǎng)沙h5制作培訓(xùn)班-web前端工程師培訓(xùn)
長(zhǎng)沙源碼時(shí)代Java培訓(xùn)學(xué)校