Version： 2019.08.11.v1.2
开篇声明
大家好，我是王小胖，一个集可爱与智慧于一身的胖子。今天胖子和大家嘟囔一下自己的对前端开发怎么进坑的一些心得体会。说一说胖子对如何入门前端的理解。阅前提示！很重要！！
1. 如果你已经是前端开发领域存活下来的的“老兵”（2年以上的就算啊），别看了。浪费你的时间，不如玩玩游戏，陪陪媳妇儿或女朋友。
2. 此文完全是胖子这么多年自身经验的总结，观察圈内新兵成长的经历教训总结。所以是胖子的自己的观点，不一定适合你。但曾诺绝对是原创真实感受。
3. 如果在读后，你还有问题，可以给胖子留言，胖子会尽量回复解答（装做有很多粉丝的样子 ）
4. 胖子就是一个典型码农，所以文笔一般（正在修炼），真心想成文能帮一帮新人。感谢你花时间阅读，如果你有针对此文的建议和想法，请留言给我（你也能看这篇文章的版本号，我已经修改了很多版本了。胖子尽力了）。
什么是前端？什么是前端开发？
//TODO：添加官方说法，没找到满意的。。。
就胖子的经历来说，就生态范围来说，前端这个概念是不断变化发展的。如果放到10年前，前端其实简单的说就是用html，CSS和javascript构建的一个web。放到7年前，前端可能包含了Mobile移动领域，放到2-3年前，前端又包含了很多IOT领域。另外，随着NodeJS的崛起，前端也从完全的UI慢慢亲近了后端的一些前后对接领域。3年前胖子就听到了大前端的这个概念。前端进化成了大前端，所以前端是一个一直发展革新的生态。前端开发也是一个不断发展革新的技术领域。怎么学习前端开发呢？首先此文讨论的仅是Web领域前端开发入门。之后如果大家对大前端感兴趣，胖子之后也可以再说说对大前端的一些理解。
建议建议
说到怎么入门Web前端开发，胖子想首先给大家几个建议：
1. 必须多动手。Make your hands darty! 不要只是一味的看书，看视频（针对视频和书我之后会单独说说它们的优缺点），然后看完了就觉得自己可以了，掌握了，不上手去实践写代码。这里不是说书和教学视频不好，但是必须结合自己动手实践，才能快速在前端领域成长，学过了赶紧用起来，敲敲代码试一试。这就好比减肥一样，就算胖子看了好多科学减肥文章，看了好多减肥的视频，对减肥知识和运动知识了如指掌，但是如果胖子不去运动，不控制饮食，胖子永远就是胖子，瘦不了的。。。（仿佛听到胖子媳妇儿肥婆喊叫"你还知道啊！！死胖子！！"）。另外最重要的，对前端来说，找工作的时候公司还是要找能上手干活的人，不是找理论老师。
2. 形成系统，缕清脉络。首先Web前端开发，不像你之前单学一门编程语言，前端开发需要了解的技术栈多而杂。咱且不说现在的大前端了，就是7-8年前的Web前端，你要能上手工作也需要学习5-6门技术栈。另外在我们这个快文化的社会背景下，大家对一门技术栈的学习估计都会没有耐心，何况5-6门。所以学习前要有计划，学习中要会方法，学习后要会复盘。先学什么？后学什么？学到什么层度？想清楚这些，对于新人来说可以节省很多时间，把重点精力用到你当前阶段需要的重点上，推荐利用脑图整理自己的知识体系。胖子后面会整理列出我推荐的学习路线图。
3. 用项目检测学习进度。这点是结合第一点”多动手“而说的。是在你学习的过程中，用项目去检验自己的学习成果。项目不仅仅能帮助你检测你知识掌握程度，还会带给你很大的成就感，培养你实际解决问题的能力（相信胖子，你会发现做项目时绝对会遇到你看书或视频中没有涉及到的问题）。没有一个厨师会说自己看过多少菜谱很牛X，厨师往往都是不断练习，试菜，不断验证自己的想法，最后成就了几道自己拿手菜的，才会成为名厨。 前端开发者同样如此，每一此做项目都是你练菜的过程，等你大成之后，你的项目搞不好就会成为你的拿手菜。另外大家不用担心项目大小的问题，一个只有hello word文本的HTML也可以是你的一个小项目，当你初次接触web前端，看到这行字显示在你的浏览器里时，相信我，成就感绝对有，慢慢随着你的学习，你的拿手菜早晚会出现的。
4. 要学会”收“。这个是对第二点的补充。”收“是什么呢。因为前端东西多，杂。了解了脉络和系统，但是某些新人刚开始学习的时候，难免想一下子成为某一个技术的高手，或者想做领域”百事通“，什么都想学会。胖子不是说追求深度和广度不好，只是对于新人阶段来说，更重要的是尽快进入这个领域，尽快了解你该学习的东西。这和上学上课学习一样，到什么时候，你就该学习什么，都是有科学计划安排的。而不是说一年级就该学习5-6年级的知识了，也不是说一年级就要数语英，物理化，政史地全都了解。这样，会耽误自己的时间，得不偿失（当然大神和天才可以忽略这点）。
5. 适合你的才是最好的。比如前端学习对源码的研究，可能是对自身能力提高最大的。但是如果你刚入门，看到大神说看源码的建议，你就去了，估计会死的很惨。就好比刚学一点少林长拳，就要开始研究九阳真经。所以适合你的，适合当时你的level的建议，才是最好的。
6. 英语，英语，英语，它真的很重要。简单举个例子。胖子在面试的时候会问面试者平时用什么搜索引擎啊？上什么技术论坛和网站。一般要是说到用百度的话。胖子基本都是会稍微减分的（不要说在我们这行你还不会上科学上网，另外就是Bing也比Baidu强啊）。除了搜索引擎的问题，大部分技术文档都是英文的（当然VueJS就很给国人长脸，之前中文文档比英文多），你不能看不懂吧，或者你甘心等1年，让别人帮你翻译？
工具选择
新兵上战场，得先有武器啊，那么选什么武器呢？
IDE
对于前端开发的编辑器，3-4年前，胖子可能会罗列很多给大家自由选择，WebStorm, sublime text等等。不过放到现在，胖子最推荐的还是Visual Studio Code，功能强大，更新迭代快，插件灵活，界面简洁，操作快捷，跨平台，是微软推出的针对编写现代Web开发的编辑器。相信胖子，用上VS Code并加上它强大的插件，绝对能带给你完美的编程用户体验。
另外胖子还次级推荐的还有Sublime Text 3 和Atom。当然了，因为如果是新人，我就先不介绍这两个编辑器的特点了，胖子个人认为还是从VS Code开始。当然你如果是Vim的终极拥护和使用者，选择你自己最习惯的也好啊。最重要的就是你自己的体验足够好，适合你的才是最好的。
Chrome 开发者工具
别问，爱它！
developers.google.com/web/tools/c… （可能需要科学上网）
新人前端入门学习路线图（针对新人的版本，这里不包含中高篇）
第0阶段：
最近胖子在和团队里实习生和入门新人的接触过程中，发现在交流的过程中，有的新人没有软件背景，对计算机软件一些必备基础还不是很理解。所以这个阶段是针对非软件背景下的阶段。 如果你之前没有在计算机或软件学习过或做过，或者大学的专业不是对口专业，下面一些知识需要你至少了解一些。
面向对象编程
现在流行的还有函数式编程和响应式编程概念，可是胖子为啥推荐“过时”的面向对象编程呢？怎么说“面向对象”呢，这里就不把具体的概念和理论罗列上来了，只一句话谈谈胖子对它的体会，在胖子的编程生涯中，胖子都会感觉到“面向对象”对胖子的学习过程中隐隐地指引。 所以挑一门面向对象的语言，理论（面向对象）结合实际（对应的编程语言）简单了解一下什么是“面向对象”。 当然如果你没有时间，最起码要看几篇好的文章了解一下，相信我，绝对对入门的你有帮助。之后随着你学习的深入，再接触学习其他的XX编程
基本的数据结构和算法
数据结构和算法，是软件开发的内功。可以这么说，你不会数据结构和算法，就好像没有打通任督二脉，能做开发，但是当你到达了一定高度，还想提高自己的时候，他们的重要性就凸显出来了。
这里对于没有软件背景的新人来说，不是让你们花费大量时间来学习变成高手，这里建议是有对它们一个基本的了解，你要是对List，Set，Map都不了解，对简单的排序方法都不知晓，那么在今后的学习中，你会隐约的发现某些点理解起来会些许吃力。所以尽量学习一些这两个领域的一些基本知识，绝对是有帮助的。
这个阶段对于你来说理论上是伴随你整个编程生涯的，但是如果你一点背景没有，仅仅想是入门的话，4-5天足以，但是这只能说你具备了基本的了解，不能说掌握啊。
第1阶段：
这个阶段，自然是要学习web前端的三大擎天支柱啊，HTML！CSS！Javascript！这里对它们是什么就不多做介绍了，免得得一个码字的嫌疑。胖子分别简单说一下
HTML
基础中的基础，推荐MDN的网站，好学好用，多多了解。 developer.mozilla.org/zh-CN/docs/…
CSS
需要学习的东西多，而且因为其灵活性需要学习东西也杂，所以这里简单说一下一些必备的，你今后工作中肯定会用到的知识点。 第一还是推荐MDN啦，做一个基础达人 developer.mozilla.org/zh-CN/docs/… 之后的CSS必备技艺，Layout（浮动，position，display，盒模型，Grid，Flex box）响应式，CSS3也是现代web开发必不可少的
Javascript
基础的东西，还是MDN上指南 developer.mozilla.org/zh-CN/docs/… 另外如果有时间和能力，建议跟进一下新的ES标准
第2阶段：
git 和npm，基本都是你今后工作中必不可少的技能树。入门阶段不用学成专家，达到会用会查基本的使用就好。
Git： 了解基本的分散式代码版本管理软件。 git-scm.com/doc
npm： Javascript世界的包管理工具。 www.npmjs.cn/
第3阶段：
现在的web前端流行的主要框架有Angular，ReactJS 和VueJS（国人骄傲啊）. 如果你刚刚加入公司，当然是首选学习公司选用的框架了。如果你还没有需要特定学习的目标，胖子个人对于新手同学推荐Angular，因为它和其他两个框架还是有不同的，它具备强规范性，能避免一些莫名的错误，并且它比较大而全，你能了解开发一个前端应用，你所需要的所有，像路由啊，状态管理啊等等。其它两个Vue和React特点是小而专，但都是特别好的框架设计，所以今后有能力，一定都要多多了解。
3.1 typescript 和SASS 如果你选择Angular，必须得学习typescript，因为Angualr必须用它来编码啊。 不多说，TS是一个具有类型系统得，JS的超集。推荐个网址开始你的学习吧 typescript.bootcss.com/
3.2 SASS Sass是对CSS的扩展，让CSS的编码更灵活优雅。但是你必须在掌握了阶段1的CSS之后，在尝试学习它啊。 也不多说，开始你的学习吧。 sass.bootcss.com/docs/sass-r…
第4阶段：
了解NodeJS， 关于NodeJS，胖子不想多说了，可以说几年前前端开发靠它翻身，“染指”后端service领域，带来前端工程化的革命，都是它的功劳。 但是胖子想说的是在这个阶段你可能不需要了解太深了。学习NodeJS的目的胖子认为主要有两个： 一是可以让你能够快速搭建一个自己的web服务器，ExpressJS 或者KOA（TS）挑一个学习。 expressjs.com/zh-cn/ koa.bootcss.com/ 二是让你今后扩展和调错一些工程化工具的时候不至于读不懂源代码，打下一点点基础。
当然它的学习目前看是需要很深入的，只是在这个阶段不需要太深而已
第5阶段：
还等啥呀，用东北话说“开始整吧！”。 你可以参考一个github的好的开源项目学习并且学着自己构建一个项目。也可以把自己的想法和点子用你自己学到的技术构建出来。
结语
当然，前端的路还远远没有结束，其实完成这些还只是开始，今后还有很长的路要走。。。祝君好运，身体健康（身体真的很重要）
转载请注明“码农王小胖”
