介绍

本着培养良好习惯和#100DaysOfCode理念的精神，我们决定公开我们精心制作的“设计到代码”挑战列表，每天您都要重新创建（当然要使用您的变体！）原始设计屏幕截图，使其成为一个可以运行的网站/网络应用程序。

目标是用 HTML 和 CSS 反映提供的设计。如果您想深入了解，我们非常鼓励您通过 JS 或任何框架、库或工具添加交互性。也许您甚至可以用它来创建下一个微型 SaaS，谁知道呢？

我希望你能完成全部 100 项任务，并找到你梦想中的 Web 开发人员工作！🫡

1. 个人资料卡

这是练习 Flexbox 和提高 CSS 技能的完美挑战。

2. 加入购物袋

通过创建动态购物车体验来增强您的交互式设计技能。

3.移动导航

专注于响应式设计和用户友好的移动导航解决方案。

4. 联系我们

学习设计可访问且以用户为中心的联系表，以便更好地与客户互动。

5. 食谱

制作令人愉悦的食谱展示，以增强可读性和用户参与度。

6. 图片轮播

开发图像轮播来了解如何处理用户交互和转换。

7. 创建账户

构建一个用户友好的帐户创建界面并进行验证，以改进表单处理。

8.音乐活动

创建一个充满活力的界面来展示引人入胜且富有信息量的音乐事件。

9. 密码生成器

实现密码生成器来练习生成和处理安全的用户数据。

10. 注册页面

开发注册页面以改进表单布局和设计，重点关注用户体验。

11. 酒店预订

设计一个简化的酒店预订界面，提供无缝的预订体验。

12. 餐厅预订

创建带有图片、描述、评论和清晰的号召性用语按钮的餐厅名片。

13. 任务板

建立一个任务管理板，帮助用户组织项目和日常活动。

14.购物清单

创建包含订单摘要和促销代码部分的交互式购物清单。

15. 通知

实现一个具有不同类型通知的通知系统以及没有任何通知的空状态。

16. 毛茸茸的朋友

制作一份有趣的清单，让宠物爱好者通过宠物详细信息卡来探索宠物。

17. 文章滑块

实现一个文章滑块，通过流畅的导航突出显示特色故事。

18. 图像预览

制作一个图库应用程序，允许用户以不同的布局预览图像。

19.上传图片

创建一个支持拖放功能和预览的图像上传界面。

20. 卡钱包

开发一个数字钱包界面，显示用户卡、卡交易并允许添加新卡。

21. 定价计划

设计清晰简洁的定价计划界面，帮助用户选择正确的选项。

22. 消息

构建一个支持对话列表和个人 1-1 消息视图的消息应用程序界面。

23. 主页

创建一个引人入胜的主页，吸引访问者并引导他们浏览美丽的植物。

24. 电影票

开发一个电影票界面，让用户可以购买电影票、选择座位。

25. 会议日程

创建一个调度应用程序，帮助用户有效地计划和协调会议。

26. 工作公告板

创建一个对于寻找职业机会的用户来说直观的职位公告板。

27. 排行榜

构建排行榜界面，动态显示从今天到年份类别的用户排名和分数。

28.播放列表

实现一个音乐播放列表界面，允许打开一个带有当前歌曲的弹出窗口。

29. 视频播放器

创建一个支持各种媒体格式和用户交互的自定义​​视频播放器。

30. 发票

实现发票界面，帮助用户有效地管理账单和跟踪付款。

31. 仪表板

构建一个全面的仪表板，为用户提供见解和数据可视化。

32. 时事通讯

创建一个新闻通讯注册页面，以有吸引力的设计吸引用户的兴趣。

33. 品牌可视化工具

开发一个工具来创建和预览品牌元素，如配色方案。

34. 用户资料

设计一个包含各种菜单项的用户资料下拉菜单。

35. 给我们评分

创建反馈表来评价用户的体验并通过表情符号提供有价值的见解。

36.睡眠应用

设计一款睡眠跟踪应用程序，提供有关睡眠模式的见解并提供改善建议。

37. 探索航班

创建一个复杂的航班搜索过滤栏。

38.音乐节

建立一个带有导航和引人入胜的英雄部分的节日主页。

39.二维码扫描仪

实现二维码扫描器，通过快速扫描功能增强用户交互。

40. 常见问题解答

创建一个常见问题解答部分，通过手风琴组件为常见的客户问题提供清晰且有用的答案。

41. 创建工作区

设计一个虚拟工作区创建器，允许用户自定义他们的数字工作环境。

42. 设置外观

构建一个设置页面，让用户自定义其应用程序界面的外观。

43. 球员简介

为体育应用程序设计球员档案，展示球员统计数据、职业生涯亮点等。

44. 网站发布

创建带有倒计时器的启动页面。

45. 托管功能

建立一个托管服务功能页面，解释其可用的好处和套餐。

46. 客户名单

开发一个客户管理表，帮助组织用户并包含相关操作。

47. 导出文件

设计一个支持多种格式并包含可自定义设置的文件导出界面。

48. Markdown 帖子

创建一个基于 markdown 的组件，支持粗体、斜体和下划线文本，并具有提及用户功能。

49. 应用导航

为桌面和移动设备构建应用程序导航菜单。

50. 好友请求

设计一个社交网络功能来管理好友请求和用户互动。

51.下载应用程序

为应用程序创建包含清晰安装说明的下载页面。

52. 语言应用程序

开发一款包含课程、排行榜和互动内容的语言学习应用程序。

53. 结算页面

设计一个用户友好的计费页面，可以轻松查看订阅、付款方式和计费历史记录。

54. 文章摘要

创建包含图片、用户信息和相关统计数据的文章摘要卡。

55.进度条

为跟踪用户进度的应用程序设计引人入胜且信息丰富的进度条。

56. 项目路线图

构建一个可视化路线图并跟踪里程碑的项目管理工具。

57. 游戏简介

设计一个游戏资料界面，显示玩家成就、游戏统计数据和徽章。

58. 创建任务

开发一个简化项目管理和协作的任务创建表单。

59. 计算小费

创建一个小费计算器应用程序，帮助用户快速计算出适当的小费金额。

60. 代码验证

设计一个代码验证组件。

61. 机票

构建包含信息和二维码的机票卡预览。

62. 评价

设计一个推荐部分，展示用户反馈并与潜在客户建立信任。

63. 天气应用

开发一个提供准确预报和天气相关新闻的天气应用程序。

64. 文档管理器

创建一个类似博客的工具，用户可以在其中添加新文档和章节，删除和预览它们。

65. 利益

设计一个用户兴趣卡，让用户可以选择自己的兴趣。

66.导航用户界面

构建一个动态导航 UI，根据用户偏好进行调整并突出显示关键区域。

67.选择帐户

创建一个观看者的帐户选择页面。

68.用户满意度

制定用户满意度调查，收集有关用户体验的有意义的反馈。

69. 个人资料设置

设计一个全面的个人资料设置页面，允许用户管理他们的个人信息。

70. 饼干横幅

创建符合数据保护法规且用户友好的 Cookie 同意横幅。

71. 电子邮件客户端

构建一个电子邮件客户端界面，支持高效组织、阅读和撰写电子邮件。

72. 图片集

开发一个将图像组织成集合并提供标记功能的应用程序。

73. 推送通知

设计一个推送通知组件。

74. 管理帐户

创建一个帐户管理页面，提供用户帐户的清晰概览。

75. 添加镜头

开发一种允许将镜头添加到收藏夹的模式。

76. 电子书商店

设计一个为用户提供无缝浏览的电子书商店网站。

77. 应用程序集成

创建一个便于轻松集成各种应用程序和服务的界面。

78. 音频播放器

开发一个简单的音频播放器。

79. 付款计划

设计付款计划界面，为用户提供灵活的付款方式和清晰的信息。

80. 文章网格

为文章建立网格布局，以增强可读性和用户参与度。

81. 交货详情

创建配送详情卡，确保信息准确性，增强用户信任度。

82.调色板

开发一个供设计师创建和保存自定义调色板的工具。

83. 社交分享

设计一个社交媒体共享组件。

84.买一杯咖啡

创建一个捐赠页面，鼓励用户通过小额捐款来支持内容创作者。

85. 客户评论

开发客户评论卡，以提高透明度并帮助其他用户做出明智的决定。

86.聊天机器人

构建一个聊天机器人，可以引导用户浏览您的网站并回答常见问题。

87.图表

设计一系列交互式图表，以清晰、引人入胜的方式显示数据。

88.指纹

创建利用指纹扫描或通过 PIN 登录的功能。

89. 语音通话

开发语音呼叫卡，确保通话时的清晰度和可靠性。

90.我的设备

设计一张卡片，让用户管理和监控所有连接的设备。

91. 测验应用程序

构建一个提供各种问题并跟踪用户进度的测验应用程序。

92、搜索过滤器

开发搜索过滤器，帮助用户轻松找到他们正在寻找的内容。

93.任务管理器

创建一个任务管理器，帮助用户组织他们的日常任务和截止日期。

94. 时间小部件

设计一个提供各种时钟功能和自定义选项的时间小部件。

95。404

开发 404 错误页面，帮助迷失的用户找到返回的路或有用的资源。

96. 订阅卡

创建订阅卡功能，以吸引用户兴趣并增加注册量。

97. 设计资产

建立一个设计资产主页，用户可以在其中访问不同的设计文件。

98. 录音

开发一个可以捕捉清晰音频并提供共享和删除功能的录音应用程序。

99. 列卡

创建卡片布局，以列形式显示信息，以便更好地呈现数据。

100. 页脚

设计一个网站页脚，以清晰的布局包含所有必要的链接和信息。

概括

挑战有很多，但如果你完成了所有挑战，我相信你会获得新的、令人敬畏的开发技能，这将使你梦想的工作寻找过程加快 10 倍。