前端自学路线--入门篇 - 好文

从一个计算机小白开始着手学习前端，跟着网上的视频各种自学，现在在前端的岗位上也做了一年左右，很多想做IT的同学也都是从前端开始入手，市面上关于前端的培训班也是越来越多，自己也曾经跟随潮流的报班学习过一阵，但是后来和自己自学对比了一下，放弃了继续去上培训班，在网络如此发达的今天，网络上的免费视频和各种知识网站，完全可以满足前端的一个基础入门，至于更深层次的就是要自己动手做项目，去学习一些更好的框架
，而这些也是培训班教不给我们的。还有很重要的一点是，互联网的东西都是需要由量变去推动质变的，而不是凭着心血来潮学个一天两天就能看见的，需要沉下心，坚持下去，即使学习的第一周看不懂，第二周不会自己写，但是坚持下去，你就会在某天忽然发现自己可以写一个完美的页面，实现一个复杂的功能。

简单记录一下自己学习的过程，工作中用的到一些知识、框架，一方面是想入坑前端但是不知道从何处下手的同学一个方向，另一方面也给自己这一年多的工作历程做个总结，欢迎对前端感兴趣的同学一块交流，进步。

准备阶段

工欲善其事必先利其器，想要开始完成一个页面，实现一个功能，首先要有一个用着顺手的编辑器，目前比较主流的就是上面三大编辑器，自己是从sublime开始，入手使用的时候有以下几个优点：

* 下载安装方便，还有安装版的，放在u盘里，打开就能敲代码
* 上手很容易，新建一个文件，编辑，保存，直接在浏览器中打开，可以很方便的就看到自己的成果。
* 美观，sublime的界面还是很不错的，对于不同类型的字段的分类也是很清楚
* 插件丰富，在刚开始使用的时候还是很少能使用到插件的，毕竟刚开始学的时候，应该做到每一个字母都是自己手打的，这样才知道自己掌握了多少。

工作之后放弃sublime转Atom的原因是工作需要，需要对jsx、scss等新语法的支持，在sublime中本身是不支持这些语法的，使用scss文件也不会有补全提示，就换成了Atom，这两者最大的区别还是Atom内置了github插件，支持直接上传到自己的github中，不过刚开始入手的时候这两者是没有什么区别的。至于webstorm自己没有用到过，其中的一些优点缺点也不是很明确。

下载地址

sublime3官方下载 <http://www.sublimetext.com/3>
Atom官方下载 <https://atom.io/>
webstorm官方下载 <https://www.jetbrains.com/webstorm/>

常用插件

sublime使用教程及基本插件
<https://blog.csdn.net/weixin_40682842/article/details/78727266>
Atom使用教程 <http://wiki.jikexueyuan.com/project/atom/overview.html>

入门阶段

对于前端的入门，可以很不负责任的讲，只要你坚持下去了，你就已经入门了，在刚开始写代码的时候，不要使用快捷键，所有的代码都要一个字母一个字母的自己打，这样时间长了才会对自己敲出的代码有感觉，才会出错后一眼就能看出来是哪里出错了。自己刚开始敲代码的时候，往往写出来的页面跟自己想想的差距太大，报错一大堆，但是一行一行的去找又找不到错在了哪里，明明就是眼前的一个标签打错了，但是自己就是看不出来，刚开始的时候可能大家都会经历这样的一个阶段，这些都没有关系，只要沉下心认真的去学去看，就都会走出这个阶段的。

前端入门，最主要的三个部分。html、css和javascript。这三个之间的关系呢，html就像是一个赤裸裸的人或者可以说是一个骨架，而css就是这个人的衣服，人靠衣装马靠鞍，一个页面的功能再强大如果没有css的样式支持，那估计用户也不想去使用，JavaScript则是这个人的行为，这个页面能做什么，能满足用户的一个什么需求，全靠js来支撑。如果一个人没有行动力，那就相当于是一个植物人，只能静静躺在床上呼吸，一个页面如果没有js就是一个静态页面，只能供人观赏，毫无意义。这就体现了js在整个开发过程中的重要性，主要是知识点就是以上思维导图中的知识点，但是这些并不是很全，只是自己在日常工作中经常使用到的部分，小白想要开始学习前端在了解这些大体知识点后，还是应该跟着视频或者系统的看一下书。

入门书籍推荐

* HTML&CSS设计与构建网站 <https://book.douban.com/subject/21338365/>
* css权威指南 <https://book.douban.com/subject/2308234/>
* 精通css <https://book.douban.com/subject/4736167/>
* javaScript&jQuery交互式前端开发 <https://book.douban.com/subject/26433805/>
* javaScript 高级程序设计 <https://book.douban.com/subject/10546125/>
* javaScript 权威指南 <https://book.douban.com/subject/10549733/>
* javaScript 语言精粹 <https://book.douban.com/subject/3590768/>
视频资源推荐

* 零基础学html+css <https://edu.aliyun.com/course/81?spm=5176.10731491.0.0.nGod9S>
* 从零玩转Html前端
<https://study.163.com/course/introduction.htm?courseId=1003864040#/courseDetail?tab=1>
* web前端开发JavaScript精英课js
<https://study.163.com/course/introduction.htm?courseId=1004170004#/courseDetail?tab=1>

热门工具换一换