21K+ star！这个开源项目很优秀！

哈喽，大家好！我是前端实验室的小师妹!

很多初学者会一上手就找个大项目去做，到最后却是啥也没干成！

现在框架一大堆，上手开发很容易，但殊不知打好基础才是重中之重！

不要刚上手就找几个月才能完成的大项目，不如来做一个在 50 天内完成的 50 个 Web小型项目。

50projects50days

这是50 个采用 HTML + CSS + JS 实现 的前端小项目集合，这个项目从简单到深入，用50个项目来学习介绍，帮助你深入了解前端开发。

这个项目从简单到深入，用50个项目来学习介绍，帮助你深入了解前端开发，非常适合初学者的优质前端项目！

示例1：Expanding Cards

知识点主要是弹性盒子布局中的flex属性；利用[].filter.call()方法快速实现简单的选项卡切换。

示例2：Progress Steps

知识点主要是CSS变量的使用以及外加伪元素的用法；通过计算进度条的宽度等实现进展步骤选项卡功能。

示例3：Rotating Navigation Animation

知识点主要是CSS弹性盒子布局加rotate动画；通过添加和移除类名的操作来实现旋转导航动画功能。

示例4：hidden-search-widget

知识点主要是CSS过渡动画，input标签的placeholder样式，再通过添加和移除类名的操作来实现隐藏的搜索小部件。

示例5：Blurry Loading

知识点主要是CSS filter属性的用法，通过定时器动态设置样式来实现加载模糊动画的效果。

---

总共 50 个小型项目，这里就不一一举例了！这个项目主要通过HTML + CSS + JS 实现的，小师妹还发现有作者仿该项目实现了React、Vue版本，有兴趣的小伙伴可以看看哦~

https://github.com/bradtraversy/50projects50days

https://github.com/eveningwater/my-web-projects