【前端学习路线整理】写了很久，这是一份最适合普通大众、科班、非科班的路线

太过爱你忘了你带给我的痛 2022-12-22 04:50 135阅读 0赞

关于前端的话题网上不能再多了，但作为一个自学者，希望以我的经历给你们一点启示或者帮助。

那就先从如何入坑说起吧，去年6月中旬的时候对那份工作已提不起任何兴趣，就筹划着转行，便联系了大学的同学，得知他已经转行做起了运营，并希望我能加入IT行业，我们了聊很多，最后得出我如果做互联网，我个性比较倾向于写代码。

于是开始在知乎上寻求帮助，几天是筛选之后，看到大部分人都在说前端简单，好就业。于是便辞职毅然回了成都，暂居在朋友家，开始了我的前端自学之路。

关于前端的学习资料和视频可谓多之又多，学习方法也是大相径庭，有推荐跟着慕课网的，也有W3C的，这里就简单提一下吧。

我想大部分都是零基础的居多吧，所以一些必备的基础知识都没有的话，后面的学习是很困难的。这里既然是自学，那么对入门的书籍或者视频选择应当由浅入深。好了话不多说，进入干货环节。

最基础的三个知识点就是html+css+js，但是很多小白可能并不知道html5和html，或者XHTML的区别，也不知道还有css2和css3的区分，我在学了近半个月以后只慢慢了解试试脉络。

## 1.html ##

这本可能不是最好的，但对于小白来说是最浅显易懂，而且例子生动形象，慢慢加大难度，当时我是在自学了半个月以后去看的这本书，依然觉得很不错。

![image][]

我希望自学的同学不要奢望像培训班那样，4个多月或许就能找到一份不错的工作。但你最好是一步一个脚印的慢慢来，培养自己的自学能力，这对以后框架的学习很有帮助。这本书无论是在校大学生还是普通的在职人员，你每天不需要花费太多的时间，就晚上2–3小时的时间，一个月，应该是可以看完的。

## 2.html5,css加强以及css3（重点canvas） ##

这里由于自身没怎么看书，也就不乱推荐了。这里我建议上W3C，因为有了前面一个月的学习，我相信你的自学能力已经提高了不少，或者可以自己找到合适的资源。多去参考别人在github上代码，养成良好的书写习惯。掌握几个重要的技巧或者标签用法吧（我也不知道该怎么叫）。

1.  伪类元素（包括各种符号的用法）
2.  ::before和::after
3.  利用css3实现轮播，旋转，还有字体特效

因为我是辞职专心在家学习，可能时间上充裕一点，如果你是在上班的人，这里花费的时间可能会多一点45–60天。毕竟你每天的时间有限。

## 3.JavaScript ##

你肯定很想知道，你输入的账号密码是否匹配成功是如何检测的？也想知道那些弹框，页面上你点击鼠标带来的特效。也很好奇浏览器的前进与后退，缓存是如何实现的。那么你一定要学习js,因为你只要自己会JS代码，会写算法，你才能称得上一名前端程序员。

如果大学不是计算机专业或者没有了解过C，C++，Java，或者算不上语言的VB，你一定要打好基础。如果前面的语法没有学好，后面的学习真的就是全程懵逼。

JS的学习肯定是离不开书籍的，我个人只买了2本，以后根据需要会自己去选择书。一本《JavaScrip DOM编程艺术精讲》，全书280页，一个月随便看完，结合视频和书中的例子，你会对浏览器的兼容性，和JavaScript对页面对象的处理有一个初步了解。之后你需要第二本书，《JavaScript高级程序设计》。一门语言的学习不是一蹴而就，得慢慢来。至少得4个月，当然如果你是天才，2个月也可以。

最后在推荐一个很不错的网址M D N，这里我把中文网址给大家[JavaScript | MDN][JavaScript _ MDN]，有 条件的同学可以翻墙看外文的。

讲到这里，你以为前端就这么简单，那你就大错特错了，真正的坑才刚刚开始！你会发现你学的越多，不懂的就越多，永远有学不完的新技术，新特性出来。

这里给大家说说学习过程中会用的许多软件，首先就是谷歌浏览器，再来个火狐和opera，三个主要浏览器，一定要一定要一定要学会F12自己解决BUG，和调试代码。当然你说要去兼容IE6，那好吧，出门左拐。

第二个git和github，一点要学会使用，不要求你对快捷键有多熟悉，基本功能，包括github pages得学会使用吧

第三个翻墙工具，小白还是老老实实花钱吧，少去Youtube看电影。翻墙是为了你在使用github方便一点，同时学会使用Google输入关键字，寻找解决问题的办法，很多时候别人没有时间来帮你，也没有义务来帮你。

第四个IDE，开发工具，但对于我们来说可能只是代码编写工具吧，我还是首推sublime3，我2个月以来也一直用的是它，如何安装，下载插件自行百度，这个都要别人手把手教建议换个职业。最近我换成了webstorm，因为要从git上下一些代码，觉得方便些。最后一个，如果以后想前后端一起开发的，可以了解PHP，下一个phpstorm，用法和前者差不多。

最后，关于前端的学习，光这些哪里够啊.但是万丈高楼平地起，能自学7–8个月，做到上面我所说的，你离找工作也就不远了。后面的bootstrap框架和angular。以及jQuery，ajax,nodejs,等等这些技术，当你养成一个自我学习的能力，后面这些你可以通过一定的学习去了解去接触。也希望我的这篇文章能给那些犹豫不决的小伙伴一点帮助。

## 最后 ##

#### 说个题外话，我平时一直有整理面试题、刷题的习惯，有随时跳出舒适圈的准备，不知不觉整理了229页了，在这里分享给大家，有需要的[**点击这里免费领取题目+解析PDF**][PDF] ####

> 篇幅有限，仅展示部分内容。

![ac0b1c2376da47d727e0dc8a77e76478.png][]

![b871b45fb2e6d5442144c863cbcff965.png][]

![81a11613ba56e91c3aa1a18aa71519c4.png][]

## [**【点击我】**][Link 1]无偿获取这份面试题+解析PDF。 ##

[image]: /images/20221120/53c0decc81cd4676af4ba6e8927d70eb.png
[JavaScript _ MDN]: https://link.zhihu.com/?target=https%3A//developer.mozilla.org/zh-CN/docs/Web/JavaScript
[PDF]: https://links.jianshu.com/go?to=https%3A%2F%2Fjq.qq.com%2F%3F_wv%3D1027%26k%3DhCLQP3CQ
[ac0b1c2376da47d727e0dc8a77e76478.png]: /images/20221120/af10dd876f994d7f8f29d28c1a9c9d0f.png
[b871b45fb2e6d5442144c863cbcff965.png]: /images/20221120/ef648281bd6a40bb977d9c5b089ac544.png
[81a11613ba56e91c3aa1a18aa71519c4.png]: /images/20221120/ce22731d65ab41b9b75b374414c47041.png
[Link 1]: https://links.jianshu.com/go?to=http%3A%2F%2Fqm.qq.com%2Fcgi-bin%2Fqm%2Fqr%3Fk%3DAhTTzwXEgwPwk9jK-IJys9OAVsd05xSz%26authKey%3DAb5uy3OPCB1xMDri2VE%252F9L1n0fkfQncTf%252BkMJC8aj9ZyahXo%252FcDSrTI1aHpTkf1K%26noverify%3D0%26group_code%3D1048337049