先说观点，我强烈建议每个人都要自学，不要参加培训班。

我干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应用、项目打包优化