【案例练习】12—50 个从今天就可以开始做起来的小型Web项目

英文 | https://50projects50days.com/

整理 | 杨小爱

“从未开始的工作需要最长时间才能完成。” — J.R.R. 托尔金

我们经常被告知要么做大，要么不做，但当我们刚开始时，发现这并不总是最好的建议。

开始可能会很可怕，这就是为什么我们把它推迟到没有时间开始为止。通常，我们会跳到负面，重读手册，重看教程，花几个小时学习很少，什么也没完成。

因此，与其谈论需要数月或数年才能完成的大型项目，不如一起来做一个在 50 天内完成的 50 个小型项目。

无论如何，我们不必在 50 天内完成这些，但这是 Brad Traversy 和 Florin Pop 的 Udemy 课程，他们教你 HTML、CSS 和 JavaScript——最重要的是，知道如何从小处着手。

如果您有兴趣学习编程，我们可以通过演示地址查看每个小项目的演示效果，后面我会把详细代码进行整理，发布在www.webqdkf.com的网站上。

1、扩展选项卡

演示地址：https://50projects50days.com/projects/expanding-cards/

这个项目并排显示图像的图片。当我们单击一个时，它会展开以显示完整图像。

2、进展步骤选项卡

演示地址：https://50projects50days.com/projects/progress-steps/

按下“上一个”或“下一个”按钮后，进度条会移动到（或返回）一行中的另一个数字。

3、旋转导航动画

演示地址：https://50projects50days.com/projects/rotating-navigation-animation/

按下左上角的菜单按钮，整个主图像将旋转以显示“主页”、“关于”和“联系”链接。非常酷！

4、隐藏的搜索小部件

演示地址：https://50projects50days.com/projects/hidden-search-widget/

从隐藏到发现，单击搜索图标并获得一个搜索栏。

5、加载模糊动画效果

演示地址：https://50projects50days.com/projects/blurry-loading/

当图片变得更清晰时，您网站的访问者将获得模糊的图像和从 0% 到 100% 的加载计数器。

6、滚动动画

演示地址：https://50projects50days.com/projects/scroll-animation

向上或向下滚动以查看更多从左右飞入的内容框，看起来棒极了！

7、拆分登陆页面

演示地址：https://50projects50days.com/projects/split-landing-page/

不确定您的访客是否想要 PS5 或 Xbox Series X？为他们提供这个滑动登陆页面，当他们将光标从一侧移动到另一侧时，该页面会显示更多内容。

8、形成波浪

演示地址：https://50projects50days.com/projects/form-wave/

不要让图片欺骗你。这种外观规则的表单在其文本中具有酷炫的波浪特征。

9、音板按钮效果

演示地址：https://50projects50days.com/projects/sound-board/

给每个菜单，配置了有趣的音频效果。声。

10、爸爸笑话选项卡效率

演示地址：https://50projects50days.com/projects/dad-jokes/

你今天喜欢爸爸的笑话吗？如果没有，你应该做一些。

例如，上面的笑话说：“我今天燃烧了 2,000 卡路里；我把食物放在烤箱里太久了。”哈哈。现在，按下按钮并“再开个玩笑”，就会出现不一样的笑话故事。

11、事件键码

演示地址：https://50projects50days.com/projects/event-keycodes/

按任意键并获取键码。

12、常见问题解答效果

演示地址：https://50projects50days.com/projects/faq-collapse/

当您正在寻找时尚的下拉菜单来回答问题或提供信息时。

13、随机选择器

演示地址：https://50projects50days.com/projects/random-choice-picker/

哈哈，这很有趣，你可以去试试。

14、动画导航

演示地址：https://50projects50days.com/projects/animated-navigation/

这个你必须看到才能相信，动画是一流的。

15、 递增计数器

演示地址：https://50projects50days.com/projects/incrementing-counter/

想为您的社交媒体关注者建立一个柜台？这是一个很棒的做法，一旦你加载页面就开始了。

16、加载动画-喝水效果

演示地址：https://50projects50days.com/projects/drink-water/

跟踪你喝了多少水，这很有趣——而且是视觉的！

17、电影应用

演示地址：https://50projects50days.com/projects/movie-app/

爱情电影？有喜欢看电影的朋友吗？为他们创建这个奇妙的电影应用程序。当他们将鼠标悬停在电影的封面上时，他们可以阅读其概要。

18、背景滑块

演示地址：https://50projects50days.com/projects/background-slider/

非常圆滑的外观。

19、主题时钟

演示地址：https://50projects50days.com/projects/theme-clock/

这个简约的时钟使用您计算机的日期和时间。而且，它有一个黑暗模式。

20、按钮波纹效果

演示地址：https://50projects50days.com/projects/button-ripple-effect/

21、 拖放效果

演示地址：https://50projects50days.com/projects/drag-n-drop/

很酷的拖放功能！

22、绘图应用程序

演示地址：https://50projects50days.com/projects/drawing-app/

很酷的应用程序。

23、旋转三角形动画

演示地址：https://50projects50days.com/projects/kinetic-loader/

24、卡片式选项卡

演示地址：https://50projects50days.com/projects/content-placeholder/

25、粘性导航栏

演示地址：https://50projects50days.com/projects/sticky-navbar/

滚动时将导航栏保持在顶部。

26、双垂直滑块

演示地址：https://50projects50days.com/projects/double-vertical-slider/

同时滑动图像的两侧，然后观察它们锁定到位，请查看演示地址。

27、汉堡叠加通知效果

演示地址：https://50projects50days.com/projects/toast-notification/

单击按钮，然后查看通知。

28、Github 个人资料卡

演示地址：https://50projects50days.com/projects/github-profiles/

29、双击心

演示地址：https://50projects50days.com/projects/double-click-heart/

这个项目可以让你点击图片添加一颗心；当您单击图像时，它有一个可爱的动画。

30、自动打字效果

演示地址：https://50projects50days.com/projects/auto-text-effect/

在屏幕上显示一些文本，调整速度，使其显示得更快或更慢。

31、密码生成器

演示地址：https://50projects50days.com/projects/password-generator/

如果需要，设置密码长度——包括大写字母、小写字母、数字和符号。非常时尚。

32、按钮开关效果

演示地址：https://50projects50days.com/projects/good-cheap-fast/

33、笔记应用

演示地址：https://50projects50days.com/projects/notes-app/

34、动画倒计时

演示地址：https://50projects50days.com/projects/animated-countdown/

35、图像轮播

演示地址：https://50projects50days.com/projects/image-carousel/

令人惊叹的旋转木马，带有上一个和下一个按钮。

36、鼠标跟随效果

演示地址：https://50projects50days.com/projects/hoverboard/

使用光标在屏幕上创建炫酷的鼠标跟随效果。

37、卡片式选项卡

演示地址：https://50projects50days.com/projects/pokedex/

38、移动标签导航

演示地址：https://50projects50days.com/projects/mobile-tab-navigation/

单击四个按钮之一——家庭、工作、博客和关于我们——并查看不同的信息。

39、密码强度背景

演示地址：https://50projects50days.com/projects/password-strength-background/

密码越复杂，背景就越清晰。很酷，试试看。

40、3D背景框

演示地址：https://50projects50days.com/projects/3d-background-boxes/

将此图像分解为多个 3D 框，然后使用“魔术”按钮将其重新组合在一起。

41、验证账户 UI

演示地址：https://50projects50days.com/projects/verify-account-ui/

如果他们有您的电子邮件，他们会验证您的帐户。

42、实时用户过滤器

演示地址：https://50projects50days.com/projects/live-user-filter/

按名称或位置进行搜索。

43、反馈UI设计

演示地址：https://50projects50days.com/projects/feedback-ui-design/

可爱的设计，而且很容易阅读。

44、自定义范围滑块

演示地址：https://50projects50days.com/projects/custom-range-slider/

从 0 到 100，这个滑块可以帮助你做很多事情。

45、 Netflix 移动导航

演示地址：https://50projects50days.com/projects/netflix-mobile-navigation/

出色的 Netflix 风格导航。

46、测验应用程序

演示地址：https://50projects50days.com/projects/quiz-app/

回答问题，看看你最后的表现如何！

47、推荐信箱切换器

演示地址：https://50projects50days.com/projects/testimonial-box-switcher/

在您的推荐框中添加倒计时，并自动进入下一个评论。

48、随机图像效果

演示地址：https://50projects50days.com/projects/random-image-feed/

随机抓取图像并显示它们，刷新演示可以获取一组新图像。

49、待办事项列表

演示地址：https://50projects50days.com/projects/todo-list/

创建一个待办事项列表。

50、昆虫捕捉游戏

演示地址：https://50projects50days.com/projects/insect-catch-game/

一个好玩的游戏！

总结

以上就是50个web小项目的全部练习案例，这些项目，均可以作为学习练习或项目开发的参考。

作为学习，我们不需要一次性把50个小项目全部写完，但是，我们可以进行持续性的学习，每天练习一个或者两个，把学习编程变成一种习惯。

作为项目实际开发使用的话，选择自己认为合适的就可以了，没有不要进行全部练习。

最后，如果觉得我今天分享的内容不错，请记得给我点赞，如果你觉得有用，也请你分享给你身边喜欢编程或者做开发的朋友，也许能够帮助到它们。

学习更多技能

请点击下方公众号