web前端培訓_web前端開發培訓_web培訓班機構-尚硅谷

前端天花板一覽眾山小

深度契合
打造真正企業級工作流場景 廣泛覆蓋
主流高能技術模塊深入剖析 即時更新
漸進式課程教學模式 額外附贈
架構師進階視頻豪華大禮包 戰略升級
多學科協作重構前端學習新生態 大咖面授
名師云集全程帶你從入門到突破

一才難求市場對前端人才的需求旺盛，人才缺口大

能解決企業實際業務問題的前端工程師供不應求

尚硅谷講授技術

· HTML· Vant UI
· 浮動· Mint UI
· 定位· Vue指令
· CSS2· HTML5新特性
· HTML5· PhotoShop
· Canvas· 企業UI圖布局
· Video· 語義化標簽
· Audio· 自定義播放器
· 拖拽· 響應式布局
· 2D變化· 雙飛翼布局
· 精靈圖· 圣杯布局
· Sass· 偽等高布局
· Less· LocalStroage
· Stylus· SessionStorage
· SVG· Websocket
· 盒模型· Animation
· 藍湖· Transition
· 3D變化· 幽靈按鈕
· Array· 文字特效
· JavaScript· 陰影特效
· Obejct· 翹邊陰影
· Function· ECMAscript2015
· Ajax· ECMAscript2016+
· Regex· jQuery插件
· prototype· 事件模型
· BOM· 事件委托
· DOM· ArtTemplate
· 函數化封裝· 數據可視化
· JSONP· BootStrap源碼分析
· CORS· Angular模板解析
· 閉包· Angular雙向數據綁定
· 原型· 單例模式
· 作用域· 工廠模式
· 性能優化· React移動端項目
· 棧· 建造者模式
· 隊列· 原型模式
· 鏈表· 代理模式
· 深拷貝· 事件隊列
· 淺拷貝· 流程語句
· 純函數· 條件語句
· jQuery· 編程模擬進出棧
· Echarts· 同步與異步
· Zepto· 回調函數
· BootStrap· Promise
· Angular· Generator
· npm· async & await
· cnpm· 宏隊列與微隊列
· yarn· 宏任務和微任務
· cookie· 高階函數
· session· 函數柯里化
· Nginx· 代碼組合
· JSONP· 常用排序算法1: 冒泡
· 中間件· 常用排序算法1: 選擇
· Koa.js· 常用排序算法1: 插入
· HTTP協議· Viewport 適配
· 爬蟲· REM 適配
· Git· 多指事件
· Svn· 事件點透
· Github· 物理像素
· CSS圖層· 橡皮筋效果
· Grunt· 封裝移動端插件
· Gulp· 布局視口
· Gulp熱加載· 視覺視口
· Webpack· 理想視口
· Vue· meta標簽
· Vue CLI· 無縫滑屏
· MVVM· MongoDB
· Vuex· 跨域問題
· Redux· 數據庫增刪改查
· Weex· GET,POST請求
· Mock· SHA1、MD5加密隱私數據
· Axios· 前端安全，數據加密
· Fetch· Express.js
· Fly.js· KoaRouter
· iView· 校驗服務器有效性
· 組件化· 接口管理
· 模塊化· 用戶管理
· MVC· 群發消息
· ESlint· 獲取全局接口調用憑據(ticket)
· slot· Signature值的計算
· props· 語音查電影功能
· state· 微信公眾號開發
· refs· 瀏覽器渲染原理
· 就業指導· 瀏覽器內核
· Vue2· requestAnimationFrame
· Vue3· DNS & CDN
· TypeScript· 跨頁簽通信的實現
· VueUse· 網頁性能優化
· AntD UI· 圖層的合理應用
· 生命周期· CSS&JS阻塞
· 小程序組件· 重繪重排
· mpvue· Linux常見命令
· uni-app· React
· Flutter· JsonServer
· 小游戲· Vue源碼分析
· Node.js· Element UI
· 微前端· setter/getter
· __proto__· 雙向數據綁定
· 設計稿· 消息訂閱發布
· 函數節流· ReactRouter
· 函數防抖· VueRouter
· Express.js· KeepAlive
· 單向數據流· React Hooks
· 原生小程序· 小程序音樂播放
· 小程序配置· cocos creator
· HTML· Vant UI
· 浮動· Mint UI
· 定位· Vue指令
· CSS2· HTML5新特性
· HTML5· PhotoShop
· Canvas· 企業UI圖布局
· Video· 語義化標簽
· Audio· 自定義播放器

企業招聘技術需求

實戰驅動技術大咖手把手教項目，多年實踐經驗傾囊相授

著眼于大局，立足于細節，教你將復雜龐大的需求，拆解成可執行的階段任務，實現高效開發

尚品匯
尚醫通
尚上優選
尚樂購
遇尚
尚頭條
愛尚記賬

尚品匯—大型Vue項目

項目介紹：

尚品匯，由多位京東大神參與共研，是一個以京東商城為參考原型的互聯網B2C的電子商城項目，包含了后臺商品管理、商品檢索、商品詳情、購物車、單點登錄、訂單、支付、秒殺、庫存管理等電商業務。

技術選型：

前臺PC

點擊體驗

· less · uuid · axios · vueuse · ES6+

· swiper · vite2.8 · vue3.2 · qrcode · mockjs

· pinia2.0 · nprogress · vue-router4.0 · vue-validate · typescript4.5 …

中臺Admin

點擊體驗

· ES6+ · sass · mockjs · vue2.6

· axios · echarts · vuex3.1 · element-ui

· vue-echarts · vue-router3.0 · vue-admin-template …

尚醫通—大型React項目

項目介紹：

網上預約掛號是近年來開展的一項便民就醫服務，旨在緩解看病難、掛號難的就醫難題，許多患者為看一次病要跑很多次醫院，還不一定能保證看得上醫生。網上預約掛號提供的預約掛號業務，解決了這一就醫難題。隨時隨地輕松掛號，不用排長隊！

技術選型：

前臺PC

點擊體驗

· vite2.8 · antd · dayjs · qrious · ES6+

· react-dom17.0 · react-redux · redux-thunk · redux-logger · redux-persist

· react17.0 · redux4.1 · js-cookie · react-router-dom6.2 · bootstrap …

中臺Admin

點擊體驗

· axios · antd · echarts · less

· redux4.1 · redux-thunk · react-redux · nprogress

· react17.0 · react-dom17.0 · react-router-dom6.2 · typescript4.6 ...

尚上優選—小程序項目

項目介紹：

尚上優選是一家社區電商平臺，采用“當日下單+次日送達+門店自提”的模式，圍繞社區居民日常生活所需，滿足不同用戶的差異化需求，通過倉儲配送體系，以便捷的方式和舒心的服務提升了用戶的消費體驗。

技術選型：

會員小程序端

點擊體驗

· vue · vuex

· scss · dayjs

· uni-app · uview-ui

· bmap-wx · 原生小程序API ...

平臺管理端

點擊體驗

· vue · vuex

· sass · axios

· vue-router · nprogress

· vue-admin-template · element-ui ...

尚樂購—電商平臺數據大屏監控系統

項目介紹：

數據大屏可視化項目給我們帶來多種數據可視化的實現技術（canvas、svg和echarts）。使用echarts+vue+element-ui配合使用，實現柱狀圖、折線圖、餅圖、地圖、詞云圖等多種圖形的動態展現，并通過響應式處理來動態適配瀏覽器和大屏尺寸變化，同時自定制圖表效果，以及根據業務需求實現數據的高質量展現。

技術選型：

數據大屏

點擊體驗

· vue · sass · ES6+

· echarts · axios ...

· vue-echarts · element-ui

遇尚—原生App項目

項目介紹：

遇尚是一款陌生人在線交友平臺，充分發揮陌生人交友特點，平臺提供了附近圈、朋友圈，通過大數據平臺智能推薦好友與動態，用戶采取了人臉識別技術，還提供在線即時通訊，以滿足用戶的交友需求。

技術選型：

App前端

點擊體驗

· expo · react

· redux · babel

· validator · axios

· react-native …

管理平臺

點擊體驗

· vue · vuex

· sass · axios

· vue-router · nprogress

· vue-admin-template · element-ui …

尚頭條—全棧后臺管理項目

項目介紹：

此項目是工程化階段的相關重要技術(Node / Mongodb / Express / ES6 / Axios / Webpack)的綜合性實戰應用，項目的業務邏輯不算復雜，主要提高學員此階段所學技術的綜合運用和編碼能力。包含兩個子應用：后臺接口數據處理應用與前臺數據展現交互應用。

技術選型：

管理端

點擊體驗

· ejs · jwt · md5 · node · less · axios · jquery

· mongodb · express · mongoose · bootstrap · sme-router · webpack …

愛尚記賬——全棧H5記賬本項目

項目介紹：

本項目是為全棧工程量身定制的一套全鏈路課程，以提高學員綜合能力和對整個前后端開發過程的把控能力為目標，從產品設計、接口設計、數據庫設計到前端開發，涉及到整個互聯網產品從0到1的開發過程，讓你重新認識全棧開發的邊邊角角和技術選型。項目應用主技術棧為Node+React，采用前后端分離的開發形式，配套專業的文檔說明，讓學員上手更加輕松容易。

技術選型：

客戶端

點擊體驗

· node · egg · zarm · less · apifox · vite · react-captcha-code

· react · react hooks · flexible · react-router · egg-jwt · egg-mysql

課程大綱廣泛覆蓋企業級技術選型

與釘釘等企業合作共建大前端課程，Vue2 + Vue3 + React+工程化全新升級

依靠硅谷完備的課程更新機制，不斷吐故納新，保持所授技術的實用性和前瞻性相結合

HTML

HTML5新特性

PhotoShop

企業UI圖布局

精靈圖

浮動

定位

CSS2

語義化標簽

自定義播放器

響應式布局

雙飛翼布局

Git

圣杯布局

偽等高布局

Canvas

Video

LocalStroage

SessionStorage

Websocket

拖拽

Animation

Transition

2D變化

3D變化

生命周期

幽靈按鈕

文字特效

陰影特效

翹邊陰影

Sass

Less

Stylus

SVG

盒模型

藍湖

設計稿

JavaScript

Obejct

Array

Function

Ajax

Vue指令

Regex

ECMAscript2015

ECMAscript2016

prototype

__proto__

Bom

Dom

函數化封裝

JSONP

CORS

閉包

原型

作用域

Vue

性能優化

單例模式

工廠模式

建造者模式

原型模式

代理模式

事件隊列

流程語句

條件語句

棧

隊列

編程模擬進出棧

setter/getter

同步與異步

回調函數

Promise

Generator

async與await

宏隊列與微隊列

宏任務和微任務

高階函數

純函數

函數柯里化

小程序音樂播放

代碼組合

鏈表

常用排序算法1: 冒泡

常用排序算法1: 選擇

常用排序算法1: 插入

函數防抖

函數節流

深拷貝

淺拷貝

jQuery

模塊化

組件化

jQuery插件

事件模型

事件委托

ArtTemplate

Echarts

數據可視化

BootStrap

BootStrap源碼分析

Angular

Angular模板解析

Vuex

Angular雙向數據綁定

Zepto

viewport

gRem

多指事件

事件點透

物理像素

橡皮筋效果

封裝移動端插件

布局視口

視覺視口

Vue

理想視口

meta標簽

無縫滑屏

Node.js

Express.js

npm

cnpm

yarn

session

MongoDB

跨域問題

Nginx

JSONP

Vue源碼分析

數據庫增刪改查

GET,POST請求

HTTP協議

SHA1、MD5加密隱私數據

前端安全，數據加密

中間件

Koa.js

Express.js

Koa-router

MVVM

校驗服務器有效性

接口管理

用戶管理

群發消息

獲取全局接口調用憑據(ticket)

signature值的計算

語音查電影功能

爬蟲

單項數據流

科學設置七大階段由淺入深循序漸進，為解決實際問題而學習

每個階段都有案例或項目，將技術教學融入到項目實戰中，拒絕死記硬背

第一階段：HTML + CSS核心基礎

· HTML、CSS核心基礎
· HTML5新特性
· CSS3新特性
· CSS過渡與動畫
· 彈性盒模型
· 藍湖工具使用
· 項目-尚品匯靜態頁面
· 經典布局練習(雙飛翼，品字布局)

掌握的技能

1. HTML和HTML5基礎語法
2. CSS和CSS3的基礎語法
3. 掌握100+個企業級布局設計案例
4. 使用藍湖工具，根據設計稿，實現完整靜態頁面

課程設計特色

此階段中案例，都可以在網站中找到出處。通過設計稿，使用藍湖工具實現從0到1的開發完整的靜態頁面。實現企業級的項目布局，真實呈現。

第二階段：JavaScript

· JavaScript基礎
· Web API(BOM & DOM)
· JavaScript操作DOM
· CSS預編譯器(Less & Sass)
· 前端常用工具庫
· 手寫工具函數庫
· JavaScript面向對象(JS高級)
· 項目-PC項目（HTML+CSS+JS）實現

掌握的技能

1. ES5基礎語法，BOM與DOM的語法使用和案例實現
2. 封裝工具函數庫(節流、防抖、深淺拷貝、數組常用方法實現等)
3. JS作用域、閉包、原型、繼承、內存分析、內存管理、垃圾回收等深入分析
4. 借助藍湖工具，根據設計稿，構建頁面，到使用JS呈現項目流程
5. 掌握jQuery核心語法，Less和Sass的基本語法，BootStrap頁面的構建及源碼分析

課程設計特色

此階段中經典算法講解，講解源碼，提升學員的編程邏輯思維能力，具備js原生書寫能力，覆蓋市場主流解決方案。呈現從設計稿到靜態頁面到動態實現的整個流程。

第三階段：ES6 + Node + 工程化

· ES5+ & ES6+
· NPM與YARN常用命令
· Git常用命令與協同開發
· Node.js & Express框架 & MongoDB
· HTTP協議 & Cookie & Session
· Ajax（原生、工具庫、自定義封裝）
· ESM與ComonJS模塊化
· 構建工具Gulp、Webpack5.0
· 工程化項目

掌握的技能

1. 掌握分布式版本控制工具Git的綜合使用
2. 了解Node.js基礎，HTTP服務搭建，接口編寫
3. 掌握Promise處理異步操作，和使用async/await簡化異步操作
4. 掌握前后臺交互技術Ajax，并封裝Ajax庫
5. 掌握基于Webpack的工程化開發，全棧項目開發后臺管理系統

課程設計特色

此階段中使用項目的方式完整貫穿整個工程化的知識點，實現總分總的教學方法，實現后臺管理系統，將工程化的知識點和原理深入講解。

第四階段：React技術棧

· React基礎語法
· React Hooks
· React-router
· Redux
· React Antd
· React與Redux原理分析
· TypeScript
· 尚醫通-大型React醫療項目-中臺Admin

掌握的技能

1. 掌握React基礎語法和最新的Hooks語法使用
2. 掌握React核心插件的使用(React Router、Redux、Antd)
3. 分析React和Redux源碼，深入了解框架的實現原理
4. 掌握TypeScript的核心語法使用，并與React相關庫的配合開發
5. 掌握React+TS的企業級項目開發

課程設計特色

此階段中采用企業級主流的方式來設計后臺管理系統的項目，模擬企業級真實需求來做，對React的深入使用，源碼級講解。

第五階段：Vue技術棧

· Vue基礎
· VueRouter
· Vuex
· ElementUI & VantUI
· Vue源碼(數據響應式、虛擬DOM)
· Vue3+TS
· 尚品匯-大型Vue電商項目-前臺PC
· 尚品匯-大型Vue電商項目-中臺Admin

掌握的技能

1. 掌握Vue2的基礎語法和核心擴展庫(Router、Vuex、ElementUI)
2. 掌握Vue3的最新語法和核心插件(Router、Pinia、ElementPlus)
3. 理解Vue2與Vue3的響應式和虛擬DOM的原理及其區別
4. 掌握Vue2+JS 與 Vue3+TS的企業級項目開發

課程設計特色

此階段中深入講解了Vue的底層源碼，以及各種場景下的解決方案，覆蓋企業級各種技術選型，做到從畢業到企業的無縫銜接，項目中需求文檔和接口均為真實接口。

第六階段：小程序技術棧

· 原生小程序核心API
· 小程序框UniApp的核心API
· 小程序UI組件庫uView
· 谷粒音樂(原生小程序)
· 尚上優選(UniApp小程序)

掌握的技能

1. 掌握原生小程序核心語法，開發原生小程序應用
2. 能快速開發基于UniApp的小程序應用
3. 掌握項目開發的完整流程與應用技巧

課程設計特色

此階段中掌握企業級工作流，從原生到框架掌握，從部署到上線，UniApp的項目中包含了企業級項目的設計。

第七階段：實戰 + 精講

· Vue前臺項目實戰
· Vue后臺管理項目實戰
· React前臺/后臺項目實戰
· 小程序項目實戰
· 前端技術體系化復習總結
· 高頻&大廠面試題分析

掌握的技能

1. 掌握基于Vue和React技術棧的項目開發
2. 掌握基于原生小程序和UniApp小程序的項目開發
3. 掌握多人協同開發和解決bug的綜合技巧
4. 建立前端技術體系，搞定高頻的面試題

課程設計特色

實戰項目中堅決按照開發的設計來實現，完整的接口文檔書寫，企業的編碼要求。不僅僅講解高頻面試題，還為學生建立完整的前端技術體系。

額外加贈100+課時架構師視頻課

夯實基礎，拔高技術，提升市場競爭力

贈送
視頻

Git高級

Webpack高級

Taro框架

數據結構算法

設計模式
函數式編程

自定義工具庫

自定義PubSub
EventBus

自定義
Promise高級

尤其擅長原生JavaScript、jQuery、CSS3+HTML5

高老師

先后任職大型國企、字節跳動，精通HTML、CSS、JS

全程面授 300+業務場景覆蓋 200+技術點講透主流框架 100+課時架構師拔高視頻

前端天花板 一覽眾山小

一才難求市場對前端人才的需求旺盛，人才缺口大

尚硅谷講授技術

企業招聘技術需求

應用廣泛前端技術廣泛覆蓋眾多行業領域

實戰驅動技術大咖手把手教項目，多年實踐經驗傾囊相授

尚品匯—大型Vue項目

尚醫通—大型React項目

尚上優選—小程序項目

尚樂購—電商平臺數據大屏監控系統

遇尚—原生App項目

尚頭條—全棧后臺管理項目

愛尚記賬——全棧H5記賬本項目

課程大綱廣泛覆蓋企業級技術選型

依靠硅谷完備的課程更新機制，不斷吐故納新，保持所授技術的實用性和前瞻性相結合

第一階段：HTML + CSS核心基礎

掌握的技能

課程設計特色

第二階段：JavaScript

掌握的技能

課程設計特色

第三階段：ES6 + Node + 工程化

掌握的技能

課程設計特色

第四階段：React技術棧

掌握的技能

課程設計特色

第五階段：Vue技術棧

掌握的技能

課程設計特色

第六階段：小程序技術棧

掌握的技能

課程設計特色

第七階段：實戰 + 精講

掌握的技能

課程設計特色

贈送視頻

職業發展高起點入行，你也可以

全程面授講師團隊擁有豐富的企業工作與授課經驗

張老師

李老師

李老師

張老師

李老師

熊老師

李老師

劉老師

楊老師

閆老師

劉老師

邱老師

付老師

閆老師

賈老師

張老師

羅老師

張老師

方老師

陳老師

王老師

李老師

張老師

高老師

持續賦能為學員成長保駕護航

入學測驗

個性化預習方案

技術學習期

求職期

三年免費谷粒學苑SVIP

入職追蹤

厲害了，我的硅谷

廣泛涵蓋大數據、教育、教務管理、閱讀、社區等領域

校區環境整潔有序，竭盡全力為學員提供高效學習氛圍

全程面授

300+
業務場景覆蓋

200+
技術點講透主流框架

100+
課時架構師拔高視頻

前端天花板一覽眾山小

一才難求市場對前端人才的需求旺盛，人才缺口大

實戰驅動技術大咖手把手教項目，多年實踐經驗傾囊相授

依靠硅谷完備的課程更新機制，不斷吐故納新，保持所授技術的實用性和前瞻性相結合

贈送
視頻

職業發展高起點入行，你也可以

厲害了，我的硅谷

廣泛涵蓋大數據、教育、教務管理、閱讀、社區等領域

校區環境整潔有序，竭盡全力為學員提供高效學習氛圍