2021年最新H5網(wǎng)頁開發(fā)前端課程目錄介紹

時間：2023-10-04 10:06:02 | 來源：網(wǎng)站運營

時間：2023-10-04 10:06:02 來源：網(wǎng)站運營

2021年最新H5網(wǎng)頁開發(fā)前端課程目錄介紹：第一階段：WEB網(wǎng)頁基礎

1 HTML5+CSS3基礎入門

課程內(nèi)容

熟悉HTML5入門基本內(nèi)容（代碼文件、基本結構、注釋、編程問題規(guī)范、基本標簽等）；掌握CSS3的基礎入門知識；

項目實戰(zhàn)

京東登錄注冊案例（HTML+CSS） 登錄界面指的是需要提供帳號密碼驗證的界面，有 控制用戶權限、記錄用戶行為，保護操作安全的作 用。登錄界面是所有在線系統(tǒng)的入口。

2 HTML5+CSS3進階

課程內(nèi)容

掌握繼承與優(yōu)先級；選擇器、盒子模型、布局樣式等使用方法；能夠 進行合理的網(wǎng)頁布局。

項目實戰(zhàn)

個人博客（HTML5+CSS3） 個人博客是學員涉足前端領域的第一個項目，運用 前端基礎知識，培養(yǎng)項目思維，在入學2周內(nèi)搭建 屬于自己的個人信息分享平臺。

3 Photoshop

課程內(nèi)容

采用商業(yè)案例來學習Photoshop使用，掌握Photoshop基本操作；能 夠獨立的進行網(wǎng)頁切圖。

項目實戰(zhàn)

企業(yè)網(wǎng)站

（HTML5+CSS3+Photoshop+PxCook） 企業(yè)網(wǎng)站作為一家公司的互聯(lián)網(wǎng)名片，是每家企業(yè)必備。強化學員對HTML+CSS+PS(切圖)、各種布局等初期所學全部知識的綜合應用，由于是第一個企業(yè)級項目，著重熟悉項目開發(fā)流程和培養(yǎng)使用HTML+CSS遇到問題時的分析和調(diào)試能力。

第二階段：WEB編程基礎

1 JavaScript基礎

課程內(nèi)容

了解最前沿JavaScript知識。掌握JS基礎基本語法和基本語句以及ES6&ES7新特性，培養(yǎng)編程邏輯思維，實現(xiàn)網(wǎng)頁的動態(tài)交互。

2 BOM+DOM編程

課程內(nèi)容

認識和了解BOM和DOM模型； 掌握window、 location、 history、 navigator、document、 Form、Table等對象的使用；掌握事件處 理和DOM節(jié)點。理解BOM和DOM模型：掌握各瀏覽器API的使用、熟練操作元素節(jié)點理解網(wǎng)站事件類型與機制

項目實戰(zhàn)

案例實踐-H5音樂播放器、H5小游戲 （HTML5+CSS3+Javascript） 通過游戲應用開發(fā)，培養(yǎng)學員開發(fā)興趣和參與感， 強化Javascript基礎、DOM操作和事件機制在實際 場景的應用。

3JavaScript交互及動畫效果

課程內(nèi)容

掌握運動框架的封裝(勻速運動 緩沖運動 多物體運動) 分享到案例 右側(cè)邊欄滾動案例 透明度運動 輪播效果案例

項目實戰(zhàn)

企業(yè)網(wǎng)站交互進階（HTML5+CSS3+JavaScript） 掌握動畫原理，利用原生JS技術編寫動畫交互效果 實現(xiàn)企業(yè)站的輪播，選項卡，樓層跳轉(zhuǎn)等常規(guī)功能

4 jQuery＋交互及動畫 ＋jQuery優(yōu)質(zhì)插件

課程內(nèi)容

認識jQuery；熟悉選擇器；屬性與樣式； jQuery基本DOM操作；事件處理；文檔處理；數(shù)組和對象操作。學會使用jQuery和JavaScript 和DOM編程的動畫效果制作。 掌握jQuery生態(tài)圈的流行框架使用； 培養(yǎng)學員利用前端工具解決開發(fā)過程中問題的能力。

項目實戰(zhàn)

案例實踐-樓層跳動&輪播&表單驗證（HTML5+ CSS3+jQuery）jQuery的流行得益于他龐大的插件 生態(tài)圈，掌握jQuery插件的使用，將是前端開發(fā)者 網(wǎng)站開發(fā)的利器。

5 版本控制工具SVN&GIT

課程內(nèi)容

掌握SVN/GIT版本控制工具來維護項目的整個藍圖；熟練使用github 來管理云端代碼倉庫，快速項目組成員多人協(xié)作。

6 jQuery EasyUI

課程內(nèi)容

熟悉jQueryEasyUI框架環(huán)境搭建， 掌握EasyUI常用插件， 使用Easy UI快速搭建后臺

項目實戰(zhàn)

電子購物網(wǎng)站（HTML5+CSS3+jQuery +EasyUI）通過本階段的學習，具備常見動畫需求 的開發(fā)能力常用插件的使用及開發(fā)；逐步培養(yǎng)良好 的編程習慣強化企業(yè)項目開發(fā)流程，培養(yǎng)團隊協(xié)作能力。

第三階段：響應式網(wǎng)站與項目自動化開發(fā)

1 HTML5、CSS3高級進階

課程內(nèi)容

掌握HTML5時代多媒體、Web存儲技術及基于瀏覽器的(LBS)地理定位技術，熟悉基于高德地圖、百度地圖等地圖API的應用開發(fā)；介 紹了H5圖形技術SVG和Canvas；能夠動手編寫圖形報表和使用百度 echarts地圖API的能力。掌握CSS3新選擇器， 響應式原理及CSS3 媒體查詢，移動端流行的伸縮布局，Web字體、漸變、過渡動畫等技 術使用動畫庫實現(xiàn)基于網(wǎng)頁的酷炫動畫效果。

項目實戰(zhàn)

-H5動效簡歷/H5原生移動商城（HTM L5+CSS3+Swiper+動畫框架）H5動效簡歷是每 一個H5er的個性化名片，H5原生移動商城和適配 調(diào)試是面向前端是時代的必須技術。

2 Bootstrap4

課程內(nèi)容

掌握來自Twitter工程師開發(fā)的目前流行度很高的前端響應式框架， 包括內(nèi)置樣式、組件和JavaScript插件；掌握基于Bootstrap 打造的電影主題頁設計。

項目實戰(zhàn)

電影主題頁設計 （HTML5+CSS3+Bootstrap） 快速打造能夠適應多端的信息展示網(wǎng)站

3 前端依賴管理+CSS預處理 語言（Less+Sass）

課程內(nèi)容

熟練使用bower來管理前端庫，達到一個命令搞定所有項目依賴。 掌握基于CSS的預處理框架Less/Sass，以最簡單的代碼實現(xiàn)復雜 樣式；目前主流的前端框架都是基于css預處理語言搭建，學會后 具備Bootstrap等框架的閱讀和使用能力。

項目實戰(zhàn)

響應式股票交易平臺（Bootstrap4+Sa ss+PHP+Mysql+GIT）通過本階段學習，通過Boot strap等框架具備響應式開發(fā)能力；并使用多種版本 控制工具，進行企業(yè)項目的迭代；同時使用預處理 框架完成樣式重用和擴展。具備高效快速開發(fā)企業(yè) 項目的能力。

4 Grunt/Gulp自動化構建工具

課程內(nèi)容

了解前端自動化構建工具的原理；掌握基于Node平臺的Grunt和Gulp 兩大自動化構建工具。

5 Mysql

課程內(nèi)容

了解Mysql背景，快速搭建Mysql環(huán)境，熟悉Sql基礎語法，實現(xiàn)對數(shù)據(jù) 的CRUD操作

項目實戰(zhàn)

響應式股票交易平臺（Bootstrap4+Sa ss+PHP+Mysql+GIT）通過本階段學習，通過Boot strap等框架具備響應式開發(fā)能力；并使用多種版本 控制工具，進行企業(yè)項目的迭代；同時使用預處理 框架完成樣式重用和擴展。具備高效快速開發(fā)企業(yè)項目的能力

第四階段：Web高級編程與框架原理

1 JavaScript高級編程

課程內(nèi)容

掌握jJavaScript面向?qū)ο笏枷?；原型設計原理及使用。了解 JavaScript程序的編譯原理；掌握遞歸、惰性載入、匿名、閉包及 回調(diào)等高級函數(shù)的使用。掌握ES6前沿新特性。

2 jQuery插件開發(fā)

課程內(nèi)容

學習插件開發(fā)模式,并自己動手實現(xiàn)動態(tài)表格查詢和表單驗證等插件。

案例實踐

原生表單驗證插件（HTML5+CSS3+ ES6）能夠通過面向?qū)ο笏枷腴_發(fā)jQuery插件，學 習實踐JS設計模式，具備初級JS框架的編寫能力。

3 NodeJS

課程內(nèi)容

掌握Node服務端編程技術，Expres搭建服務器，基于Express框架編寫 后端代碼，實現(xiàn)前端和后端全棧開發(fā)

4 WebSocket

課程內(nèi)容

掌握掌握HTTP協(xié)議、客戶端數(shù)據(jù)傳輸方式，掌握WebSocket 在 HTML5 領域的應用場景，用于實現(xiàn)客戶端和服務器的長鏈接。

案例實戰(zhàn)

在線聊天室 （HTML5+CSS3+JS+WebSocket） 快速打造能夠多人在線聊天的聊天室案例。

5 MVVM架構源碼解析

課程內(nèi)容

掌握MVC、MVP和MVVM架構的演變歷史，掌握分層開發(fā)的思想，了 解雙向綁定原理，實現(xiàn)基于面向?qū)ο蠓绞綄崿F(xiàn)一個基于MVVM架構的 minVue框架。

案例實踐

miniVue框架（面向?qū)ο缶幊蹋?動手打造第一款屬于自己的前端主流框架。

第五階段：VUE全家桶與多端項目管理

1 VUE2-VUE3

課程內(nèi)容

掌握Vue2框架的環(huán)境搭建，指令，表達式，計算屬性、偵聽器、生命 周期和組件開發(fā)，掌握主流的VUE2組件高階、消息通訊，熟悉Vant、 iView、MintUI移動端框架，使用Vue-cli來搭建工程和開發(fā)Vue項目。

2 ElementUI＋ Koa2(Node.js)＋Mysql

課程內(nèi)容

熟練使用基于Vue2的餓了么前端視圖框架ElementUI，高效打造大型 復雜的用戶界面。Koa是Express 原班人馬打造 更小、更健壯、更富 有表現(xiàn)力Node框架，使用Koa2打開更前沿的后臺開發(fā)模式，使用甲 骨文公司的Mysql關系數(shù)據(jù)庫來管理更為大型并發(fā)的數(shù)據(jù)。

項目實戰(zhàn)

大型超市管理系統(tǒng)、外賣后臺管理系統(tǒng) （ElementUI＋Koa2＋Mysql+GIT） 通過最熱門的Node+Koa2+Mysql開發(fā)模式獨立完成網(wǎng)站開發(fā) 通過NPM生態(tài)圈通過分享和實踐編碼進行自我提升 成為一名真正的全棧工程師。

3 TypeScript

課程內(nèi)容

TypeScript是一種由微軟開發(fā)的自由和開源的編程語言。它是 JavaScript的一個超集，而且本質(zhì)上向這個語言添加了可選的靜態(tài) 類型和基于類的面向?qū)ο缶幊?br>
4 webpack模塊加載器 &打包工具

課程內(nèi)容

掌握最前沿模塊化打包工具，形成組件化開發(fā)思想，極大簡化項目開 發(fā)的成本。

項目實戰(zhàn)

外賣APP、源碼音樂App （TS+Vue+Vuex+Vant+axios+GIT） 熟練掌握Vue全家桶項目架構。

5 uniapp/Taro微信小程序

課程內(nèi)容

微信小程序作為引爆H5時代的標識技術，通過學習了解視圖層、邏 輯 層相關知識，深入小程序框架和組件的使用。uni-app 是一個使用 Vue.js 開發(fā)跨平臺應用的前端框架，開發(fā)者編寫一套代碼，可編譯到 iOS、Android、H5、小程序等多個平臺。Taro是來自京東凹凸實 驗室的多端統(tǒng)一開發(fā)框架Taro，可以讓你使用一套代碼打通WebApp、 微信小程序、支付寶小程序、百度智能小程序、字節(jié)跳動小程序等。

項目實戰(zhàn)

源碼電影小程序/四海香美食小程序 （WXML + WXSS + JS + 豆瓣開放接口API）通過本階段學習，具備微信、支付寶小程序、百度智能 小程序和字節(jié)跳動小程序的開發(fā)能力。

第六階段：React移動混合式開發(fā)

1 React

課程內(nèi)容

掌握來自Facebook工程師開發(fā)的流行前端框架-ReactJs；熟練使 用ReactJs基本語法、聲明周期、React-Router及基于ES6的 React組件開發(fā)；掌握React Redux架構在實際項目中的應用。掌 握基于ReactJS衍生出來的本地化跨平臺框架；

項目實戰(zhàn)

源碼房產(chǎn)App、源碼電影App （TS+React+Redux+Webpack+Antd-mobile+ GIT）熟練掌握React全家桶項目架構

2 React Native/Flutter

課程內(nèi)容

熟練搭建ReactNative環(huán)境、掌握本地化布局和常見組件。 Flutter是谷歌的移動UI框架，可以快速在iOS和Android上構建高 質(zhì)量的原生用戶界面（原生應用）。 Flutter可以與現(xiàn)有的代碼一起 工作。在全世界，F(xiàn)lutter正在被越來越多的開發(fā)者和組織使用，并 且Flutter是完全免費、開源的。

項目實戰(zhàn)

源碼生活APP（ReactNative/Flutter +AntD+DVA+高德地圖API）通過本階段學習，具 備與移動端開發(fā)人員的合作完成低成本、高性能、 高健壯的App應用的能力。

第七階段：就業(yè)與服務

1 就業(yè)指導

企業(yè)通用面試技巧、知識點面試技巧、模擬面試、項目面試技巧、語言表達練習、互面總結、總結和復習面試題。

2 面試直通車

面試經(jīng)驗交流、面試技術解惑、面試項目跟蹤。

3 售后服務

隨時隨地為同學們提供全方位工作問題解決方案！源碼時代是獨家具有售后的服務機構！