机械转行前端，半年零基础自学的心路历程

摘要：受上海杰克大大委托，于今晚分享一下本人的自学历程主题机械转行前端，半年零基础自学的心路历程。所以我就这半年个人自学修行以来的一些感触和心得方面进行分享。背景介绍内容前工作状况机械离职经历心态转变目标确定大家好，我是，一枚前端萌新。

标签： 转行 自学

原创：Michael.Lu 277133779@qq .com 转载注明出处

这是初级群（西安初级前端群：4983126）里边的一次分享，然后整理出来，分享给大家。

大家晚上好。首先感谢(@西安-F7)大大提供的平台。受(@上海 -杰克)大大委托，于今晚分享一下本人的自学历程——主题：机械转行前端，半年零基础自学的心路历程。以前从没有进行过这样形式的交流，内心紧张与激动的并存，也非常荣幸第一次在初级群这个大家庭里做分享。这是我知道的第三次分享，前两次分别是从实习到找工作之间的经历以及前端职业规划方向来做的分享，很遗憾我还没有正式进入具体的工作领域，连班门弄斧的机会都没有。所以我就这半年个人自学修行以来的一些感触和心得方面进行分享。主要内容：

背景介绍

自学经历与经验

demo页制作心得

以及对未来的展望

由于是个人经历，加之视野狭隘、技术水平较低。如有不妥之处，欢迎各种形式的批评指正，忠言逆耳利于行，大伙的声音是我在正道前行的完美路牌。

内容：前工作状况(机械)、离职经历、心态转变、目标确定

大家好，我是Michael.Lu，一枚前端萌新。早在2016年4月份之前，我还是一名大型石油装备制造公司的机械工程师，勤勤恳恳，工作强度不算低，即使在规定时间内完成任务但还是得常年形式加班(大概896)。生活节奏中规中矩，几乎泛不起一点点涟漪。变化的是眼花缭乱的三维机械模型和无穷无尽的生产蓝图，不变的是工作内容以及职位和薪资。虽然平时表现出了足够的上进心，但在这样的环境中，我开始慢慢意识到，在应该升职的时候总是会有奇人从天而降稳准狠的击中我的晋升目标。在应该加薪的时候总是能赶上国际油价下跌导致公司利润下滑开支紧缩。我。。。

从2013年7月大学毕业，全国包括我在内一共600多名大学生进入该公司，14年走了一半，15年还在坚持的不到100人，到16年3月还剩不到50个，想想是我也算持久坚挺的一员了。可是就在3月的某一天早晨，新空降的不知道第几任的领导来给我们打招呼，我的脑海里浮现并不是一片欣欣向荣的未来工作情景，而是一眼望穿的未来10年内的半养老生活格局，旧国企般的腐朽人际关系网，永恒不变的工作内容。再加上每逢佳节倍思亲和亲更思我的情节，离职的念头瞬间爆炸，当天就提出了离职。从提出辞职到真正变成无业游民花费了我整整一个月的时间，其中不乏各种HR画饼挽留、人心尽失工作交接障碍以及签署发射原子弹般的复杂离职签字流程。就在最后总裁拿起笔准备签名的一瞬间，仿佛高考最后一门考完交卷一般的清爽。皮皮虾，我们走！

之后4月到7月是我人生中最开心也是最失落，也是我永远无法忘却的时光。这算时间里，可谓是云游四海，心灵在天堂，身体在地狱，但却乐此不疲。孤身走遍大江南北去寻觅故友，虽然故友多数都在上班没多少时间接待我，也没去多少景点，但是洒脱光环加身，怎样都开心。后半段时间一边返程一边旅游一边开始准备简历，落实下一个落脚点，这也是我心情俯冲直下的转折点。真是不看招聘信息不投简历不知道这个行业有多残酷，需求都是要么应届毕业生，也么5到10年工作经验的高级工程师，中不溜的待遇和要求根本无法直视，这个时候我才意识到我到底是有多年轻多不成熟。几经投递无果之后，带着比上坟还沉重却又不能表现出来的心情回家。继续投简历，要求底线不断降低，投递频率不断上升。接到面试通知电话的公司，不是远在天边的未知企业，就是连糊口都难的乡镇企业。落脚点毫无进展，慢慢感觉在家里呆着如同身陷囹圄，心情从冲动、激动、开心到气愤、失落、后悔甚至是绝望，心态逐渐瓦解崩坏，最后为自己贴上了loser的标签。

所以，三思而后行，当你面临是否跳槽或是否转行抉择时，无论答案是什么，一定要清楚这绝对不是一个瞬间解，而是一个经历过漫长的思想斗争和深思熟虑之后的产物。你需要先思考现在的工作到底是哪一方面差强人意，具体到关键点比如：薪水与付出严重失衡、晋升通道不清晰明朗、工作内容重复冗长、工作强度大身心俱疲、行业迅速衰退大背景不景气、还是人际关系不和谐领导不赏识？再想想针对以上情况可以通过什么具体的途径能够改变现状或者与现状共存从而活在当下。如果可以得到缓解，那应该坚决否决自己的辞职念头去改变去打破。如果不行，ok，要在辞职之前就未雨绸缪，尽量在落实好下一份工作的时候或者时机成熟的时候再提出离职。绝对不能像我这样头脑发热，自命清高，觉得之前工作那么努力也获得了多方肯定，找工作必然不是问题，升职加薪是迟早的事，真是too young too simple。这样的离职就如同炒中国的股市，一片绿的时候你一卖它就涨，一片红的时候你一买它就跌，气愤的认为是命运的不公，其实是自己根本没有看清现状，做决定不过脑子的结果罢了。

自己挖的坑，还是得自己填，解铃还须系铃人。6月下旬心情烦躁到极点的时候，转行的想法应运而生。于是再也不敢草率做决定的我决定找我爸商量一下，毕竟现在也老大不小了，良心迫使我不能啃老，但又迷失方向，希望能得到一个曲线救国的方法。一起喝点酒微醺之时，鼓起勇气告诉他我喜欢音乐弹的一首好吉他，楼下就有一家比较大的乐器店正在招聘，我可以教吉他可以卖乐器balabala一大堆。而他就好像没听进去一样，开始回忆我上大学前报志愿的情景，他说的话我到现在还记忆犹新：“当时石油行业确实如火如荼，所以我帮你报了这个专业(油气储运工程)，虽然行业兴衰轮转，却没想到你刚好赶上了退潮。你从小就喜欢玩游戏，为此没少去网吧抓你，也没少揍你。如果当时给你报计算机专业就好了。”我知道他根本不想让我去教什么吉他，也没听进去我说的，可是，重点是我听进去他说的了！！！真是一语点醒梦中人，我瞬间就想到了两个从事互联网行业的同学(一个纯前端&一个半前端半后端)，那时的心情难以用语言来表达，仿佛是行走在黑暗漫长走廊的人看到前方微弱光线的瞬间。不晚！绝对来得及！我疯狂的告诉自己。与此同时我向这两个朋友咨询了一下行业情况，于是确定了前端之路。And I take a deep breath and I get real high!

在此先行感谢听我啰嗦的朋友们，这也是一种倾诉，压抑半年的感情没想到以这种形式得以释放，喜悦之情难以言表。随后就是开了挂一样的自学经历了。

内容：编辑器选择、自学方法选择、笔记、写代码、时间管理

这是我自学前端时的第一个页面。当时还在纠结到底用什么编辑器好，于是到网上看各种编辑器的优缺点，从Vim、Sublime text这种轻量级编辑器到Dreamwaver、WebStorm等大型IDE，有同样经历的朋友应该也知道，网上褒贬不一，众说纷纭，看的是一头雾水。现在想想当时真是可爱，所以在这里告诉还在为编辑器纠结的刚入门的朋友，唯一的择偶标准就是颜值(顺眼)和身材(顺手)。因为处于启蒙阶段的我们实在是没有什么必要去关心它们多么强大的功能，不仅用不到，还会在分散注意力。如果硬要我推荐一个，那就Sublime Text3，不为别的，就是启动快！而到后面能力有所提升，视野渐渐开阔以后，编辑器的选择也就没有那么困难了，需要用到什么功能就用什么编辑器，公司需要你用什么就用什么，不需要你自己选择。而且就我目前的经验来看，随便哪个编辑器都能很快上手，因为基础功能都一样，就是熟悉界面、快捷键、特殊功能的问题了。你听过跨浏览器有兼容性问题，但你听过前端代码跨编辑器有什么问题吗？

从第一个html文件到现在为止，去掉期间各种节假日、推不掉的旧友小聚以及春节前自制力失控玩了近一个月的游戏，粗略估算自己真正在自学的时间只有半年左右，很多人都说我进步快。讲真，如果你也有我上面阐述的类似经历，你肯定比我快得多。因为我不仅自制力差，而且从小就看不进去白纸黑字的书。所以无论你现在是在上学，还是准备进击前端行业在自学，亦或是已经工作但是想通过自学来提升，那就行动起来吧，You can do it！

很多人认为玄学说错了是自学有什么好说的，不就是摒弃一切杂念，埋头苦读奋笔疾书嘛？其实不然，在我看来自学这种形式的学习最容易缺少动力、鞭策力，没有达到自己既定目标而中途放弃的人不胜枚举，尤其是对那些自学时间少，条件有限的人群而言。最形象的例子就是自学好比健身，锻炼少没任何效果健身卡垫桌脚，锻炼多伤筋动骨身体吃不消，而且在没有任何指导的情况下还容易练的左右肌肉不对称，自己看着都难受。所以，来不及解释了，快上车。

自学接受知识基础方式从大方向上来讲个人认为主要分为死磕专业书籍和死磕专业视频两种。只有最合适自己的，没有大众最佳款。所以一定要在自学前先对自己有个客观评价，然后对号入座，这样才能更高效的自学。这非常重要，试想如果看书或者看视频的时候都能看睡着了，那还谈什么自学。如果能清晰的明确自己接受知识的习惯，就可以有效的避免这些不经意的厌倦或者困意，从而在自己可利用的时间内，最大程度的缩小不必要的时间流失。随着时间的步伐，慢慢的注意力开始高度集中，心无旁骛。不知道大家有没有这样的感受，一边工作一边一个耳朵听歌，不知不觉等自己完成了自己的任务或者回过神来才意识到，上一首歌是what？想不起来了？这也许就是所谓的进入状态，这也与我说的自学过程不谋而合。正是因为我深知自己看书犯困，所以我选择看视频，并且整个自学过程中也主要是以看视频(秒味、慕课)为主。群里也有很多群主分享的相关电子书籍，如果你感兴趣，尽情去下载，不用排队。如果你能选择适合自己的自学方式，那么恭喜，火锅底料有了。

好记性不如烂笔头，自学不仅要汲取知识，还得转化知识，其中一种方式就是勤做笔记。这一点我做的还算不错，半年来，一本pc端一本移动端合起来也差不多一整本了，反正你们也看不见。不过重点是，准备好一个档次稍微高一点的笔记本，当你面对这么好的一个笔记本，心想总不能在上面胡写乱画吧，那就老老实实的好好写字，写什么呢？照搬书籍原文？或者是照搬视频里面的ppt？肯定不是，不然书和打印机要收你的智商税了。所以肯定是写经过自己的脑回路之后，提炼的精华部分，这样以后再翻看的时候才能体现出笔记的意义。All right，好习惯你这么被你轻易的养成了。而且我在看视频的时候会在另一个草稿本上刻意模糊的记录知识点，看完视频后一个一个回忆，就像背单词，如果这个记得很清晰，ok next one，如果不行，那就再看一下视频相关的知识点，直到所有本节知识点clear，抄起笔头就是一顿记。这点对于看书的朋友同样适用。菜品有了！

眼过千遍不如手过一遍，是时候该展现真正的技术了，真枪实弹的写代码，这就是所学知识的终极输出手段。这也是一个老生常谈的问题，也确实是一个答案只能是量变产生质变的的问题。对于一个复杂抽象知识点或者体系的记忆程度而言，如果你不想很快的忘记，那至少写一遍；想长一点时间忘记，那至少在若干时日后再写一遍；什么？你想要通过某种方式达到倒背如流刻骨铭心的地步？对不起，她只是一个人生过客。曾经我有就这样的困惑，一个功能不是特别复杂的自定义拖拽，几个月前我来回写了两三遍，但是在我近期学OOP的重构这个拖拽的时候，第一次我竟然把把onmousemove和onmouseup这两个事件绑定到了被拖拽元素而不是document身上，其中禁用拖拽时的系统默认事件return false也忘记写了，为此懊恼不已。这也引申出两个问题：我为什么没记住和我需不需要记这么清楚？第一个问题反映出我虽然写过几次，但短期记忆使然，并没有彻底理解他的底层原理，于是我又重新记忆了一遍，一个是让元素离开可视区域还能回来，另一个是拽图片和带文字的元素也能拽的动。第二个问题自己没想明白，向朋友请教，他的答复是：无论是工作还是不刻意刁难你的面试过程中，只要能对答如流并理清清晰的脉络就行，不至于卡壳和无从下手。所以，我的理解是勤写代码对我们最大益处就是更容易的接近底层原理去理解，并且有助于永久性的思路建设，日积月累，善于重构，于是一个业界大牛粉墨登场了，对就是你，不要往别处看，说的就是你！那么，火锅点火走你！

自学那些小事
仓库https://github.com/codefine/p... (别因为我是一枚小鲜肉而怜惜我，用star粗暴的来吧)

Reading、Watching、Writing、Noding、Reading、Wa…...Wait！误解太深了，我们不是钱多话少死的早的人肉代码器，也不会陷入这样的死循环，什么时间做什么事情我们比谁都清楚！不过确实，如果停止学习，那将被这个爆炸式发展的行业所淘汰，干这一行就要付出和牺牲更多，才能不说造福世界起码出人头地，这也很容易积劳成疾，所以不论工作还是自学，我们都要学会时间管理。先来个没错就是我的反面教材：由于原来没有意识到这个问题，还有各种压力，加之对这个行业的热情，于是我自学的时间管理就是没有管理。除了吃饭睡觉其余的时间几乎全部用来学习，半年以来平均每天10小时毫不夸张。晚上睡觉的时间由写没写完代码决定，早上起床的时间由还有没有意识决定，期间最长纪录是将近一个月没下楼没出家门，也得益于家人的悉心照料和督促，要不然头上都能长出蘑菇来。也许科比在下一次说只有他能看到凌晨四点的太阳的时候我会义正词严的反驳他。当然这是我年前自制力失控之前的时候，也是一个彻头彻尾的反面教材，千万别学我。而正面教材是：连续写代码一个小时无论写没写完，至少休息5到10分钟，一方面可以整理思路从而更高效的完成余下任务，另一方面你对身体好点身体也会对你余生请多指教。以后的工作和学习生涯中，我将坚决执行这条原则。劳逸结合，拒绝猝死，从你我做起。锅里的菜快熟了，我们去调一下油碗儿吧。

自学期间如果遇到自己解决不了的问题怎么办？这个问题问得好，这也正是我们这个群存在的意义。我们要充分贯彻群内不懂就问精神的同时，跟随群主以及众管理理解先想、再查、后问的三步走思想，切实做到有的放矢的提问方式，拒绝假大空的无理取闹，把问题。。。好了，你不要说了，我选择去吃火锅，广告你都打到自家门口儿了。

内容：整站思路建议、素材来源

个人Demo页地址：https://codefine.github.io/ ，各位先睹为快。

对于github这个网站而言，我也是懂得pages的皮毛而已，而且pages功能也只是github全站功能的冰山一角，最重要的功能个人认为还是他的共同协作主线分枝系统，并且网站本身也是全球最重量级的开源社区，希望大家多多关注，多多学习，早日贡献自己的开源作品而造福一方。这个网站的存在，对于我们而言，就是一笔无价的财富。

如果了解pages的功能，那我建议先去看看官方说明https://pages.github.com/，看不明白的话百度一下，相关攻略也比较多。如果还是没研究明白，那也没关系，这也是我下一次分享的主题——如何通过github的pages功能轻松搭建个人主页。我将带着大家从github注册、用于展示个人主页的仓库建立、简易个人主页搭建、克隆和同步这四个环节，一步一步由浅至深的完成。而且，图文并茂，过程中只要有新的页面或者界面都有对应的全新截图和说明，个人认为是迄今为止最为细致的攻略了，细致到令人发指！力争全民轻松搭建个人主页！届时希望大家不要错过，精彩等着你。

在这里我先放出自己绘制的简明流程图，整个过程中不要你具备后端知识。配合官方文档说明食用更佳。

关于个人demo展示的这个网站，由于时间仓促，制作过程从头天中午吃完饭一直到次日凌晨4点左右，仅仅用了不到1天的时间，UI、代码优化等方面做的确实不够好，但是目前这个页面对于我而言，也仅仅只是陈列我自学期间的积累，能在面试的时候加点分就行了。到后期如果有好的idea并认认真真做个人网站的时候会考虑买域名和云服务器。整站用bootstrap搭建，不得不说这款框架真心适合不懂设计，又不想太难看，还想做到响应式的人群了，而且这种UI框架API文档相对简单易懂，边查边写，几乎不用对原框架进行改写就能做出一个比较优雅的网站了。在此也推荐各位小伙伴，如果没有什么好的idea而且想快速搭建demo页，那这款框架是不二之选。

网站中的demo素材均来源于自学期间的积累，但不是全部不积累，只是很少的一部分可以拿得出手的，剩下的家丑不可外扬。其中最得意的就是那个移动端安踏去打破的demo，年前做到年后，陪我跨了个年，而且所用到的较为新颖的思路比如css3构建的伪圆柱结构，以及原生js陀螺仪相关api实现的手机位置与场景交互，都是一边研究一边写代码。也非常感谢秒味网站的相关导师和群友，在不同时期给我了不同程度的启发和指引。所以为什么我的整个学习过程几乎是加速状态，这全都得益于那些看得见和看不见的良师益友，在此特别感谢期间为我答疑解惑的前辈和群友们。

转眼就到了快要和大家说再见的时候了。这个时候如果有一首《What’s Up - 4 Non Blondes》来作为离场时的bgm，那就再好不过了。回首整篇文章，虽然文风略显戏谑，但均是真情流露，本人也不擅长写一板一眼的教条式文章。所以希望这篇文章带给大家的是一种不一样的感受，全当是听了故事会里的一篇小故事，也是极好的。

我想，互联网行业在未来几年内的发展，肯定会持续这种爆炸的态势。那么，既然我们选择了这条道路，无论你是被迫还是主动都已经无所谓了，因为经历过隔行如隔山的我已经深深的意识到，我可能，终于将要走向了一条正确的道路，而已经在这条路上的你们就应该珍视眼前的一切。宝剑锋从磨砺出，梅花香自苦寒来，持之以恒，身体力行，尽自己最大的努力在还算可控的几年内鹤立鸡群，这样，未来的自己和家人一定会为现在你而骄傲自豪。虽然我还处于没找到工作没入门的阶段，但经历了这么多，我的心态已经摆出了一个大写的正，就等着去工作，去拼搏，去证明我辞职转行是一个多么正确的选择了。我愿意相信这是一个可以通过付出百倍努力就能遨游的时代，而互联网行业就是我们的星辰大海！