50projects50days 50 天 50 个前端小项目

初衷

我太菜了，赶紧打基础吧。

不能真的用原生的写法来实现业务，逼自己用 vue3 + typescript 的新技术栈来复现，重做这些典型的小项目。

参考资料

• 官网
• 官方 github 仓库
• B 站 【已完结】Git Hub 前端 50 天 50 个项目 | 第 1 个 — 扩展卡片 | HTML/CSS/JS 全网最细讲解-50 Projects in 50 Days
• 掘金 前端创意探索：速览「50projects50days」项目精华 - 第一部分（1-5 天）
• 思否 50 天用 vue3 完成了 50 个 web 项目，我学到了什么?

其他的前端练手小项目

• https://www.bilibili.com/video/BV1ov411M7hP/

汉堡菜单：https://codepen.io/erikterwan/pen/EVzeRP
css 弹出效果：https://codepen.io/imprakash/pen/GgNMXO
css 下拉选择：https://codepen.io/imprakash/pen/VejpQP
下拉式菜单：https://codepen.io/andornagy/pen/xhiJH
CSS 图片轮播图：https://codepen.io/AMKohn/pen/EKJHf
侧边栏菜单：https://codepen.io/plavookac/pen/qomrMw
悬停按钮：https://codepen.io/kathykato/pen/rZRaNe
按钮悬停效果：https://codepen.io/sfoxy/pen/XpOoJe
CSS 开关按钮：https://codepen.io/himalayasingh/pen/EdVzNL
CSS 输入文本动画：https://codepen.io/alewinski/pen/grqgqx
CSS 动画菜单：https://codepen.io/joellesenne/pen/qtLEG
CSS 提示：https://codepen.io/cristina-silva/pen/XXOpga
CSS 表格：https://codepen.io/alexerlandsson/pen/mPWgpO
CSS 分段控件：https://codepen.io/fstgerm/pen/Jafyj
纯 CSS 响应式选项卡：https://codepen.io/Fallupko/pen/ruLdg
CSS 下列菜单：https://codepen.io/Moslim/pen/gmzvQj
响应式 CSS 标签：https://codepen.io/imprakash/pen/epZvbQ