假如有那么残酷的一天，我不小心喝错了一瓶药，一下子抹掉了我这十多年的编程经验，把我变成了一只小白。我想自学 前端，并且想要找到一份工作，我预计需要 6 个月的时间，前提条件是每天都处于高效率的学习状态当中，并且每天的学习时间至少在 12 个小时以上。
即便是这样，我敢肯定，找到的工作肯定不会太好，勉强能够维持生活吧，毕竟是零基础入门啊。
如果想更进一步，真正成为一名不可或缺的高级前端工程师，时间需要更久，两年、三年、五年，直到秃的那天。
想着想着，我就觉得有必要为那一天做点准备，以备不时之需。
01、第一个阶段，环境和工具准备
- 准备一台电脑，要能联网
- 下载、安装 node、npm、webpack、webpack-cli、cnpm，配置前端开发环境
- 下载、配置MySQL
- 下载、安装 vscode
- 准备一个 GitHub 仓库（或者码云），管理前端源代码
前端是一门计算机编程语言，学它的话，连台电脑都没有，学个屁。我有个亲戚家的孩子想学编程，就只看书，家里连台电脑都不配，说什么“先打好理论基础，再实操”，我真的是有点醉。
有了电脑，还得联网，自学的过程中肯定会遇到很多问题，遇到问题的时候先问搜索引擎，推荐谷歌和必应；实在没有答案的话，也可以来找我，申请加入技术交流群，问问群里面的大佬们。
千万不要使用记事本编写源代码了，对于小白来说，时间是宝贵的，记事本只适合大牛们用来装逼，不适合小白用来编程（入门），纯浪费时间。
有了 vscode，后面学习源码的话，就会方便很多。
为什么还需要 GitHub 仓库或者码云仓库呢？它们可以用来在线云同步源代码，防止版本丢失。学到最后，还可以形成一套自己的工具库，轮子就有了，上班的时候工作效率就会高很多，能直接用的代码再也不用重新写了。
02、第二个阶段，前端基础入门
1）HTML
2）CSS
- CSS介绍
- 全局样式
- 行内样式
- 内联样式
- 选择器
- 字体样式值
- 文本样式值
- 颜色样式值
- 盒模型
- 控制台使用
- 清除默认样式
- 盒模型居中
- 浮动
- 定位
- 外边距塌陷
- 标准文档流
- 行内块元素
- 多种伪类元素
- 块元素
- 行内元素
3）javascript初阶
- 变量和运算符
- 逻辑控制
- 数据类型基础
- Math类
- 函数
- 定时器
- Array类
- String类
- Date类
- Object类
4）JavaScript进阶
- JavaScript DOM基础
- this
- 事件
- 事件流
- JavaScript BOM 基础
- call&apply&bind
- 自定义属性
- 面向对象编程
5）ES6/7/8/9
- ECMAScript6简介
- let和const
- ES6+的作用域
- 对象的扩展
- 函数的扩展
- 字符串的扩展
- Symbol
- Set&Map
- Promise对象
- async&awiat
- 箭头函数
- 模板字符串
- rest参数
- Class
- Module模块
6）JavaScript高阶
- 闭包
- 立即执行函数
- 惰性函数
- 插件开发
- 多人协作
- 深复制与浅复制
- 数组扁平化
- 递归
- 正则表达式全解
- 函数防抖
- 函数节流
7）HTML5
- HTML5简介
- HTML5新语法
- HTML5新语义化标签
- HTML5新表单元素属性
- HTML5手机端新事件处理
- HTML5新增多媒体实战
- Canvas
- HTML5地理组件GeoLocation
8）CSS3
- CSS3新增属性
- 圆角制作企业级方案
- CSS3背景属性
- 过渡动画 transition
- 变化属性 transform
- 特效轮播图实战
- 企业级flex布局实战
- grid布局实战
03、第三个阶段，前端核心技术
1）bootstrap
- 响应式
- 媒体查询
- 栅格系统
- 栅格参数
- 组合模式
- 列偏移/列排序/自动列
- 列对齐/列嵌套
- 文本与颜色
- 按钮
- 导航
- 图文混排
- 模态框
- 轮播图
- 企业级案例讲解
2）移动端
- 移动端简介
- 移动端视口约束
- 移动端flex移动端实践
- rem
- vw
3）Ajax
- AJAX简介
- AJAX作用
- 封装AJAX
- 创建XMLhttpRquest对象
- 同步和异步
- AJAX分页
4）jQuery
- jQuery介绍
- jQuery链式语法
- jQuery选择器
- jQuery核心
- jQuery工具
- jQuery事件
- jQuery事件对象
- jQuery特效
- jQuery回调函数
- jQuery文档处理
- jQuery筛选
- jQuery属性
- jQueryCSS
5）Echarts
- Echarts概述
- Echarts使用
- 坐标系
- 雷达图/饼状图/折线图
04、第四个阶段，前端进阶升级
1）Webpack
- Webpack的安装和使用
- 项目模块打包
- 静态打包模块器
- Webpack入口
- Webpack输出
- Webpack插件
- webpack模块
2）vue
- Vue使用
- Vue响应式
- Vue双向数据绑定
- Vue相关指令
- vue-resource
- axios
- template选项
- Vue生命周期
- Vue组件
- 自定义指令
- 过滤器
- computed属性
- Vue-cli 2.x和3.x 脚手架配置
- Vue-router
- Vuex
- Element UI
3）微信小程序
- uni-app
- mpvue
- 微信小程序注册
- APPID申请
- 生命周期
- 小程序调试
- 微信小程序框架组件
- 微信小程序布局框架
- 微信小程序条件渲染和列表渲染
- 媒体组件audio
- 视图容器
- 网络api
- 相机api
- 地图api
4）数据结构和算法
- uniapp基础
- uniapp初始化配置
- uniapp视图模板使用
- uniapp生命周期
- uniapp路由跳转
- uniapp常用组件
- uniappScrollView的使用
- uniapp-ui使用
- uniapp-Vuex使用
我目前是在职前端开发，如果你现在也想学习前端开发技术，在入门学习前端的过程当中有遇见任何关于学习方法，学习路线，学习效率等方面的问题，你都可以申请加入我所在的前端学习交流裙：前面：42137 后面：4697。里面聚集了一些正在自学前端的初学者,转行者，初阶者，里面也有我整理的一些前端书籍PDF、前端面试题、前端开发源码教程等PDF文档书籍教程,需要的话都可以找裙猪获取。
05、第五个阶段，活着最重要
技术是没有终点的，也是学不完的，最重要的是活着、不秃。
零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。
最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。
自学最怕的就是缺乏自驱力，一定要自律，杜绝“三天打鱼两天晒网”，到最后白忙活一场。
高度自律的同时，要保持耐心，不抛弃不放弃，切勿自怨自艾，每天给自己一点点鼓励，学习的劲头就会很足，不容易犯困。
技术学到手后，找工作的时候一定要好好准备一份简历，不要无头苍蝇一样去海投简历，容易“竹篮打水一场空”。好好的准备一下简历，毕竟是找工作的敲门砖。
拿到面试邀请后，在面试的过程中一定要大大方方，尽力把自己学到的知识舒适地表达出来，不要因为是自学就不够自信，给面试官一个好的印象，面试成功的几率就会大很多，加油吧，骚年！
