全文共1305字，預計學習時長
4分鐘
圖片來自Olav Ahrens Røtne（Unsplash
前端開發壓力大，困難多，頭禿得快，但通過實踐還是可以熟練掌握這項技術。如果願意付出努力，那就可以熟練地解決前端開發領域中的問題。對，沒錯，要想成為優秀的前端開發人員，最有效的方法之一就是去解決儘可能多的挑戰。
成為前端開發大師，必須立即解決以下六個挑戰。話不多說，今天我們需要進行編碼的是以下六個。
1. 信用卡表格（CreditCard Form）
一張美觀的信用卡表格具有流暢的微交互作用。包括數字格式化、驗證和卡類的自動檢測。它由Vue.js構建，並且響應速度很快。
信用卡表格-https://github.com/muhamm
解決這些挑戰將有如下收穫
· 表格處理和表格驗證
· 學會掌控事件監聽器（例如，當字段更改時，就會在信用卡上打印值）
· 瞭解如何在頁面上顯示和定位元素，尤其是與表格重疊的信用卡
2. 從零開始形成條形圖
條形圖或條形表是用高度或長度與其所代表的值來顯示分類數據的圖表。
條形圖可以垂直繪製或水平繪製。垂直條形圖有時稱為折線圖。
解決這些挑戰將有如下收穫
· 以結構化且易於理解的方式顯示數據
· 可選：學會如何使用<canvas>元素以及如何用其繪製元素/<canvas>
早在2016年，Twitter就針對推文點贊推出了很棒的動畫。直到2019年，它看起來仍然很不錯，那麼為什麼不試試自己創建一個呢？
解決這一挑戰將有如下收穫
· keyframes CSS屬性如何工作
· 如何操作和製作HTML動畫元素
· 如何結合JavaScript、HTML和CSS
4. 具有搜索功能的GitHub存儲庫
在這沒有什麼特別的——GitHub存儲庫其實就是個美化過的列表。
此任務是顯示存儲庫，並允許用戶通過存儲庫。每個用戶都可以使用官方GitHubAPI提取存儲庫。
GitHub個人資料頁面-https://github.co
解決這一挑戰將有如下收穫
· 如何從API獲取數據
· 如何顯示API中的數據
· 如何過濾和顯示每次搜索的相關數據
· 可選：如果準備好迎接挑戰，請使用GraphQL構建的v4 API。
5. Reddit風格聊天室
聊天室易於使用且十分有趣，是一種流行的交流方式。但是，是什麼技術支持了現代聊天室？WebSockets！
解決這一挑戰將有如下收穫
· 如何使用WebSockets、實時通訊以及數據更新
· 用戶權限級別的工作方式（例如，聊天室的所有者為管理者角色 (admin)，而其他人則是使用者角色(user)）
· 表格驗證和表格處理-請記住，用於發送消息的聊天框是輸入 (input)元素
· 如何創建和加入不同的聊天室
· 私聊消息及其工作方式。用戶可以私下與其他用戶通信。本質上，將在兩個用戶之間建立WebSocket連接。
6. 條紋式（Stripe-Style）導航
此導航的獨特之處在於：彈出框通過變形，可與內容相適應。與完全打開和關閉新彈出框的傳統方式相比，這種過渡具有一定優雅之處。
條紋式導航
解決這一挑戰將有如下收穫
· 如何結合CSS動畫和過渡效果
· 淡入淡出內容，以及為懸停的元素應用``活動'' (active)類
結論
感謝閱讀，希望大家擁有一顆慧眼，可以發現一些有趣的東西來編碼，不斷挑戰自我。
我們一起分享AI學習與發展的乾貨
閱讀更多 讀芯術 的文章
