教程网站：JavaScript30

教程作者：Wes Bos

30 Day Vanilla JS Coding Challenge

Build 30 things in 30 days with 30 tutorials

No Frameworks×No Compilers×No Libraries×No Boilerplate

JavaScript30指的是在30天中，完成30个挑战，不借助任何框架、编译器、库和模板，使用纯JavaScript编写。(感觉很有趣的样子~)

• JavaScript30 官网：可以在官网上注册，注册后就可以观看和下载所有的相关教程的视频。但是我登录官网之后视频加载不出来，点击这里可以下载教程视频。

• 挑战初始文档：这是JavaScript30所涉及的代码，并且也汇总了一些完成挑战过程的记录/指南/博客。如果在完成过程中遇到了什么困难，这是很好的资料哦。

  代码文档共有 30 个文件夹，打开其中一个文件夹你可以发现，通常包含下面两个文件：

  • index-START.html：是提供给我们的初始文档，方便我们专注于 JavaScript 的编写，这个文档已经将基础的 HTML 和 CSS 部分写好，我们只需要在这个基础上编写 JavaScript 代码，实现特定的功能即可。
  • index-FINISHED.html：已经实现了最终效果的文档，可以查看效果和实现思路。(在教程视频中也会体会到一步步的实现思路)
  • index-ME.html：是我根据教学视频和任务要求编写。

• 缉熙Soyaine编写的中文指南：里面会有每个挑战中注意的问题，问题该如何解决的一些思路，写得挺详细的，值得参考，这个readme.md也有参考她写的中文指南。（不过目前她好像还没有写完）

记录一下我完成JavaScript30的进度以及会遇到的问题。

• 01 - JavaScript Drum Kit | 效果 | 源码
• 02 - JS and CSS Clock | 效果 | 源码
• 03 - CSS Variables | 效果 | 源码
• 04 - Array Cardio Day 1 | 效果 | 源码
• 05 - Flex Panel Gallery | 效果 | 源码
• 06 - Type Ahead | 效果 | 源码
• 07 - Array Cardio Day 2 | 效果 | 源码
• 08 - Fun with HTML5 Canvas | 效果 | 源码
• 09 - Dev Tools Domination | 效果 | 源码
• 10 - Hold Shift and Check Checkboxes | 效果 | 源码
• 11 - Custom Video Player | 效果 | 源码
• 12 - Key Sequence Detection | 效果 | 源码
• 13 - Slide in on Scroll | 效果 | 源码
• 14 - JavaScript References VS Copying | 效果 | 源码
• 15 - LocalStorage | 效果 | 源码
• 16 - Mouse Move Shadow | 效果 | 源码
• 17 - Sort Without Articles | 效果 | 源码
• 18 - Adding Up Times with Reduce | 效果 | 源码
• 19 - Webcam Fun | 效果 | 源码
• 20 - Speech Detection | 效果 | 源码
• 21 - Geolocation | 效果 | 源码
• 22 - Follow Along Link Highlighter | 效果 | 源码
• 23 - Speech Synthesis | 效果 | 源码
• 24 - Sticky Nav | 效果 | 源码
• 25 - Event Capture, Propagation, Bubbling and Once | 效果 | 源码
• 26 - Stripe Follow Along Nav | 效果 | 源码
• 27 - Click and Drag | 效果 | 源码
• 28 - Video Speed Controller | 效果 | 源码
• 29 - Countdown Timer | 效果 | 源码
• 30 - Whack A Mole | 效果 | 源码