1. 完成本項目以后，能夠讓你熟練的掌握前端搭建網(wǎng)站的所有流程。
2. 具備網(wǎng)頁端異步請求的能力
3. 掌握 jquery javascript 基礎語法
4. 掌握 scss 語法
5.
掌握自動化流布局工具 Gulp 使用
6. 掌握 css 預編譯處理器 scss 使用
7. 掌握模塊發(fā)開發(fā)技術(shù) requirejs 和 AMD 規(guī)范
8. 掌握客戶端和服務器端交互技術(shù)
為什么要推薦學WEB前端工程師？
重新定義自己，你的職場你做主
-
人才缺口大
熱門行業(yè)人才缺口大
了解詳情 -
招聘需求大
招聘量大，日招聘量達
了解詳情
63232個 -
學習門檻低
0基礎可學，非計算機專業(yè)
了解詳情
也可上手 -
薪資福利好
名企大廠都需要，相關(guān)
了解詳情
崗位福利待遇好 -
就業(yè)前景廣
互聯(lián)網(wǎng)時代，各行業(yè)都需
了解詳情
要，尤其IT、科技、金融等 -
就業(yè)選擇多
如網(wǎng)站、App、桌面應用、
了解詳情
智能電視、數(shù)據(jù)可視化等 -
職業(yè)天花板高
各階段晉升路線明確，技
了解詳情
術(shù)、管理等，職場光明 -
男女不限制
沒有性別專業(yè)歧視，只以
了解詳情
技術(shù)論高低
*此處招聘量數(shù)據(jù)來源于職友集，數(shù)據(jù)樣本選取日期為2023年2月10日，僅作為信息展示，不作為效果承諾
從0基礎小白，到前端開發(fā)工程師
你與前端工程師的距離有多遠？
新華WEB前端工程師高品質(zhì)課程，實用技術(shù)助你逐夢職場
-
教研+師資團隊
新華互聯(lián)網(wǎng)科技每年投入數(shù)千萬用于研發(fā)，百人教研專職團隊、千人教學團隊打造高品質(zhì)課課堂
-
特色課程
基礎-專業(yè)-項目-企業(yè)-就業(yè)-職后課程，從學習到就業(yè)再到職后賦能，讓你實現(xiàn)從0到1的突破
-
人才培養(yǎng)成果
每年培養(yǎng)泛IT人才近2萬人，累計培養(yǎng)超10余萬泛IT人才
- 1
- 2
- 3
- 4
- 5
- 6
多班型精準培優(yōu)
開設多種班型，可根據(jù)自己的需求、上課時間、地點來選擇合適的課程
完善服務助力就業(yè)
新華不定期專場招聘會、校企項目培養(yǎng)定制、企業(yè)內(nèi)部推薦等，并有專業(yè)老師做職業(yè)生涯規(guī)劃、簡歷指導、模擬面試等，一站式服務，助力就業(yè)
數(shù)百萬學員受益
每年有數(shù)百萬名學員接受新華組織技術(shù)研討會、技術(shù)培訓課、網(wǎng)絡公開課及免費學科視頻等服務
課程升級，培養(yǎng)新時代WEB前端工程師
量化內(nèi)容，逐步增加核心技能，時間見證你的蛻變
-
前端基礎，頁面設計
零基礎入門了解HTML5開發(fā)
熟悉前端的開發(fā)工具及流程
熟悉常見的HTML標簽
熟悉常見CSS樣式
-
移動端網(wǎng)頁制作與響應式實現(xiàn)
移動端概念與布局
響應式與實現(xiàn)
實現(xiàn)標簽元素和CSS的運用
-
JavaScript核心技術(shù)
掌握 JavaScript 進行基礎編程
面向?qū)ο筮M階與ES應用
掌握Bootstrap前端框架
掌握Ajax異步交互
-
PC端WEB項目開發(fā)
前端工具庫
前端工程化與模塊化
Node.js 服務端開發(fā)
PC端網(wǎng)站開發(fā)
-
服務器端技術(shù)
Node.JS 服務器端開發(fā)技術(shù)
掌握mySql關(guān)系型數(shù)據(jù)庫使用
熟練API數(shù)據(jù)連接
Web后端JSON數(shù)據(jù)
-
原生應用開發(fā)技術(shù)
Node.js
熟悉webpack/vite等工具
微信小程序開發(fā)
uni-app 開發(fā)
-
混合應用開發(fā)技術(shù)
TypeScript 語法
Symbols
Git的常見操作
-
前端高級框架技術(shù)
Vue
React
Angular
數(shù)據(jù)可視化
六大特色課程，只學實用核心技能
基礎+專業(yè)+實戰(zhàn)+企業(yè)+就業(yè)+職后，助力職場順暢
-
基礎課
前端基礎，頁面設計
-
專業(yè)課
深度學習WEB前端工程師，全棧開發(fā)能力
-
項目課
真項目，真實戰(zhàn)，多學科聯(lián)合開發(fā)
-
企業(yè)課
企業(yè)項目導師，熱門技能學習
-
就業(yè)課
求職穩(wěn)定發(fā)揮，提升職業(yè)素養(yǎng)
-
職后課
職場持續(xù)提升，提升自身技能
一：HTML5
HTML基礎標簽
表單元素
table布局
HTML5新增標簽
audio和vedio
三：CSS3高級屬性
flex布局
grid 網(wǎng)格布局
響應式布局@Media
轉(zhuǎn)換transform
動畫annotation
五：麥當勞網(wǎng)站設計實戰(zhàn)
能獨立搭建pc端頁面；
熟悉頁面布局過程
中的bug和解決方式
各種布局的靈活運用和CSS動畫效果
二：CSS3樣式表
初識CSS,塊級元素和行內(nèi)元素
CSS常用樣式和導入方式
盒子模型
元素定位Position
網(wǎng)頁DIV布局和CSS3選擇器
四：項目——網(wǎng)易新聞
實現(xiàn)標簽元素和CSS的運用
基本pc端頁面布局；
熟練利用ps切圖、取色、測量
六：豆瓣電影網(wǎng)成套頁面設計
熟悉 web 前端的開發(fā)工具及流程
熟悉常見的 HTML 標簽及屬性
熟悉常見的各種CSS 樣式
熟練完成靜態(tài)頁面設計
第一階段 前端頁面重構(gòu)
1.企業(yè)級 PC 端網(wǎng)頁開發(fā)
2.企業(yè)級移動端網(wǎng)頁開發(fā)
3.HTML5 CSS3 新特性
第三階段 Vue.js 前端框架 +React 前端框架 + 小程序開發(fā)
1.MVVM 原理及虛擬 DOM 比對
2.vue2 和 vue3 的基礎使⽤項⽬實戰(zhàn)
3.vue2 和 vue3 的優(yōu)化上線
4.react 和 vue 之間不同和虛擬 DOM 實現(xiàn)
5.webpack 相關(guān)配置的搭建項⽬流程
6.了解jsx 解析實現(xiàn)
7.react 使⽤和項目實戰(zhàn)；常用 UI 組件庫
8.自定義私有組件庫以及發(fā)布流程
9.React 生態(tài)系統(tǒng)及原生小程序開發(fā)
10.第三⽅框架實現(xiàn)跨端及平臺小程序開發(fā)
11.數(shù)據(jù)可視化不同使⽤場景
12.typescript 技術(shù)棧
13.團隊合作完成項⽬技巧
第二階段 JavaScript 高級程序設計 +PC端WEB開發(fā)
1.原生Javascript 交互功能開發(fā)
2.⾯向?qū)ο筮M階與 ES5/6/7/8/9/10 應⽤
3.Javascript ⼯具庫開發(fā)
4.Javascript 數(shù)據(jù)結(jié)構(gòu)、變成模式、常⽤算法
5. jQuery 經(jīng)典交互特效開發(fā)
6. Echarts 數(shù)據(jù)可視化
7.Node+Mongodb 后端基礎
8.前端工程化與模塊化應⽤及Git 基本使⽤
項目名稱：PC端全棧項目
開發(fā)周期： 5 天
開發(fā)時間：第 12 周
項目名稱：基于 Vue.js WebAPP 開發(fā) / 基于 Vue.js 管理信息系統(tǒng)開發(fā)
開發(fā)周期：8 天
開發(fā)時間： 第 15 周
項目名稱：小程序開發(fā)項目
開發(fā)周期：8 天
開發(fā)時間： 第 20 周
項目名稱：基于 Node.js 后臺管理系統(tǒng)
開發(fā)周期：8 天
開發(fā)時間：第 13 周
項目名稱：基于 React WebAPP 開發(fā) / 基于 React 管理信息系統(tǒng)開發(fā)
開發(fā)周期：8 天
開發(fā)時間：第 18 周
項目名稱：UI+ WEB前端工程師 +Java/Python+ 云計算 + 網(wǎng)絡安全 + 物聯(lián)網(wǎng) + 大數(shù)據(jù)
開發(fā)周期：1.5-2 個月
開發(fā)時間：學科最后一個階段開始
一、團隊戶外拓展訓練
課程內(nèi)容： 團隊建設、團隊協(xié)作；逆境生存法則
掌握能力： 團隊協(xié)作能力；逆境生存能力
解決問題： 調(diào)節(jié)專業(yè)課學習狀態(tài)；增加企業(yè)拓展訓練經(jīng)驗
三、管理課程
課程內(nèi)容： 項目管理架構(gòu)及流程；整合管理和范圍管理 時間管理、成本管理和質(zhì)量管理；人力資源管理、溝通管理、風險管理 基層管理者領(lǐng)導力提升培訓解決方案
掌握能力： 企業(yè)項目管理流程和方法；如何帶領(lǐng)一個小團隊
解決問題： 使學員提前掌握企業(yè)項目管理和團隊管理能力
二、企業(yè)合作項目課程
課程內(nèi)容： 項目需求分析與交互設計 前后端及移動端流行工具、框架與庫的企業(yè)項目深度應用實戰(zhàn) JavaScript框架設計；移動端組件庫設計；項目架構(gòu)與產(chǎn)品選型 大廠項目開發(fā)流程、項目測試、部署與發(fā)布實踐；項目安全、性能與可用性實戰(zhàn) 與兄弟部門及項目團隊密切合作及有效溝通
掌握能力： 項目開發(fā)流程；企業(yè)開發(fā)架構(gòu)；企業(yè)級應用代碼觀摩；企業(yè)部門合作方式；JavaScript深度應用
解決問題： 提前了解企業(yè)用人要求和技術(shù)要求；體驗企業(yè)工作流程和工作要求；WEB前端工程師技術(shù)企業(yè)落地
《企業(yè)初認知》
課程內(nèi)容： 公司類型 企業(yè)組織架構(gòu) 企業(yè)崗位發(fā)布及招聘流程 企業(yè)招聘途徑 對標IT綜合素養(yǎng)和技術(shù)
掌握能力： 熟悉公司類型，組織架構(gòu)和本職位相關(guān)工作流程以及公司招聘常用招聘平臺等，讓學員對公司有初步認知，能清晰目標走出舒適區(qū)，努力修煉技能，拿到職場入場券
《企業(yè)需求及職場規(guī)則》
課程內(nèi)容： 企業(yè)軟需求 情商提升 職場規(guī)則
掌握能力： 重點從公司考察的硬實力和軟實力出發(fā)，分析需要掌握的技能，從態(tài)度、言行、微笑等細節(jié)及職場潛規(guī)則等方面解讀，了解職場法則
《市場行情分析及職業(yè)發(fā)展》
課程內(nèi)容： 市場行情分析 崗位招聘需求分析 職業(yè)生涯規(guī)劃 技術(shù)網(wǎng)站拓展
掌握能力： 了解國內(nèi)各個城市在招聘平臺的招聘數(shù)量、薪資分布、崗位職責等內(nèi)容。360度解讀一名程序員的職業(yè)生涯發(fā)展路線，讓你對從事崗位有具體、細致了解，清晰自己職業(yè)規(guī)劃
《求職禮儀及面試常見問題》
課程內(nèi)容： 求職禮儀、薪資構(gòu)成、社保及合同解讀其他職場常見問題
掌握能力： 從著裝、談話、儀容、薪資構(gòu)成以及五險一金、合同等方面，從個人形象打造到熟悉法規(guī)保護個人權(quán)益等進行解讀，為進入職場保駕護航
一、算法與網(wǎng)絡
掌握能力： 計算機網(wǎng)絡、數(shù)據(jù)結(jié)構(gòu)與算法
解決問題：
數(shù)據(jù)處理場景中的各種算法及邏輯問題
場景網(wǎng)絡協(xié)議下的優(yōu)化調(diào)試問題
數(shù)據(jù)處理場景中的各種算法及邏輯問題
場景網(wǎng)絡協(xié)議下的優(yōu)化調(diào)試問題
二、前端框架（實時更新）
掌握能力： Ionic基礎與實戰(zhàn)、微信公眾號開發(fā)
各類混合應用開發(fā)、React-Native開發(fā)
Flutter開發(fā)Angular前端框架
大數(shù)據(jù)可視化基礎與實戰(zhàn)
桌面APP開發(fā)Electron開發(fā)探索
解決問題： angular應用開發(fā)及相關(guān)技術(shù)
公眾號開發(fā)常見問題
MUI及Cordova混合開發(fā)
基于RN或者Flutter的原生app開發(fā)場景
大數(shù)據(jù)可視化實戰(zhàn)
桌面端軟件開發(fā)
互聯(lián)網(wǎng)大廠真實戰(zhàn)項目，學習即“實習”
真實戰(zhàn)項目，理論與實際結(jié)合，助你成為實戰(zhàn)型人才
- 仿小米商城
- 仿美團PC端
- 數(shù)據(jù)可視化項目
- 全球新聞發(fā)布系統(tǒng)
- 鋒蜜外賣管理端
- 鋒蜜嗨購管理平臺
仿小米商城
仿前端小米商城，本項目是基于原生 JavaScript 等前端技術(shù)實現(xiàn)的仿小米電商網(wǎng)站。本項目前端代碼
設計技術(shù)棧有（JQuery、scss、Gulp、模塊化開發(fā)），后臺構(gòu)造技術(shù)包括（PHP、MySQL）等后臺編程知識。
掌握能力
仿美團 PC 后臺管理系統(tǒng)
為美團 PC 配套開發(fā)的管理平臺，采用 VUE 框架進行開發(fā)，實現(xiàn)了大屏數(shù)據(jù)可以刷、分類管理、
門店管理、門店產(chǎn)品、訂單管理、用戶管理、角色管理、權(quán)限管理等模塊。項目中采用第三方地圖
實現(xiàn)門店維度經(jīng)度定位、富文本、多圖上傳、echarts 圖表展示、RBAC 權(quán)限機制等功能。
掌握能力
1. 使用 node+gulp 從 0 到 1 實現(xiàn)項目模塊化管理
2. 使用 jquery 實現(xiàn)項目交互操作
3. 采用前端代理 http-proxy-middleware 解決跨域 4. 使用 git 進行版本控制
5. 采用極客行為驗證碼避免防關(guān)稅
6. 采用支付寶、微信 API 實現(xiàn)支付功能
7. 采用 H5C3 進行網(wǎng)頁布局
8. 使用騰訊地圖實現(xiàn)定位用你那個
9. 采用阿里云對象存儲 +CDN 實現(xiàn)圖片處理
10. 使用 H5 新增 API FileReader 實現(xiàn)圖片上傳同步阿里云
2. 使用 jquery 實現(xiàn)項目交互操作
3. 采用前端代理 http-proxy-middleware 解決跨域 4. 使用 git 進行版本控制
5. 采用極客行為驗證碼避免防關(guān)稅
6. 采用支付寶、微信 API 實現(xiàn)支付功能
7. 采用 H5C3 進行網(wǎng)頁布局
8. 使用騰訊地圖實現(xiàn)定位用你那個
9. 采用阿里云對象存儲 +CDN 實現(xiàn)圖片處理
10. 使用 H5 新增 API FileReader 實現(xiàn)圖片上傳同步阿里云
數(shù)據(jù)可視化項目
數(shù)據(jù)可視化這一概念自 1987 年正式提出，經(jīng)過 30 余年的發(fā)展，逐漸形成 3 個分支：科學計算可視化(scientific
visualization)、信息可視化 (information visualization) 和可視分析 (visualanalytics)。近些年來，這 3
個子領(lǐng)域出現(xiàn)了逐漸融合的趨勢。我們統(tǒng)稱為“數(shù)據(jù)可視化”。
掌握能力
1. 使用 CRA+Vue3+Express+Echarts 搭建開發(fā)環(huán)境，使用阿里云 +Nginx 進行項目運行
2. 使用 Vue-Router4 進行導航組件開發(fā)實現(xiàn)多界面跳轉(zhuǎn)
3. 使用 axios 異步 HTTP 請求，封裝攔截器與請求 Api 實現(xiàn)動態(tài)頁面數(shù)據(jù)獲取
4. 組件化模塊化開發(fā) 配合 Vuex 進行跨層級數(shù)據(jù)傳遞，并且進行二次組件封裝提高復用性
5. 使用 Echarts 各項 Api 配置進行大數(shù)據(jù)圖標展示
2. 使用 Vue-Router4 進行導航組件開發(fā)實現(xiàn)多界面跳轉(zhuǎn)
3. 使用 axios 異步 HTTP 請求，封裝攔截器與請求 Api 實現(xiàn)動態(tài)頁面數(shù)據(jù)獲取
4. 組件化模塊化開發(fā) 配合 Vuex 進行跨層級數(shù)據(jù)傳遞，并且進行二次組件封裝提高復用性
5. 使用 Echarts 各項 Api 配置進行大數(shù)據(jù)圖標展示
全球新聞發(fā)布系統(tǒng)
企業(yè)級全球新聞發(fā)布管理系統(tǒng)項目，實現(xiàn)了從新聞創(chuàng)建，到新聞審核，新聞發(fā)布，新聞下線完整業(yè)務鏈路，
包含但不限于以下模塊，登錄模塊、權(quán)限管理、角色管理、用戶管理、新聞管理、分類管理、審核管理、 發(fā)布管理、數(shù)據(jù)分析。
掌握能力
1. 基于 React, ReactRouter,Redux, React-Redux 全家桶實現(xiàn)功能組件以及業(yè)務模塊開發(fā)。
2. 基于 AntDesign 組件 ，react-tsparticles 模塊完成 UI 搭建，提升用戶體驗。
3. 基于 react-draft-wysiwyg ， *draft-js* 完成新聞的富文本編輯器功能。
4. 基于 *echarts* 實現(xiàn) 熱點新聞以及個人新聞發(fā)布的數(shù)據(jù)分析圖表展示功能。
2. 基于 AntDesign 組件 ，react-tsparticles 模塊完成 UI 搭建，提升用戶體驗。
3. 基于 react-draft-wysiwyg ， *draft-js* 完成新聞的富文本編輯器功能。
4. 基于 *echarts* 實現(xiàn) 熱點新聞以及個人新聞發(fā)布的數(shù)據(jù)分析圖表展示功能。
鋒蜜外賣管理端
鋒蜜外賣后臺管理系統(tǒng)，是與鋒蜜外賣相配套的數(shù)據(jù)管理平臺，便于管理員對整體數(shù)據(jù)進行維護，也為入駐商家提供了產(chǎn)品錄入及發(fā)布的能力。
掌握能力
1、使用了vue全家桶技術(shù)架構(gòu)
2、 基于ElementUI組件庫，完成UI搭建，提升用戶體驗。
3、后臺使用Eggjs的nodejs web框架，使用了mongoDB數(shù)據(jù)庫存儲數(shù)據(jù)。
4、manage打包，Nginx部署
2、 基于ElementUI組件庫，完成UI搭建，提升用戶體驗。
3、后臺使用Eggjs的nodejs web框架，使用了mongoDB數(shù)據(jù)庫存儲數(shù)據(jù)。
4、manage打包，Nginx部署
鋒蜜嗨購管理平臺
本項目采用Express、React、Redux、Immutable、AntDesign、進行開發(fā)，提供一站式的商城管理能力，包括管理員角色控制、商品管理、秒殺活動數(shù)據(jù)管理等功能
掌握能力
1. 基于React 全家桶實現(xiàn)功能組件以及業(yè)務模塊開發(fā)。
2. 基于Ant Design UI視圖組件庫 ，完成UI搭建，提升用戶體驗。
3. 基于NodeJS , Express，MongoDB 數(shù)據(jù)庫完成后臺開發(fā)。
4. build打包至Nginx部署
2. 基于Ant Design UI視圖組件庫 ，完成UI搭建，提升用戶體驗。
3. 基于NodeJS , Express，MongoDB 數(shù)據(jù)庫完成后臺開發(fā)。
4. build打包至Nginx部署
學前端，就業(yè)前景廣，看得見“薪”未來
崗位選擇多，拓寬職業(yè)路，給自己多一個選擇
-
全棧開發(fā)工程師
-
前端開發(fā)工程師
-
Web開發(fā)工程師
-
HTML5開發(fā)工程師
-
APP開發(fā)工程師
-
小程序開發(fā)工程師
-
Java開發(fā)工程師
-
網(wǎng)頁開發(fā)工程師
-
小游戲開發(fā)工程師
學習+就業(yè) 一站式服務
與千余家企業(yè)建立校企培養(yǎng)合作，助力職場
-
沒基礎怕學不會？
-
自制力差難以堅持？
-
沒實戰(zhàn)經(jīng)驗落地難？
-
不懂面試就業(yè)難？
配套就業(yè)服務
專業(yè)職業(yè)規(guī)劃老師，模擬面試
定制專屬就業(yè)計劃
企業(yè)內(nèi)推簡歷推薦，簡歷優(yōu)化
人才定制先選再學，按需定制
雙選會 + 上門招聘，助力就業(yè)