Fun Front-end Tutorials

收集有趣的、富有交互的前端学习教程。

**收集标准：**通过富有交互的、有趣的 Demo 来准确的介绍或讲解一个前端知识点。内容要求严谨准确，Demo 与内容关系密切、让人眼前一亮，并可以非常直观的解释枯燥的理论内容。

通常可以是：

• 一步步讲解某个知识点并附带对应 Demo 的文章，例如 Flexbox adventures 和 Cascading sequences 。
• 富有交互的在线课程，例如：玩转KISSY框架 和 Try Git。
• 附带在线交互练习的视频教程，例如：Discover DevTools: Code School。
• 以及富有交互的 PPT 等，例如： HTML5 Presentation。

追求质量而非数量，同一知识点及同一难度（入门级、中级、高级等）的多个资源，仅保留最准确、全面、有价值的。单纯的讲解类视频、PPT 等缺乏交互不在考虑之列，除非特别优秀以及经典的资料。

你可以通过 Issue 来推荐资源，也可以 Fork & PR，但为了保证质量，我们将会在 QQ 群里讨论该资源是否符合标准，因此不一定会全部通过。欢迎加入讨论 QQ 群：399485758。

最后，该项目的目标是：通过使用最好的教程，尽量减少学习时间，尽量快的掌握某一个前端有关的技能或知识点。

/* 部分国外资源可能需要翻墙查看 */

CSS

CSS3

Flexbox

• Flexbox 入门：Using Flexbox today
• Flexbox 中级：Flexbox adventures
• Flexbox 工作原理：How Flexbox works

transition

• Transition 入门：CSS动画简介

animation

• Animation 入门：CSS动画简介
• Animation 实际应用：Cascading sequences

HTML5

• HTML5 API 走马观花：HTML5 Presentation

JavaScript

JavaScript 入门

JavaScript 中级

• Learning Advanced JavaScript

ES6

• Expert ES6

Nodejs / Iojs

Nodejs 入门

• 一系列的命令行交互的教程：nodeschool.io

其他前端相关

Git & Github

• Try Git

Chrome Devtools

• Discover DevTools: Code School

程序员解决能力提升

在线解决有趣又实用的问题，可以通过多种语言（包括 JavaScript）实现，提高综合编程能力。

• CodeWars