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

05c2ae835a15ad51d6fca0e24168ea7a.png

英文 | 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/

9f7c721d4d6a8bb85d9ee06f56ef1a17.png

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

2、进展步骤选项卡

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

2d96109e11c01c27e2ebf0d5b76b5e70.png

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

3、旋转导航动画

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

b29d0d5f0eebca42b2b583051777b119.png

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

4、隐藏的搜索小部件

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

6186dcbf593de8e2da0e0e550658ce2c.png

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

5、加载模糊动画效果

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

cac520972eed14bbb5cc994399fa5382.png

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

6、滚动动画

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

728440273dbfa39cbc4fd94520ff6140.png

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

7、拆分登陆页面

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

ee8bba159f182996bca9fef9fa037c58.png

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

8、形成波浪

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

c611f5240369be9165de658c2ab40c66.png

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

9、音板按钮效果

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

e6a552ee6e8230ecfb6bdf1568f2b1d6.png

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

10、爸爸笑话选项卡效率

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

e2c670c5e98ac629b1663f82ae1a89d2.png

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

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

11、事件键码

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

73583de2e97185e7026e56d9c4c0c5cc.png

按任意键并获取键码。

12、常见问题解答效果

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

ef55a44370e0aef18fabb8d3cce1e77e.png

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

13、随机选择器

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

065ced6b76076738a4e44dbbdf92b2ef.png

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

14、动画导航

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

9c52a579df832daf97f0807b11911fcd.png

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

15、 递增计数器

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

d0173d36bffe01db5176d4738635f646.png

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

16、加载动画-喝水效果

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

7b274ada7dfcee9a84a86e12458bea69.png

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

17、电影应用

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

b822398a0bf828861c4375f055a63c82.png

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

18、背景滑块

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

149ec385797a20582ec32a6a88ab6454.png

非常圆滑的外观。

19、主题时钟

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

eb9142cb99a08bbb6c50aa339f2f73a7.png

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

20、按钮波纹效果

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

46ac6fc34d384efd2fe13acb0928f952.png

21、 拖放效果

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

78ab23e934c2e021f7e364b1f090b1e3.png

很酷的拖放功能!

22、绘图应用程序

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

1b35c874ed7459ecaf10a2ed6d0948a0.png

很酷的应用程序。

23、旋转三角形动画

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

cc44375606deeb009141a80e94985139.png

24、卡片式选项卡

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

0ec40c283fe682672be2c6a56c95d67a.png

25、粘性导航栏

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

b2edcea3328894be9c464750daef8dbd.png

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

26、双垂直滑块

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

8e42271d16dd4427075b999d5fe01d00.png

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

27、汉堡叠加通知效果

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

a589d4cff9b6b63b6cd872bbc3579745.png

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

28、Github 个人资料卡

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

d785f6cae075b087becb7388399ab130.png

29、双击心

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

3faa43058b9463014c2296fd20e7669e.png

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

30、自动打字效果

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

7bf9023a303c915841120a44fc046432.png

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

31、密码生成器

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

aec79cf5f1836734c1197e31e0ca3288.png

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

32、按钮开关效果

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

f661a06573c8ebc5f58d5a9e550b725d.png

33、笔记应用

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

ddc356a6dbcfa720c4c5bd3de3afcbff.png

34、动画倒计时

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

061e5189cf31d19d03a7f9c3476d904e.png

35、图像轮播

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

c3afd41dacc56dfe1dbb9afd69a16d61.png

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

36、鼠标跟随效果

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

ce24a56ac0edeb0f17964ca5b2384ca0.png

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

37、卡片式选项卡

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

358441ad732c6a432484bc61db9cfb6c.png

38、移动标签导航

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

30b8d550f957b052ffa187843e9ae74c.png

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

39、密码强度背景

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

e539aaef0de589aa3da2bbca135403be.png

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

40、3D背景框

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

c09cfef29b4c78bee94cbfb44a7aa3e7.png

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

41、验证账户 UI

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

f7239b2621a5839ef5b8c1bcc1531cb2.png

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

42、实时用户过滤器

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

23919b7dd9120da980b4249aa1eb29ef.png

按名称或位置进行搜索。

43、反馈UI设计

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

a902ac3a7e67344d23c89e73e9a89dee.png

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

44、自定义范围滑块

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

564e0ebe9c16341b693d5c27c8868be2.png

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

45、 Netflix 移动导航

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

b130e06b4c3e93d2fae40ed6b7301ae7.png

出色的 Netflix 风格导航。

46、测验应用程序

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

2138266c2d73d49871c9f4a396d7ca55.png

回答问题,看看你最后的表现如何!

47、推荐信箱切换器

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

a8fd7b495b8f5d2c1fae4c0d031c4d52.png

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

48、随机图像效果

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

9bcc9fa532646ba6266d8417f82101f8.png

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

49、待办事项列表

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

07d25c94b5a82996e8348fd65e2f8e8a.png

创建一个待办事项列表。

50、昆虫捕捉游戏

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

3a8c60f4ce3fe629cb5babc2cba9bde7.png

一个好玩的游戏!

总结

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

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

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

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

学习更多技能

请点击下方公众号

67ef566e1f8adae6ab82cf41dc04e3ca.gif

cc0c986fc8006b4958d507546ab5b9f4.png

1d5a592ab1f0535d657cf05da08bcb46.png

  • 0
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值