Skip to content

50 天 50 个前端小项目

初衷

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

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

训练注意事项

  1. 大胆的抄代码。抄代码是学习最快的方式。
  2. 改成 vue3 的写法,慢慢拓展之前没学过的 css 和 javascript 知识点。
  3. 自己再针对性的写简单的 demo,刻意练习没接触过的知识点。
  4. 最后尝试去找现成的工具库,看看有没有现成的库可以优化开发过程,未来尽量学会搬库完成业务。

参考资料

其他的前端练手小项目

汉堡菜单: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

贡献者

The avatar of contributor named as ruan-cat ruan-cat
The avatar of contributor named as 阮喵喵 阮喵喵

页面历史

布局切换

调整 VitePress 的布局样式,以适配不同的阅读习惯和屏幕环境。

全部展开
使侧边栏和内容区域占据整个屏幕的全部宽度。
全部展开,但侧边栏宽度可调
侧边栏宽度可调,但内容区域宽度不变,调整后的侧边栏将可以占据整个屏幕的最大宽度。
全部展开,且侧边栏和内容区域宽度均可调
侧边栏宽度可调,但内容区域宽度不变,调整后的侧边栏将可以占据整个屏幕的最大宽度。
原始宽度
原始的 VitePress 默认布局宽度

页面最大宽度

调整 VitePress 布局中页面的宽度,以适配不同的阅读习惯和屏幕环境。

调整页面最大宽度
一个可调整的滑块,用于选择和自定义页面最大宽度。

内容最大宽度

调整 VitePress 布局中内容区域的宽度,以适配不同的阅读习惯和屏幕环境。

调整内容最大宽度
一个可调整的滑块,用于选择和自定义内容最大宽度。

聚光灯

支持在正文中高亮当前鼠标悬停的行和元素,以优化阅读和专注困难的用户的阅读体验。

ON开启
开启聚光灯。
OFF关闭
关闭聚光灯。