1. 信用卡表格
酷炫的信用卡形状，流畅愉快的微交互。 包括数字格式化、验证和自动卡类型检测。 它基于 Vue.js 构建，并且完全响应式。 （你可以看到 .)
你将学到什么：
- 处理和验证表单
- 处理事件（例如，当字段更改时）
- 了解如何在页面上显示和放置元素，尤其是出现在表单顶部的信用卡信息
这篇文章是在爱迪生软件的支持下翻译的，它 和 .
2. 直方图
直方图是用矩形条表示分类数据的图表或图形，矩形条的高度或长度与它们所表示的值成比例。
它们可以垂直或水平应用。 垂直条形图有时称为折线图。
你将学到什么：
- 以结构化且易于理解的方式显示数据
- 另外：了解如何使用该元素
canvas以及如何用它绘制元素
您可以找到世界人口数据。 它们按年份排序。
3. Twitter 心形动画
早在 2016 年，Twitter 就在其推文中引入了这个令人惊叹的动画。 截至 2019 年，它看起来仍然很重要，那么为什么不自己创建一个呢？
你将学到什么：
- 使用 CSS 属性
keyframes - 操作 HTML 元素并为其设置动画
- 结合 JavaScript、HTML 和 CSS
4. 具有搜索功能的GitHub存储库
这里没有什么特别的——GitHub 存储库只是一个美化的列表。
目标是显示存储库并允许用户过滤它们。 使用 获取每个用户的存储库。
GitHub 个人资料页面 -
你将学到什么：
- 从API接收数据
- 显示来自API的数据
- 过滤并显示每次搜索的相关数据
- 可选：如果您准备迎接挑战，请使用 ，使用 GraphQL 构建。 .
5.Reddit风格的聊天
聊天因其简单易用而成为一种流行的交流方式。 但真正推动现代聊天室发展的是什么？ WebSockets！
你将学到什么：
- 使用WebSockets，实时通信和数据更新
- 使用用户访问级别（例如，聊天频道的所有者具有以下角色）
admin，以及房间里的其他人——user) - 处理和验证表单 - 请记住，用于发送消息的聊天窗口是
input - 创建并加入不同的聊天
- 处理个人消息。 用户可以与其他用户私聊。 本质上，您将在两个用户之间建立 WebSocket 连接。
6. 条纹式导航
此导航的独特之处在于弹出窗口容器会进行转换以适应内容。 与打开和关闭新弹出窗口的传统行为相比，这种转变更加优雅。
你将学到什么：
- 将 CSS 动画与过渡相结合
- 调暗内容并将活动类应用于浮动元素
首先尝试自己做，但如果您需要帮助，请查看此 .
来源： habr.com