在这里我以过来人的身份写下这篇文章，希望刚刚进入大学或者即将进入大学的学弟学妹们千万不要像我一样，等到快要毕业或者出去找工作的时候才知道知识技能的重要性。
我只有专科学历，专业学的是机械工程专业。大一的时候还老老实实地上上课，参加下学校的各种社团活动，感觉还挺充实。到了大二可能受身边同学的影响，天天沉迷于网吧，白天睡觉晚上通宵，玩得不亦乐乎。大学毕业就随便找了个物流公司实习。
上班后才知道社会多残酷，工资低开销大，很多地方都需要用到钱，工资月光，更别说什么存款，心里其实挺慌的；偶然一次机会，了解到一个高中同学大学学的是计算机专业，现在从事前端开发的工作，薪资待遇挺好的。他和我说他身边也有很多同事也不是计算机专业出身，让我尝试自学一下前端。
于是我从去年9月份开始自学WEB前端，差不多用了8个月的时间吧，现在是在南京的一家软件公司做开发，技术部大约是30多人。薪资是12K，五险一金。我觉得自己挺幸运，大学荒废了那么多时间，毕业后还能找到一份月薪过万的工作。
根据我自学的经验给大家几点建议：
1.准备一份系统的视频教程。
我自学用的视频教程是我朋友给我的，他跟我说普通教程ajax前后端交互会在学完js后直接讲XMLHttp的API方法和使用, 跨域和封装也只限于前端代码部分的讲解和库的使用。而他给我找的这份教程，在这些基础上拓展了HTTP理论、交互通信原理、服务端http服务器搭建、MIME、报文端口、监听抓包、网络业务模型、代理缓存、cookie session 鉴权认证、安全加密、Token、JWT、oauth、session管理、RESTful接口设计、协商合约、资源标识等原理规则性知识，能够让我真正清楚整个交互的来龙去脉，而不只是单纯地抄方法、跟着教程写代码。我能找到12K的工作，很大一部分原因就是这份教程讲得内容够详细，技术学的扎实。
如果大家找不到一份系统的教程，可以用我当时自学的这份，这份教程在我的网盘里面，因为网盘链接放上来会被建议修改，有需要可以加入我们的学习裙，前面三位484，中间三位757，后面三位760。找我要，我免费分享给你。
2.学习过程中一定要多练习敲代码。
我刚开始自学那会，总感觉自己能看懂代码，但动手却写不出来。通过和我朋友沟通才发现，我的学习方式有问题。正常的学习方式应该是写代码的时间要比看视频的时间长。只有多敲代码，才能够理解运用。很多人学完之后，能够看懂代码但是不会写，或者是学了后面的忘了前面的，根本原因都是练得太少。假设每天学习前端的时间是6个小时，那么起码要拿出3个小时以上的时间练习敲代码。只看视频不敲代码，就是在浪费时间。
3.多和专业人士沟通交流，避免闭门造车
有人一起交流学习，真的是事半功倍，效率会提高非常多。身边没有能跟你探讨学习的朋友，可以加一些学习氛围不错的前端交流学习群，跟有经验的人交流可以学到很多好的学习方法和技巧，提高我们的学习效率。找不到好的学习群，可以加入我朋友创建的这个前端学习交流群。前面三位484，中间三位757，后面三位760，里面有好多已经工作的大佬，每天不忙的时候在群里解答问题。也有很多正在学习的人每天交流学习心得。气氛是非常好的，大家可以在群里一起监督学习。我能自学找到12K的工作，离不开群里这些大佬的帮助。
最后给大家分享一份系统的前端学习路线，我就是按照这份学习路线去学的，上面的知识点掌握了百分之七十就找了12K的工作，给我整理这份学习路线的大佬说，能够把这份学习路线上的知识点全部掌握，就可以准备大厂的面试了。
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应用