先說觀點，我強烈建議每個人都要自學，不要參加培訓班，
我干web前端工程師這個職位已經有6年多的時間，之前在螞蟻金服做過2年，后來離開是因為加班實在熬不住才走的，像這些已經上市的互聯網公司幾乎沒有不加班的，基本上都是996，雖然工資給的是很高，但誰也頂不住總加班沒有生活的狀態，由于自己在這行業已經有6年的作業經驗，所以對這個行業的情況還是比較了解的，像在螞蟻金服、騰訊、百度、美團、餓了么這樣的大廠中，你幾乎找不到哪個程式員是培訓班出來的，基本都是自學出來技術很好或者是科班出身的人，因為培訓班出來的人基礎都非常薄弱，都是經驗老道的面試官，只要在面試中隨便聊幾句，就可以分辨出來你是否是培訓班剛出來的，一旦發現是培訓班剛出來的，直接面試結束，但自學出來的人不一樣，一般自學出來的人時間都比較長，經過長期的學習積累，可以把基礎打得很好，每一個步驟掌握的都很扎實，并且能堅持長期自學下來的人，他們普遍都有很強的意志力和良好的學習能力，所以公司一定是傾向于這類人，
在我們這個行業中有一個奇怪的現象，就是很多做Web前端技術的人根本做不到35歲，能堅持做10年以上技術的人非常少，基本都是干個三四年就轉行去做其他的行業，因為他已經很長時間沒有提升，技術一直都在原地踏步，大家都知道我們這個行業一旦不能繼續提升，就會被后來的人追上最后淘汰，而干到中途就轉行的人，可以說99%都是速成培訓班出來的，因為他們沒有良好的語言基礎，平時自己也不主動學習，因為沒有養成良好的學習習慣，都認為參加培訓班后就可以一勞永逸，以后就不需要學習了，但是在任何一個行業都一樣，一直原地踏步不提升的人，一定會被他所在的行業淘汰，這是自然的規律，
有人問Web前端現在還能學嗎？
完全不用擔心飽和的問題，如果說Java有點飽和這話我是信的，畢竟Java語言已經20多年的時間，但是Web前端的概念受到重視的時間并不長，所以目前各個互聯網公司都非常缺好的Web前端技術人才，像位元組跳動這樣的公司前段時間放出招聘需求，月薪基本都是30K以上的，各種渠道尋求內推人才，但是招人還是很難，各種獵頭在各種內推群，想招聘到一個不錯的Web前端人才還是比較難，所以就目前的Web前端市場來看，完全是可以學習的，而且前端的入門還是比較容易的，相比Java而言，要更加適合初學者，
我提倡的學習方式是：自己學習+有人指導
其實作為一個真的想做這行的人，首先他要對技術有一種熱愛，喜歡編程這種東西，學習的耐心和毅力是必須具備的，然后在整個學習程序中，有一個人去指導他，提高他的學習效率，盡量的少走彎路就可以了，剩下的其實都要靠自己去學，有的時候我覺得很可笑，為什么會有那么多的人認為去參加了線下培訓班就不是自學了呢？我覺得持有這樣想法的人一定是走不遠的，學習這種事情最后都是自己的事，并不是別人可以掌控的，
如果覺得自己在學習程序中有很多困惑，走了太多彎路，遇到一個問題需要好幾個小時才能解決，也不知道應該學到什么程度才能就業，可以隨時來問我，我平時作業不忙的時候給大家解答，下面是我建立的一個3000人Web前端開發交流學習群，已經有5年的時間，聚集了2000多個前端學習者，希望大家以后一起進步和創業，這就是WEB前端裙，前面三個輸入296，中間三個輸入212，后面三個輸入562，
給那些其他專業或者行業想學習Web前端做技術的人一些建議：
1、 稍微了解一點的人都知道，Web前端的技術更新是非常快的，所以我們在學習的時候一定要學最新的技術體系，
2、 Web前端并沒有特別完整的內容，因為前端屬于一個職位，想要做這個作業都需要學習哪些內容要明確，并不是要把所有的內容學完才能去找作業，知識是學不完的，但它有一些主流的技術是必須掌握的，如果是初級的前端開發作業，把主要的技術學好后就可以嘗試去找作業，盡量在作業中去學習你才能學到更多，
3、 語言基礎才是核心競爭力，無論以后前端開發出多少框架，它們都只是工具而已，而你只需要掌握使用工具的技巧就可以，做前端開發的人，學好JavaScript是重中之重，如果你JavaScript學的不好，就不要往下繼續學了，沒有任何意義，
4、 有機會找大佬帶你入門就找大佬帶你，自己一個人想要達到就業的水平很低，每個自己摸索的人必然走的是彎路，有的人走完了彎路還能回來，但是大部分人的結果都是由于“積重難返”最后放棄，其實并不是你智商不夠，而是因為你對此不了解，完全是摸著石頭過河，
最后給大家總結了一下2021年web前端的學習內容，可能內容過于多，但是從具備競爭力的角度考慮，我盡量把大前端全堆疊工程師要學習的內容都給大家列了出來，按照我這個標準去學，保底就業薪資在15K以上，如果在網上找不到這些學習資源，可以到這個WEB前端裙，前面三個輸入296，中間三個輸入212，后面三個輸入562，
一、HTML/CSS3 部分
前端概念總覽、vscode開發工具使用、markdown檔案工具使用、瀏覽器平臺環境、標簽基礎、DTD與META
語意化、選擇器、權重與優先級、匹配規則、浮動與清除、BFC、類名組合規則、SEO前端技巧、定位、疊加技巧、
偽類、偽元素、盒子模型、代碼規范、性能優化、渲染原理、CSS Sprites 、 iconfont字體圖示、布局思路、布局定式
css3影片、 css3選擇器、 css3過渡、flex布局、背景漸變、css3實用動效、3D模塊、css3變數、em/rem/vw
企業內部多頁面專案實戰（非仿站）有完整PSD與切圖
二、JavaScript 部分
JavaScript概念、基礎認知、發展歷史、應用范圍、優缺點，
ECMAScript
語言概覽、陳述句語法、資料型別、運算子、隱式轉換、運算規則、控制流程、作用域、作用域鏈、作用域決議、js解釋引擎、字串屬性方法、for of/for in
陣列屬性方法、物件、廣義物件概念、物件特性、存盤機制、深拷貝、物件實際應用、工廠模式、建構式、原型、原型鏈、原型指向、封裝、
多種繼承、包裝物件、this、this指向、js資料處理、垃圾GC、閉包原理與應用、debug方法論、瀏覽器控制臺工具應用、面向物件開發、函式式開發、
純函式、遞回函式、回呼函式、組合函式、快取函式、柯里化函式、偏函式、函式防抖與節流、高級函式、IIFE函式、模塊化、
數學物件、高級陣列方法（reduce、filter、map、every、some、forEach、find、findIndex、include）等、
高級物件方法（entires、defineProperty、freeze、fromEntries、assign、keys、create、hasOwnProperty）等
this通過bind、call、apply指向偏移、同步與異步、閉包模塊化、資料形變處理、性能處理
DOM/BOM
DOM物件與方法、節點與遍歷樹、DOM選擇器、DOM節點增刪改查、DOM樣式操作、DOM位置獲取與偏移、DOM物件與標簽區別、DOM虛擬化、DOM事件、
Event物件、定時器與監聽器、事件委托、事件代理、事件分流、事件冒泡、默認行為、事件捕獲、防抖、節流、滾動、鍵盤行為、事件降頻、行為鎖機制、
拖拽模組、碰撞檢測、距離判斷、三角函式、方向判斷、運動框架、彈性運動、重力加速度、DOM樹、CSSOM樹、渲染決議、加載、回流、重繪、瀏覽器執行緒與阻塞，
BOM深入、window物件、navigator、history、screen、location、spa概念、本地傳參、日期物件使用、日期格式化封裝、隨機封裝、DOM分片容器
JS業務應用擴展
JSON物件、資料決議、JSON方法、模板渲染、快取懶加載、正則運算式RegExp、元字符、修飾符、正向預查、貪婪模式、replace方法、分組與不分組、test、match與exec
正則庫封裝、表單校驗、圖片預存懶加載、自定義封裝滾動組件、多重輪播（回圈、視差、旋轉木馬）、選項卡切換、樓梯導航、吸頂導航、拖拽導航 、
JavaScript編碼風格指南、console應用技巧
ECMAScript5 --- ECMAScript9擴展
版本解讀、應用環境、let、const、解構賦值、箭頭函式、物件解構、reset引數解構、class、set、get、extends、super、static、private實作、symbol、promise、proxy代理攔截、async/await
物件新增API、陣列新增API、字串新增API、原型屬性、物件修飾、代理攔截、鏈式詢問、空值合并運算子、泡泡龍面向物件游戲開發
三、HTML5 / 移動端開發 部分
HTML5標簽與API
HTML5概念、定義、新增特性、DTD對比、新增H5標簽、新增語意化H5標簽、H5表單
H5拖拽事件 video、audio、fullScreen、FileReader檔案流、Blob物件、sessionStorage、localStorage、
網路狀態、頁面生命周期、網頁狀態監聽、地理資訊與定位、canvas畫布、worker多執行緒、Notifications桌面通知
播放器開發 canvas互動特效開發
移動端適配/事件
移動端適配概念、尺寸與分辨率原理、PPI與DPI計算、DIP與DPR設備像素概念、視口viewport概念、布局視口、視覺視口、理想視口
視口適配方案（Meta viewport）縮放設定 、screen視窗大小API、媒體查詢@media、rem適配、vw vh適配
移動端適配方案、flexible rem方案、 vh vw方案 、復合方案、高清適配方案、移動端字體縮放解決、1px邊框問題解決、半像素線
圖片高清適配、image-set、srcset、js拼接URL技巧、IPhonex劉海屏適配、安全區域、fit與env
Meta權限管理、兼容優化、IOS頭部底部閃屏回退輸入框問題、輸入法空格問題、默認首字母大寫問題、滑動卡頓問題等
終端樣式美化與訪問判斷
Touch事件組封裝、click延遲處理、FastClick使用、禁用縮放設定理想視口
常用類別庫/工具
jquery: 元素選擇、增刪改差、事件處理、位置獲取、影片過渡、高級方法、特效應用
zepto：移動端的jquery、DOM操作、移動端事件、click延遲處理、touch事件組
基礎UI庫: layerUI 、easyUI、bootStrap、UI模塊化、UI庫使用技巧、檔案解讀、案例除錯、表單系統
iScroll、touchjs等移動端事件庫使用
swiper：移動端網站觸摸滑動、輪播圖插件、模塊化應用、原始碼解讀
art-template: 模板引擎 模板語法、渲染方法、原生模板引擎實作
CSS預處理：sass、less使用 stylus深入學習 、預處理語法、css編程、 Minxin 、預處理函式、繼承、嵌套
vscode高級插件與配置 liveserver sass
模板化應用 、預處理應用
date-picker移動端原生組件開發
需求分析、業務規則、技術堆疊選型、檔案輸出規則、技術分析
MVC模型概念與設計、業務邏輯分類
view層適配方案 原型布局搭建 模板化生成
工具函式開發、面向物件式業務設計 功能類日期物件開發
互動業務封裝 模塊對接 優化設計 面向物件高級程式設計
四、Nodejs與工程化開發 部分
Node原生基礎
Node基礎概念、NPM命令、V8引擎概念、JavaScript模塊化 CMD AMD UMD、EventLoop事件回圈、同步異步、 阻塞非阻塞 、任務佇列、宏任務、微任務、
原生Node模塊、核心模塊與require、module、觸發器events與path模塊、fs模塊、Buffer物件、URL模塊、HTTP模塊 、stream流
Node原生封裝HTTP與檔案服務器
Node框架
express框架使用、中間件、核心物件、路由配置、模板引擎、資料腳本、Router核心、CORS配置、錯誤處理、校驗封裝、PM2管理、nodemoon管理
MORGAN日志處理、查詢正則捕獲、中間件開發、bodyParse等第三方中間件使用 、檔案流上傳下載、檔案流切分
webpack工程化構建
工程化概念、工程化工具介紹、webpack基礎知識、webpack配置與運行、plugin插件、loader使用、入口出口配置、模塊modules、依賴處理、dev Server
target 、檔案切分、build打包、熱處理、package管理、性能優化、測驗處理 、第三方插件使用、babel等
前后端資料互動
HTTP通信互動原理、請求回應、MIME、URI地址、報文決議、埠、報文流、測驗監聽抓包、TCP/IP握手機制、網路業務模型
代理、快取、網關、隧道等概念、method與請求頭分類
基礎XMLHTTPRequest物件方法屬性、方法、ajax異步互動 、同源策略原理
原生js封裝ajax互動、 jquery的ajax封裝互動、jsonp跨域處理、cors跨域處理、攜帶cookie與跨域處理、代理服務器跨域處理、
cookie驗證與通信 、axios庫的使用 代理、封裝、攔截、合并、二次封裝
通信加密策略、資料對稱加密、資料非對稱加密、RSA加密實踐、MD5加密實踐
登錄注冊與鑒權機制、Authenticity認證、Token認證、JWT認證、session狀態管理、 oauth認證
RESTful介面設計
RESTful設計原則、狀態碼設計與規范、服務器回應規則與格式、前后端介面協議制定、傳統RESTful改進
API設計規范、 資源定位、JSON模式、合約說明、資源識別符號、快取友好API、HTTP頭管理、檔案定義、松耦合原則、一致性、重用、穩定性原則
資料庫存盤
MongoDB基礎概念、NoSQL與SQL、CAP定理、RDBMS、MongoDB語法、指令、監控與GUI、MongoDb驅動、Mongoose應用
資料庫創建、集合增刪改查、檔案增刪改查、資料庫查詢、高級查詢操作、通道查詢、多條件查詢、反向篩選、索引處理、aggregate聚合管道、
validation驗證、population聯表、middleware中間件處理、查詢ERROR類二次封裝
博客后臺專案實戰
資料庫設計、服務端路由搭建、介面設計與API管理、通信互動管道封裝、注冊登錄、路由導航、前端路由管理、權限管理、用戶管理、分類管理、標簽管理
、文章管理、模塊化功能封裝、校驗庫封裝、promise鏈式行為封裝、
異步模塊處理、SPA單頁面應用初級實作、原生集中行為控制器、模板化+模塊化+預處理+工程化實作前端頁面
組件化封裝
組件化基礎概念、組件設計原則、組件封裝、組件耦合與解耦、工程化+模板化+模塊化實作原生組件化功能、
五、Vue框架部分
vue基礎
vue開發準備、工具與插件、mvc mvp mvvm設計理念、原生js實作MVVM核心框架、vue設計模式、生命周期、命令與屬性、組件化
資料驅動與雙向系結、虛擬DOM概念原理、模板語法、條件與串列、陣列監測、計算屬性、事件處理、修飾與表單、監聽器、過濾器、
methods watch computed filter對比、組件化開發、動態組件、組件通信、高級組件通信、插槽、vue影片 、實體物件、set、get、nextTick、vue插件
vue工程化
Babel、webpack配置vue、vue單檔案組件、vue-cli、工程平臺處理、postCss、animate、core、socket、lodash工具、vue-cli插件、preset、靜態資源處理、
環境變數與膜還是切換、工程化部署、工程構建
vue Router
vue路由概念、嵌套路由、路由視圖、動態路由、路由匹配、編程式導航、history、hash模式管理、命名視圖、重定向與別名、導航守衛、路由元資訊、滾動與懶加載、導航故障處理
vuex
vuex核心概念、EventBus對比、狀態管理模式、Store、state、getter、mutation、action、moudule
vuex輔助函式與API功能、vuex環境選擇、vuex模塊化處理規則與技巧、物件風格提交方式、模塊重用等
vue專案實戰
vue博客專案實戰 PC + 移動端、 elementUI、vantUI、websocket聊天室、虛擬人偶、vueScroll、store、qs、nprogress、editor、
文章分類、詞云效果、spa單頁面應用、移動PC無縫切換、完整注冊登錄、vue加密鑒權、http封裝管理、錯誤處理封裝、vuex核心狀態管理、本地存盤狀態更新、令牌處理、
文章富文本編輯、點贊、收藏、訪問、評論、組件封裝、組件復用、組件混合、高級組件開發、復合性組件通信、vue中處理原生DOM行為、vue常見錯誤處理、
重置vue資料回應、個人資訊修改、頭像上傳、通知組件封裝、postcss應用、專案打包優化
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/276117.html
標籤：Html/Css
下一篇：CSS撰寫及選擇器