原创西安前端交流会：kanonovenzeze@qq.com本文同步发表于wdShare西安前端交流会网站，本人博客、segmentFault和掘金。转载请注明出处。这是西安初级前端群里的一次分享。我整理出来分享给大家。希望对你的学习有所帮助，也希望你能多和我交流。写在前面大家好，我是佳能。上周Michael哥分享的内容是机翻前端生涯，半年零基础自学干货满满，非常精彩。这周的分享是我给大家带来的。首先，我真的觉得Jack哥给了我这个机会，在这里分享一些学习经验。也非常感谢F7哥提供了这么好的交流平台，让大家可以在这里心无旁骛地讨论技术，共同进步。今天分享的主要是前端初学者的学习路线和一些建议，以及我自己准备校招的经历。由于我目前还是学生，在某些问题上的看法和选择上可能更偏向于学生的思考，不一定适合群里的每一个人。不足之处希望大家多多指教。当然，我会尽量从更大的适用人群的角度去输出自己的经验，希望能对大家的前端学习有所帮助。我将从我的入坑之路、新手历程、学习路线，以及准备申请过程中的简历、知识、心态准备等方面与大家分享。我是如何选择这个方向的？严格来说，我的专业不属于计算机（智能科学与技术），更倾向于软硬件相结合的学科。无独有偶，我们学校在安排我们的专业课程时，硬件课程被放在了比较重要的位置。所以专业课能学的知识其实不多，看到这么霸气的名字才填专业。如果按照我们的专业路线，我以后应该研究人工智能，机器学习，机器视觉或者自然语言处理。但是大二的时候，我认真研究了这些可能的方向之后，我就认真的发现了一个问题。这些看似高深的学科或职业，在我们这样的学校里是很尴尬的。以我们这种普通学校本科生的学术能力和研究深度，想在这些方向找到合适的工作几乎是不可能的（至少没有先例）。当然也有人想过做第一个吃螃蟹的人，但是当仔细审视自己学科基础知识不够好，对这些方向的热情有限后，我还是选择了放弃。如此一来，只有继续深造和选择其他方向两个选择。因为一直没有打算在中国继续深造，所以我果断放弃了这个选择。于是在选择其他方向的路上，碰巧遇到了学校计算机学院（我们专业分到自动化学院）各个实验室的新人。听了一场又一场的讲座，发现自己大二（大一学生要求比较低），还没有可以制作的作品，也没有熟悉的编程语言。业界充满热情。最后抱着试试看的心态，初步选择了前端和产品两个方向。但综合考虑未来的就业前景、学习路线、未来发展（资料主要来源于知乎），我还是选择了前端技术路线。好在那个时候大家的水平都不高。夜读了大概一个星期后，碰巧遇到了一位很赏识我的学长，让我加入了实验室的WEB组。也正式开启了我的前端之路。我的初学者之路对于学生来说，我强烈推荐加入学校的实验室，这对你的学习之路会有很大的帮助，后面会提到。幸运的是，我的实验室是一个项目驱动的实验室。实验室内有嵌入式、Android开发、大数据、WEB前端、WEB后端等各个方向的人才，当你有一个好的idea，可以快速聚集各个方向的成员去实现它.于是我的第一个项目开始了。随便写一个简单的实验室官网。当然，这时候我才发现，我其实只知道一点点皮毛，如何开始一个项目，如何写前期需求分析，如何整体设计网站，使用什么技术栈，如何规范代码，如何写出健壮可维护的代码，甚至网站放什么，数据从哪里来的问题，一下子就出现了。我不知道从哪里开始。这时候，有人指导的重要性就凸显出来了。在学长学姐的指导下，我参考了之前的项目计划，花了一周的时间写了网站的需求分析，画了总体布局图，选择了Bootstrap作为技术框架。这时候刚看了慕课和官网的Bootstrap教程，发现用起来并不难，两周左右基本可以掌握。但是照着例子敲代码是没有用的，不然什么也做不了。这时，我做了一件很丢人的事。把学校早先建立的几个实验室的官网代码都摘下来了，看了下它们的目录结构、布局和代码。好在大家并没有在这个静态网站上使用太复杂的技术。基本上能看懂的就是CSS和HTML，很少有JS。于是，参考了他们的例子和我之前自己设计的整体布局和结构，大致写出了网站的整体框架。而且写出第一个网站还是很让人兴奋的。接下来的工作就是在实际写的过程中不断改代码，改布局，甚至改需求很多次。经过大约两个月和一个寒假，我终于完成了我的第一个正式上线的作品。期间也购买并配置了自己的云服务器，自己的博客系统，自己的Github，学习了linux的基本操作。你知道，几个月前，我从没想过我可以亲自写一个网站并提供给这么多人。首先，我不相信我会有这样的机会。能力。但那又怎样，事实是我真的做了这个东西，以后我会做出更多更好的东西。写这篇经历想和大家分享的是，不要害羞，勇敢的迈出你的第一步，如果你不给自己机会，你永远不知道自己能做什么，在那之前我我不知道完全不知道一个项目如何开始和结束，也不知道什么博客，Github，云服务器，这些都是因为在这个项目中会用到，所以不得不学习，但是我发现这些东西带来我们来到这里的方便远远超出了我的想象，让我欲罢不能。所以对于刚入行的初学者，我强烈建议大家发挥自己的想象力，尝试自己做出一个完整的作品。当你想去领悟一件事，完成一件事，你就会有更充足的热情和动力去为之学习，每一次学习都会离你的目标更近一步，每完成一部分工作，你就会更有动力继续下去，这是一个正向动力的良性循环。相信在这种情况下，你会学得更快、更深。不难看出，学校实验室提供的资源、平台和氛围在我的整个成长过程中发挥了重要作用。在这里，我很容易找到和我方向一致的前辈。在此，我想再次对帮助过我的学长们说一声“谢谢”。没有你的指引，我还在泥潭中间翻滚，颠簸没有方向。也容易有各种机会做出大家会用到的产品，同时也有很好的学习氛围。举个简单的例子，在我加入实验室之前，我最多学了九分（因为学校图书馆九点十点就关门了），还受到各种干扰。进了实验室后，只要去，十点之前很少回到宿舍，因为在这种环境下，大家都在学习，讨论。很难有其他想法。而住得近的同校生，在保安过来催促之前，是绝对不会离开的。当你能完成一个小项目的时候，我相信你一定知道几乎所有常用的技术，但是如果你只使用某一种技术，对你的成长帮助非常有限。学习路线推荐这时候推荐大家可以花大量时间系统学习知识点。比如学习HTML4.1HTML5MDN-HTML5CSS2.1、CSS3雾雨飘零CSS手册、ES5、ES6/ES7阮一峰ES6手册等等。这时候的学习是要有广度和深度。JavaScript高级编程这本书豆瓣链接就不用多说了，也就是常说的海拔，基本上每个合格的前端程序员都必须多看几遍，每次看都会有新的发现。JS最原理性的东西在这里都解释的很清楚了，但是也有很多不够深入的地方。这时，犀牛书出现了。但是RhinoBook（JavaScript权威指南）豆瓣链接非常详细和深入。反正我目前基本看的不多，很多地方我的水平还不够看懂。但是如果你想深入理解JavaScript，这本书也是必读的。CSS方面，推荐CSS权威指南豆瓣链接和W3C达摩老师W3C-PLUS的图文CSS3豆瓣链接。基本上这两本书我都比较熟悉。在大多数情况下，CSS的深度和广度就足够了。推荐一些网站，一个百度IFE前端技术学院，里面有百度IFE前端团队为初学者设置的一步一步的前端任务。只要按部就班地去做，你的前端技术一定会更上一层楼。而且有很多厉害的同学在做同样的事情，你可以随便参考和评价别人的代码，可以学到很多东西。还有FreeCodeCamp，应该是全球最流行的技术学习网站了。和上一个类似，也是以任务的形式。它将提供大量的学习资源，进而完成目标学习任务。可以获得学习认证证书。但仅有这些知识是不够的。现在的前端工程师不仅仅有HTML、CSS和JavaScript，还需要网络协议、网络请求、浏览器运行机制、前端性能优化、服务端等知识。你没有方法是系统地、全面地学习。如果学得太深，可能会发现一个知识点就够我学几个月了。那么如何判断自己学到了多少呢？我觉得这个需要根据自己的情况来权衡。和我自己相比，我是在校学生，时间很多，而且以后要面对的是校招，这是一所非常注重基础知识的学校。面试，也希望能深入了解一些理论知识。那么我当然可以对这些相对辅助的知识有更深入的了解。对于网络协议，我可以阅读权威的HTTP指南豆瓣链接。对于服务器端的知识，我可以自己搭建一个服务器，做一个完全自己完成的项目。但是也有很多人看了网络协议的博文。服务器只知道Node，大家可以学得更深入一些，相信这些知识对自己的工作或者以后的发展会有很大的帮助。学完这些路线，不出意外的话，你应该有了自己的常用组件库，比如轮播、模态框等，还有操作cookie、操作LocalStorage、Ajax等JS类库。接下来，你可以尝试用这些技术重构自己之前做的小项目，也可以尝试做更复杂的项目，比如模仿知乎，自己写一个博客系统等等。反正到了这一步，基本功应该都知道了，只是还不够熟练。你需要的是大量的练习来掌握这些技能。如何准备校招因为最近一直在准备校招。走了很多弯路，踩过很多坑。我希望我能与你分享我的这部分经验。简历准备既然要去面试，简历当然是最基本的准备。走技术路线的人，简历要注意什么？简单说一下我的看法。首先，简历一定要简洁明了，否则怎么能叫简历。简洁，主要包括排版、配色和字体。一般的建议是主色最好用浅色调，整份简历最好不要使用两种以上的颜色。排版应遵循自然文档流的垂直排版。各个大块之间界限分明，字体推荐。微软雅黑、黑体、宋体等常用字体，一来看着舒服无压力，二来常用字体会让HR觉得眼熟。除非你非常有把握，否则不建议冒险。二是写简历的内容。最重要的一点是尽量写与求职意向相关的内容，要分清主次。比如写校园经历，经历A在学校担任最大的社团团长，组织了某项活动，成功吸引了多少人参与，取得了怎样的效果。经历B担任某不知名俱乐部的负责人会员完成协会网站建设，组织技术沙龙，吸引了多少人参与。对于很多同学来说，很容易先入为主地放弃B经验而选择A。理由也很好。A社是全校有名的一流社团，人尽皆知。在这样的社团组织活动并得到很好的反响是我的强项。证明。至于B社，人数很少，在校内无人知晓。很少有人知道，也没有说服力。这话很对，但是我想问的是，你在A社证明的能力，是不是今天面试官关心的能力？既然是技术面试，最关心的当然是技术能力，而对于面试官来说，他不会关心A和B哪个俱乐部的人多，哪个更有名气，都是同一个俱乐部在他们眼里，他更在意的是你在里面做了什么，承担了什么样的责任。显然，搭建俱乐部网站和举办技术沙龙的经历对于技术面试来说更为重要。写经验的时候，一定要把技术相关的项目放在最显眼的位置，同时把自己最引以为豪和熟悉的项目放在最前面。永远记住面试是技术岗，永远把技术能力放在第一位。第一个是在有其他机会时展示额外的能力。知识准备其实在校招面试中，最重要的是基础知识。从我长期协助实验室学长学姐面试的经验来看，被问的最多的无外乎这几类问题。一是Elevation中的基础知识，如原型、原型链、闭包、对象、继承等，二是网络协议和运行机制，如TCP三次握手、EventLoop、消息队列等，和算法，比如数组去重，快速排序，冒泡排序等。当然，还有CSS和HTML相关的知识。热点有Flex,Position,CSS绘制各种图形，如何实现纵横居中，常见的浏览器Hack代码等等，这些比较复杂，也很多，但是需要了解的部分基本不会几次就知道了，审稿很快。我的建议是，在复习这些知识的时候，最好不仅要知道基本内容，还要了解它的概念和外延。比如posiation有哪些属性，它们有什么特点？绝大多数人都能回答静态|继承|相对|绝对|fixed，其中fixed是脱离文档流，相对于window定位，absulote是脱离文档流，相对最接近的Position属性，对于静态父元素，不定位，relative，不脱离文档流,相对于元素的原始位置定位。当然，这些话是对的。但是，如果您也可以说center|页|sticky，知道这些定位方式出现的原因，会不会更好，就是为什么会有sticky定位，解决了以前用CSS解决不了的任何问题或者更方便达到需要大片的效果之前用CSS实现的代码。如果您能说出当前的兼容性是什么以及它在何处使用，那不是更好吗？而从Position有经验的面试官，很容易引出文档流的脱身问题，文档流怎么脱身，不同的文档流脱身方式有什么特点等等。简单来说，就是在准备面试的过程中，需要对热点知识点有一个全面深入的了解，不仅要了解它的基本属性和用法，还要了解常用的提问方式和面试技巧。带着面试官的思维问自己问题就好了。复习知识的时候，强烈建议大家自己总结，写成博客。因为要发到网上供大家审阅的文章，潜意识会写得比较严谨认真，也会比较好，比较准确地组织起来。我的习惯是，遇到比较大的知识点，我会整理成一篇博文。在整理的过程中，我会参考很多文章，查阅基本不同的书籍。很多时候你会发现同一个知识点被不同的博主写出来了。这是完全不同的曲调。有些甚至是错误的。我推荐的阮一峰和张新旭的博文，大部分都很全，案例也很丰富。以下是我所做的部分整理和总结，部分已经同步到博客，部分还在整理中。心态准备找工作和招聘员工是一个相互选择的过程。没有最好，只有最合适。对于水平好、目标明确的人来说，要做的就是做好准备，充分了解目标公司，提高嗅觉，捕捉点点滴滴的信息。比如我对A公司很感兴趣，知道每年都会有校招。那么你要做的就是关注A公司官方招聘网站和微信，加入A公司的招聘社区，积极利用现有的校友资源获取第一手信息，关注A公司技术团队的微博和博客技术上，及时了解A公司的技术动向，仔细研究其使用的技术栈，分析其技术路线和品味。适用于技能一般，没有明确目标的学生。要做的就是广投简历，积累面试经验，增加被选中的概率。这是一道非常简单的数学题。在分子相同（技术水平）的情况下，分母越大（面试公司），结果越好（offer多）。而且，面试是一个杀怪升级的过程。通过面试积累经验，弥补不足，最终拿到名企offer的情况并不少见。重要的是要善于总结。一定要好好总结，想想面试官要考察的是什么，为什么我不知道这些知识，是因为知识点太偏了，还是因为是非知识内容，还是因为不是熟练，针对不同的问题用不同的方法来弥补，想想如果答案出来了他接下来可能会问什么。再次，从面试官的角度问自己问题。总结一下，最后借用知乎上的一句名言，互相勉励。以大多数人的努力水平低下，根本轮不到他们去争夺人才。所以，努力吧小伙伴们，希望大家都能在前端的道路上越走越远。也希望西安的前端组更加专业、开放、有活力。最后，我想提一下我的学校西安邮电大学和我的实验室ThoughtCodingLaboratory，这是一所很棒的学校，也是一个非常开放包容的实验室。很庆幸在我的成长路上遇到了他们。同时再次感谢Jack大哥和F7大哥提供这么好的交流机会和交流平台，以及西安前端组小伙伴们的指点。我也从你那里学到了很多东西，我们可以共同进步。以下是我的博客、Github和邮箱。欢迎有兴趣的小伙伴和我一起探讨问题，共同进步。博客：ovenzeze.coding.meGithub：github.com/ovenzeze邮箱：ovenzeze@qq.com
