前端學(xué)習(xí)路線圖概覽 :

●?新手入門

○?H5C3 基礎(chǔ)結(jié)構(gòu)布局 - PC端

○?H5C3 基礎(chǔ)結(jié)構(gòu)布局 - 移動(dòng)端

○?布局結(jié)構(gòu)實(shí)戰(zhàn)項(xiàng)目 - PC端

○?布局結(jié)構(gòu)實(shí)戰(zhàn)項(xiàng)目 - 移動(dòng)端

●?JS 階段

○?JavaScript 基礎(chǔ)

○?JavaScript ES6 進(jìn)階

○?JavaScript 進(jìn)階高級(jí)內(nèi)容, 源碼重構(gòu)

○?JavaScript 數(shù)據(jù)交互

●?node 階段

○?node 基礎(chǔ)

○?express 搭建服務(wù)器

●?Vue 開發(fā)

○?Vue3 選項(xiàng)式API + vite - 完成 PC 端項(xiàng)目

○?Vue3 組合式API + TS - 完成移動(dòng)端項(xiàng)目

○?webpack詳解 + vite 詳解

●?React 開發(fā)

○?React?18?+?hooks?+?TS?開發(fā)?PC端項(xiàng)目

○?React?18?+?hooks?+?TS?開發(fā)?移動(dòng)端項(xiàng)目

○?umi?+?dva?實(shí)戰(zhàn)應(yīng)用

●?Web3.0

●?小程序開發(fā)

○?原生小程序 + uniapp 完成小程序開發(fā)

第一階段 : 基礎(chǔ)入門

●?前言 : 從零基礎(chǔ)小白學(xué)員出發(fā), 教你從零開始逐步搭建多種多樣的網(wǎng)頁結(jié)構(gòu), 全面涵蓋目前市場大部分類型的移動(dòng)端和PC端頁面結(jié)構(gòu).

1.? HTML5CSS3 基礎(chǔ)結(jié)構(gòu)布局 - PC端 和 移動(dòng)端

●?根據(jù) W3C 標(biāo)準(zhǔn), 按照零基礎(chǔ)學(xué)員的接受能力, 逐步學(xué)習(xí)基礎(chǔ)技能, 大量的企業(yè)級(jí)真實(shí)案例實(shí)戰(zhàn)講解, 反復(fù)練習(xí), 并且在練習(xí)過程中也是百分百按照開發(fā)流程執(zhí)行. 不光學(xué)習(xí)到真實(shí)的技術(shù), 還學(xué)習(xí)到企業(yè)級(jí)真實(shí)開發(fā)流程. 全方位培養(yǎng).

2.? 布局結(jié)構(gòu)實(shí)戰(zhàn) - PC端 和 移動(dòng)端

●?課程中穿插多種類型的移動(dòng)端和 PC 端常見布局結(jié)構(gòu)實(shí)戰(zhàn)內(nèi)容. 包含門戶網(wǎng)站, 企業(yè)網(wǎng)站, 電商網(wǎng)站, 后臺(tái)管理網(wǎng)站等布局結(jié)構(gòu), 多方位全面應(yīng)用學(xué)習(xí)到的所有內(nèi)容, 嚴(yán)格按照企業(yè)級(jí)開發(fā)流程設(shè)計(jì), 百分百還原設(shè)計(jì)圖. 并且在項(xiàng)目案例中穿插響應(yīng)式布局結(jié)構(gòu)詳細(xì)講解和案例, 真實(shí)感受 "一次書寫, 多端適配"的開發(fā)體驗(yàn).

第二階段 : JS 階段

●?前言 : 前端開發(fā)的必備技能, 從基礎(chǔ)到進(jìn)階到原理, 多層面多維度學(xué)習(xí), 知其然的同時(shí)知其所以然. 實(shí)現(xiàn)真正有交互有價(jià)值的網(wǎng)站.

1.? JavaScript 基礎(chǔ)

●?從零開始, 課程設(shè)計(jì)內(nèi)容包含 JS基礎(chǔ)知識(shí) 從變量, 數(shù)據(jù)類型及轉(zhuǎn)換, 運(yùn)算符, 分支, 函數(shù), 對(duì)象和數(shù)組數(shù)據(jù)結(jié)構(gòu), DOM 和 BOM 操作, 基礎(chǔ)事件等內(nèi)容的學(xué)習(xí). 從網(wǎng)頁動(dòng)效入手, 體驗(yàn)會(huì) "動(dòng)" 的網(wǎng)站. 呈現(xiàn)完美的用戶交互 .

2.? JavaScript 高級(jí)內(nèi)容, 數(shù)據(jù)結(jié)構(gòu)與算法, 設(shè)計(jì)模式

●?回到 JS 代碼本質(zhì), 從面向?qū)ο蟪霭l(fā), 學(xué)習(xí) JS 的高級(jí)編程思想, 讓你從 "碼農(nóng)" 轉(zhuǎn)變?yōu)?工程師, 將應(yīng)用層的代碼回溯到 "出生" 以前, 領(lǐng)略技術(shù)大牛的思考方式, 引發(fā)自己的思考從而可以獨(dú)立面對(duì)任何問題, 詳細(xì)的數(shù)據(jù)結(jié)構(gòu)與算法, 再加上設(shè)計(jì)模式的加持, 讓你的未來可以輕松入門各個(gè)語言.

3.? JavaScript ES6 進(jìn)階

●?從 ES6 開始, 逐年的 ES 規(guī)范詳細(xì)講解, 不光交給你只是, 還要教會(huì)你如何去學(xué)習(xí), 如何分析知識(shí)點(diǎn), 從而提高獨(dú)立學(xué)習(xí)的能力

4.? JavaScript 數(shù)據(jù)交互

●?本課程采取 2 + 2 + 3 的形式進(jìn)行教學(xué), 2 天基礎(chǔ)知識(shí)的講解, 讓我們初步認(rèn)識(shí)交互概念, 2 天的案例書寫, 用大量的案例去體會(huì)在交互過程中的細(xì)節(jié). 3 天的項(xiàng)目將你的所學(xué)應(yīng)用在真實(shí)開發(fā)過程中. 全部交互內(nèi)容涵蓋, ajax, 跨域, 代理, jsonp, http 原理等內(nèi)容

第三階段 : node 階段

●?前言 : 用我們最熟悉的語言, 在最數(shù)據(jù)的時(shí)間節(jié)點(diǎn), 去了解和認(rèn)識(shí)后端開發(fā)的思想和編程邏輯, 為成為一個(gè)真正的全棧工程師鋪路

1.? node 基礎(chǔ)

●?從 node 基礎(chǔ), linux 操作入手, 逐步接觸后邊編程思想. 課程設(shè)計(jì)包含 node 基本代碼書寫, 基本接口書寫, npm 的基本使用, 從基礎(chǔ)到生態(tài)全方位接觸學(xué)習(xí).

2.? express 搭建服務(wù)器

●?通過 express 框架進(jìn)行后端接口書寫, 覆蓋路由領(lǐng)域和中間件機(jī)制, 完整體驗(yàn) MVC 開發(fā)模式, 并且切實(shí)體驗(yàn)和使用 restful 風(fēng)格的路由模式編寫. 在業(yè)務(wù)邏輯處理上不管接收前端傳遞來的信息, 還會(huì)利用 mongodb 數(shù)據(jù)庫進(jìn)行數(shù)據(jù)持久化操作. 并且利用 token 實(shí)現(xiàn)登錄鑒權(quán)操作. 最后, 我們會(huì)在項(xiàng)目中加入文件上傳等實(shí)用性操作.

第四階段 : Vue 階段

●?前言 : 全方位學(xué)習(xí) Vue, 選項(xiàng)式 和 組合式 API 一個(gè)不落, 快速精準(zhǔn)學(xué)習(xí)當(dāng)前市場熱門框架之一

●?前置 : 前置知識(shí)點(diǎn)會(huì)學(xué)習(xí) git 操作, 幫助你完成分布式開發(fā), 體驗(yàn)企業(yè)級(jí)團(tuán)隊(duì)合作

1.? Vue3 選項(xiàng)式API + vite - 完成 PC 端項(xiàng)目

●?vue3 的選項(xiàng)式 API, 讓你從 Vue2 完美銜接到 Vue3, 一個(gè)基于 vite 的 PC 端項(xiàng)目, 讓你盡快適應(yīng)企業(yè)級(jí)項(xiàng)目開發(fā)流程

2.? Vue3 組合式API + vite + TS - 完成移動(dòng)端項(xiàng)目

●?Vue3 的組合式 API, 無縫連接到目前市場最前沿的框架開發(fā)方式, 并且百分百銜接 TS 進(jìn)入到項(xiàng)目內(nèi), 完善目前市場上所有項(xiàng)目類型.

第五階段 : React 階段

●?前言 : react18 + hooks 的模式進(jìn)行項(xiàng)目開發(fā), 函數(shù)式編程的思想讓你流連忘返. 老牌框架的實(shí)力不容小覷.

●?前置：詳解 webpack 打包構(gòu)建工具, 讓你了解的項(xiàng)目不僅僅是從零到一, 而是從負(fù)一開始@

1.? React?18?+?hooks?+?TS?開發(fā)移動(dòng)端 和 PC 端項(xiàng)目

●?兩個(gè)項(xiàng)目的開發(fā), 完美領(lǐng)略老牌項(xiàng)目的優(yōu)勢(shì)和強(qiáng)力, 深度理解 react 的五大核心優(yōu)勢(shì), 高效高性能, 復(fù)用性極高, 單向數(shù)據(jù)流, 完善的生態(tài)系統(tǒng), 跨平臺(tái)的支持. 從多個(gè)維度全方位掌握 react 所有內(nèi)容

2.? umi?+?dva?實(shí)戰(zhàn)應(yīng)用

●? 使用 umi 和 dav 兩個(gè) React 應(yīng)用程序開發(fā)框架, 幫助你更快更完善的構(gòu)建 react 項(xiàng)目

第六階段 : web3.0

●?kerwin設(shè)計(jì)的課程內(nèi)容, 從課程走向到真實(shí)案例, 全部是目前最新穎, 最流行的項(xiàng)目體驗(yàn)

第七階段 : 小程序

●?手把手帶你進(jìn)行小程序開發(fā), 從原生小程序到 uniapp, 從基礎(chǔ)到開始, 到頂配項(xiàng)目, 一步一步帶你走向前端開發(fā)的深淵.