前端入门指南（菜鸟篇-上）
前前后后，从对前端一无所知开始自学三个月，到如今作为前端开发工程师工作了三个月，这总共半年的时间里，我是怎么学的。
一、前言
1.为什么要学前端开发？
我本来是想学java的，买了一堆java书籍，但怎么变成了学前端，已经无从根究，我自己也是没答案。不过既然已经走上了这条路，而且前端还算有趣，那就接着走下去吧。一个优秀的程序员不会只懂一门语言，因此，java什么的，早晚会接触到。也许，那不是java，而会是Haskell、Phython等任何编程语言。
2.前端开发是做什么的？
老实说，这问题我倾向于复制粘贴网上答案来应付了事。可想想逢年过节时，亲朋好友们百分百会问到这个问题，我就说一下吧。
敷衍的A：“做网站，搞网页开发的”。
偏科的B：“做UI设计的，做微信公众号的”。
装逼的C：“改变世界的”。
认真的D：“前端开发有许多方向，比如网站重构，UI设计，web应用开发，物联前端，前端AR...(省略一千字)”。
兼容性最强的万能答案：“写代码的，对，就是传说中的程序员！坐办公室用电脑的！”。
3.前端开发有钱途吗？
当然有，做啥没前途？乞讨乞到极致，也能乞成千万富翁。
一般来说，刚入门的新人，工资都高不到哪儿去，从1k到1w都有。注意，是刚入门，不是刚入行！管理层以下，绝大多数情况都是技术实力正比于薪资！
互联网发达地区的薪资水平会高一截，如北京上海深圳广州杭州，互联网公司会比其他行业公司的薪资水平高一截。同等能力下，牛逼的小公司比大公司的薪资要高一点。
4.我该怎么学前端？
这是个很大的问题。从学习方式来说，有自学与培训。从学习方法来讲，那真是没法数，每个人都有属于自己的合适的自己的方法，有的人觉得看看视频就能学会，有的是觉得光看书就完全get技能了，还有的人觉得在群里多和大佬们聊聊吹吹水就可以掌握想要的知识。
做梦吧。
前端有三大基础JavaScript、CSS、HTML。光HTML就不是上述方法能掌握的，更遑论JavaScript？JavaScript是门直译型的语言，是面向对象的。对象是啥，一只喵星人一个手机一个你就是一个对象。当然，JavaScript里的对象是代码组成的，而在JavaScript里，几乎一切都是对象。
但凡是对象，那肯定是复杂的。你复杂吗？为什么复杂？对象的复杂性，很大程度取决于它自身与其依赖的周围环境。人在陆地上可以活得好好的，扔进水里，能活几分钟？水陆环境的不同，增加了人的复杂些。换成你手机也一样，把它丢进火里或水里试试。
这跟JavaScript有什么关系？
没关系。
才怪。JavaScript是脚本语言，是条寄生虫，不寄生在宿主身上就没生命力的东西。它的宿主是什么？浏览器 or Node。
本质上，浏览器和Node都给JavaScript提供了运行时的环境，所以，这个东西，才是JavaScript的幕后老板。我们称之为JavaScript Interpreter，当然，不止这么一种叫法，还有什么Redering Engine等等，总之，它们都可以将JavaScript代码翻译成机器码，供计算机认识与使用。
没有灵魂的人，跟死人没什么两样。
JavaScript被翻译成机器码后，就有了灵魂，活过来了。
你看，JavaScript其实也是个对象。这么复杂的东西，光看书看视频听人说，能真正懂它吗？不能。这些行为最多帮我们知道它，了解它的知识体系与底层原理，顺便拓展一下眼界。要真正懂它，得不断地去使用它，以各种方式去使用它。
就像你跟一个姑娘谈恋爱，光看照片看她日志有什么用，你要牵她的手，亲吻她，拥抱她，爱她，跟她交流，做各种羞羞的事，才会真正懂她。不是么？
JavaScript尚且如此，包含它的整个前端还用说吗？
Just do it！
5.从哪里开始前端的第一步？
废话了一堆，来点干货。首先，回答问题前，我们来趟时空旅行。
1993年，超文本标记语言HTML（Hyper Text Markup Language）第一版面世，它只支持超链接的纯文本html文档。纯到什么地步？纯文本！超链接！没了。
纯文本是什么概念？在你的电脑桌面新建一个txt文档，在里面写上
hello world
保存文档为html类型。然后双击打开它，你就可以在浏览器里看到hello world了！
这就是纯文本html文档，纯的不能再纯的一个网页。
超链接呢？以记事本方式打开刚才的文档，把hello world替换成
<a href="http://www.baidu.com">hello world</a>
保存。双击打开这文档，你会在浏览器里看到带下划线的hello world，点击它，如果你能上网，那么毫无疑问，它会跳转到百度的首页。这么一个简单的文档，居然可以链接到百度，神奇吗？这就是超链接。链接互联网上的所有。
时间往前走。
1994年，层叠样式表CSS（Cascading Style Sheets）问世，这时它还没成为标准，直到1996才有第一版标准。CSS做了什么？回答这个问题得先知道HTML干了什么。HTML定义了文档的类型与内容。CSS，则决定了这些内容该如何展现。如果把HTML文档比喻成一幅纸画，那么CSS就是造物主的神力，它可以让纸画上的猫咪隐身，也可以让纸画上的鲜花变换颜色，甚至能让里面的小鸟飞出来，让高山变成平地，让沧海变成桑田。梦幻吧。
打开刚才的文档，把内容替换成
<a href="http://www.baidu.com" style="color: red">hello world</a>
保存。双击打开它，你会在浏览器里看到红色的hello world。这里，style引入了CSS样式，color给这些文字打开了颜色的大门，red，涌入了进来，把它们染成了红色。
1996年，JavaScript第一版诞生。只有HTML与CSS的世界太单调，鸟会飞，却无法互相交流，猫咪看不到老鼠，老鼠也看不到猫，它们过着孤独的生活。这样的世界不真实，于是，JavaScript来了。JavaScript赋予了这些生命思考、感知与交流的能力，从此这世界变得无比精彩，无数文明诞生与消亡，演绎宇宙洪荒。
再次打开我们的文档，把内容替换成
<a href="http://www.baidu.com" style="color: red">hello world</a> <script> alert('ni hao'); </script>
保存。双击打开它，你会在浏览器里看到一个弹出的提示框，上面写着，ni hao。这里，script引入了JavaScript代码，alert表示弹出一个提示框，括号里的是提示的内容。没错，人类，你被浏览器发现了！它在向你打招呼！
好了。
回到开始的问题上来，在哪开始前端的第一步？
如果你刚才跟着我敲了一遍例子，那么你已经踏出了第一步。接下来的学习，是把HTML，CSS，JavaScript的所有基础知识快速泛读一遍（不求甚解，只求心中有个印象，大概知道都有些什么知识，真正要了解那些知识，应该放在后面的实践中学习，如此，效率极高），你可以在W3C或者菜鸟上面翻阅这些资料，或者在MND里阅读更详细的内容。相信MDN以后会是你经常光顾的一个地方，它就像前端的百科全书，网络图书馆，你想要的了解的，基本都能在里找到。
这个过程，集中精力不受干扰，可能需要花费大约2~3个小时的时间。
然后，让我们来玩游戏吧。
6.在游戏中学前端？
没几个人会不喜欢玩游戏的，除非他没有童年。
我们要玩的，是一个闯关游戏。只要按照游戏规则，完成指定的任务，就可以进入下一关。完成任务的方式，没错，就是写代码。
不用担心，有足够多的提示能让十足的前端菜鸟轻易完成前面的一些挑战。嗯，别告诉我你是十二足的....
先看个例子，如下图所示：
图中演示了游戏中的两个简单关卡，看不懂不要紧，实际去挑战，就明白了。相信这是个非常有趣，并且富有成就感的过程。
这免费游戏出自FreeCodeCamp，当今世界上最受欢迎最流行的技术类开源项目，粉丝遍布上百个国家，你可以在GitHub上找到它的组织，当然，它在中国也有分支，简称FCC中文社区。
上图的例子，便是在FCC中文社区完成的。笔者当初就是在FCC学习了一段时间，还没完成前端的所有挑战，便已找到一份满意的工作，并且认识了许多前端小伙伴们，他们都非常友善，乐于分享，互帮互助，其中不乏非常厉害的大佬大神们。
游戏过程中，多多查阅MDN，你会学到很多知识。关卡挑战成功与否不是最重要的，最重要的，是我们在这过程中，学会了什么。知识，方法，思维方式，编程思想，and so on...
如果你完成了游戏里所有前端的挑战还没找到工作，那么我百分百敢肯定，要么就是你目标太高，要么，必定是你没认真挑战，恐怕，谷歌百度抄了不少答案吧。有用吗？自欺欺人而已。
请尽量自己独立完成。
完成FCC前端挑战大概需要一到两个月时间，牛人不到十天可以搞定（请收下我的膝盖...）。
假设你已经完成了挑战，让我们进入下一个话题，前端究竟在干什么。
