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


## 引言

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

## 工具

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

### 编辑器

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

### 调试

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

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

### Github

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

## HTML /CSS基础

### 文档

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

[MDN](https://developer.mozilla.org/cn/)，比W3School更全面的文档，搜索用。

### 实战

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

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

## HTML/CSS进阶

[张鑫旭老师的CSS深入理解系列](http://www.imooc.com/u/197450/courses?sort=publish)，个人认为是正经前端的必备知识，虽然好像没那么多人关心就是了。

[张鑫旭的博客](http://www.zhangxinxu.com/wordpress/)，其中有很多值得啃很多遍的文章，如：

- [深入理解CSS中的层叠上下文和层叠顺序](http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/)
- [深入理解vertical-align和line-height的基友关系](http://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/)
- ......

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

## JS基础

### 文档

[MDN](https://developer.mozilla.org/cn/)，用来搜索的，别想着捧着看，直接从下面的实战开始。

### 实战

[IFE2016](http://ife.baidu.com/2016/task/all) 的第三第四阶段任务，理由同HTML/CSS部分

## JS进阶

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

## 框架？

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

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

------

最后上一份经典中的经典：[提问的智慧](https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/master/README-zh_CN.md)

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

LWDW!