怎么自學(xué)Web前端？如果是初學(xué)者還是跟著視頻教程學(xué)比較靠譜，看書太枯燥比較難以理解，視頻則是由老師把知識點(diǎn)講解的通俗易懂，對于初學(xué)者會更友好，市面上能找到的視頻資料大都是Web前端培訓(xùn)機(jī)構(gòu)的，那么長沙Web前端培訓(xùn)機(jī)構(gòu)都教什么內(nèi)容？

一、HTML/CSS3 部分

前端概念總覽、vscode開發(fā)工具使用、markdown文檔工具使用、瀏覽器平臺環(huán)境、標(biāo)簽基礎(chǔ)、DTD與META

語義化、選擇器、權(quán)重與優(yōu)先級、匹配規(guī)則、浮動與清除、BFC、類名組合規(guī)則、SEO前端技巧、定位、疊加技巧、

偽類、偽元素、盒子模型、代碼規(guī)范、性能優(yōu)化、渲染原理、CSS Sprites 、 iconfont字體圖標(biāo)、布局思路、布局定式

css3動畫、 css3選擇器、 css3過渡、flex布局、背景漸變、css3實(shí)用動效、3D模塊、css3變量、em/rem/vw

企業(yè)內(nèi)部多頁面項(xiàng)目實(shí)戰(zhàn)（非仿站）有完整PSD與切圖

二、JavaScript 部分

JavaScript概念、基礎(chǔ)認(rèn)知、發(fā)展歷史、應(yīng)用范圍、優(yōu)缺點(diǎn)。

ECMAScript

語言概覽、語句語法、數(shù)據(jù)類型、運(yùn)算符、隱式轉(zhuǎn)換、運(yùn)算規(guī)則、控制流程、作用域、作用域鏈、作用域解析、js解釋引擎、字符串屬性方法、for of/for in

數(shù)組屬性方法、對象、廣義對象概念、對象特性、存儲機(jī)制、深拷貝、對象實(shí)際應(yīng)用、工廠模式、構(gòu)造函數(shù)、原型、原型鏈、原型指向、封裝、

多種繼承、包裝對象、this、this指向、js數(shù)據(jù)處理、垃圾GC、閉包原理與應(yīng)用、debug方法論、瀏覽器控制臺工具應(yīng)用、面向?qū)ο箝_發(fā)、函數(shù)式開發(fā)、

純函數(shù)、遞歸函數(shù)、回調(diào)函數(shù)、組合函數(shù)、緩存函數(shù)、柯里化函數(shù)、偏函數(shù)、函數(shù)防抖與節(jié)流、高級函數(shù)、IIFE函數(shù)、模塊化、

數(shù)學(xué)對象、高級數(shù)組方法（reduce、filter、map、every、some、forEach、find、findIndex、include）等、

高級對象方法（entires、defineProperty、freeze、fromEntries、assign、keys、create、hasOwnProperty）等

this通過bind、call、apply指向偏移、同步與異步、閉包模塊化、數(shù)據(jù)形變處理、性能處理

DOM/BOM

DOM對象與方法、節(jié)點(diǎn)與遍歷樹、DOM選擇器、DOM節(jié)點(diǎn)增刪改查、DOM樣式操作、DOM位置獲取與偏移、DOM對象與標(biāo)簽區(qū)別、DOM虛擬化、DOM事件、

Event對象、定時器與監(jiān)聽器、事件委托、事件代理、事件分流、事件冒泡、默認(rèn)行為、事件捕獲、防抖、節(jié)流、滾動、鍵盤行為、事件降頻、行為鎖機(jī)制、

拖拽模組、碰撞檢測、距離判斷、三角函數(shù)、方向判斷、運(yùn)動框架、彈性運(yùn)動、重力加速度、DOM樹、CSSOM樹、渲染解析、加載、回流、重繪、瀏覽器線程與阻塞。

BOM深入、window對象、navigator、history、screen、location、spa概念、本地傳參、日期對象使用、日期格式化封裝、隨機(jī)封裝、DOM分片容器

JS業(yè)務(wù)應(yīng)用擴(kuò)展

JSON對象、數(shù)據(jù)解析、JSON方法、模板渲染、緩存懶加載、正則表達(dá)式RegExp、元字符、修飾符、正向預(yù)查、貪婪模式、replace方法、分組與不分組、test、match與exec

正則庫封裝、表單校驗(yàn)、圖片預(yù)存懶加載、自定義封裝滾動組件、多重輪播（循環(huán)、視差、旋轉(zhuǎn)木馬）、選項(xiàng)卡切換、樓梯導(dǎo)航、吸頂導(dǎo)航、拖拽導(dǎo)航 、

JavaScript編碼風(fēng)格指南、console應(yīng)用技巧

ECMAScript5 — ECMAScript9擴(kuò)展

版本解讀、應(yīng)用環(huán)境、let、const、解構(gòu)賦值、箭頭函數(shù)、對象解構(gòu)、reset參數(shù)解構(gòu)、class、set、get、extends、super、static、private實(shí)現(xiàn)、symbol、promise、proxy代理攔截、async/await

對象新增API、數(shù)組新增API、字符串新增API、原型屬性、對象修飾、代理攔截、鏈?zhǔn)皆儐?、空值合并運(yùn)算符、泡泡龍面向?qū)ο笥螒蜷_發(fā)

三、HTML5 / 移動端開發(fā) 部分

HTML5標(biāo)簽與API

HTML5概念、定義、新增特性、DTD對比、新增H5標(biāo)簽、新增語義化H5標(biāo)簽、H5表單

H5拖拽事件 video、audio、fullScreen、FileReader文件流、Blob對象、sessionStorage、localStorage、

網(wǎng)絡(luò)狀態(tài)、頁面生命周期、網(wǎng)頁狀態(tài)監(jiān)聽、地理信息與定位、canvas畫布、worker多線程、Notifications桌面通知

播放器開發(fā) canvas交互特效開發(fā)

移動端適配/事件

移動端適配概念、尺寸與分辨率原理、PPI與DPI計算、DIP與DPR設(shè)備像素概念、視口viewport概念、布局視口、視覺視口、理想視口

視口適配方案（Meta viewport）縮放設(shè)置 、screen窗口大小API、媒體查詢@media、rem適配、vw vh適配

移動端適配方案、flexible rem方案、 vh vw方案 、復(fù)合方案、高清適配方案、移動端字體縮放解決、1px邊框問題解決、半像素線

圖片高清適配、image-set、srcset、js拼接URL技巧、IPhonex劉海屏適配、安全區(qū)域、fit與env

Meta權(quán)限管理、兼容優(yōu)化、IOS頭部底部閃屏回退輸入框問題、輸入法空格問題、默認(rèn)首字母大寫問題、滑動卡頓問題等

終端樣式美化與訪問判斷

Touch事件組封裝、click延遲處理、FastClick使用、禁用縮放設(shè)置理想視口

常用類庫/工具

jquery: 元素選擇、增刪改差、事件處理、位置獲取、動畫過渡、高級方法、特效應(yīng)用

zepto：移動端的jquery、DOM操作、移動端事件、click延遲處理、touch事件組

基礎(chǔ)UI庫: layerUI 、easyUI、bootStrap、UI模塊化、UI庫使用技巧、文檔解讀、案例調(diào)試、表單系統(tǒng)

iScroll、touchjs等移動端事件庫使用

swiper：移動端網(wǎng)站觸摸滑動、輪播圖插件、模塊化應(yīng)用、源碼解讀

art-template: 模板引擎 模板語法、渲染方法、原生模板引擎實(shí)現(xiàn)

CSS預(yù)處理：sass、less使用 stylus深入學(xué)習(xí) 、預(yù)處理語法、css編程、 Minxin 、預(yù)處理函數(shù)、繼承、嵌套

vscode高級插件與配置 liveserver sass

模板化應(yīng)用 、預(yù)處理應(yīng)用

date-picker移動端原生組件開發(fā)

需求分析、業(yè)務(wù)規(guī)則、技術(shù)棧選型、文件輸出規(guī)則、技術(shù)分析

MVC模型概念與設(shè)計、業(yè)務(wù)邏輯分類

view層適配方案 原型布局搭建 模板化生成

工具函數(shù)開發(fā)、面向?qū)ο笫綐I(yè)務(wù)設(shè)計 功能類日期對象開發(fā)

交互業(yè)務(wù)封裝 模塊對接 優(yōu)化設(shè)計 面向?qū)ο蟾呒壋绦蛟O(shè)計

四、Nodejs與工程化開發(fā) 部分

Node原生基礎(chǔ)

Node基礎(chǔ)概念、NPM命令、V8引擎概念、JavaScript模塊化 CMD AMD UMD、EventLoop事件循環(huán)、同步異步、 阻塞非阻塞 、任務(wù)隊列、宏任務(wù)、微任務(wù)、

原生Node模塊、核心模塊與require、module、觸發(fā)器events與path模塊、fs模塊、Buffer對象、URL模塊、HTTP模塊 、stream流

Node原生封裝HTTP與文件服務(wù)器

Node框架

express框架使用、中間件、核心對象、路由配置、模板引擎、數(shù)據(jù)腳本、Router核心、CORS配置、錯誤處理、校驗(yàn)封裝、PM2管理、nodemoon管理

MORGAN日志處理、查詢正則捕獲、中間件開發(fā)、bodyParse等第三方中間件使用 、文件流上傳下載、文件流切分

webpack工程化構(gòu)建

工程化概念、工程化工具介紹、webpack基礎(chǔ)知識、webpack配置與運(yùn)行、plugin插件、loader使用、入口出口配置、模塊modules、依賴處理、dev Server

target 、文件切分、build打包、熱處理、package管理、性能優(yōu)化、測試處理 、第三方插件使用、babel等

前后端數(shù)據(jù)交互

HTTP通信交互原理、請求響應(yīng)、MIME、URI地址、報文解析、端口、報文流、測試監(jiān)聽抓包、TCP/IP握手機(jī)制、網(wǎng)絡(luò)業(yè)務(wù)模型

代理、緩存、網(wǎng)關(guān)、隧道等概念、method與請求頭分類

基礎(chǔ)XMLHTTPRequest對象方法屬性、方法、ajax異步交互 、同源策略原理

原生js封裝ajax交互、 jquery的ajax封裝交互、jsonp跨域處理、cors跨域處理、攜帶cookie與跨域處理、代理服務(wù)器跨域處理、

cookie驗(yàn)證與通信 、axios庫的使用 代理、封裝、攔截、合并、二次封裝

通信加密策略、數(shù)據(jù)對稱加密、數(shù)據(jù)非對稱加密、RSA加密實(shí)踐、MD5加密實(shí)踐

登錄注冊與鑒權(quán)機(jī)制、Authenticity認(rèn)證、Token認(rèn)證、JWT認(rèn)證、session狀態(tài)管理、 oauth認(rèn)證

RESTful接口設(shè)計

RESTful設(shè)計原則、狀態(tài)碼設(shè)計與規(guī)范、服務(wù)器響應(yīng)規(guī)則與格式、前后端接口協(xié)議制定、傳統(tǒng)RESTful改進(jìn)

API設(shè)計規(guī)范、 資源定位、JSON模式、合約說明、資源標(biāo)識符、緩存友好API、HTTP頭管理、文檔定義、松耦合原則、一致性、重用、穩(wěn)定性原則

數(shù)據(jù)庫存儲

MongoDB基礎(chǔ)概念、NoSQL與SQL、CAP定理、RDBMS、MongoDB語法、指令、監(jiān)控與GUI、MongoDb驅(qū)動、Mongoose應(yīng)用

數(shù)據(jù)庫創(chuàng)建、集合增刪改查、文檔增刪改查、數(shù)據(jù)庫查詢、高級查詢操作、通道查詢、多條件查詢、反向篩選、索引處理、aggregate聚合管道、

validation驗(yàn)證、population聯(lián)表、middleware中間件處理、查詢ERROR類二次封裝

博客后臺項(xiàng)目實(shí)戰(zhàn)

數(shù)據(jù)庫設(shè)計、服務(wù)端路由搭建、接口設(shè)計與API管理、通信交互管道封裝、注冊登錄、路由導(dǎo)航、前端路由管理、權(quán)限管理、用戶管理、分類管理、標(biāo)簽管理

、文章管理、模塊化功能封裝、校驗(yàn)庫封裝、promise鏈?zhǔn)叫袨榉庋b、

異步模塊處理、SPA單頁面應(yīng)用初級實(shí)現(xiàn)、原生集中行為控制器、模板化+模塊化+預(yù)處理+工程化實(shí)現(xiàn)前端頁面

組件化封裝

組件化基礎(chǔ)概念、組件設(shè)計原則、組件封裝、組件耦合與解耦、工程化+模板化+模塊化實(shí)現(xiàn)原生組件化功能、

五、Vue框架部分

vue基礎(chǔ)

vue開發(fā)準(zhǔn)備、工具與插件、mvc mvp mvvm設(shè)計理念、原生js實(shí)現(xiàn)MVVM核心框架、vue設(shè)計模式、生命周期、命令與屬性、組件化

數(shù)據(jù)驅(qū)動與雙向綁定、虛擬DOM概念原理、模板語法、條件與列表、數(shù)組監(jiān)測、計算屬性、事件處理、修飾與表單、監(jiān)聽器、過濾器、

methods watch computed filter對比、組件化開發(fā)、動態(tài)組件、組件通信、高級組件通信、插槽、vue動畫 、實(shí)例對象、set、get、nextTick、vue插件

vue工程化

Babel、webpack配置vue、vue單文件組件、vue-cli、工程平臺處理、postCss、animate、core、socket、lodash工具、vue-cli插件、preset、靜態(tài)資源處理、

環(huán)境變量與膜還是切換、工程化部署、工程構(gòu)建

vue Router

vue路由概念、嵌套路由、路由視圖、動態(tài)路由、路由匹配、編程式導(dǎo)航、history、hash模式管理、命名視圖、重定向與別名、導(dǎo)航守衛(wèi)、路由元信息、滾動與懶加載、導(dǎo)航故障處理

vuex

vuex核心概念、EventBus對比、狀態(tài)管理模式、Store、state、getter、mutation、action、moudule

vuex輔助函數(shù)與API功能、vuex環(huán)境選擇、vuex模塊化處理規(guī)則與技巧、對象風(fēng)格提交方式、模塊重用等

vue項(xiàng)目實(shí)戰(zhàn)

vue博客項(xiàng)目實(shí)戰(zhàn) PC + 移動端、 elementUI、vantUI、websocket聊天室、虛擬人偶、vueScroll、store、qs、nprogress、editor、

文章分類、詞云效果、spa單頁面應(yīng)用、移動PC無縫切換、完整注冊登錄、vue加密鑒權(quán)、http封裝管理、錯誤處理封裝、vuex核心狀態(tài)管理、本地存儲狀態(tài)更新、令牌處理、

文章富文本編輯、點(diǎn)贊、收藏、訪問、評論、組件封裝、組件復(fù)用、組件混合、高級組件開發(fā)、復(fù)合性組件通信、vue中處理原生DOM行為、vue常見錯誤處理、

重置vue數(shù)據(jù)響應(yīng)、個人信息修改、頭像上傳、通知組件封裝、postcss應(yīng)用、項(xiàng)目打包優(yōu)化

另外告訴大家一些學(xué)習(xí)小竅門，自學(xué)可以等學(xué)到JavaScript部分再結(jié)合書籍進(jìn)行鞏固提升。還可以加入千鋒的web前端交流學(xué)習(xí)群，有不懂的問題都在群里問他們，如果你也是剛開始學(xué)前端，自己不知道如何學(xué)，遇到問題沒法解決，可以一起交流學(xué)習(xí)，這樣會相互監(jiān)督，相互解答問題，學(xué)習(xí)效率會很高。