我个人的情况是有1年web前端工作经验+半年的实习经验，2020年毕业，大一的时候学过C语言，所以一直对于编程感兴趣。我是从大三开学后正式开始自学web前端相关的知识，之所以选择前端方向，一方面是自己对于网页更加感兴趣，二是听我哥说目前web前端的发展趋势更好（我哥在网易做程序员），所以我就确立了前端方向为以后我就业的主要方向。从开始自学到大四的实习，我一共花了1年2个月时间，把前端主要的技术点和框架都过了一遍，自己做了三个Vue的项目实战。然后在2019年的10月份进入了杭州当地的一家公司实习半年，一直到2020年4月在这家公司转正，待遇是月薪12K*14薪+五险一金。目前算上实习的时间，我已经在这家公司工作一年半多的时间，我并不打算跳槽，我哥说的意思就是，尽量别因为工资高低的问题频繁跳槽，如果这家公司还有很多成长的空间，还能学到很多东西，就不要轻易跳槽。因为我在自学一年的过程中，我哥给了我很多的帮助，所以他的建议我是一定要听的，而且我觉得确实是这样的道理。因为我是刚毕业一年的，所以这篇文章主要也是写给在校的学弟们一些建议，希望能给大家带来帮助。

给大家总结我一年时间学了哪些前端技术：

说明：下面的内容就是我一年时间全部掌握的内容，为什么我会列得如此之细，重点就在这里，其实这些技术都是大家平时可以接触到的，我们在实际的开发工作中用的也都是这些技术，只不过不同的是大家掌握的程度不一样。我们学的技术名称可能是一样的，但是我们对于这门技术所理解的深度以及掌握的实际操作水平可能相差很多，这就是我一个二本学历为什么可以在毕业后第一份工作就拿到12K，我觉得是这个原因，就是因为我学得非常细，所以希望大家不要抱怨内容太多，你要是真想在前端这个领域成为技术大牛，这都是必须要做的。

一定要看到最后，有所有前端学习资料的链接！

一定要看到最后，有所有前端学习资料的链接！

一定要看到最后，有所有前端学习资料的链接！

一、HTML/CSS3

• 标签基础
• DTD与META
• 语义化
• 选择器
• 权重与优先级
• 匹配规则
• 浮动与清除
• BFC
• 类名组合规则
• SEO前端技巧
• 定位
• 叠加技巧
• 伪类
• 伪元素
• 盒子模型
• 代码规范
• 性能优化
• 渲染原理
• CSS Sprites
• iconfont字体图标
• 布局思路
• 布局定式
• css3动画
• css3选择器
• css3过渡
• flex布局
• 背景渐变
• css3实用动效
• 3D模块
• css3变量
• em/rem/vw
• 企业内部多页面项目实战

二、JavaScript

1、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指向偏移、同步与异步、闭包模块化、数据形变处理、性能处理

2、DOM/BOM

• DOM对象与方法
• 节点与遍历树
• DOM选择器
• DOM节点增删改查
• DOM样式操作
• DOM位置获取与偏移
• DOM对象与标签区别
• DOM虚拟化
• DOM事件
• Event对象
• 定时器与监听器
• 事件委托
• 事件代理
• 事件分流
• 事件冒泡
• 默认行为
• 事件捕获
• 防抖
• 节流
• 滚动
• 键盘行为
• 事件降频
• 行为锁机制
• 拖拽模组
• 碰撞检测
• 距离判断
• 三角函数
• 方向判断
• 运动框架
• 弹性运动
• 重力加速度
• DOM树
• CSSOM树
• 渲染解析
• 加载
• 回流
• 重绘
• 浏览器线程与阻塞
• BOM深入
• window对象
• Navigator
• History
• Screen
• Location
• spa概念
• 本地传参
• 日期对象使用
• 日期格式化封装
• 随机封装
• DOM分片容器

3、JS业务应用扩展

• JSON对象
• 数据解析
• JSON方法
• 模板渲染
• 缓存懒加载
• 正则表达式RegExp
• 元字符
• 修饰符
• 正向预查
• 贪婪模式
• replace方法
• 分组与不分组
• test、match与exec
• 正则库封装
• 表单校验
• 图片预存懒加载
• 自定义封装滚动组件
• 多重轮播（循环、视差、旋转木马）、选项卡切换、楼梯导航、吸顶导航、拖拽导航 、
• JavaScript编码风格指南
• console应用技巧

4、ECMAScript5 --- ECMAScript9扩展

• 版本解读
• 应用环境
• let、const
• 解构赋值
• 箭头函数
• 对象解构
• reset参数解构
• Class
• Set
• Get
• Extends
• Super
• Static
• private实现
• symbo
• Promise
• proxy代理拦截
• async/await
• 对象新增API
• 数组新增API
• 字符串新增API
• 原型属性
• 对象修饰
• 代理拦截
• 链式询问
• 空值合并运算符
• 泡泡龙面向对象游戏开发

三、HTML5 / 移动端开发 部分

1、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使用
• 禁用缩放设置理想视口

2、常用类库/工具

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 模板化应用 、预处理应用

3、date-picker移动端原生组件开发

• 需求分析
• 业务规则
• 技术栈选型
• 文件输出规则
• 技术分析
• MVC模型概念与设计
• 业务逻辑分类
• view层适配方案
• 原型布局搭建
• 模板化生成
• 工具函数开发
• 面向对象式业务设计
• 能类日期对象开发
• 交互业务封装
• 模块对接
• 优化设计
• 面向对象高级程序设计

四、Node与工程化开发

1、Node原生基础

• Node基础概念
• NPM命令
• V8引擎概念
• JavaScript模块化 CMD AMD UMD
• EventLoop事件循环
• 同步异步
• 阻塞非阻塞
• 任务队列
• 宏任务
• 微任务
• 原生Node模块
• 核心模块与require
• Module
• 触发器events与path模块
• fs模块
• Buffer对象
• URL模块
• HTTP模块
• stream流
• Node原生封装HTTP与文件服务器

2、Node框架

• express框架使用
• 中间件
• 核心对象
• 路由配置
• 模板引擎
• 数据脚本
• Router核心
• CORS配置
• 错误处理
• 校验封装
• PM2管理
• nodemoon管理
• MORGAN日志处理
• 查询正则捕获
• 中间件开发
• bodyParse等第三方中间件使用
• 文件流上传下载
• 文件流切分

3、webpack工程化构建

• 工程化概念
• 工程化工具介绍
• webpack基础知识
• webpack配置与运行
• plugin插件
• loader使用
• 入口出口配置
• 模块modules
• 依赖处理
• dev Server
• target
• 文件切分
• build打包
• 热处理
• package管理
• 性能优化
• 测试处理
• 第三方插件使用
• babel等

4、前后端数据交互

• HTTP通信交互原理
• 请求响应
• MIME
• URI地址
• 报文解析
• 端口
• 报文流
• 测试监听抓包
• TCP/IP握手机制
• 网络业务模型
• 代理
• 缓存
• 网关
• 隧道等概念
• method与请求头分类
• 基础XMLHTTPRequest对象方法属性
• 方法
• ajax异步交互
• 同源策略原理
• 原生js封装ajax交互
• jquery的ajax封装交互
• jsonp跨域处理
• cors跨域处理
• 携带cookie与跨域处理
• 代理服务器跨域处理
• cookie验证与通信
• axios库的使用代理
• 封装
• 拦截
• 合并
• 二次封装
• 通信加密策略
• 数据对称加密
• 数据非对称加密
• RSA加密实践
• MD5加密实践
• 登录注册与鉴权机制
• Authenticity认证
• Token认证
• JWT认证
• session状态管理
• oauth认证

5、RESTful接口设计

• RESTful设计原则
• 状态码设计与规范
• 服务器响应规则与格式
• 前后端接口协议制定
• 传统RESTful改进
• API设计规范
• 资源定位
• JSON模式
• 合约说明
• 资源标识符
• 缓存友好API
• HTTP头管理
• 文档定义
• 松耦合原则
• 一致性
• 重用
• 稳定性原则

6、数据库存储

• MongoDB基础概念
• NoSQL与SQ
• CAP定理
• RDBMS
• MongoDB语法
• 指令
• 监控与GUI
• MongoDb驱动
• Mongoose应用
• 数据库创建
• 集合增删改查
• 文档增删改查
• 数据库查询
• 高级查询操作
• 通道查询
• 多条件查询
• 反向筛选
• 索引处理
• aggregate聚合管道
• validation验证
• population联表
• middleware中间件处理
• 查询ERROR类二次封装

五、Vue框架

1、vue基础

• 工具与插件
• mvc mvp mvvm设计理念
• 原生js实现MVVM核心框架
• vue设计模式
• 生命周期
• 命令与属性
• 组件化
• 数据驱动与双向绑定
• 虚拟DOM概念原理
• 模板语法
• 条件与列表
• 数组监测
• 计算属性
• 事件处理
• 修饰与表单
• 监听器
• 过滤器
• methods watch computed filter对比
• 组件化开发
• 动态组件
• 组件通信、高级组件通信
• 插槽
• vue动画
• 实例对象
• set
• Get
• nextTick
• vue插件

2、vue工程化

• Babel
• webpack配置vue
• vue单文件组件
• vue-cli
• 工程平台处理
• postCss
• Animate
• Core
• Socket
• lodash工具
• vue-cli插件
• Preset
• 静态资源处理
• 环境变量与膜还是切换
• 工程化部署
• 工程构建

3、vue Router

• vue路由概念
• 嵌套路由
• 路由视图
• 动态路由
• 路由匹配
• 编程式导航
• History
• hash模式管理
• 命名视图
• 重定向与别名
• 导航守卫
• 路由元信息
• 滚动与懒加载
• 导航故障处理

4、vuex

• vuex核心概念
• EventBus对比
• 状态管理模式
• Store
• state
• Getter
• Mutation
• Action
• moudule
• vuex辅助函数与API功能
• vuex环境选择
• vuex模块化处理规则与技巧
• 对象风格提交方式
• 模块重用等

如果学弟们可以掌握上述内容，我认为找到10K以上的工作没有任何问题。根据我的观察，目前网上很多机构的前端课程都是偷工减料，很多前端里面的知识点都是能删就删，400多课时的内容被压缩到180课时，所以就导致了现在很多人学习前端，但是很难找到工作的一个主要原因。如果不是我哥是做这方面的，我感觉自己应该会跟大多数人一样，学的内容都是欠缺很多，可能连工作都找不到，更不要说可以找到12K的前端开发工作。所以我觉得尽量要找一个身边的亲戚朋友做这方面的带带自己，不然一个人真的太容易走弯路。

看我分享的这些前端教程，绝对要比你在网上找的那些好很多倍：

因为链接不让发，想要获取教程的朋友，可以私信我“前端”

这套教程就是对应着我上面总结的前端技术栈，这是我目前看到最好的前端课程，要比网上大部分教程讲得要好，特点就是更加的细致，很多实际开发的问题都有讲到，很注意前端方面的规范问题，这在很多前端教程中都是没有的，所以我认为更加适合新手学习就业。

推荐的前端书籍：

• javascript编程精解
• javascriptDOM编程艺术
• javascript高级程序设计(3/4)
• 你不知道的javascript(上中下)
• javascript权威指南
• javascript设计模式与实践应用

喜欢阅读文字的学弟们可以看看这些书籍，这都是我挑出来比较经典的JavaScript技术书籍。

前端到底应该怎么学才好？

如果你打算靠自己摸索自学，那么你首先要了解学习前端的基本大纲，这是你将要学习的主要内容，理解以及掌握好这些内容，便可以找到一份初级的前端开发工作。你还需要有一套完整的前端学习教程，作为初学者最好的方式就是看视频教程学习，初学者容易理解接受。不要选择买书学习，这样的方式没有几个人能学会，基本都是看不下去书，也看不懂书。如果喜欢看书的学弟，可以买一些经典的书籍作为辅助即可，主要还是以看教程为主。每天抽出固定几个小时学习，做好长期学习的准备。学习编程并不是每天光看视频，你学习编程最重要的目的是为了编写软件产品，提供给大众使用，所以用手写出代码实现功能才是我们要做的事情。而很多同学不会学习，只是每天看视频，而不去写代码写项目实践，这样的学习状态是错误的。在整个学习过程中会出现很多问题，不懂就问，忘了就查，学习编程是一个漫长的过程，需要有足够的耐心和学习的决心。自我摸索自学的过程中会有很大的困难，最后能通过自我摸索自学成功的也是极少数。所以尽量要找一个比较有经验的人去带你，这样才不会走弯路。

如何找工作的问题？

在校的大学生一定不能错过大四的秋招，秋招是非常重要的，一般在秋招的时候都是一些比较好的公司，这个时候往往公司的数量也特别多，能走秋招就走秋招。如果秋招没有准备好，就等明年的春招，反正能通过校招进企业就通过校招进，一旦错过了校招，社招就会变得异常艰难。

还有IT圈一个非常重要的规则，就是通过熟人介绍，很多公司都有猎头，这些猎头就是发掘那些技术好的人才，通过各种方式进行挖人，所以通过关系进行内推也是找工作的主要方式，内推要更加容易就业。

再就是自己去投简历，这样找工作的方式就是海投，海投就会比较累，但是如果你技术能力强，也可以找到自己心仪的公司。如果是大学生，我建议一定要通过校招走，在学习的过程中，多认识一些关系，以后打算在这个圈子里面混，少不了认识一些公司的HR资源以及技术方面比较不错的大佬，我是打算干满三年，然后通过我哥在网易的关系把我内推到网易，网易的薪资就高了，去了后直接年薪30万起步，现在就是我积累的过程。