前端开发压力大、难度大、秃头快,但通过实践还是可以掌握这门技术的。只要肯下功夫,就能熟练解决前端开发领域的问题。是的,没错,成为一名优秀的前端开发人员的最有效方法之一就是解决尽可能多的挑战。要想成为前端开发高手,必须马上解决以下六大挑战。话不多说,今天我们需要编码的就是以下六种。1.CreditCardForm漂亮的信用卡表格,具有流畅的微交互。包括数字格式化、验证和卡片类型的自动检测。它是用Vue.js构建的,响应速度非常快。信用卡表单-https://github.com/muhamm解决这些挑战将获得以下收益表单处理和表单验证学习处理事件侦听器(例如,当字段更改时在信用卡上打印值)avalueonapage显示和定位元素,尤其是与表格重叠的信用卡2.从头开始??形成条形图条形图或条形表是按高度或长度及其表示的值显示分类数据的图表。条形图可以垂直或水平绘制。垂直条形图有时称为折线图。解决这些挑战将获得以下回报:以结构化和易于理解的方式显示数据可选:学习如何使用3.推特心形动画早在2016年,推特就推出了一款很棒的推文点赞动画。截至2019年,它看起来仍然很不错,那么为什么不尝试自己创建一个呢?为TwitterLikes设置动画解决这个挑战将获得以下奖励关键帧CSS属性如何工作如何操作和动画化HTML元素如何结合JavaScript、HTML和CSS4。具有搜索功能的GitHub存储库在这里没什么特别的——GitHub存储库实际上只是一个美化的列表。此任务是显示存储库并允许用户浏览存储库。每个用户都可以使用官方GitHubAPI拉取存储库。GitHubProfilePage-https://github.co解决这个挑战将有以下奖励如何从API获取数据如何在API中显示数据如何为每次搜索过滤和显示相关数据可选:如果你准备好了对于挑战,请使用使用GraphQL构建的v4API。5.Reddit风格的聊天室聊天室简单易用又有趣,是一种流行的交流方式。但是,是什么技术为现代聊天室提供动力呢?WebSockets!解决这个挑战将有以下收获:如何使用WebSockets、实时消息传递和数据来更新用户权限级别),而其他的是用户角色(用户))表单验证和表单处理——记住聊天框用于发送消息是输入元素如何创建和加入不同的聊天室私人聊天消息及其工作方式。用户可以与其他用户私下交流。本质上,将在两个用户之间建立WebSocket连接。6.Stripe-Stylenavigation这种导航的独特之处在于弹出框可以通过变形来适应内容。与完全打开和关闭新弹出窗口的传统方式相比,这种过渡具有一定的优雅。解决这个挑战的条纹导航将有以下好处如何结合CSS动画和过渡效果来淡化内容,并为悬停元素应用“活动”(active)类结束语感谢阅读,希望你有明眼人,能够发现编写一些有趣的代码并不断挑战自己。
