前端系漫游指南

引言

这份指南纯粹是某人的自嗨产物，因为有不少人会来问他前端该如何入门种种，于是他就自己对于前端的认知整合了这玩意儿，仅代表个人意见，供以参考(´c_`)

工具

想了想把这个放在最前面……没人叫你用记事本写代码，用点现代化的工具好伐•_ゝ•

编辑器

• Sublime text 3 速度最快，面对大文件也毫无压力，插件和主题配置略复杂一些，但配置完后相当好用。
• Atom，号称开箱即用，不配置情况下足以胜任轻量工作，配置上更加简易，有可视化的插件管理，缺点是速度贼慢，就算俺是固态硬盘也要花1.5秒才能打开，且面对大文件会果断的崩溃。
• VS Code，上面两者的集大成者，速度也相当快，略慢于sublime，同时具有Atom的优点。如果有缺点就是问世时间较短，插件或许不及上两者丰富（目前以极大改善）？但更关键的是它还集成了node调试环境（通过插件还可调试py等）和shell，相当的方便啊（不过刚入门可能也用不到）！咱曾在它与sublime中摇摆多次，目前摆向了vscode！
• 蛤？你说DW(dreamweaver)？曾经辉煌过，就让他好好的去吧，求求你别用(`д´)

调试

Chrome浏览器，没错就是浏览器，按下 F12 你就可以打开屌炸天的Chrome DevTools，由于本身过于强大，直接贴一篇（刚刚找的）教程：http://www.jianshu.com/p/cf36d48652f4

当然由于它本身可以做的事太多，在入门阶段你可能只会用到Elements,Console,Source等面板，所以尽量结合着教程去利用调试面板解决问题，不要试图一下啃完整个教程。

Github

用于线上代码托管，更具体的作用请自己百度/谷歌，贴一个傻瓜版用法： 怎样使用 GitHub？ 的最高票回答，不过这个可视化工具也常常不靠谱，还是建议尽早的开始用命令行的方式进行操作：git 参考手册

HTML /CSS基础

文档

W3School，可以先过一遍HTML和CSS部分的文档，完成其中涉及到的小demo，对于HTML和CSS的作用有一个初步了解。过完一遍后可以进入下一步骤，如果忘记任何东西再回来查阅。

MDN，比W3School更全面的文档，搜索用。

实战

IFE2016 的第一第二阶段任务，IFE设置了相当合理的一个个小任务，并提供完成任务所需要的在线参考资料，供你自己去完成任务，除此之外还有其他完成任务的人的代码可以参考，可以看到许多不同的思路，妙啊(❍ᴥ❍ʋ)

当然慕课网，udacity上也是有一些入门的视频教学，可能更加友好一些，毕竟是人家嚼烂了喂嘴里，不过个人感觉从学习角度不如直接做IFE。

HTML/CSS进阶

张鑫旭老师的CSS深入理解系列，个人认为是正经前端的必备知识，虽然好像没那么多人关心就是了。

张鑫旭的博客，其中有很多值得啃很多遍的文章，如：

• 深入理解CSS中的层叠上下文和层叠顺序
• 深入理解vertical-align和line-height的基友关系
• ……

如果真的有心的话就自己去发现吧( ͡° ͜ʖ ͡°)

JS基础

文档

MDN，用来搜索的，别想着捧着看，直接从下面的实战开始。

实战

IFE2016 的第三第四阶段任务，理由同HTML/CSS部分

JS进阶

首先如果你进入了IFE三四阶段的后半程，相信你的JS已经达到了需要进阶的时候，这里主要推荐一本《JavaScript设计模式与开发实践》。除此之外你也掌握原型啊闭包啊等等的知识，明白他们的原理，这就比较细了，我相信等你达到这个程度，你肯定也掌握了足够的搜索水平去找到相关资料，就不在这里一一贴了。

框架？

相信开始学习两天你就会被 bootstrap, jquery, react, vuejs 等看起来好屌的框架晃得睁不开狗眼，尽管你可能根本分不清他们的应用领域。如果你是想成为一个前端开发者，而不是试图花两天时间去学点前端好为自己的项目添添补补，那么从学习角度，在入门阶段，俺觉得可以不去理会框架，HTML/CSS/JS绝对够玩半年的，如果你已经打好基础，相信你会知道为了开发你需要掌握什么框架，而学习过程也会由于扎实的基础而异常愉悦。

顺便一提，如果你是后者，试图当两天的前端，可以去直接学习bootstrap和jquery，好好看他们的文档，应该能糊弄些看起来还行的东西，大概(*ﾟーﾟ)

最后上一份经典中的经典：提问的智慧

啊——暂时就是这样，有问题建议欢迎指出【逃】