全文共1433字，预计学习时长5分钟
来源：Pexels
想要拥有一个“穿衣显瘦，脱衣有肉”的完美身材，没有其他途径，你就得加强锻炼肌肉。
而编码就像肌肉，同其他肌肉一样需要锻炼。
想要擅长编码只有一种方法，那就是尽可能多地去编码。程序员每天早上醒来时都心怀对编码的渴望，但往往缺少对编码内容的创造性想法。
现在小芯将向各位“编码高手”发出挑战——5个前端挑战，在挑战中，做你所爱之事——编码。
加强创造性想法的锻炼，快速了解并上手运用它们吧！
1.纵向条形图
来源：https://status.fauna.com/#about-this-site
纵向条形图在显示每日、每周、每月或年度数据方面很有用。上图示例中显示了每天的服务正常运行时间。
完成这项挑战后你将学会
· 如何使用JavaScript创建纵向条形图
· 如何使用CSS设置图表样式
· 如何使用JavaScript将数据可视化
2.掩码认证表单
来源：https://dashboard.stripe.com/login
什么是输入掩码？
输入掩码是一种控制向表单字段输入数据的字符，受到一系列规则严格制约，网站访问者在填写相关表单时无法打破这些规则。
完成这项挑战后你将学会
· 如何在表单和输入掩码中严格执行规则
· 如何使用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学习与发展的干货
编译组：刘露敏、周果
相关链接：
https://medium.com/better-programming/here-are-5-front-end-challenges-to-code-dec-2019-edition-7d691c4b023
如需转载，请后台留言，遵守转载规范
推荐文章阅读
长按识别二维码可添加关注
读芯君爱你
