Cool credit card shape with smooth and nice micro-interactions. Includes number formatting, validation, and automatic card type detection. It is built on Vue.js and is also fully responsive. (You can see here.)
A bar chart is a chart or graph that represents categorical data with rectangular bars with heights or lengths proportional to the values ββthey represent.
They can be applied vertically or horizontally. A vertical bar chart is sometimes called a line chart.
What you will learn:
Display data in a structured and understandable way
Optional: Learn how to use the element canvas and how to draw elements with it
Here you can find world population data. They are sorted by year.
3. Twitter Heart Animation
Back in 2016, Twitter introduced this amazing animation for their tweets. As of 2019, it still looks decent, so why not create one yourself?
What you will learn:
Work with CSS Attribute keyframes
Manipulate and animate HTML elements
Combine JavaScript, HTML and CSS
4. GitHub repositories with search function
There is nothing unusual here - the GitHub repositories are just a glorified list.
The goal is to display the repositories and allow the user to filter them. Use official GitHub API to get repositories for each user.
Chats are a popular way to communicate due to their simplicity and ease of use. But what actually powers modern chat rooms? web sockets!
What you will learn:
Use WebSockets, apply real-time communication and data updates
Work with user access levels (for example, the owner of a chat channel has the role adminand others in the room user)
Process and validate forms - remember, the chat box for sending a message is input
Create and join different chats
Work with private messages. Users can communicate with other users privately. Essentially, you will be establishing a WebSocket connection between two users.
6. Stripe-style navigation
The uniqueness of this navigation is that the popover container transforms to fit the content. There is an elegance to this transition compared to the traditional behavior of opening and closing a new popover.
What you will learn:
Combine CSS animations with transitions
Shade content and apply active class to floating element
Try doing it yourself first, but if you need help, check out this walkthrough.