前端学习之路(从入门到入坑...）

未经允许，不得擅自改动和转载

原创 | 阿小庆写于2018年6月，有更新
学习前端两年多了，想结合个人经历总结的前端入门方法，总结从零基础到具备前端基本技能的道路、学习方法、资料。由于能力有限，不能保证面面俱到，只是作为入门参考，面向初学者，让初学者少走弯路，希望对大家有所帮助。

---

互联网的快速发展和激烈竞争，用户体验成为一个重要的关注点，导致专业前端工程师成为热门职业，各大公司对前端工程师的需求量都很大，要求也越来越高，优秀的前端工程师更是稀缺。个人感觉前端入门相对容易，但是也需要系统地认真学习，在打好基础后坚持学习，成为优秀前端工程师也只是时间问题。

学习任何知识最重要的都是兴趣，如果经过一段时间的学习感觉不喜欢，那可能强迫自己学习是很痛苦的，效果也不会好，毕竟这很可能就是以后很多年生存的技能。不过随着互联网行业的发展，前端必然是Web开发人员需要学习的知识，有时候是没有专业前端工程师一起合作的，所以即使不做专门的前端工程师，掌握基本的前端技能为工作 带来方便。

下面说一下个人对前端的理解：

前端要学习三个部分：HTML，CSS，JavaScript（简称JS），其中JS是重中之重，因此首先明确三个概念：

HTML是内容层，它的目的是表示一个HTML标签在页面里是个什么角色。 CSS是样式层，它的目的是表示一块内容以什么样的样式（字体、大小、颜色、宽高等）显示。 JS是行为层，它要做的是当用户触发某些行为时，会给内容和样式带来什么样的改变。

1. HTML/CSS部分。

（1）入门：

• 菜鸟教程（http://www.runoob.com/）上的HTML/CSS教程——技术手册式的教程，比较全面，照着实例敲一遍

• Codeademy（https://www.codecademy.com/）上的html&css课程——在线交互式编程平台，弄清楚基本概念和基本语法

• 视频：慕课网（http://www.imooc.com/）和网易云课堂（https://study.163.com/）上也有好多基础课程，大家可以看看

（2）进阶：

• 《精通CSS·高级Web标准解决方案》——对CSS有一个比较深入的学习，对核心技术了解

• 《HTML5权威指南》——非常全面的书，内容也很新，包含了HTML5+CSS3+JS DOM

2. JavaScript部分。

（1）入门：

• 菜鸟教程（http://www.runoob.com/）上的JS教程——比较详细的了解下JS的特性

• 《JavaScript DOM编程艺术》——讲js和DOM的基本知识和运用，了解JS和DOM可以做什么

• 视频：慕课网（http://www.imooc.com/）和网易云课堂（https://study.163.com/）上也有好多基础课程，大家可以看看

（2）进阶：

• 《JavaScript高级程序设计》——JS圣经，比较全面，非常好的一本书，比犀牛书可阅读性强

• 《JavaScript权威指南》——传说中的犀牛书，好厚好厚的一本书，不适合入门，适合当工具书看

• 《JavaScript语言精粹》——很薄的一本书，但是可以帮助你快速了解JS的精华部分

（3）实战：

• jQuery框架: w3school上的jQuery教程/Codeademy上的jQuery教程——了解Jquery（前两年用的框架较多，不****过，最近三大框架很流行，JQuery地位有所下降）

• 《jQuery基础教程》——流行的前端框架，注重实用

（4）提高：

• 《高性能JavaScript》——讲如何提高js性能，以及构建和部署文件到生产环境的最佳实践

以上HTML,CSS,JavaScript学完，前端基本就可以说入门了，

最近特别流行的三大框架

• Vue.js（https://cn.vuejs.org/）-国人尤雨溪大神创造开发出来的，文档非常友好

• React.js（http://doc.react-china.org/）-facebook开发

• Angular.js（https://www.angular.cn/）-Google开发

以上三个框架，如果真的想做前端的话，三个框架是必须学一个的，一个都没学，说实话，是不好意思说自己是前端的,可能说的有点过了，哈哈！

还有最近微信小程序开发也很火，有两个比较火的小程序开发框架

• WePY是腾讯官方搞的小程序框架
  https://tencent.github.io/wepy/
• mpvue由大厂美团开发出来的，虽然不是腾讯官方，但有后来居上之势。
  http://mpvue.com/

想学的话可以学习其中一种，关于两者的区别，大家自行查下，我就不赘述了。

还有想成为全栈的话，还要学node，大家有机会可以了解下！！！

其实，以上说的只是前端大致内容，具体的东西，延伸的东西也很多，下面给大家一张前端学习路线图

5b21e0c60001527211111007.jpg

若看不清，原图链接：https://img.mukewang.com/5b21e0c60001527211111007.jpg

最后给大家推荐一些个人感觉非常好的前端学习路线链接：

• https://github.com/CQUPTBee/FE-Study（前端开发培训体系）

• https://github.com/qiu-deqing/FE-learning（Github-前端入门方法）

• https://www.zhihu.com/question/19834302（如何系统学习前端-知乎）

  好了，我接着敲代码了！呜呜呜...

感兴趣的也可以看看我之前的前端面经：【面经】阿里6面，终拿offer!

![](https://img.haomeiwen.com/i4340772/f51b3938a2aab76e.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)