本人今年大四，出去工作实习大约三个月，从事的是前端开发这一块。自学前端快两年了，走过很多弯路有几分遗憾，但也有收获一些小成就，写这篇文章和大家分享一下我的学习心得吧。
一、关于大一
说一下我的背景，我专业是计算机科学与技术，在大一之前，我对于这个行业的认知基本为0，电脑的基础操作都不是很熟悉，因此接受起来要比别人花费更长时间。我自以为大一的课程是教我们如何去操作电脑基本系统，学习word、Excel、ppt等等，结果发现是我想太多。
大一要学的专业课不多，C，C++是我们入门的编程语言，虽然这两门语言在我现在就业上没有用武之地，但庆幸的是当时高考的余热让我大一学习超认真，这两门语言以及后来教的Java、c#都是我下了苦工去一字一句理解的，由一点不懂到懂一点，这些基本功的积累让我后面自学前端各种语言轻松了很多。
刚进校园的第一年，很多人的方向还是挺迷茫的，毕竟才刚接触所学专业，摸不着北也正常，建议萌新们在大一的时候选择一个本学院的社团，或者竞选班委。因为学院的活动基本都是由大二大三的师兄师姐在管理，相处久了，你总会有机会从一两次闲谈中了解到他们的学习方向，学习资源和学习方式；班委是可以快速接触到很多学院老师，他们的经验就更加不用说啦，谦虚请教，他们都能给你以后选择方向提供一些很好的建议。
二、关于选择前端还是后台
其实还是看个人兴趣吧，如果你实在迷茫，你可以花几天时间去百度看看两者的区别和分别要学的东西，或者去问问学院的师兄师姐、老师他们。计算机的方向有很多，选择你喜欢的很重要哦。
我的理解是，前端是可以直观看得见效果的，也是开发最贴近用户的，比如你做的网站、小程序页面，用户和开发者可以直观感受得出来，之前普遍认为女生适合做前端就是因为开发页面需要一些“美”的感知；而后台开发是处理逻辑问题，用户虽然看不见，但是却是开发的核心，一个软件运行起来，要是后台出现问题，基本可以说，这个软件是废的。
但是不管你选择哪个方向，在一个团队合作里，前端后台的知识点还是都要互相渗透一点的，比如我是前端，在配合后台开发中，我要了解怎么去请求后台的接口去读取我需要的数据，我还需要了解数据是什么信息，需要怎么去放在我前端页面的部分，从而我布局的时候可以更加针对性一点，要是我后台一点都不懂，前后端之间合作起来是很难的。
一旦你选择了你想走的那个方向，你学习的目的性就要很清楚，孰轻孰重，有些人可能刚开始觉得动力满满，想要两头抓，但是我想说的是，前端和后台各自都有很长的路要学的，越学需要的知识面越广、知识深度越深，如果你是初学者，我建议还是分个轻重吧，把一个方向的先做好，做个几年单向开发，你自然可以学做全栈的。
二、关于自学前端
1、HTML+CSS+JavaScript
前端标配的三巨头，要怎么理解它们呢，好比说HTML如果是一个骷髅骨架，那么CSS可以让它变得有血有肉，学会穿衣打扮，而JavaScript就是给它灌注思想的。html+css的基本功我们一定要打扎实，同时学习html5和css3；JavaScript学习的权重很大，也比前两者都难，我们花费的时间需要多一点。
我的学习方法：
第一步：初学者推荐先看慕课网或者极客学院里html+css+js的入门学习视频。入门视频我们不要拖太久，最好在一两个月内有效率地全部过一遍，视频的学习可以让我们脑海里对html+css+js有一个基本的了解，运用到开发中的时候我们可以更详细地去阅读它们的文档，也就是我即将说的第二步。看视频不是一个很有效率的学习方法，但是它可以帮助初学者更好更直观地去理解，因为视频中会有相应的小实例代码去辅助学习。
第二步：熟练使用开发文档。这里推荐阅读菜鸟教程或者w3school这两个网站，在里面，html+css+js的文档就像是一本新华字典，在前一步的视频学习里，我们对它们的属性标签有一个基本的理解，但是具体还不知道怎么使用的时候，就可以认真查阅对应的文档，它们会有在线实例去演示某个属性是如何使用的。
第三步：看书。html+css+js有很多很出名的书，但是这里我只推荐一些我读过比较好的，学到css可以阅读《css禅意花园》，它可以教会你怎么把同一个html标签用不同的样式展现得很好看。JavaScript的书更多了，我是先看了《JavaScript DOM编程艺术》、然后是《JavaScript高级程序设计》、还有《JavaScript权威指南》，这些书可能某些章节不是看过一次就能懂的，在开发能力的不同阶段回头重新阅读一遍都会有不同的收获。
第四步：学到这里，一个网站的基本架构你都可以搭建起来了。这时我们需要找点实践去练练手，我们回头去慕课网看一些html+css+js实例视频，中级或高级的，模仿它们的代码，看看自己是不是可以实现同样的效果；另外，你也可以自己去模仿淘宝、天猫、京东那些网站的页面，收获不小的。
2、接触前端框架
在学完html+css+js的基本知识后，我们还要了解的就是前端框架，不同的框架能在开发中能带来不一样的便利。前端的框架有很多，我也不是每一个都学，按需学习是我的学习方式，也建议大家不要一股脑去学，用得到实践中才能体现价值。
怎么去学习框架呢，这个步骤和上面学习html+css+js一样，如果你基础比较好，可以不用看视频，直接看它们的开发文档就够了。
下面推荐几个我用得比较多的框架，也是比较流行的框架：
jQuery
jQuery在前端开发中使用的频率很高，我做过的项目基本都会用到，它目的是为了简化JavaScript开发，比如，我们想要获取id为index的元素，JavaScript是这样写的：
var index=document.getElementById("index");
而jQuery只需要写：
var index=$("#index");
在学习jQuery的时候，我们会接触到Ajax，它是个非常有用的知识点，我们使用它可以进行网页的异步刷新，也就是无需再重新刷新一遍页面，只进行局部的刷新。
利用jQuery的ajax我们可以请求后台接口，在返回的函数中获取到我们前端需要的数据来对页面进行调整操作，这个方法是很常用的，也是我们需要去掌握的。也由于从后台拿到的数据格式大多数的json格式的，所以我们这时还得去学习一下json，了解一下它的原理。前端的知识点都是越滚越多的。
bootstrap
如果你在了解响应式布局，那么你一定听过bootstrap，也建议你去学习这个框架。这个框架对适配屏幕分辨率非常友好，它可以根据屏幕大小的改变来对布局进行相应的调整，不会说你一缩小页面里面就全乱掉了。bootstrap也是大家喜欢用来进行移动端开发的一个框架，利用它来开发真的非常快捷，因为很多样式都已经定义好了，直接使用就能看到效果。
vue
要说近几年比较火比较相似的框架，要数vue和react了。由于项目需要，我学习了vue。vue它只关注视图层，所以在一些需要大量数据渲染的页面使用vue是非常便利的。比如一些文章列表页：
如果用js去做的话，一般会给这六个列项各设置一个div或者li的内容，可是我们可以看到，这几个列表除了文字和图片，其他布局都是一样的，重复给它们设置content就太累赘了，而vue就能很好解决这个问题，vue有个循环渲染的标签，通过它就可以只用写一个div，然后循环六次，每次用从后台获取的不同的数据来渲染一个div就可以实现这个效果了。这个功能是很强大的，也是很方便的。
学到vue我这里插一下，vue和微信小程序开发的方式很相似，如果你之前有做过微信小程序开发，那么你上手vue应该是很快的，它们都是关注视图层，通过绑定数据进行交互的一种框架。
如果要掌握vue，单只学习vue还远远不够，它涉及的知识面很广，我们还要学习vue全家桶（Vue-cli+vue-router+vuex+axios），在搭建vue脚手架的过程中，我们要接触到一个工具就是webpack，这个工具是现在使用比较多的前端资源打包器，最近发展得比较好，不可不学哦。我们要下载webpack的话，也会涉及另外一个工具就是npm，它可以通过几行命令去下载网上一些资源，非常好用。还没完哦，其实npm这个工具是出自node的，node是一种通过JavaScript语言开发web服务端的东西，也就是说前端可以通过它可以自己搭建服务器啦，而且它是基于js开发的，就是给我们前端安排得呀。