Um formato legal de cartão de crédito com microinterações suaves e divertidas. Inclui formatação de números, verificação e detecção automática de tipo de cartão. Ele é construído em Vue.js e também é totalmente responsivo. (Você pode ver aqui.)
Um histograma é um gráfico ou gráfico que representa dados categóricos com barras retangulares com alturas ou comprimentos proporcionais aos valores que representam.
Eles podem ser aplicados verticalmente ou horizontalmente. Um gráfico de barras verticais às vezes é chamado de gráfico de linhas.
O que você aprenderá:
Exiba dados de forma estruturada e compreensível
Além disso: Aprenda como usar o elemento canvas e como desenhar elementos com ele
é você pode encontrar dados da população mundial. Eles são classificados por ano.
3. Animação de coração no Twitter
Em 2016, o Twitter introduziu esta animação incrível para seus tweets. Em 2019, ele ainda parece perfeito, então por que não criar um você mesmo?
O que você aprenderá:
Trabalhar com atributo CSS keyframes
Manipular e animar elementos HTML
Combine JavaScript, HTML e CSS
4. Repositórios GitHub com função de pesquisa
Não há nada sofisticado aqui – os repositórios do GitHub são apenas uma lista glorificada.
O objetivo é exibir os repositórios e permitir ao usuário filtrá-los. Usar API oficial do GitHub para obter repositórios para cada usuário.
Os bate-papos são uma forma popular de comunicação devido à sua simplicidade e facilidade de uso. Mas o que realmente alimenta as salas de chat modernas? WebSockets!
O que você aprenderá:
Use WebSockets, comunicação em tempo real e atualizações de dados
Trabalhe com níveis de acesso do usuário (por exemplo, o proprietário de um canal de chat tem a função admin, e outros na sala - user)
Processar e validar formulários - lembre-se, a janela de chat para envio de mensagem é input
Crie e participe de diferentes chats
Trabalhe com mensagens pessoais. Os usuários podem conversar com outros usuários em particular. Essencialmente, você estabelecerá uma conexão WebSocket entre dois usuários.
6. Navegação estilo listra
O que torna esta navegação única é que o contêiner popover se transforma para se ajustar ao conteúdo. Há uma elegância nesta transição em comparação com o comportamento tradicional de abrir e fechar um novo popover.
O que você aprenderá:
Combine animações CSS com transições
Escureça o conteúdo e aplique a classe ativa ao elemento flutuante
Tente fazer isso sozinho primeiro, mas se precisar de ajuda, dê uma olhada nisso guia passo a passo.