从0到1，小白的前端摸索之路，属于你的成功之道！_从零逐步摸索跟进项目

0基础，一年自学经验，8个offer，包括头条、去哪儿、猫眼、斗鱼、趣店、趣头条等，总价值180W

朋友们，大家好！

我是白小白，目前是一名电子科技大学信通学院的大四学生。回想起自己正式涉足前端的学习，已然过去一年又几。这一年里，有困惑、迷茫，也有坚持、不弃，既收获成长，亦收获一点小成绩。于此于文，将自己这一年来在前端上的摸索和历程记录下来。受惠前人，饮水思源。此篇心得如果能够给到您些许的帮助，那将是对小白莫大的鼓励。

邂逅篇——为什么选择前端？

先介绍下小白学前端之前的情况：学业成绩一般，有一点C的基础，了解一点Linux的皮毛，英语六级

大三学年伊始，我面临一个选择：考研还是就业（成绩太差留学没戏）。和同学室友闲聊一通，他们的答案基本一致，又寒暄了高中的老同学，得到的回复还是一致：“考研” 。我并不惊讶，我们学校深造率一直比较高（报名考研和选择留学合计85%左右），要知道秋招时在我们班加上我选择就业的才3个，其中一个还是国防生工作包分配，加上现实就业压力大，岗位竞争激烈，读研是最显而易见的选择。但是当时的我并没有选择和大家同行，因为我不喜欢抽象又枯燥的编程。研究生整天都在教研室看论文，写代码，做项目，一想到这种场景我就头晕。

确定就业之后，我就着手做准备，因为自己性格比较外向健谈（话多嘴碎），我希望从事一份与人打交道（唠嗑）的工作，加上自己高中有开淘宝店的经历，我首先把目光放在了销售，正好新学期校园迎新活动如火如荼的进行中，我报名了中国移动的校园直销队。第一次做销售，心情还是很激动的。三天半的活动结束，我们队的业绩其实还不错，但是我确定销售不会是我的归宿：每天都要保持微笑不厌其烦跟别人介绍产品，有时得到的只是一个冷眼旁光，还得到处跑到处看，太累而且价值（工资）不大。

第一次对前端有正式的认识，来自于学校工作室的招新宣讲，当时台上的同学介绍前端的话语我还依稀记得：“学好JavaScript，走遍世界都不怕，既能前后端，又能桌面移动端，上天下海，无所不能”， 当时的自己听不太懂，但是感觉很厉害的样子。从此，前端在我脑海形成了初步印象，回去简单Google一下，发现对前端还有 “简单易学”“门槛低” “工资高”等形容，越来越感兴趣（自己零基础），在逼乎大神的推荐下，我从imooc前端路径和FCC前端学习路径开始了我的前端入门。

因为有C语言的编程基础，跟着路径学习阻力不大。一个月断断续续，把基础部分都学完了（过一遍），初步了解了前端三剑客HTML、CSS和JavaScript，路径刷完之后，我开始尝试脱离路径教学独立写一个页面，从结构、样式到逻辑。好了，问题来了，我发现自己根本写不出来（更准确来说根本不理解），HTML标签为啥这么用？CSS盒子模型怎么写？JavaScript面向对象咋理解? 越写越不理解，越写疑问越多，越写越崩溃。。。写了三天放弃了，觉得自己智商不够，可能真不适合编程，不适合做技术。

双十一临近，本着体验生活和了解工作的初衷，我报名了京东临时工的招聘。先在成都京东总部进行了初步的培训后，我们被分到各个站点进行工作，工作内容单调又无聊：卸货、分拣、派单、客服、退件和查询（我基本都在站点不用出去）。问了一下身边的小哥哥，他说每天工作就是这样，来车的时候忙一点，其他时候很闲，工资的话在成都能吃能喝。了解到京东配送的大概流程还算有点收获，我发现京东ERP系统（系统很复杂）都是用Firefox打开，我好奇他们为啥必须用Firefox（其他浏览器不行吗），他们回答我他们也不知道，只是公司培训他们要这么做。

双11结束之后，我又陷入迷茫了，我到底能做啥？销售是不可能销售的，运营公关又嫌单调，编程又很难理解学不下去。心想，自己毕业只能找个不喜欢的工作糊口，要不放弃就业，回去跟着大家考研。当时看了几篇文章，再一次感知到技术的重要性和必要性，又去请教了学长学姐，告诉我不要轻易放弃，要相信自己。思来想去，再次把目光聚焦到之前没写完的页面。

学习篇——怎样学习和做了哪些准备

17年双十一之后，我正式下定决心走技术这条路，总结之前的学习教训，重新思考如何学习前端

我必须重新去思考，去反省自己的学习方法和方式。这一次我花在检索和收集信息的时间更多了，除此之外，我还试着去看前人的学习心得和经验，最后获取到比较一致的建议，那就是必须以基础知识为核心，系统性、辐射性的进行学习与积累；在多数前辈的推荐下，我去图书馆借了一本《JavaScript高级程序设计》（第三版），此后的时间，无论是在课堂还是在宿舍，一有时间我就坚持看。

刚开始看高程三的时候，被这本书的厚度吓到了（毕竟我都不咋爱看书），而且专业性较强，对此有一定的心理负担。大概花了三个星期的时间，每天看20，30页，然后去理解其中的内容，整书看了个十有八九，看完之后真正对JS、对前端有了一个宏观的认识，之前不理解的知识点也通过系统学习后联系了起来，对比之前的路径学习，我认为路径学习并不适合初学者，因为知识点相对分散、零碎，前后知识点逻辑性关联性不强，学习过程中很难形成整体性认识和理解，过后容易忘记，书籍是人类最好的朋友。我之后的收获离不开这本书的启蒙，这是每一个FEer都应该首先阅读的书。

继续我的前端之旅，当时的自己由于实践较少，感觉CSS甚至比JS还要难以掌握及运用，不知道大家是咋学CSS的，我一直找不到好的方法去学。CSS有大量零散的、需要记忆的特性、属性和属性值，不经常使用很快就会忘记。从学JS的思路切入，先理解原理先掌握大局观，虽然有很多属性（还在一直增加），但是基本原理和框架不变，小白认为：CSS选择器与权重、盒子模型与BFC、常用属性（display、position、float等）、块级元素和内联元素、层叠上下文和常见布局是需要重点掌握和熟练的。看过张鑫旭大神写的《CSS世界》，觉得还不错，能够帮助你构建起对CSS的大局观，但是个人感觉整书在逻辑性上稍稍欠缺一些，读起来有些费劲（大神原谅我这么说）。

在之后的学习中，我了解到微信小程序，那时候正好是小程序大火的时候，开发者数量急剧增长，于是我也凑了一波热闹。但是苦于没有什么实战经验，我在慕课网购买了一门小程序的实战课程（149元，感觉挺值的），此后便跟着视频和老师进行自己第一个demo的实践。每节视频我都仔细看，看完就亲自手写每一行代码，跟上老师的进度，遇到不会的或者出错的我会重新回去看视频，一遍看不懂就多看几遍，然后对比出错的地方，进行总结和学习 , 也正是这门课的契机，我开始学着去看文档，去查文档，用文档解决问题。除此之外就是老师讲授的调试技巧和经验，学到了很多只有在项目中才能体会的东西。我的第一个真正的实战demo也完成了。

寒假临近，我深知不能闲着，于是我申请了学院的P2P项目《搭建基于LNMP的学生论坛系统》。一方面回顾一下Linux的相关知识和操作，一方面锻炼下自己的项目能力。整个项目花的时间不多，我使用了Discuz框架，主要难点是在Linux环境中安装和配置Nginx、MySQL、PHP环境，最后使用ngrok服务做了内网穿透，申请了免费域名做CNAME解析，让公网也能通过域名访问。目中途因为自己装错不兼容版本的软件，在穷举了所有网络给出的解决方案后仍不能解决错误，我绝望了，最后选择了推翻重做。第二遍有了教训之后轻车熟路，但还是遇到了不少新问题（比如环境搭好之后无法解析CSS，导致页面没有样式），不过都没能阻挡我，一一解决。下图是自己参考了ZUK社区做出来的前端重构页面（我觉得挺好看的哈哈）

18年，开学已经是第六个学期，正值金三银四的春招季。小白本来也想着去投递找实习，看了几家公司的JD，无奈自己的技术栈（前端框架还没接触过，后端也不了解）尚未成形放弃了。还是先着力现在，把基础打好。当时自己正在看《图解HTTP》补补网络基础知识。

不久后便迎来了我的第二个项目，这是一个外包项目，一位研究生学姐联系上我们，需要我们组成一个小团队实现一个基于微信小程序，专注于成都户籍政策信息汇总和加工输出，解决用户相关信息获取成本高、质量低的痛点的产品。这也是我第一次参与到团队形式的开发实践中，我们从 产品调研->需求分析->商业策划->团队分工->项目排期->开发工作。在整个项目活动中，我接触到钉钉、Tower等团队协作软件，认识到git/github、码云等代码托管工具，更亲身经历到团队中FEer的工作流和报告流，需要和设计师沟通原型和UI，需要和后端交流接口和业务，需要和PM讨论需求和功能。整个项目的时间持续了将近俩月，最后由于其他原因被迫中断，很是遗憾