Projeto Toast notification animado

Prepare-se para adicionar um toque especial às suas notificações! Neste mini projeto, você irá criar um Toast Notification animado usando Tailwind CSS.

Assistir agora

1. Introdução ao Projeto

Todos os nossos projetos são gratuitos, porém os tutoriais são exclusivos para membros do Codante PRO. Algumas aulas estão abertas para você experimentar.

Se gostar, considere assinar para ter acesso a todos os tutoriais e apoiar o projeto!

Seu Instrutor

Ícaro Harry

Codante.io

Fundador e Professor no Codante.io.

Dev front-end com 9 anos de experiência no Brasil e no exterior. Professor e mentor há mais de 3 anos, tendo ajudado mais de 600 pessoas a iniciarem suas carreiras na programação.

Aulas

Junte-se a outras 31 pessoas que estão fazendo esse mini projeto.

Projeto Toast notification animado

Assistir agora

Seu Instrutor

Ícaro Harry

Aulas

Introdução ao Projeto

Duas Tags novas no HTML: dialog e template.

Estruturando o botão no HTML

Estruturando e estilizando a notificação no HTML

Adicionando o avatar na notificação

Limitando o tamanho da mensagem

Evitando o layout shift da imagem

Implementando a tag html template

Fazendo o botão de close funcionar

Removendo a notificação após 5 segundos

Animações - Adicionando transição de saída

Animações - Animando a entrada

Junte-se a outras 31 pessoas que estão fazendo esse mini projeto.