鱼而已

V1

2022/09/24阅读:33主题:萌绿

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 实现的,小师妹还发现有作者仿该项目实现了ReactVue版本,有兴趣的小伙伴可以看看哦~

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

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

分类:

前端

标签:

前端

作者介绍

鱼而已
V1