1. 信用卡表格
酷炫的信用卡形狀，流暢愉快的微互動。包括數位格式化、驗證和自動卡類型檢測。它基於 Vue.js 構建，並且完全響應式。 （你可以看到 .)
你將學到什麼：
- 處理和驗證表單
- 處理事件（例如，當欄位變更時）
- 了解如何在頁面上顯示和放置元素，尤其是出現在表單頂部的信用卡訊息
本文的翻譯得到了 EDISON Software 的支持， 和 .
2. 直方圖
直方圖是用矩形條表示分類資料的圖表或圖形，矩形條的高度或長度與它們所表示的值成比例。
它們可以垂直或水平應用。垂直長條圖有時稱為折線圖。
你將學到什麼：
- 以結構化且易於理解的方式顯示數據
- 另外：了解如何使用該元素
canvas以及如何用它繪製元素
您可以找到世界人口數據。它們按年份排序。
3. Twitter 心型動畫
早在 2016 年，Twitter 就在推文中引入了這個令人驚嘆的動畫。截至 2019 年，它看起來仍然很重要，那麼為什麼不自己創建一個呢？
你將學到什麼：
- 使用 CSS 屬性
keyframes - 操作 HTML 元素並為其設定動畫
- 結合 JavaScript、HTML 與 CSS
4. 具有搜尋功能的GitHub儲存庫
這裡沒有什麼特別的——GitHub 儲存庫只是一個美化的清單。
目標是顯示存儲庫並允許用戶過濾它們。使用 取得每個使用者的儲存庫。
GitHub 個人檔案頁面 -
你將學到什麼：
- 從API接收資料
- 顯示來自API的數據
- 過濾並顯示每次搜尋的相關數據
- 可選：如果您準備好迎接挑戰，請使用 ，使用 GraphQL 建置。 .
5.Reddit風格的聊天
聊天因其簡單易用而成為一種流行的溝通方式。但真正推動現代聊天室發展的是什麼？ WebSockets！
你將學到什麼：
- 使用WebSockets，即時通訊和數據更新
- 使用使用者存取等級（例如，聊天頻道的擁有者俱有以下角色）
admin，以及房間裡的其他人——user) - 處理和驗證表單 - 請記住，用於發送訊息的聊天視窗是
input - 建立並加入不同的聊天
- 處理個人訊息。用戶可以與其他用戶私聊。本質上，您將在兩個使用者之間建立 WebSocket 連線。
6. 條紋式導航
此導覽的獨特之處在於彈出視窗容器會進行轉換以適應內容。與開啟和關閉新彈出視窗的傳統行為相比，這種轉變更加優雅。
你將學到什麼：
- 將 CSS 動畫與轉場結合
- 調暗內容並將活動類別套用至浮動元素
首先嘗試自己做，但如果您需要幫助，請查看此 .
來源： www.habr.com