假如有那么残酷的一天,我不小心喝错了一瓶药,一下子抹掉了我这十多年的编程经验,把我变成了一只小白。我想自学 前端,并且想要找到一份工作,我预计需要 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使用
![](/qrcode.jpg)
我目前是在职前端开发,如果你现在也想学习前端开发技术,在入门学习前端的过程当中有遇见任何关于学习方法,学习路线,学习效率等方面的问题,你都可以申请加入我所在的前端学习交流裙:前面:42137 后面:4697。里面聚集了一些正在自学前端的初学者,转行者,初阶者,里面也有我整理的一些前端书籍PDF、前端面试题、前端开发源码教程等PDF文档书籍教程,需要的话都可以找裙猪获取。
05、第五个阶段,活着最重要
技术是没有终点的,也是学不完的,最重要的是活着、不秃。
零基础入门的时候看书还是看视频,我觉得成年人,何必做选择题呢,两个都要。喜欢看书就看书,喜欢看视频就看视频。
最重要的是在自学的过程中,一定不要眼高手低,要实战,把学到的技术投入到项目当中,解决问题,之后进一步锤炼自己的技术。
自学最怕的就是缺乏自驱力,一定要自律,杜绝“三天打鱼两天晒网”,到最后白忙活一场。
高度自律的同时,要保持耐心,不抛弃不放弃,切勿自怨自艾,每天给自己一点点鼓励,学习的劲头就会很足,不容易犯困。
技术学到手后,找工作的时候一定要好好准备一份简历,不要无头苍蝇一样去海投简历,容易“竹篮打水一场空”。好好的准备一下简历,毕竟是找工作的敲门砖。
拿到面试邀请后,在面试的过程中一定要大大方方,尽力把自己学到的知识舒适地表达出来,不要因为是自学就不够自信,给面试官一个好的印象,面试成功的几率就会大很多,加油吧,骚年!