- 課程體系|
- 知識模塊|
- 企業項目|
- 更新模塊|
- 2022新增|
- 課程特色|
- 課程大綱
（224G）前端全套視頻教程領取
二十五個知識模塊
HTML5+CSS3
模塊移動端M站
模塊JavaScript
編程模塊jQuery
模塊BootStrap
模塊HTML5新特性
模塊Nodejs、MySQL與Ajax
模塊模塊化
模塊JavaScript新標準
(ES6\7\8\9)工程化
模塊小程序
模塊React
模塊React輕量級框架之
DvaJSReact輕量級框架之
UmiJSVue
模塊Angular
模塊框架原理
模塊UI組件庫
模塊協同開發
模塊大數據可視化
模塊微信相關
模塊WebApp與混合開發
模塊React-Native
模塊Flutter
模塊uni-app
模塊
貫穿15個企業級項目
- 小米官網
- 響應式官網
- 課程類官網
- 美食網(移動端)
- 網易云音樂
- 網易新聞精選
- 登陸注冊認證系統
- Ego商城后臺管理系統
- 微信小程序-電商-食療坊
- 推廣類移動端頁面
- H5微場景動畫
- 移動端馬蜂窩
- 藍莓派社區
- 宜居租房
- 丁香醫生·疫情實時動態
-
項目簡介
選擇小米官網作為實戰案例，是因為剛開始入門，有個參考點，另外站點比較偏向目前的卡片式設計，實現常見效果。目的為學者練習編寫小米官網，熟悉 div+css 布局。
技術棧：HTML+CSS+Div布局
-
項目簡介
此站點特效較多，所以通過練習編寫次站點，學生可以更多練習 CSS3 的新特性過渡與動畫的實現，并且可以很好的練習 div+css 布局。
技術棧：HTML+CSS+Div布局
-
項目簡介：
此站點為響應式站點，在目前常見站點中，響應式設計類站點是非常多的，而且大部分公司的站點都需要支持響應式，所以，通過練習次站點，學者可以熟悉響應式這點的設計流程和實現方式
技術棧：HTML5+CSS3+BootStrap
-
項目簡介：
項目為移動端項目，針對 M 站進行布局處理，項目為手機外派類 web 站點，功能包含，首頁店鋪展示，店鋪餐飲列表，具體視頻詳情等頁面
技術棧：HTML5+CSS3+REM
-
項目簡介：
本項目為移動端網易云音樂 WebApp，包含推薦音樂、熱歌榜、新歌榜、搜索、上拉加載、歌曲播放、歌詞同步等功能。主要讓學生掌握前后端數據交互、移動端布局處理等
-
項目簡介：
本項目為小程序新聞類項目，包含滾動導航目錄、頭挑新聞、上拉加載、下拉更新獲取最新數據等功能。主要讓學生掌握小程序彈性盒子布局、公共功能模塊化、公共視圖模板化、網絡請求、前后端數處理等
-
項目簡介：
登錄認證系統基本上是每個項目的必備品，我們單獨拿出來，做詳細講解，并形成一個獨立的項目，這樣大家在日后的開發中，可以隨時可拔插式增加到自己的項目中
技術棧：React + Redux + React-Router + BootStrap + Axios + Redux-Thunk + 工具庫(lodash\classnames 等)
-
項目簡介
商城后臺管理系統是目前非常常見的管理系統，當然，類似的管理系統包含內容管理、產品管理、人員管理等系統都是類似的，所以我們通過此后臺系統了解大部分的系統的常見功能，主要針對產品、內容、規格參數等進行增刪改查的操作
技術棧：Vue + Vuex + Vue-Router + Element UI + Axios + 權限管理
-
項目簡介
此階段的內容為微信小程序開發，本階段并非以基礎知識點開始入手講解，基于學者經歷過以上的學習，在此時已經掌握項目框架，包含常見的一些實現規范，所以，這里我們將直接講解項目，根據項目需求的效果使用微信小程序技術實現對應功能。
技術棧：微信小程序
-
項目簡介
這是一款測試類產品，用戶輸入名稱可以根據用戶名名稱進行分析，給出不同的運勢結果，并且項目是嵌套在 app 中的，通過 iOS 和 Android 的 webview 進行加載
技術棧：Swiper+jQuery+REM+Less
-
項目簡介
此階段的內容為 H5 動畫（微場景制作），純 javascript 打造的滑動特效插件，面向手機、平板電腦等移動終端，使用 Swiper 再配合一些你喜歡的小動畫，你的圖片立即變成活靈活現的微場景、微海報?？煽焖僦谱鞒鼍赖那袚Q動畫效果，3D 切換效果的方法多種多樣。
-
項目簡介
馬蜂窩無線官網靠譜的旅游攻略,自由行,自助游分享社區,海量旅游景點圖片、游記、交通、 美食、購物等旅游攻略自由行信息。本項目為移動端 WebApp，包含首頁無縫輪播、雪碧圖布局、旅游列表數據動態獲取、下拉底部點擊加載更多數據、滾動底部加載更多、聯調馬蜂窩接口數據等功能。主要讓學生掌握前后端數據交互、移動端布局處理等
-
項目簡介
本項目名稱為藍莓派，主要為音樂社區類型。包含較多的交互功能，例如滑動門，雪碧圖使用，模態框，瀑布流和焦點輪播圖等效果。當然，前后端交互也是不可少的，主要理解前后端交互流程與練習各種交互實現。
技術棧：JavaScript+jQuery+REM+響應式
-
項目簡介
本項目是租房類 WebApp,注重移動端布局，功能的實現。其中包含，登錄注冊、首頁展示、城市選擇、搜索功能、詳情展示、上拉加載等功能。
技術棧：React + React-Router + Redux + Fetch
-
項目簡介
本項目主要是針對疫情的展示，數據來源于網絡開源數據，疫情通過數字與地圖形式展示，包含數據增長與降低變化
技術棧：Vue + Axios + Flex + ES6
五大更新模塊
小程序云開發
React高級框架DvaJS和UmiJS
Vue企業級電商項目
移動端Flutter課程
React-Native實戰開發
小程序云開發
在這個小程序泛濫的時間節點中，微信小程序是用戶較多的，也是目前企業的較好選擇，所以小程序開發工程師需求也是非常大，我們繼增加小程序課程之后，有增加了小程序的云開發，開發者可以使用云開發開發微信小程序、小游戲，無需搭建服務器，即可使用云端能力。云開發為開發者提供完整的原生云端支持和微信服務支持，弱化后端和運維概念，無需搭建服務器，使用平臺提供的 API 進行核心業務開發，即可實現快速上線和迭代，同時這一能力，同開發者已經使用的云服務相互兼容，并不互斥。
React高級框架DvaJS和UmiJS
在React的技術棧中，DvaJS和UmiJS幾乎成為了必選，雖然React的學習路徑很陡峭，但是這兩個輕量級應用框架大大的簡化了React的難度，降低了學習難度與應用難度。BAT更是把他們視為前端開發者的必備技能。我們在課程中詳細講解了這兩個框架的應用。無縫對接企業項目開發。
Vue企業級電商項目
Vue的出現開始就受到了大量開發者的追隨，后來者居上，在github上也超過了React的存在，也是目前前端面試的必備技能，我們課程中不僅詳細的講解了Vue的知識，同時也增加了多個實戰的企業級項目，例如前臺站點，音樂類項目，后臺管理系統項目等。
移動端Flutter課程
Flutter是谷歌的移動UI框架，可以快速在iOS和Android上構建高質量的原生用戶界面。 Flutter可以與現有的代碼一起工作。在全世界，Flutter正在被越來越多的開發者和組織使用，并且Flutter是完全免費、開源的。一部分的iOS和Android開發者已經轉向了Flutter開發，我們的課程中也同樣增加了這部分的課程，用來充實大家的技術池。
React-Native實戰開發
如果說目前通過前端實戰多終端App的開發最好的解決方案自然就是React-Native了，而且也是目前使用最多的。因為我們的課程中增加了大量的完整的React課程，所以，大家上手React-Native變得非常容易。
第六版(2022版)課程變化
| 新增 |
Vue3 新特性
桌面場景
Flutter 技術
混合開發
RN 技術
UniApp 框架
實時疫情動態項目
項目部署
封裝工具庫
封裝組件庫
小程序分包
|
| 升級 |
Webpack5 工程化
React17 版本
大數據可視化
git 高級操作
小程序云開發
高級設計模式
面向對象編程
事件總線
|
| 強化 |
強化 React 基礎
強化 TypeScript
強化 Vue 實站項目
強化 Nodejs 服務端
強化大數據可視化
強化多終端混合開發
強化最新 ES 規范語法實戰
|
| 優化 |
Vue 項目性能優化
React 項目性能優化
Vue 項目國際化
可視化
token 流程體系優化
單點登陸實現優化
桌面程序打包優化
App 構建項目優化
|
2022虎年 優惠2000元（僅限前100名）
不負春光，和學習戀愛
我們的特色
真的實戰類型課程，無論是三大框架
還是小程序都是企業級實戰項目，
深度體會應用場景
根據學生需求更新對應課程，
適應工作需求
移動端課程優先，根據市場需求，
實時調整課程就業方法
2022年更新了前端
第六版課程大綱標準
國內技術過硬老師
全程面授
了解WEB前端（HTML5）
-
目前狀態
隨著互聯網與移動互聯網的迅猛發展和普及，傳統的站點已經不在能滿足人們的需求。而現在網上購物，網上直播，網上訂餐等都已經成為生活的一部分。而這些內容的呈現，就是WEB前端的展示。當你在朋友圈，好友對話中隨手打開的分享頁面，也是WEB前端的展示。（我們嘗試用通俗的方式來解釋前端，可能不夠標準，希望您能理解）
-
發展前景
2022年，前端仍然是一個非?；鸨膶I，就如我們所見，任何技術實現的結果都需要展示給用戶，而這些展示都是需要前端來進行完成。前端也不再是全部依賴于瀏覽器，而使用 native實現的原生 App 也是越來越多公司的選擇。
-
職位方向
前端開發工程師、小程序開發工程師、高級前端開發工程師、前端架構師、高級前端架構師
-
尚學堂的前端
1.前端交互層 2.前端邏輯層 3.服務器層
-
前端交互層
交互層可以理解為特效，我們需要能實現頁面的各種特效，以滿足目前站點的需求，例如動畫、過渡、圖形繪制等
-
前端邏輯層
前端邏輯層主要體現在前端的渲染問題，我們都知道，目前都是前后端分離或者混合開發，這無疑都是需要前端來進行渲染的。也就是我們要考慮的是：模板+數據=頁面
-
服務器層
作為一名優秀的前端開發者，你需要掌握服務器相關內容，node 則是我們的優先考慮，我們需要構建前端工程化，需要服務器端支持做渲染甚至需要具有完整服務器端開發的能力。
前端課程體系大綱
| 技術名稱 | 技術內容 |
|---|---|
| HTML5+CSS3 模塊 |
HTML標簽
瀏覽器內核差異性
H5新增標簽
語義化
標簽與屬性
CSS基本語法規范
CSS常用選擇器與技巧
CSS復合選擇器
數值與單位
CSS Hack
盒子模型
媒體查詢與響應式
過渡與動畫
彈性盒子模型
浮動
定位
CSS高級技巧（雪碧圖、滑動門和三角形繪制等）
Chrome調試工具
CSS企業級應用技巧
網頁常見問題解決方案
PhotoShop應用
Cutterman插件
高效協作藍湖
項目骨架搭建
項目實戰開發流程
復雜頁面的設計與排版
CSS模塊化開發
CSS字體圖標應用
常見布局解決方案
|
| 移動端M站 模塊 |
移動端屏幕比例
移動端瀏覽器
物理像素與設備獨立像素
ViewPort視口相關
iphone6視覺稿參考
主流移動端適配解決方案
百分比布局
Flex布局優勢
REM處理移動端
媒體查詢多終端適配
百度地圖移動端布局分析
|
| JavaScript編程 模塊 |
JavaScript概述
JavaScript歷史
基本語法
數據類型
數值精密計算
字符串
對象
數組
函數
運算符
數據類型轉換
錯誤處理機制
編程風格
Object對象
Array對象
包裝對象
Number對象
String對象
Math對象
Date對象
RegExp對象
JSON對象
面向對象編程
this關鍵字
prototype對象
原型與原型鏈深入剖析
作用域深入解析
Object對象與繼承
面向對象編程模式
異步編程
定時器
Promise對象
嚴格模式
DOM編程
事件類型
window對象
瀏覽器環境
History對象
Cookie
同源策略
網站特效實現(放大鏡、輪播圖、tab切換等)
設計模式
MVC與MVVM
|
| jQuery 模塊 |
jQuery介紹
jQuery優勢
jQuery API詳解
鏈式編程與隱式迭代
源碼解析
插件使用與封裝
jQuery Ajax
jQuery動畫應用
jQuery實現網站特效（放大鏡、輪播圖、tab切換等）
|
| BootStrap 模塊 |
第三方UI組件庫
BootStrap引用
BootStrap全局CSS樣式
柵格系統與響應式
拆解柵格系統源碼
柵格系統原理解析
BootStrap JavaScript插件
組件應用
BootStrap定制需求
|
| HTML5新特性 模塊 |
語義化標簽
本地存儲
離線緩存
H5連貫性
多媒體相關
性能提升
調用原生API
Canvas
Canvas游戲（連連看、消消樂）
|
| Node.js、MySQL與Ajax 模塊 |
Ajax的作用
原生XHR對象
同步與異步
Http協議
Https協議
封裝Ajax
jQuery Ajax
同源策略
跨域問題及解決方案
JSON解析
CORS與JSONP
前端模板引擎Template
PostMan工具
Node.js開發環境
Commonjs規范
模塊化
NPM與CNPM鏡像
核心模塊
RestFulAPI
Express框架
Koa2框架
中間件
模板引擎
靜態資源托管
路由相關
MySQL數據庫介紹
MySQL增刪改查
數據庫關聯
數據庫可視化
數據庫集成開發環境
Node.js鏈接MySQL
|
| 模塊化 模塊 |
模塊化的歷程
JS模塊模式
Require.js
Sea.js
Node.js的Commonjs規范
|
| JavaScript新標準 (ES6\7\8\9)模塊 |
ES6的目標
Babel解析
Let與Const命令
變量與解構賦值
字符串擴展
數組擴展
函數擴展
對象擴展
Set與Map數據結構
Proxy對象
Promise對象
Generator對象
Async與await
Class類
Class類的繼承
Module模塊
編程風格
|
| 工程化 模塊 |
Gulp自動化處理
Gulp管理項目壓縮
合并
重命名等操作
Gulp配置熱更新
Webpack靜態打包模塊器
Webpack入口起點
Webpack輸出
Webpack模式
Webpack Loads
Webpack插件
Webpack配置
Webpack模塊
熱模塊替換
構建目標
開發中的Server
監聽打包模塊
模塊打包熱更新
生產環境與開發環境分離
打包優化之CodeSplitting代碼分割
打包優化之懶加載
打包優化之緩存處理
Less與Sass的CSS預處理語言
|
| 小程序 模塊 |
小程序之初的定義
小程序開發
小程序框架
小程序組件
小程序API
小程序服務端相關
小程序工具應用
自定義組件
優化
組件與生命周期
小程序分包加載
小程序性能分析與優化
小程序云端能力
云服務器
云數據庫
云存儲
云調用
配額
小程序發布
多平臺小程序
MPVue
Wepy
|
| React 模塊 |
Create React App
React較佳實踐
JSX語法
元素渲染
組件
Props與State
事件處理
條件渲染
列表&key
表單相關
狀態提升
組合與繼承
代碼分割code-splitting
代碼分割lazy
Context對象
錯誤邊界處理
Refs&DOM
碎片化Fragments
高階組件
性能優化
靜態類型檢查
受控組件與非受控組件
Hook新特性
|
| React輕量級框架之 DvaJS |
Dva開發體驗
React數據流解決方案
插件機制
支持HMR
Dva API
定義路由
定義Model
Connect對象
優化加載方式
優化路由配置
路由原理
Dva開發復雜SPA
|
| React輕量級框架之 UmiJS |
可拔插企業級框架
約定式路由
開箱即用
高性能
靜態頁面導出
支持TypeScript
與Dva融合
按需加載
服務器端渲染SSR
基本配置
Webpack配置
immer優化開發
動態加載
語言設定
Dll二次啟動提速
打包與部署
|
| Vue 模塊 |
Vue基礎
Vue實例對象
模板語法
計算屬性
偵聽器
Class與Style綁定
組件相關
Props數據傳遞
插槽
自定義事件
動態組件
異步組件
邊界處理
過渡與動畫
混入
自定義指令
渲染函數與JSX
插件
過濾器
單文件組件
TypeScript支持
生產環境部署
路由相關
狀態管理
服務端渲染
深入響應式原理
封裝組件
npm發布組件
MVVM雙向數據綁定原理
$nextTick原理
發布訂閱模式
權限管理
|
| Angular 模塊 |
Angular引入
雙向數據綁定
MVC模式
Angular服務
Angular路由
表單相關
依賴注入
|
| 框架原理與 進階 |
TypeScript
TS靜態類型檢查
React支持TypeScript
Vue支持TypeScript
Vue雙向數據綁定原理
模擬實現Vue框架數據綁定
RxJS
Redux API
React-Redux
Redux-thunk
Redux-Saga
Redux深入解析
Redux應用技巧
Redux常見問題與解決方案
Redux異步相關
Vuex API
異步與同步
Reducers
Actions
modules
getters
插件
嚴格模式
熱重載
React服務器端渲染解決方案next.js
Vue服務器端渲染解決方案nuxt.js
|
| UI組件庫 模塊 |
Antd組件庫介紹
Antd UI設計風格
組件引入
按需加載
常用組件詳解
組件庫源碼分析
定制主題
常見問題規避與解決方案
Element UI組件庫引入
Vue-cli@3版本引入
全加載與按需加載
自定義主題
|
| 協同開發 模塊 |
SVN與Git介紹
SVN客戶端與服務器端搭建
SVN管理版本
SVN沖突解決
SVN多人寫作開發
Git環境搭建
Git分布式
Git版本庫管理
Git前進
后退
修改與撤銷
git分支管理
git沖突解決
github遠程倉庫關聯
gitee遠程倉庫關聯
|
| 大數據可視化 模塊 |
Echarts
D3.js
three.js
AntV(G2)
全國地圖
世界地圖
發散點描繪
雙軸線
折線圖
散點圖
條形圖
熱力圖
環形圖
路線圖
3DMap
參數調優
|
| 微信相關 模塊 |
公眾號開發
JSSDK相關開發
展示
分享
支付
錄音
|
| WebApp與混合開發 模塊 |
Cordova
phoneGap
混可開發介紹
布局處理
Vant組價庫
常見注意事項與解決方案
與原生交互
Webpack打包優化
調試工具應用
WebView深入理解
|
| React-Native 模塊 |
環境搭建
Android SDK
Props
State
基礎API
特定平臺代碼
無障礙功能
改進用戶體驗
多平臺支持
發布定制React-Native包
|
| Flutter 模塊 |
環境搭建
體驗Flutter
Widget
Flutter for web開發
執行基本布局操作
控制位置和大小
處理形狀
操作文本
資源與圖片
路由與導航
國際化
|
| uni-app 模塊 |
環境搭建
跨平臺運行
真機測試
框架
常用組件
結合 Vue.js
封裝網絡請求
狀態管理
頁面通訊
|
- 課程體系
- 25個知識模塊
- 15個企業項目
- 5大更新模塊
- 2022新增
- 課程特色
- 課程大綱
