自学WEB前端到什么程度可以去找工作？

有的人只学到js就找到了实习的工作，有的人学了框架做了项目练习，但是基础不够扎实，一样也找不到工作。

说到底，找工作就是实力+运气。技术扎实、学历好就代表你硬实力强，你找工作就不怎么需要运气。相反，如果你学历差技术还很弱，那你找工作运气就非常重要。

碰运气式的找工作，只需要跟网上说的那样，大致掌握HTML、CSS、JavaScript、Vue，能鼓捣出一两个项目，就能去碰碰运气，尝试找一些基础的代码搬砖工作。

我个人是很讨厌网上这些说学完前端三件套就能上手框架的言论的，在我看来说这些话的人很不负责任，在学框架之前，是要先把node、npm、webpack给学好的，模块化、组件化、模板化、工程化，这些都是学框架的前置知识，基础不扎实，学框架就是学个语法，学的都是表面的东西，实际到做项目会错误百出。

所以，如果你想要凭实力找到一份工作，并且有着不错的薪资，那你可以耐心的看完这篇文章，按照我这份学习路线去学。只要你能把提到的这些知识点掌握到应用开发层面，找一份10-15K的工作没有任何问题。（根据学历以及所在城市薪资水准有一定的上下浮动）找到工作之后，用几年的时间去消化吸收，更进一步的掌握，年薪拿个三四十万也是没有任何问题的。

想要凭硬实力去找工作，你需要学习下面这些内容

①HTML/CSS篇

这个阶段的学习周期大概是15天左右，你需要掌握以下这些知识点：

HTML

文档结构
DTD
注释
网页三要素
SEO
标签
属性
结构
规范
书写风格
语义化

CSS

选择器
优先级
权重
定位
浮动
flex
盒子模型
BFC
字符串类
包装类
渲染原理
代码规范
性能优化
布局思维
CSS3动画特效

除上面这些知识点之外，还需要掌握一些实战技巧，例如量图规划、结构规划、类名分组、间距处理、样式复用这些。要做到熟练掌握HTML、CSS核心语法，掌握多种布局技巧，能够独立绘制前端静态页面。可以做一个企业内部的多页面的项目实战进行自我检测。

学习编程最重要的一点就是要多敲代码、多做项目练习，只有练习多了才能够理解运用，所以每个阶段学完之后都要找一到两个练手的项目做。如果你学完了HTML和CSS，缺少练手的项目，可以在文章末尾处加入我创建的WEB前端交流群，我把这个企业内部的多页面项目实战的素材和源码上传到了群文件，大家可以自行下载练习，平时学习过程中遇见有不懂的也可以随时在里面问，大家都会帮忙解答，学习氛围非常好。

②JavaScript篇

这个阶段的学习周期在50天左右，需要掌握的下面这些知识点：

ECMAScript

语言基础概念
语句语法
数据类型
隐式转换
运算符
运算规则
作用域解析
JS解释引擎

控制流程

for/for of/for in
短路运算
位运算
三目运算
Switch
垂直过滤
while do while
排序
去重
终止
返回

内置API

字符串API
数组API
对象API
日期API
正则表达式
工具类

机制原理

存储机制
深拷贝/浅拷贝
字面量
包装对象
同步/异步
闭包模块化
性能调优
工厂模式
执行上下文
垃圾GC
闭包
debug方式方法

函数式编程

纯函数
偏函数
递归函数
柯里化函数
回调函数
缓存函数
组合函数
通道函数
防抖节流
高级函数
IIFE函数

面向对象

构造函数
原型/原型链
原型指向
封装
继承
多重继承
包装对象
this指向
this偏移

DOM

DOM概念
节点与遍历树
GUI渲染行为
虚拟DOM
节点增删改查
位置与偏移
对象与标签
Event时间
鼠标/键盘
定时器
监听器
事件委托
代理/分流
事件冒泡
默认行为
事件降频
行为锁
运动框架
物理模拟
碰撞检测
拖拽模组
重绘/重排

BOM

window对象
Navigator
location
history
hash
screen
document

ES扩展

版本解读
兼容处理
Let
const
解构赋值
对象解构
箭头函数
reset参数解构
class面向对象
set/get/extends
super/static
Symbol/promise
async/await
Defineproperty
proxy代理
合并空值运算
链式询问
对象修饰
代理拦截
Modules

把JS的这些知识掌握，就可以接着往下学了。这阶段的达标水准就是能够使用原生javascript进行业务开发，能实现常见的DOM库和工具库，能够修改第三方库源码以供业务特殊需求使用。学完之后可以做一个泡泡龙游戏自我检测。这个项目的源码、素材我也上传到文末这个WEB前端学习群的群文件了，需要可以点击下方插件自行下载。

③H5移动端篇

这个阶段的学习周期，在30天左右，需要掌握的内容如下：

移动端开发

移动端适配概念
尺寸与分辨率
PPI/DPI/DIP/DPR
布局视口
理想视口
视觉视口
rem适配方案
vw/vh适配方案
高清适配方案
Meta权限管理
刘海屏适配
图片高清适配
1px像素适配
移动端事件
默认行为处理

H5API

新增标签
新增属性
多媒体
页面生命周期
状态监听
Blob/FileReader
sessionStorage
localStorage
fullScreen全屏
Notifications通知
worker多线程
网络状态
地理信息开发
canvas交互
默认行为处理

预处理

sass语法
less语法
stylus语法
css编程
css模块化
css表达式
css循环判断
继承
嵌套
混入

模板引擎

art-template模板语法
handlebars模板语法
原生js模板引擎
渲染机制

UI库

学习快速上手UI库
文档学习
案例调试
layerUI
easyUI
bootstrap
WEUI
Vonic
mintUI
elementUI
Vant

DOM与其他库

jQuery/zepto
touchjs/iScroll/swiper
validator/Lodash
axios/babel
wangEditor
store/qs/cy

开发管理

原生库开发
第三方库hack
需求分析
业务规划
技术栈选型
文件输出规则
模型设计
底层搭建
MVC设计模式
业务逻辑分类
数据分离
交互业务封装
模块对接
面向对象式业务设计

到这里移动端的内容就可以告一段落了，这个阶段的达标水平是能够独立实现移动端H5开发适配各种移动设备，并且能够处理各种兼容问题，能够利用原生js结合H5新特性实现各种功能组件，例如音频视频播放器、懒加载、下拉刷新等业务组件。这个阶段可以做一个H5播放器进行自测。这里给大家准备了一些H5移动端的学习笔记，学习过程中常见的一些问题在这些学习笔记上都有讲解，有需要可以点击文末的卡片加入到这个WEB前端群免费获取。平时学习过程中遇见有不懂的地方也可以随时在里面问，大家都会帮忙解答，学习氛围非常好。

④Node服务端开发

这个阶段的学习周期大概在50天左右，需要掌握下面这些内容：

NPM

npm安装
npm配置
npm包管理
npm本地包安装
npm依赖管理
npm版本控制
npm项目初始

Node

V8引擎概念
AMD/CMD/UMD
fs文件操作
IO流
异常处理
中间件
HTTP模块
URL/PATH模块
EventLoop事件轮询
同步/异步
阻塞/非阻塞
宏任务
微任务
模块管理
模块应用
stream流
Buffer对象
Static静态封装
路由封装

前后端交互

HTTP通信交互
请求响应、
MIME
URI解析
TCP/IP协议
socket协议
代理/缓存
网关/隧道
ajax异步交互
跨域处理
ajax封装
axios使用
请求拦截
请求预验
Method
content-type
cookie/session
通信加密RSA/MD5
登录注册

接口设计

传统接口设计
接口文档
文档定义
数据接口概念与标准
状态码设计
响应格式
协商协议
合约说明
资源定位符
缓存机制
HTTP头管理
松耦合实现
RESTful设计原则
RESTful实现

数据库

基础概念
NoSql行为操作
CAP
基础语法
shell/MongoDB驱动
增删改查
高级查询操作
通道查询
多条件查询
索引处理
聚合管道
population联表
validation验证
异常处理

服务端项目

数据库设计
服务端路由设计
API管理分类
注册登录
原生路由开发
权限/用户/分类
模块化功能封装
校验库封装
行为中控

Node部分掌握这些知识点就OK了，这个部分的达标水准是能够理清完整的WEB应用情景和交互行为,从理论到实践掌握常规数据库设计、路由设计、工程化、模块化、组件化、权限、鉴权、加密、跨域、认证，能够完成从前端到后台到数据库一整条线路的注册、登录、查询、修改、管理等功能。可以尝试做一个博客项目后台实战。

同样的，学习node过程中常见的一些问题，我也整理成学习笔记了，需要可以点击文末的卡片加入这个学习群，我免费分享给大家。

⑤VUE框架篇

这个阶段大概需要40天左右，需要掌握的内容如下：

webpack

工程化概念
webpack配置运行
plugin插件
loader使用
出入口配置
模块依赖处理
devServer使用
文件切分
动态加载
package管理
性能优化
测试处理

Vue基础

工具与插件
mv*设计模式
mvvm原生实现
生命周期
命令属性
组件化
虚拟DOM
数据驱动
模板语法
条件列表
计算属性
修饰表单
监听过滤
组件通信
动画动效
高级组件

Vue工程化

webpack配置vue项目
vue单文件组件
vuecli命令服务
工程平台
animate
兼容处理
socket/loadsh
preset
静态资源
环境变量
工程部署
打包优化
模式转换
构建目标

VueRouter

路由概念
嵌套路由
动态路由
路由试图
编程式导航
History
hash模式
命名视图
重定向/别名
导航守卫
路由原信息
路由拦截
滚动懒加载
故障处理
路由带参

Vuex

Store
state
getter
mutation
action
module
EventBus对比
状态管理模式
vuex辅助函数
vuexAPI
vuex模块化处理规则
对象风格提交
模块重用

项目开发

PC+mobile无缝切换
websocket聊天室
第三方组件
工具库使用
令牌管理
文章分类
登录注册
路由权限管理
加密校验
Auth认真
HTTP封装
富文本编辑
文章查询
分页管理
懒加载
组件分类封装
组件混合
高级组件开发
ERROR封装
重置数据响应
通知组件封装
工程平台应用
项目打包
体积优化
速度优化

把这些知识点掌握，你就具备找一份工作的实力了。这个阶段的达标水平是能够熟练运用vue、vuex、vuerouter、vue-cli、webpack、postcss、babel以及各种第三方库，实现项目开发需求，独立完成完整的前端现代化工程项目，并且深入框架原理掌握mvvm核心，能够用原生javascript模拟实现vue的内核双向绑定响应式模型。vue这部分的学习笔记，我也帮大家整理好了，有需要也可以点击文末卡片加群获取。

这些内容学完之后，可以做一个Vue博客项目实战进行自测，做完之后就可以准备简历进行投递了。并且我相信你很快就能收到一份满意的offer。

最后再给各位新晋的前端工程师一点建议：入职只是开始，想要在这个行业长期的发展，还是需要不断的去学习。

如果大家对于学习前端还有什么疑虑，可以加入下面这个WEB前端群和我交流，我从事这一行十年了，想通过分享我的经验，能让大家少走一些弯路。我希望把这个WEB前端群打造成一个非常好的前端圈子，有好的工作也可以互相内推。