└── README.md


/README.md:
--------------------------------------------------------------------------------
 1 | # Fun Front-end Tutorials
 2 | 
 3 | 收集有趣的、富有交互的前端学习教程。
 4 | 
 5 | **收集标准：**通过富有交互的、有趣的 Demo 来准确的介绍或讲解一个前端知识点。内容要求严谨准确，Demo 与内容关系密切、让人眼前一亮，并可以非常直观的解释枯燥的理论内容。
 6 | 
 7 | 通常可以是：
 8 | 
 9 | * 一步步讲解某个知识点并附带对应 Demo 的文章，例如 [Flexbox adventures](http://chriswrightdesign.com/experiments/flexbox-adventures/) 和 [Cascading sequences
10 | ](http://chriswrightdesign.com/experiments/cascading/)。
11 | * 富有交互的在线课程，例如：[玩转KISSY框架](http://www.imooc.com/code/3684) 和 [Try Git](https://try.github.io/levels/1/challenges/1)。
12 | * 附带在线交互练习的视频教程，例如：[Discover DevTools: Code School](http://discover-devtools.codeschool.com/)。
13 | * 以及富有交互的 PPT 等，例如： [HTML5 Presentation](http://slides.html5rocks.com/#landing-slide)。
14 | 
15 | 
16 | 追求质量而非数量，同一知识点及同一难度（入门级、中级、高级等）的多个资源，仅保留最准确、全面、有价值的。单纯的讲解类视频、PPT 等缺乏交互不在考虑之列，除非特别优秀以及经典的资料。
17 | 
18 | 你可以通过 Issue 来推荐资源，也可以 Fork & PR，但为了保证质量，我们将会在 QQ 群里讨论该资源是否符合标准，因此不一定会全部通过。欢迎加入讨论 QQ 群：**399485758**。
19 | 
20 | 最后，该项目的目标是：通过使用最好的教程，尽量减少学习时间，尽量快的掌握某一个前端有关的技能或知识点。
21 | 
22 | /* 部分国外资源可能需要翻墙查看 */
23 | 
24 | ## CSS
25 | 
26 | ### CSS3
27 | 
28 | #### Flexbox
29 | 
30 | * Flexbox 入门：[Using Flexbox today](http://chriswrightdesign.com/experiments/using-flexbox-today/)
31 | * Flexbox 中级：[Flexbox adventures](http://chriswrightdesign.com/experiments/flexbox-adventures/)
32 | * Flexbox 工作原理：[How Flexbox works](https://medium.freecodecamp.com/an-animated-guide-to-flexbox-d280cf6afc35)
33 | 
34 | #### transition
35 | 
36 | * Transition 入门：[CSS动画简介](http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html)
37 | 
38 | 
39 | #### animation
40 | 
41 | * Animation 入门：[CSS动画简介](http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html)
42 | * Animation 实际应用：[Cascading sequences](http://chriswrightdesign.com/experiments/cascading/)
43 | 
44 | 
45 | ## HTML5
46 | 
47 | * HTML5 API 走马观花：[HTML5 Presentation](http://slides.html5rocks.com/#landing-slide)
48 | 
49 | ## JavaScript
50 | 
51 | ### JavaScript 入门
52 | 
53 | 
54 | ### JavaScript 中级
55 | 
56 | * [Learning Advanced JavaScript](http://ejohn.org/apps/learn/)
57 | 
58 | 
59 | ### ES6
60 | 
61 | * [Expert ES6](http://tagtree.io/courses/expert-es6/do)
62 | 
63 | 
64 | ## Nodejs / Iojs
65 | 
66 | ### Nodejs 入门
67 | 
68 | * 一系列的命令行交互的教程：[nodeschool.io](http://nodeschool.io/)
69 | 
70 | 
71 | ## 其他前端相关
72 | 
73 | ### Git & Github
74 | 
75 | * [Try Git](https://try.github.io/levels/1/challenges/1)
76 | 
77 | ### Chrome Devtools
78 | 
79 | * [Discover DevTools: Code School](http://discover-devtools.codeschool.com/)
80 | 
81 | ### 程序员解决能力提升
82 | 
83 | 在线解决有趣又实用的问题，可以通过多种语言（包括 JavaScript）实现，提高综合编程能力。
84 | 
85 | * [CodeWars](http://www.codewars.com/)
86 | 


--------------------------------------------------------------------------------