Dare you? 5个编码前端挑战
全文共1433字,预计学习时长5分钟
来源:Pexels
想要拥有一个“穿衣显瘦,脱衣有肉”的完美身材,没有其他途径,你就得加强锻炼肌肉。
而编码就像肌肉,同其他肌肉一样需要锻炼。
想要擅长编码只有一种方法,那就是尽可能多地去编码。程序员每天早上醒来时都心怀对编码的渴望,但往往缺少对编码内容的创造性想法。
现在小芯将向各位“编码高手”发出挑战——5个前端挑战,在挑战中,做你所爱之事——编码。
加强创造性想法的锻炼,快速了解并上手运用它们吧!
1.纵向条形图
来源:https://status.fauna.com/#abou
纵向条形图在显示每日、每周、每月或年度数据方面很有用。上图示例中显示了每天的服务正常运行时间。
完成这项挑战后你将学会
· 如何使用JavaScript创建纵向条形图
· 如何使用CSS设置图表样式
· 如何使用JavaScript将数据可视化
2.掩码认证表单
来源:https://dashboard.stripe.com/l
什么是输入掩码?
输入掩码是一种控制向表单字段输入数据的字符,受到一系列规则严格制约,网站访问者在填写相关表单时无法打破这些规则。
完成这项挑战后你将学会
· 如何在表单和输入掩码中严格执行规则
· 如何使用JavaScript验证表单
· 如何使用CSS和JavaScript创建动态表单
更多输入掩码相关内容尽在WPForms
3.动态内容菜单
来源:https://motrix.app/
点击菜单时,看着内容不断减少——效果很酷,对吗?!
完成这项挑战后你将学会
· CSS过渡和动画。
· 如何重新定位布局和内容。
· 如何结合使用HTML和JavaScript,从而提高网站交互性
4.系统指标图
来源:https://status.fauna.com/#week
可视化销售、对话、毛利润和崩溃报告等内容更适合采用系统指标图,除了这些之外,还有其他许多内容都可以用到该图表。
每个复杂的应用程序都会通过某种方式利用系统指标图,所以在一开始就把图表绘制好很有必要。
完成这项挑战后你将学会
· 如何使用JavaScript创建系统图表
· 如何使用CSS设置图表样式
· 如何使用JavaScript将数据可视化
5. 气泡图
气泡图—来源:https://antv.vision/en
气泡图是一种显示三维数据的图表。每个实体都有三个关联数据集,绘制成一个磁盘,磁盘 xy 位置表示vᵢ的两个值,磁盘大小表示第三个值。
完成这项挑战后你将学会
· 如何使用JavaScript将数据可视化
· 使用JavaScript和CSS进行过渡、设置样式和交互
编码的确是一项很难掌握的技能,但只要我们牢记“世上无难事只要肯登攀”的至理名言,不断练习练习练习,相信早晚有一天可以攻克它!
那么现在,先从这5个前端挑战开始吧~
留言点赞关注
我们一起分享AI学习与发展的干货
如转载,请后台留言,遵守转载规范