大家好，我是一名本科毕业一年后自学转行的前端开发，转行后先后加入了小猪短租网、百度，目前在字节跳动任资深前端开发工程师，记得我当初转行前端的时候经历还是蛮痛苦的，现在回想起来，如果有一个有经验的前辈指点我的话可能可以少走很多弯路，现在我来分享一下我认为的零基础自学前端应该怎么做。
本人正在建一个零基础前端学习交流内推的微信群，如果有前端学习相关的问题可以在群里问我，我会尽可能帮助你，加我微信拉你： ricardo_cy
一、自学or培训班or网课？
首先在我们决定好以前端作为我们的职业方向的时候，我们要开始准备制定我们的学习计划，而即使计算机科班的大学目前也没有前端相关的课程，这个时候一般就会面临几条路：
自学
成本低，这种方式比较适合学习能力很强，但是如果对前端理解不足的话容易导致学习路线偏移，而且很容易遇到对整体web结构理解不足导致遇到问题的时候走入死胡同，我记得在我最开始自学的时候，因为不理解web服务器是如何部署的，在我自己部署我的第一个项目的时候，在Nginx配置的时候遇到了相当大的问题，而且会不知道该如何搜索这个问题的答案，其实如果身边有一个有经验的人稍微指点一下的话，都会很快地越过这个障碍。
但是自学永远是开发工程师必备的一项技能，在我们进入公司工作后，我们依然会遇到很多问题，这个时候依然是需要不停地自学和search，所以我理解自学应该是作为一个前端开发的核心技能，但是在我们缺乏对前端结构和基础知识的储备的时候，自学的效率会相对较低，这是一个在我们学习前端开发的过程中需要不断培养的一项技能。
培训班
价格高，一般在1w-2w之间的线下课，在我刚开始转行开始学习的时候，我有search过一些线下培训班，但是我的知觉告诉我线下培训班的老师质量堪忧，直到现在我也是这么觉得的，线下培训班的主要目标客户应该是基础很差而且自学能力很差的同学，这样的话需要老师手把手的带，而且在我的印象中，很多线下培训班会帮助你伪造简历，伪造项目来通过面试，而且一个培训班可能一个班有50个人但是能顺利毕业的也只是占少数，当然我觉得我可能有点偏激了，在相当长的一段时间里，培训班出来的同学给我的印象就是学习能力不太ok，这导致我在百度和字节招聘的时候，会对这类有培训班经历的同学简历直接pass掉。
网课
个人觉得网课是最适合大部分新人学习前端的一种方式，据我了解的质量比较高的网课，类似慕课网和饥人谷的前端体系课程的价格一般在5000左右，课程大概在三个月左右，这类网课的特点是讲师都是一线大厂的在职员工或离职创业的前大厂员工，他们会具备比较强的一线实战经验，这对新人学习很重要，毕竟我们的目标最终还是进入一家互联网公司，而且虽然是网课，我们看的是录制的视频课，但是在遇到问题的时候，依然可以找到老师对问题进行指点。
二、达到面试标准要花多长时间学习？
我认为首先我们要花大概3个月的时间进行基础知识的学习和巩固，范围包括HTML、CSS、JS、HTTP、工程化以及框架的学习，在基础知识比较稳固的状态下，我十分推荐再用1-2月的时间自己想一个自己感兴趣的创新项目进行实践，实际上不管是网课还是培训班都会带你做一些类似于商城或者旅游网站的仿制开发，但是这类项目同质化过于严重，会导致在投递简历的时候给面试官造成不好的印象，在我收到的很多应届生简历中，我一旦看到他的项目经历里写的都是XXX音乐，XXX旅游网站，XXX商城的时候，我大概就能想象出你应该是跟着某个课程跟着敲出来的，并不能代表你的实际项目能力。
说到创新项目，我在转行前自学阶段做的第一个项目是一个叫 “米谱网” 的在线吉他谱搜索&播放网站，贴几张图：
这个是我当时发在掘金上的文章
写了个网站： Web 在线播谱平台-米谱网，支持在线搜索吉他谱、播放乐谱、调整播放速度、收藏自己喜欢的吉他谱。 - 掘金
实际上在写这个项目的时候，我有遇到几个难点：
- 上传曲谱功能
- 吉他谱的展示
吉他谱的展示功能是我接入的一个第三方库，在npm社区有非常多有趣的轮子，我们完全可以接过来，然后做一个自己又喜欢，又可以打动面试官的项目，在这个过程中，我们还会遇到很多技术难题，在我们攻克后也可以作为项目难点讲给面试官听，这样对于面试效果其实是有很好的帮助。
三、前端应该会什么
在几年前vue与react刚开始兴起的时候，能掌握vue或react就足以让人找到一份满意的工作，但是随着这几年的发展，我们需要掌握更多的基本技能来保证在面试的竞争中不被落下，其中我认为分为两部分，核心技术基础和拓展知识。
核心技术基础
- HTTP协议
- 浏览器工作机制
- HTML标签
- CSS布局、定位、响应式、Less/Sass
- Javascript、ES6相关
- Webpack及工程化、性能优化
- Vue/React框架
其中，脱离框架进行Javascript编程是非常非常核心的点，在面试中也会经常考到有类似使用纯Js完成一个小型功能的题目，比如我在面试字节的时候考察我的一道题：请使用JS完成一个控制大量图片加载的功能，最大可能地优化异常情况和性能优化，实际上这道题除了考察了基础的Js编程，也有考察在具体问题中的Js灵活运用，注意我们学习JS不只是学习完语法，学习完ES678的最新性能就OK的，我们需要能在实际问题中使用JS解决问题。
拓展知识
- Typescript
- Vite
- SSR
- 框架源码
近几年TS的发展极为迅猛，在React项目中，TS几乎是标配，所以TS相关的知识点也可以说是面试必备的，当然我建议新人在学习好基础的JS之后再去进阶地了解TS，实际上也不会花很多时间，需要注意的一点是，Ts作为强类型的语言，在新手阶段可能很多人会觉得并没有太大用处，这一般是因为新手项目相对简单，并不会有过于复杂的数据类型，但是不能因为觉得场景不足而放弃学习TS。
对于框架源码原理，为了更好理解框架和应对面试，这一点在后期也是需要补足的。
四、学到什么程度可以去面试
我觉得这里可以参考一个面试标准，在一开始学习的时候我们就按照这个标准去要求自己，这样的话对于后面准备面试是效率最高的。
- 在编码实践的时候我们要时刻注意考虑边界情况，在我们学习的过程中也要培养这种习惯，因为边界条件往往是决定代码是否健壮的关键。
- 复杂度和性能的考虑，需要在学习到后期算法的时候加以补充。
- 前端基础领域，除了掌握基础知识和框架使用外，需要知道如何使用原生JS解决问题。
- 对于自己的项目，要有难点，要能讲清项目中的细节。
最后打个小广告：
本人正在建一个零基础前端学习交流内推的微信群，如果有前端学习相关的问题可以在群里问我，我会尽可能帮助你，加我微信拉你： ricardo_cy
