/30-days-css

Desafio de 30 Dias de Mini Projetos em CSS

Primary LanguageCSS

30diasDeCSS 🚀

30 dias de CSS3, é um desafio que visa ajudá-lo a melhorar suas habilidades de codificação fazendo mini projetos diarios utilizando HTML5 e CSS3

Aceitei o desafio que inicialmente foi prosposta pela @MilenaCarecho.

Se você chegou agora e quer começar o desafio, fique a vontade, o desafio não tem data de inicio fixa, cada um faz os seus 30 dias, eu ficarei honrada com sua participação 😉

Como realizo o desafio

Eu realizei esse projeto da seguinte forma: Procuro por tutorial de mini projetos de CSS3 no YouTube e tento reproduzir sem olhar o código, caso tenha alguma coisa que eu não consiga fazer, eu olho o tutorial e vou anotando os conceitos que não consegui aplicar.

Regras gerais

Realizar um projeto por dia. Compartilhe seu progresso nas mídias sociais (Twitter, Facebook, Linkedin etc.) usando a hashtag #30diasDeCSS O projeto deve ser concluído até 23:59

Ínicio

• 03/07/2023

Dia 01 - Text Typing Animation

Vídeo sem título ‐ Feito com o Clipchamp (1)

Código - Dia 01

Conceitos que aprendi e reforcei:
• CSS animations
• Keyframes
• nth-of-type()

Dia 02 - Loading Animation

Gravando_2023-07-04_123859_AdobeExpress

Código - Dia 02

Conceitos que aprendi e reforcei:
• ::before e ::after
• Keyframes
• :hover
• Transform
• Animation

Dia 03 - Card Hover Effects

Design sem nome(1)

Código - Dia 03

Conceitos que aprendi e reforcei:
• :hover
• Transform
• Transition

Dia 04 - Draw Line Around Button

Design sem nome(2)

Código - Dia 04

Conceitos que aprendi e reforcei:
• nth-child()
• keyframes
• Transform-origin
• Transition-delay

Dia 05 - Flip Animation

Design sem nome(5)

Código - Dia 05

Conceitos que aprendi e reforcei:
• Animation
• keyframes