- 課程體系|
- 知識模塊|
- 項目實例|
- 更新模塊|
- 2023新增|
- 課程特色|
- 課程大綱
（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
模塊
貫穿8個企業級項目
- 百戰商城
- 路上旅游網
- i動音樂
- 電子商戶后臺
- 拍賣網站
- 生鮮采購后臺管理系統
- 房屋海選平臺
- 安心食療小程序
-
項目一：百戰商城
借助PxCook工具，基于設計稿編寫網頁，確保網頁的高度還原，通過綜合運用 HTML + CSS + JavaScript 技術，按照實際項目開發流程，歸納開發技巧，提升綜合實戰水平，完成企業級電商項目PC端首頁開發。
技術棧：HTML + CSS + JavaScript +Jquery三方庫
-
項目二：路上旅游網
路上旅游網無線官網靠譜的旅游攻略,自由行,自助游分享社區,海量旅游景點圖片、游記、交通、美食、購物等旅游攻略自由行信息。獲取接口動態數據實現數據信息，包含輪播圖、推薦攻略、下載加載更多等信息。
技術棧：HTML5+CSS3+JQuery+Swiper移動端項目
-
項目三：i動音樂
i動音樂是一款專注于發現與分享的音樂產品，依托專業音樂人、DJ、好友推薦及社交功能，為用戶打造全新的音樂生活。獲取接口動態數據實現音樂數據信息，包含推薦音樂、熱歌榜、搜索等信息以及音樂播放展示。
技術棧：基于Vue腳手架搭建移動端項目
-
項目四：電子商戶后臺
電子商戶后臺項目是一個大型綜合性的商城后臺管理平臺，主要包含人員管理與商品管理兩個大模塊。其中人員管理主要進行權限管理，例如只有root才有資格進行注冊全新賬號，不同權限用戶所能操作產品的權限不同。
技術棧：Vue+Vue-router+Vuex+Element-UI+Axios+三方庫
-
項目五：拍賣網站
窮游網鼓勵和幫助中國旅行者以自己的視角和方式體驗世界，為旅行者提供專業、實用、全面的游旅行指南和旅游攻略，是中國旅行者們分享旅游目的地信息和游記攻略的平臺。
技術棧：基于React框架實現
-
項目六：生鮮采購后臺管理系統
生鮮采購后臺管理系統項目是一個大型綜合性的商城后臺管理平臺，主要包含產品管理與訂單管理、登錄 三個大模塊。
技術棧：Vue3+Vue-router+Pinia+Element-Plus+Axios + TypeScript +三方庫
-
項目七：房屋海選平臺
房屋海選平臺主要包含房屋租賃、商城、個人中心、數據中心等多個系統。作為互聯網時代房屋平臺，擁有完善的房屋租賃資源搜索能力，可以根據城市定位，精確高效的搜索到需要的租賃房源信息。
技術棧：基于React框架
-
項目八：安心食療小程序
隨著社會時代的發展，大家都已經基本接近小康生活水平。也越來越多的人使用小程序方便自己得生活，不是下載大量得APP軟件。安心食療是一個關于美食介紹的小程序，同時推薦美食商城可以選購自己喜歡的食物加入購物車，實現購買美食零食。
技術棧：Vue + Ui-app + 小程序
五大更新模塊
小程序云開發
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變得非常容易。
第六版(2023版)課程變化
| 新增 |
Vue3 新特性
桌面場景
Flutter 技術
混合開發
RN 技術
UniApp 框架
實時疫情動態項目
項目部署
封裝工具庫
封裝組件庫
小程序分包
|
| 升級 |
Webpack5 工程化
React17 版本
大數據可視化
git 高級操作
小程序云開發
高級設計模式
面向對象編程
事件總線
|
| 強化 |
強化 React 基礎
強化 TypeScript
強化 Vue 實站項目
強化 Nodejs 服務端
強化大數據可視化
強化多終端混合開發
強化最新 ES 規范語法實戰
|
| 優化 |
Vue 項目性能優化
React 項目性能優化
Vue 項目國際化
可視化
token 流程體系優化
單點登陸實現優化
桌面程序打包優化
App 構建項目優化
|
優惠2000元（僅限前100名）
不負春光，和學習戀愛
我們的特色
真的實戰類型課程，無論是三大框架
還是小程序都是企業級實戰項目，
深度體會應用場景
根據學生需求更新對應課程，
適應工作需求
移動端課程優先，根據市場需求，
實時調整課程就業方法
2023年更新了前端
第六版課程大綱標準
國內技術過硬老師
全程面授
了解WEB前端（HTML5）
-
目前狀態
隨著互聯網與移動互聯網的迅猛發展和普及，傳統的站點已經不在能滿足人們的需求。而現在網上購物，網上直播，網上訂餐等都已經成為生活的一部分。而這些內容的呈現，就是WEB前端的展示。當你在朋友圈，好友對話中隨手打開的分享頁面，也是WEB前端的展示。（我們嘗試用通俗的方式來解釋前端，可能不夠標準，希望您能理解）
-
發展前景
2023年，前端仍然是一個非?；鸨膶I，就如我們所見，任何技術實現的結果都需要展示給用戶，而這些展示都是需要前端來進行完成。前端也不再是全部依賴于瀏覽器，而使用 native實現的原生 App 也是越來越多公司的選擇。
-
職位方向
前端開發工程師、小程序開發工程師、高級前端開發工程師、前端架構師、高級前端架構師
-
尚學堂的前端
1.前端交互層 2.前端邏輯層 3.服務器層
-
前端交互層
交互層可以理解為特效，我們需要能實現頁面的各種特效，以滿足目前站點的需求，例如動畫、過渡、圖形繪制等
-
前端邏輯層
前端邏輯層主要體現在前端的渲染問題，我們都知道，目前都是前后端分離或者混合開發，這無疑都是需要前端來進行渲染的。也就是我們要考慮的是：模板+數據=頁面
-
服務器層
作為一名優秀的前端開發者，你需要掌握服務器相關內容，node 則是我們的優先考慮，我們需要構建前端工程化，需要服務器端支持做渲染甚至需要具有完整服務器端開發的能力。
前端課程體系大綱
第一階段：網頁布局階段
| 章節名稱 | 主要學習方向 |
◆ 階段說明網頁布局階段是前端開發工程師必不可少的入門階段，通過講解基礎語法、開發工具的使用和大量高質量案例可以達到穩扎基礎，順利入門的效果。網頁布局階段屬于尚學堂課程中一大特色，專門針對基礎學員打造，避免上來就學面向對象等非常抽象概念，循序漸進，真正達到了學員聽得懂、學得會。 每天一個案例，難度平穩增加，避免只學理論，避免出現“一聽就會，一寫就廢” ◆ 階段目標√ 操作系統發展歷史√ 掌握HTML常用標簽 √ 掌握 瀏覽器控制臺調試代碼 √ 掌握 Vscode軟件的安裝與使用 √ 掌握CSS選擇器和相關屬性 √ 掌握 盒子模型相關概念和應用 √ 掌握 浮動原理和使用場景 √ 掌握CSS3新特性 √ 掌握 PC端網站布局 √ 掌握 PS切圖、取色、測量 ◆ 階段特色√ 專為小白和大白設計√ 對基礎更加細化，基礎學員學起來更輕松 √ 大量案例，講完即練，練會再講 √ 每天都有主線，清楚知道每天的學習能用在哪里 √ 基于前端網頁布局講解 √ 由淺入深，循序漸進 |
|---|---|---|
| HTML |
Vscode軟件應用
掌握HTML常用標簽
搭建頁面基本解構
|
|
| CSS |
CSS語法和引入方式
CSS選擇器和相關屬性
CSS浮動
盒子模型
定位等
|
|
| HTML+CSS案例 |
魅族官網
|
|
| CSS3 |
CSS3新特性 彈性盒子 偽類選擇器
|
|
| HTML5 |
HTML5語義化標簽 音頻、視頻標簽 畫布Canvas
|
|
| HTML5+CSS3案例 |
陰陽師官網
|
|
| 綜合項目案例 |
小米官網
|
第二階段：JavaScript基礎
| 章節名稱 | 主要學習方向 |
◆ 階段說明JavaScript是整個前端學習過程中的重難點，是學習前端的基礎，也是包含非常多面試題的階段。尚學堂為學員真正能學到精髓，避免出現“只學皮毛”現象，在講解JavaScript階段時會對所講內容全面跟蹤源碼，逐行解釋。真正做到了深入講解，也是尚學堂從成立至今不斷積累，不斷更新的成果。 在一些培訓機構單獨輔導面試題、最后突擊面試題的情況下，尚學堂更為學員考慮，面試題已經跟隨課程進行講解，邊學習邊準備面試。課程所講內容囊括市面上的面試題。由老師講解面試問題和面試答案，并多次幫助學員明確整理面試問題。這也是為什么尚學堂的學生可以達到“未畢業，先就業”的原因。 同時也對算法、數據結構、容器、多線程進行深入講解。容器作為工作和面試的重點，要求達到手寫容器的水平。 每天都有設有綜合案例，學以致用。 ◆ 階段目標√ 掌握 JavaScript基礎語法，培養編程、邏輯思維√ 掌握 DOM和BOM對象的常用屬性和方法，能夠完成網頁常見的交互效果 √ 掌握 ECMAScript 的知識體系及工作機制，熟悉 ES6+ 新的語法特性 √ 注重抽象思維的培養，具備面向對象編程的的能力 ◆ 階段特色√ 案例推動知識點講解√ 大廠面試中提取案例 √ 大量案例，講完即練，練完再講 √ 每天都有主線，清楚知道每天的學習能用在哪里 √ 知識點講解到代碼執行底層原理 √ 通過手寫案例，理解起來更清晰 √ 全面的面試題整理及講解 √ 全是干貨，重難點結合案例多次講解 |
|---|---|---|
| JavaScript基礎 |
變量
基本數據類型
數據類型的轉換
運算符
if分支
switch分支
三元表達式
while循環
for循環
數組
函數
對象
內置對象
|
|
| WebAPI |
DOM樹
DOM對象
獲取元素
環境對象
innerHTML
style
事件流
className
classList
間歇函數
延遲函數
事件監聽
鼠標事件
鍵盤事件
高階函數
節點操作
事件委托
元素位置
BOM
window對象
自定義屬性
面試題整理
|
|
| 面向對象編程 以及ES6新特性 |
字面量
構造函數
單體對象
面向對象
原型
class、getter、setter
柯里化
解構
箭頭函數
Object
let、const
嚴格模式
閉包
|
第三階段：JavaScript高級
| 章節名稱 | 主要學習方向 |
◆ 階段說明深入理解 ECMAScript 的知識體系及工作機制，注重抽象思維的培養，具備面向對象編程的的能力，添加大量企業級需求，從實際復雜需求練習JavaScript技術。◆ 階段目標√ 面向對象編程√ 原型鏈查找 √ 掌握正則表達式 √ 掌握設計模式 ◆ 階段特色√ 注重抽象思維的培養，具備面向對象編程的的能力√ 大量企業需求，關聯JavaScript使用 √ 超全面面試題及答案講解 √ JavaScript結合企業級項目綜合練習 |
|---|---|---|
| 面向對象進階 |
原型鏈
構造函數
執行上下文
作用域鏈
閉包
this
面試題整理
|
|
| ES5/ES6/ES7/ES8/ES9應用 |
Promise
Await
ES6對象新增方法
ES7/ES8/ES9新增屬性
事件隊列
事件循環執行
同步
異步
面試題整理
|
|
| JavaScript項目 |
結合企業級項目
練習JavaScript技術知識點
深入知識掌握
注重抽象思維的培養，具備面向對象編程的能力
|
第四階：服務器端交互
| 章節名稱 | 主要學習方向 |
◆ 階段說明服務器端交互階段是承上啟下的階段，目前企業開發并不是直接使用HTML+CSS+JavaScript，但是很多框架都是對其的封裝。學習完成此階段后可以具備編寫B/S C/S架構項目的能力。◆ 階段目標√ 掌握jQuery基本使用√ 深入理解服務器端思想 √ 了解PHP以及MySQL后端服務器語言 √ 掌握Ajax相關知識點 √ 掌握響應式框架Bootstrap框架 √ 掌握版本控制軟件 Git √ 掌握移動端布局 ◆ 階段特色√ 經典重現，包含所有經典知識點√ 初步感受服務器、深入理解前后端交互流程 √ 熟悉項目開發流程 √ 每天都有綜合案例，新老知識點融合 √ 全面的經典面試題及答案講解 |
|---|---|---|
| jQuery |
選擇器
節點方法
動畫
動畫隊列
事件
事件委托
鏈式操作
插件
插件機制協議和容器
|
|
| PHP和MySQL |
PHP基礎語法
軟件安裝
PHP連接數據庫
MySQL增刪改查語句
|
|
| Ajax 技術 |
客戶端與服務器
請求與響應報文
接口
form 表單
文件上傳
攔截器
FormData
XMLHttpRequest
防抖
節流
跨域
|
|
| Git |
安裝和配置 Git
Git 本地操作的常用命令
.gitignore 忽略文件
Git 分支與常用命令
遠程倉庫的使用
|
|
| Bootstrap框架 |
媒體查詢
Bootstrap框架
組件
柵格系統
響應式網頁布局
|
|
| HTML5新屬性 |
本地存儲
文件上傳
畫布Canvas
|
|
| 移動端 |
rem、vw/vh、Flex布局模型
Less基礎語法
視口
分辨率
二倍圖
移動適配
媒體 查詢
|
第五階段：框架前置
| 章節名稱 | 主要學習方向 |
◆ 階段說明框架前置階段主要針對目前市場上最為流行的node.js、npm、webpack講解。學習本階段開始感受架構的魅力和團隊開發的魅力。◆ 階段目標√ 掌握能夠使用 npm 維護項目中的依賴包√ 能夠使用 Promise 與 async/await 高效的實現異步操作 √ 掌握能夠理解 webpack 中的核心概念，為后續項目課的學習打好工程化開發的基礎 √ 理解團隊開發流程 √ 掌握服務器環境管理 √ 掌握接口文檔編寫 ◆ 階段特色√ 案例和項目都是前后端分離架構√ Node.js全面講解 √ 完全模擬企業小組開發，自定義實現前后端交互 |
|---|---|---|
| Node.js基礎 |
Node.js和瀏覽器的區別 Node.js環境的安裝 終端的常用命令 在Node.js 中執行 JS 代碼 fs模塊 path模塊 |
|
| npm |
包的基本概念 npm 包管理配置文件 全局包 項目包 常用的npm命令 模塊的 加載過程 |
|
| Express |
Express 的安裝和配置 處理 GET 請求 處理 POST 請求 獲取參數 處理跨域 |
|
| webpack |
工程化開發的概念 webpack 的基本配置 webpack-dev-server html-webpack-plugin 常用 loader babel |
第六階段：Vue框架
| 章節名稱 | 主要學習方向 |
◆ 階段說明掌握模塊化思想，npm包管理，webpack基礎，初探工程化開發。運用Vue2.0全家桶核心內容實現開發中常見的功能，如購物車，經典列表、TodoMVC等。運用 Vant 開發移動端，運用element-ui開發PC后臺管理系統。 掌握Vue3新特性、Vite、組合API、Pinia 等。 掌握TypeScript基礎語法，并且在Vue3項目中熟練運用TypeScript ◆ 階段目標√ 掌握Vue基礎知識√ 掌握Vue 框架項目腳手架搭建 √ 掌握Vuex數據狀態管理 √ 掌握路由跳轉 √ 掌握Vue組件之間數據傳遞的多種方式 √ 掌握Vue3新特性 √ 掌握TypeScript語言 ◆ 階段特色√ 案例貫穿技術點講解√ 企業級項目實戰案例引入 √ 邊講邊練，案例結合知識 √ 項目實戰 √ 全套后臺管理界面項目 √ 基于Vue3+Vite+Pinia+Element-Plus全家桶開發 √ Vue3.0項目實戰案例 √ 真實上線項目 |
|---|---|---|
| Vue基礎 |
MVVM
SPA
Vue調試工具
虛擬DOM
diff算法
指令系統
v-model原理
數據選項
生命周期
樣式穿透
動態樣式
插槽
組件系統
組件通信
自定義指令
ref
動態組件
$nextTick
自定義事件
計算屬性
偵聽器
組件庫
組件封裝
路由系統
導航守衛
vue-cli
工程化基礎
axios
interceptors
經典案例實戰
|
|
| Vue3.0高級 |
Vite
選項API
組合API
setup
生命周期
reactive
toRef
toRefs
computed
組件通信
依賴注入
ref邊界
Pinia
TypeScript
|
|
| 實戰項目 |
Vue2實戰項目：音樂移動端項目
電子商戶后臺
Vue3實戰項目：生鮮采購后臺管理系統
|
第七階段：微信小程序
| 章節名稱 | 主要學習方向 |
◆ 階段說明了解小程序開發的一般流程序，熟悉小程基礎組件的使用，能夠基于 wxml 和 wxss 實現小程序的界面布局，基于模板的數據綁定實現數據的動態渲染，基于 API 實現與服務端的數據通信，以及熟悉其它高級 API 的使用。理解 uni-app 實現跨平臺開發的原理機制，理清單文件組件與原生小程序組件的對應關系，以及 uni-app 開發小程序時開發時與原生小程序的差異。 基于真實需求綜合運用小程序開發的相關知識，突出小程序 API 的真實應用場景，強化和鞏固小程序開發的相關知識，提升綜合解決問題的能力。 ◆ 階段目標√ 能夠獨立開發小程序，提高就業能力，是就業的加分項√ 掌握小程序項目開發流程 √ 掌握uni-app開發小程序技術 ◆ 階段特色√ 從基礎到深入學習以及到項目實戰√ 多個企業級項目 √ 全套項目實例原型圖，感受產品經理工作內容 |
|---|---|---|
| 小程序基礎 |
賬號申請
開發工具
工程目錄
項目配置
屏幕適配
資源托管
字體圖標
數據綁定
事件處理
生命周期
場景值
模塊化
網絡請求
路由
WXS
模板
組件
UI 框架
表單
Promise
|
|
| uni-app |
腳手架
項目配置
單文件組件
生命周期
條件編譯
計算屬性
跨平臺支持
less
sass
組件通信
|
|
| 電商項目 |
客戶消息
微信地址
小程序轉發
區域滾動
上拉加載
下拉刷新
數據緩存
用戶信息
自定義組件
微信登錄
意見反饋
上線發布
|
第八階段：React框架
| 章節名稱 | 主要學習方向 |
◆ 階段說明React框架階段學習，進軍大廠必備，結合 TypeScript+Hooks 和函數式編程思想完成項目開發。通過React框架學習，可以具備復雜項目架構的能力。無論是小白還是大白，甚至有工作經驗的學員在本階段學習完成后都有非常明顯的個人能力提升。 ◆ 階段目標√ 掌握React基本語法，能夠使用class組件實現常見的業務功能√ 掌握運用hooks核心知識 √ 掌握Redux實現狀態管理 √ 掌握TypeScript語言 ◆ 階段特色√ 掌握React基本語法，能夠使用class組件實現常見的業務功能√ 掌握運用hooks核心知識 √ 掌握Redux實現狀態管理 √ 掌握TypeScript語言 |
|---|---|---|
| React基礎 |
組件系統
虛擬DOM
生命周期
無狀態組件
有狀態組件
ref
class
組件通信
create-react-app
路由
插值
state
|
|
| Hooks |
useState
useEffect
useRef
useContext
useEffect 高級用法
|
|
| Redux |
狀態管理流程
action、dispatch、store、combineReducers、reducer、redux-thunk、react-redux
開發調試工具
|
|
| 實戰項目 |
窮游商城PC端項目
房屋海選平臺移動端項目
|
第九階段：就業沖刺階段
| 階段說明 |
就業沖刺階段由老師幫助修改簡歷、模擬面試、解答面試問題。對之前講解的面試問題進行重難點串講。
|
| 階段目標 |
√ 掌握企業真實項目開發順序
√ 對接企業真是工作需求
√ 建立前端技術體系，搞定高頻的面試題
√ 掌握多人協同開發和解決bug的綜合技巧
|
| 階段特色 |
√ 就業老師面試指導
√ 簡歷指導
√ 模擬面試
√ 面試推薦
√ 畢業后仍可按需學習，免費充電，持續提升
√ 扶上馬，再送一程，幫助學員解決工作中的問題
|
- 課程體系
- 25個知識模塊
- 8個項目實例
- 5大更新模塊
- 2023新增
- 課程特色
- 課程大綱
