50 天 50 个前端小项目
初衷
我太菜了，赶紧打基础吧。
不能真的用原生的写法来实现业务，逼自己用 vue3 + typescript 的新技术栈来复现，重做这些典型的小项目。
训练注意事项
- 大胆的抄代码。抄代码是学习最快的方式。
- 改成 vue3 的写法，慢慢拓展之前没学过的 css 和 javascript 知识点。
- 自己再针对性的写简单的 demo，刻意练习没接触过的知识点。
- 最后尝试去找现成的工具库，看看有没有现成的库可以优化开发过程，未来尽量学会搬库完成业务。
参考资料
- 官网
- 官方 github 仓库
- B 站 【已完结】Git Hub 前端 50 天 50 个项目 | 第 1 个 — 扩展卡片 | HTML/CSS/JS 全网最细讲解-50 Projects in 50 Days
- 掘金 前端创意探索：速览「50projects50days」项目精华 - 第一部分（1-5 天）
- 思否 50 天用 vue3 完成了 50 个 web 项目，我学到了什么?
其他的前端练手小项目
汉堡菜单：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
贡献者
ruan-cat