Dare you? 5个编码前端挑战

全文共1433字,预计学习时长5分钟

Dare you? 5个编码前端挑战

来源:Pexels

想要拥有一个“穿衣显瘦,脱衣有肉”的完美身材,没有其他途径,你就得加强锻炼肌肉。

而编码就像肌肉,同其他肌肉一样需要锻炼。

想要擅长编码只有一种方法,那就是尽可能多地去编码。程序员每天早上醒来时都心怀对编码的渴望,但往往缺少对编码内容的创造性想法。

现在小芯将向各位“编码高手”发出挑战——5个前端挑战,在挑战中,做你所爱之事——编码。

加强创造性想法的锻炼,快速了解并上手运用它们吧!

1.纵向条形图

Dare you? 5个编码前端挑战

来源:https://status.fauna.com/#abou

纵向条形图在显示每日、每周、每月或年度数据方面很有用。上图示例中显示了每天的服务正常运行时间。

完成这项挑战后你将学会

· 如何使用JavaScript创建纵向条形图

· 如何使用CSS设置图表样式

· 如何使用JavaScript将数据可视化

2.掩码认证表单

Dare you? 5个编码前端挑战

来源:https://dashboard.stripe.com/l

什么是输入掩码?

输入掩码是一种控制向表单字段输入数据的字符,受到一系列规则严格制约,网站访问者在填写相关表单时无法打破这些规则。

完成这项挑战后你将学会

· 如何在表单和输入掩码中严格执行规则

· 如何使用JavaScript验证表单

· 如何使用CSS和JavaScript创建动态表单

更多输入掩码相关内容尽在WPForms

3.动态内容菜单

Dare you? 5个编码前端挑战

来源:https://motrix.app/

点击菜单时,看着内容不断减少——效果很酷,对吗?!

完成这项挑战后你将学会

· CSS过渡和动画。

· 如何重新定位布局和内容。

· 如何结合使用HTML和JavaScript,从而提高网站交互性

4.系统指标图

Dare you? 5个编码前端挑战

来源:https://status.fauna.com/#week

可视化销售、对话、毛利润和崩溃报告等内容更适合采用系统指标图,除了这些之外,还有其他许多内容都可以用到该图表。

每个复杂的应用程序都会通过某种方式利用系统指标图,所以在一开始就把图表绘制好很有必要。

完成这项挑战后你将学会

· 如何使用JavaScript创建系统图表

· 如何使用CSS设置图表样式

· 如何使用JavaScript将数据可视化

5. 气泡图

Dare you? 5个编码前端挑战

气泡图—来源:https://antv.vision/en

气泡图是一种显示三维数据的图表。每个实体都有三个关联数据集,绘制成一个磁盘,磁盘 xy 位置表示vᵢ的两个值,磁盘大小表示第三个值。

完成这项挑战后你将学会

· 如何使用JavaScript将数据可视化

· 使用JavaScript和CSS进行过渡、设置样式和交互

编码的确是一项很难掌握的技能,但只要我们牢记“世上无难事只要肯登攀”的至理名言,不断练习练习练习,相信早晚有一天可以攻克它!

那么现在,先从这5个前端挑战开始吧~

Dare you? 5个编码前端挑战

Dare you? 5个编码前端挑战

留言点赞关注

我们一起分享AI学习与发展的干货

如转载,请后台留言,遵守转载规范