一个普通本科在校生的前端学习之路

原创 西安前端交流会: 卡农 [e-mail]
本文章同步发表在wdShare西安前端交流会网站、我的个人博客以及segmentFault和掘金。 转载请注明出处

这是西安初级前端群里边的一次分享，整理出来，分享给大家，希望对大家的学习有帮助，也希望大家可以和我多多交流。

写在前面

Hello，大家好，我是卡农。上周Michael兄分享的内容机械转行前端，半年零基础自学的心路历程干货满满，非常精彩。本周的分享由我来带给大家。首先非常感觉杰克哥给我这次机会让我能够在这里分享一点学习的经验，也非常感谢F7哥提供的这么好的交流平台让大家能够在这里心无旁骛的讨论技术，共同进步。今天我分享的内容主要是关于前端初学者的学习路线和一些建议，还有自己在准备校招过程中的一点经验。由于我目前还是在校生，所以在某些问题的见解和选择上可能会更多的偏向于学生的思维，不一定适合群里的所有人，不足的地方希望大家多多指点，当然我会尽量从更大的适用人群的角度去输出我的经验，希望可以对大家前端学习有所帮助。
我会从我的入坑之路、初学历程、学习路线以及准备应聘过程中的简历、知识、心态准备几个方面来给大家分享。

我是如何选择这个方向

严格意义上来说，我学的专业并不属于计算机（智能科学与技术），更偏向于一个软硬件结合的学科，而很凑巧的我们学校在安排我们专业课的时候把硬件课程放到了一个更重要的位置。所以专业课里能学到的知识其实并不多，当初也是见到这么霸气的名字才填的专业。如果按照我们专业的路线，我以后应该研究的是人工智能、机器学习、机器视觉或者自然语言处理这些方向。但是在大二，我很认真的研究了这些可能的方向之后，我很严肃的发现了一个问题。这些看起来很高大上的学科或者职业，在我们这种学校是一个很尴尬的存在。以以我们这种普通学校本科生的学力和研究深度，几乎不太可能在这些方向上找到合适的工作（至少是没有先例的）,当然也有想过做第一个吃螃蟹的人，但是当认真审视自己的没有良好的基础学科功底和对这些方向有限的热情之后，我还是选择放弃。这样，唯二的可选项是继续深造和选择别的方向。因为我一直都没有在国内继续深造的打算，所以我很果断的放弃了这个选项。于是在选择别的方向的路上，很巧合的碰到了学校计算机学院（我们专业被分到自动化学院）各种实验室的招新。宣讲会听了一场又一场，发现我都大二了（对大一学生的要求比较低），还没有任何可以拿得出手的作品，也没有比较熟悉的编程语言，只有对互联网和科技行业满满的热情。最后抱着试试看得心态，初步选定了前端和产品两个方向。但是在后来的就业前景、学习路线以及未来的发展这些综合考虑之下（信息主要来自知乎），还是选择了技术路线的前端。所幸的是那时候，大家的水平都不高，在我挑灯夜读了大概一周之后，很凑巧的遇到一个非常赏识我的学姐，让我进了实验室的WEB组。也就正式开始了我的前端之路。

我的初学之路

对于学生，我强烈推荐加入学校的实验室，这会对你的学习之路有极大的帮助，在后面我会提到。
很幸运，我所在的实验室是一个以项目为驱动的实验室。实验室里有各个方向的人才，嵌入式、安卓开发、大数据、WEB前端、WEB后台等等，当你有一个好的idea很快可以汇集到各个方向的成员去实现它。于是我的第一个项目开始了。就是写一个简单的实验室官网。
当然这时候，我才知道自己其实只是了解一点皮毛都算不上的知识，如何开始一个项目，前期的需求分析怎么写，网站整体怎么设计，用什么技术栈，如何规范代码，如何写出健壮可维护的代码，甚至与还有网站放什么东西，资料哪里来这些问题，一下子全部都出现了。我根本无从下手，不知道从哪里开始。这个时候，有人指导的重要性就凸显出来了。在学长学姐的指导下，我参考了以前的项目计划书花了一周时间写出了网站的需求分析，画出了大体的布局图，选定了技术框架用Bootstrap。这个时候我就是在慕课网和官网上看Bootstrap的使用教程，发现仅仅是使用也没有什么难度，大概两周基本上都会了。但是会照着例子敲代码并没有什么用，还是什么都做不出来。这个时候，我做了一件很可耻的事情，我把学校成立比较早的几家实验室官网的代码都扒了下来，看他们的目录结构、布局以及代码。很幸运的是大家都没有在这个静态网站上使用太复杂的技术，基本上都是我能看得懂的CSS和HTML，JS的部分很少。于是，参考他们的例子和我之前自己设计的整体布局和结构，我大概写出了网站的整体框架，虽然很丑，虽然即使是用了Bootstrap还有很多布局上的Bug,但是看到自己设计并写出来的第一个网站还是非常激动的。后面的工作就是在实际编写过程中，不断的改代码，改布局，甚至还多次改了需求，历时大概两个月加上一个寒假，终于完成了自己的第一个正式上线的作品。在这期间，我还购买并配置了自己的云服务器，自己的博客系统，自己的Github,还学会了linux的基本操作。
要知道，在几个月以前，我是想都没想过自己能够亲自写出一个网站并提供给这么多人使用，一是不相信我会有这样的机会，二是不相信我有这样的能力。but so what,事实是我真的做出来了这个东西，而且以后我会做出更多更好的东西。我写这段经历希望和大家分享的就是，dont be shy,勇敢的踏出你的第一步，如果你不给自己一个机会，你永远都不会知道你到底能做什么，在这之前我完全不知道如何开始并完成一个项目，也不知道什么博客，Github，云服务器，这些完全是因为在这个项目中会用到，我不得已去学习，但是一开始学习我才发现这些东西为我们带来的便利远远超乎我的想象，于是已经停不下来了。所以对于刚入行的初学者，我强烈的建议你，发挥你的想象力，尝试亲手去做一个完整的作品，当你想去实现一个东西，想去完成一件事情的时候，你会有更充足的热情和动力去为之学习，每一次学习都是都会离你的目标更进一步，而每一次完成作品中的一个部分你就会更有动力去继续，这是一个正向激励的良性循环。相信在这种情况下，你会学的更快更有深度。

很容易看到，对我的整个成长过程，学校实验室提供的资源、平台和氛围起了很重要的作用。在这里，我可以非常容易找到和自己同方向的学长学姐，在这里，我想再次想帮助过我的学长学姐们说声“感谢”，没有你们当初你们的指点，我现在还在泥潭中打滚，没有方向的乱撞。也很容易有各种机会去做出会被大家使用的产品，同时还有良好的学习氛围.举个简单的例子，在没有加入实验室之前，我最多学到九点（因为学校图书馆九点钟关门），而且还要受到各种干扰，在加入实验室之后，只要去了，我很少有十点之前回宿舍，因为在这个环境里，大家都在学习，都在讨论，你很难有其他的想法。而住的更近的同学院同学，在保安大爷没来催人之前，是绝对不会走的。
当你可以完整的做一个小项目的时候，我相信常用的技术你肯定都了解的差不多了，但是用归用，如果仅仅是会用某项术，对你的成长帮助是非常有限的。

学习路线推荐

这个时候我推荐可以花大块的时间系统学习知识点。比如，多久时间学习HTML4.1 HTML5 MDN-HTML5CSS2.1,CSS3雾雨漂零CSS手册,ES5,ES6/ES7阮一峰ES6手册等等。这个时候的学习就是既要有广度又要有深度。不必说的是JavaScript高级程序设计豆瓣链接这本书，也就是大家常说的高程，基本上每个合格的前端程序员都要熟读很多很多次，每次读都会有新发现。JS最原理性的东西这里面都解释的很清楚，但是它也有很多不够深入的地方，这个时候犀牛书就出现了。但是犀牛书（JavaScript权威指南）豆瓣链接讲的很细，很深，反正目前我是基本没怎么看，水平还不够很多地方理解不了。但是想深入理解JavaScript，这本书也是必读的。CSS方面，我推荐CSS权威指南豆瓣链接和W3C 大漠老师W3C-PLUS的图解CSS3豆瓣链接,基本看熟这两本书，在绝大多数情况下CSS方面的深度和广度就都够了。

推荐一些网站，一个百度IFE前端技术学院，里面有百度IFE前端团队为初学者设置的循序渐进的前端Tasks,只要按照顺序一步一步做出来，你的前端技术一定会上一个台阶。而且有很多厉害的学学员在做同样的事情，可以尽情参考和评价别人的代码，可以学到很多的东西。还有一个是Free Code Camp,应该是全世界最火的技术学习网站，和上一个类似，也是任务形式的，他会提供很多的学习资源，然后完成目标学习任务，学习结束并完成作品，还可以得到学习认证证书。

但是光有这些知识也还是不够的，现在的前端工程师不是只有HTML、CSS和JavaScript，现在的前端还要求了解网络协议、网络请求、浏览器运行机制、前端性能优化、服务端等知识，你没有办法很系统的全面的去学习，学的太深，可能你会发现光着一个知识点就够我研究几个月了，那么如何判断学到什么程度呢？我觉得这个就需要根据你自己的情况来权衡，比我我自己，我是在校生，我有大把的时间，而且我以后要面对的是校招，校招是一个很注重基础知识的面试，而且我也希望能够深入的了解一些原理性的知识。那么我当然可以更深入的去了解这些相对属于辅助性知识的内容，网络协议我可以看HTTP权威指南豆瓣链接，服务端的知识我可以自己去搭一个服务器，做一个前后端完全自己完成的项目，但是也有很多人网络协议看一遍博文就够了，服务端只是知道Node.js、PHP,但是他也可以很出色的完成前端的任务，对于这些东西我的建议的如果你有足够的时间和学力，你可以学的更深入一些，相信这些知识无论是对你自己驾驭手中的工作还是以后的发展都会有很大的帮助。
在这些路线学完之后，不出意外的话你应该有了自己的常用的组件库，比如轮播图、模态框等，还有JS的类库比如操作Cookie、操作LocalStorage、Ajax等。
接下来，你可以尝试用这些技术重构之前做的小项目，或者可以尝试去做一个更复杂的项目，比如模仿一个知乎、自己动手写一个博客系统等等。反正，到现在，基本的技术应该都会，只是还不熟练，需要的就是大量的练习使这些技术融会贯通。

如何准备校招

因为最近一段时间，我都在准备校招，走了不少弯路，也踩了不少坑，希望也可以把这部分的经验分享给大家。

简历准备

既然要去面试，简历当然是最基础的准备工作了。对于技术路线的人来说呢，简历需要注意哪些地方呢。简单说下我的看法。
首先简历一定要简洁明了，不然怎么叫简历。简洁，主要包括排版、配色和字体。一般的建议是主色调最好用浅色调，整个简历的配色最好不要超过两种，排版就按照自然文档流的竖排排版，每个大的区块之间有明显的分界，字体推荐使用微软雅黑、黑体、宋体等这种常见的字体，一是看起来舒服无压力，二是常见字体会让HR产生亲切感，当然也不是不可以使用其他字体，只是陌生的字体会有很大的风险，除非十分有把握，否则不推荐冒险。
其次是简历内容的书写，最重要的一点就是尽量写和你求职意向相关的内容，并且要主次分明。举个例子，在写校园经历的时候，A经历是担任全校最大社团某某会部长，组织了某某活动，成功吸引到多少人参与，达到了什么效果，B经历是担任某某不知名社团社员，完成了社团的网站建设，组织技术沙龙，吸引到多少人参与。对于很多同学，很容易先入为主的放弃B经历而选择A,理由也很好，A社团是全校闻名的一级社团，人尽皆知，在这样的社团里组织活动并获得良好反响是我实力的证明。而B社团，人数很少，在学校默默无闻，没有几个人知道，没有什么说服力。这非常对，但是我想问的是A社团证明的你的能力是今天面试官关心的能力吗？既然是技术面试，最关心的当然是技术能力，而且对于面试官来说他才不会在乎A、B社团那个人多，那个比较有名，在他们眼里都是一样的社团，他更关心的是你在里面做了什么、承担了什么责任。很显然，建设社团网站、举办技术沙龙这种经历，对技术面试来说是更加分的。
在写经历的时候，一定把与技术相关的放到最显眼的位置，同时把自己最得意、最熟悉的项目放在前面，始终记住的是面试的是技术岗，始终把技术能力放在第一位，有其他的机会的时候再展示附加的能力。

知识准备

其实在校招面试中，最注重的还是基础知识。以我长期以来助攻实验室学长学姐面试的经历来看，问的最多的问题就那么几类。一个是高程中的基础知识，比如原型、原型链、闭包、对象、继承等，一个是网络协议、运行机制，比如TCP三次握手、Event Loop、消息队列等，再就是算法，比如数组去重、快速排序、冒泡排序等。当然还有CSS和HTML相关的知识，热点的是Flex，Position，CSS画各种图形，如何实现垂直水平居中，常用的浏览器Hack代码等，这些相对比较杂且多，但是需要理解的部分不多基本上过几次就能知道，复习起来非常快。
我的建议是在复习这些知识的时候，最好不仅要知道基本的内容，还要了解其概念和外延。
举个例子，posiation有哪几种属性，各有什么特点？
绝大多数人都能回答出static | inherit | relative | absulote | fixed,其中fixed脱离文档流，相对窗口定位，absulote脱离文档流，相对最近的一个Position属性不为static的父元素定位，relative不脱离文档流，相对元素原来的位置定位。当然，这些说的是没错的。但是，如果你还可以说出 center | page | sticky 并且知道这几种定位方式出现的缘由会不会更好，即为什么会有sticky定位，它解决了之前用CSS解决不了的什么问题或者更便捷的实现了之前用CSS需要大段代码才能实现的效果。如果你还能说出目前的兼容性如何，都用在哪些地方，会不会更好。而由Position有经验的面试官又会很容易的引出脱离文档流的问题，如何脱离文档流，不同的脱离文档流的方式各有什么特点等等。
简单的说就是在准备面试过程中，对热点的知识点需要全面深入的了解，而不仅仅是了解其基本属性和用法，同时面试中常用提问方式和技巧也要有所了解，在准备的时候就以面试官的思维去问自己问题。
在复习知识的时候，我非常推荐大家自己总结，写成博客。因为要发到网上被大家审阅的文章，潜意识会写的更加严谨、认真，会整理的相对完善并且准确。
我的习惯遇到比较大的知识点的时候会整理成一篇博文，在整理的过程中会参考很多的文章、查基本不同的书，很多时候你会发现同一个知识点在不同的博主笔下完全是不同的调调。有的甚至是有错的。我比较推荐的阮一峰和张鑫旭老师的博文，大都写得很完整且案例丰富。
下面就是我做过的部分整理和总结，有一些已经同步到博客，有些还在继续整理。

心态准备

找工作和招员工本来就是一个互相选择的过程，没有最优秀，只有最合适。
对于水平很好，有明确目标的人，要做的就是做好准备工作，充分了解目标公司，提高嗅觉，捕捉每一分信息。举个例子，我对A公司非常感兴趣，而且知道每年都会校招。那么你要做就是关注A公司的招聘官网、微信，加入A公司的招聘社群，同时积极利用已有的校友资源捕捉第一手信息，同时在技术上关注A公司技术团队的微博、博客，及时了解A公司的技术动向，认真研究其使用的技术栈，分析其技术路线和口味。
而对于技术一般，没有明确目标的同学。要做就是广投简历，积累面试经验，提高被选中的概率。这是很简单的数学题，在同样分子的情况下（技术水平），分母越大（面试公司），结果越好（offer越多）。而且面试本来就是一个打怪升级的过程，通过面试积累经验，补足短板，最后拿到名企offer的案例屡见不鲜，重要的善于总结，面试没有回答上来的问题，出来快速用手机记下来，下来一定要好好总结，想想面试官想考察什么，为什么这个知识我不知道，是因为知识点太偏，还是因为属于非知识性的内容，还是因为不熟练，针对不同的问题用不同方式来补足，还有考虑一下如果回答上来了下一步他可能问什么。还是那句话，从面试官的角度去问自己问题。

总结

最后，借用知乎上很有名的一句话共勉。以大多数人的努力程度之低，根本轮不到拼天赋。所以，拼命努力吧，各位小伙伴们，希望大家都能在前端这条路上越走越远。
也希望西安前端群越来越专业，越来越开放有活力。
最后的最后，我要提一下我的学校西安邮电大学和我的实验室ThoughtCoding实验室，这是一个很棒的学校和一个很开放包容的实验室。我很感谢在我的成长路上能够遇到他们。
同时再次感谢杰克哥和F7哥提供这么好的交流机会和交流平台，还有西安前端群的各位小伙伴的指点，从你们身上也学到了很多的东西，大家可以一起进步。

下面是我的Blog、Github和邮箱，欢迎有兴趣的小伙伴和我一起讨论问题，共同进步。

博客：ovenzeze.coding.me

Github：github.com/ovenzeze

邮箱：[e-mail]