先说观点，我强烈建议每个人都要自学，不要加入培训班。
我干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利用、我的项目打包优化