Wes Bos 推出的一个 30 天挑战。30 天完成 30 个任务。 之间看见有人更新中文指南才发现的这个项目,打算用来练习一下。
- Nitish Dayal's Text Guides are great for those who like reading over watching
- Meredith Underell's Quick Lessons Learned
- Rowan Weismiller's Recaps + Lessons Learned
- Thorsten Frommen shares how he solved the exercises before viewing the answers
- Soyaine 写的中文指南包含了过程记录和难点解释
- Ayo Isaiah's Recaps and Lessons Learned
- Adriana Rios shares her alternative solutions
- Michael Einsohn publishes each challenge after watching the video once
- Mike Ekkel
- Akinjide Bankole used Node.js with Jade to solve the exercises
- Yusef Habib lessons and tricks learned, and a gh-page to see working all the mini-projects.
- Amelie Yeh 30 lessons notes with things I've learned, and those important recaps. and directly view my demos here 🇹🇼😄
- Winar的JavaScript30天挑战,记录练习过程,重难点和其他的解决方案。🎨
- JavaScript30 官网:进入官网注册后可以观看和下载所有教程视频。Wes Bos 还把视频传到了百度云,进入官网直接拉到页面底部就能找到链接。
- Nitish Dayal 写的英文指南:这是一份非官方的文字版指南,也是激励我写这一系列文章的主要因素。
- 挑战初始文档:这是 Wes Bos 这份教程涉及的代码,你可以直接 Clone 或者下载到本地,然后开始你 30 天的挑战之旅。文档共有 30 个文件夹,每个文件夹中至少有两个文件。
- index-START.html:是提供给我们的初始文档,方便我们专注于 JavaScript 的编写,这个文档已经将基础的 HTML 和 CSS 部分写好,我们只需要在这个基础上编写 JavaScript 代码,实现特定的功能即可。
- index-FINISHED.html:已经实现了最终效果的文档,可以查看效果和实现思路。
会在每个挑战中放上中文指南所对应的解析,也会加上自己的一些理解
##进度
- JavaScript Drum Kit | 实现效果
- JS + CSS Clock | 实现效果
- CSS Variables | 实现效果
- Array Cardio, Day 1 | 实现效果
- Flex Panel Gallery | 实现效果
- Type Ahead | 实现效果
- Array Cardio, Day 2 | 实现效果
- Fun with HTML5 Canvas | 实现效果
- Dev Tools Domination | 实现效果
- Hold Shift and Check Checkboxes | 实现效果
- Custom Video Player
- Key Sequence Detection
- Slide in on Scroll
- JavaScript References vs. Copying
- LocalStorage
- Mouse Move Shadow
- Sort Without Articles
- Adding Up Times with Reduce
- Webcam Fun
- Speech Detection
- Geolocation
- Follow Along Link Highlighter
- Speech Synthesis
- Sticky Nav
- Event Capture, Propagation, Bubbling, and Once
- Stripe Follow Along Nav
- Click and Drag
- Video Speed Controller
- Countdown Timer
- Whack A Mole