50天50个项目：前端练手资源库

50天50个项目：前端练手资源库

学前端最怕的就是光看不练。看教程觉得都会了，一上手写代码就卡壳。这个问题困扰过很多人，包括我。Traversy Media 的 Brad Traversy 做了一件实在事：用50天时间，每天写一个小项目，全部开源。

这个仓库目前有4万多个Star，算是前端学习资源里的硬通货。不是那种挂个空壳骗Star的项目，每个子项目都有完整代码和在线演示。

项目都包含什么

50个项目覆盖了前端开发的常见场景：

• CSS动画效果（卡片展开、波纹按钮、加载动画）
• 表单交互（输入框动效、密码生成器、问卷反馈）
• DOM操作（拖拽、倒计时、轮播图）
• API调用（电影应用、GitHub用户信息查询）
• 实用小工具（笔记应用、待办清单、计时器）

每个项目都是独立的文件夹，HTML、CSS、JavaScript 三个文件清清楚楚。想学哪个就打开哪个，不需要搭环境，浏览器直接跑。

适合什么人

初学者。这点很明确。这些项目用的都是原生技术，没有框架依赖。HTML写结构，CSS写样式，JavaScript写逻辑。三件套。

如果你刚学完基础语法，想找个地方练手，这个仓库刚好。每个项目的复杂度控制得不错，不会简单到无聊，也不会难到劝退。大概一两个小时能做完一个。

有经验的开发者也能用。比如你想给新人做培训，直接拿这些项目当练习题就行。或者你想快速验证某个CSS效果怎么实现，翻翻这个仓库基本都能找到类似的。

怎么用最高效

别从头到尾顺着做。挑你感兴趣的、工作中可能用到的先做。比如做后台管理的，可以先看Sticky Navbar和Toast Notification。做移动端的，看看Mobile Tab Navigation。

做的时候别直接抄。先看效果图，自己写一遍，写不出来了再看作者的实现。对比一下差距在哪。这个过程比单纯抄代码有用得多。

还有一点，这些项目都是2020到2021年写的。前端技术更新快，有些写法现在可能有更好的替代方案。学思路，学解决问题的方式，代码细节可以按自己的习惯调整。

课程和仓库的关系

这个仓库是Traversy Media付费课程的配套资源。课程本身收费，但仓库里的代码是免费开源的。你可以只用仓库，不买课程。当然，如果觉得项目有价值，想看视频讲解，支持一下原作者也行。

仓库的Pull Request只接受Bug修复，不接受新功能或美化改动。这是为了保持和课程内容一致。所以如果你想基于这些项目做二次开发，Fork一份自己改就好。

实际体验

我挑了几个项目看了下代码质量。整体来说写得规范，变量命名清晰，注释适当。CSS用了很多现代特性，比如Flexbox和Grid布局。JavaScript部分主要是DOM操作和事件处理，没有用太复杂的ES6+语法，对新手友好。

有些项目的动画效果做得挺用心。比如Expanding Cards那个，点击展开的过渡效果用纯CSS实现，代码量不大但效果不错。Kinetic Loader的旋转动画也是，用CSS transform和animation就能做出视觉冲击力。

写在最后

前端学习资源很多，但真正能让人动手写代码的不多。这个仓库的价值在于降低了动手的门槛。不用配环境，不用装依赖，打开就能写。对于想提升实战能力的初学者来说，是个靠谱的起点。

在于降低了动手的门槛。不用配环境，不用装依赖，打开就能写。对于想提升实战能力的初学者来说，是个靠谱的起点。