📝
🎨
🚀
30diasDeCSS
🚀
🎨
📝
30 dias de CSS(Cascading Style Sheets), é um desafio para ajudá-lo a melhorar suas habilidades de codificação fazendo mini projetos de animações diariamente durante 30 dias, utilizando HTML(HyperText Markup Language) e CSS (no momento que estou realizando esse projeto também estou aprendendo sobre o SASS(Syntactically Awesome Style Sheets) que é um pré-processador CSS, então também decidi adicioná-lo ao desafio)
Créditos a idealizadora do desafio 30 dias de CSS @MilenaCarecho
Website desenvolvido por mim com todos os meus desafios:
demo-website-30-days-of-css-sass.720p.mp4
🎯
Objetivo
30 dias de CSS é um desafio que vou aceitar (e você também pode participar) a partir de 23 de julho de 2022, que visa melhorar minhas habilidades em HTML5, CSS3 e SASS através da realização de projetos durante 30 dias
Se você chegou agora e quer começar o desafio, fique a vontade, o desafio não tem data de início fixa, cada um faz os seus 30 dias e pode personalizar com suas próprias regras, eu ficarei contente com sua participação
Para participar:
- Acesse o link e siga as instruções: MilenaCarecho/30diasDeCSS#1
🧾
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 de cada dia
Regras pra mim
- Eu criei algumas regras para mim que não quero impor a ninguém, mas fique à vontade para fazer o mesmo, se quiser!
- Se eu não concluir o projeto do dia, no próximo dia eu devo entregar o projeto atrasado, o do dia atual e mais um de bônus.
- No final do desafio ter um site com todos os projetos
- Fazer um post falando sobre os 30 dias
🛠️
Tecnologias utilizadas no processo
📚
Referências que usei para aprender W3schools - MDN Web Docs - Online Tutorials - Creative Creations - DarkCode - SASS
Principais tópicos que aprendi durante o processo
Hard Skills:
- Variáveis SASS (Muito usadas para armazenar informações e reutilizar)
- Módulo
@use
(Para carregar e combinar múltiplas folhas de estilo) - Arquivos SASS parciais (São arquivos que devem ser importados mas não compilados)
- Aninhamento de seletores e propriedades CSS (São úteis para combinar seletores e propriedades CSS)
@extend
(Permite estender um conjunto de propriedades CSS de um seletor para outro)- Uso do loop
@for
(Útil quando combinado com pseudo-seletores:nth-*
do CSS) @mixins
(Os mixins são parecido com a funcionalidade "@extend", porém os mixins funcionam e tem sua sintaxe semelhante com funções em JavaScript e aceitam parâmetros para tornar seu código mais flexível)- Loop
@each
(faz um loop sobre cada item em uma lista(semelhante a um array em JavaScript) ou mapa(semelhante a um objeto em JavaScript)) - Módulos de construção:
:map
Para mapear objetos:math
Realizar operações matemáticas
- Uso e manipulação de SVG(Scalable Vector Graphics)
- Fluxo de controle
@if
(Para executar o código com base em uma condição)
Soft Skills:
- Networking/Comunicação
- Disciplina
- Comprometimento
- Dedicação
- Criatividade
📋
Índice dos desafios: - Dia 01 - Ícones de mídias sociais em camada
✔️ - Dia 02 - Loaders animados
✔️ - Dia 03 - Letreiro com mudança de cor de texto
✔️ - Dia 04 - Botões com efeito de borda, hover e click
✔️ - Dia 05 - Joias do infinito com efeito de pulsar
✔️ - Dia 06 - Efeito de animação do texto brilhando
✔️ - Dia 07 - Preloader com efeito de ondulação
✔️ - Dia 08 - Radar animado
✔️ - Dia 09 - O pêndulo de Newton
✔️ - Dia 10 - Animação de troca de emojis
✔️ - Dia 11 - Botões de ícone com efeito hover
✔️ - Dia 12 - Animação de preenchimento ao passar o mouse
✔️ - Dia 13 - Placeholders loadings
✔️ - Dia 14 - Fundo de texto animado com efeito parallax
✔️ - Dia 15 - Animação de texto esfumaçado
✔️ - Dia 16 - Botão com efeito de pressionamento de tecla
✔️ - Dia 17 - Animação de bateria carregando
✔️ - Dia 18 - Texto flutuante e imersivo
✔️ - Dia 19 - Animação partículas de fundo
✔️ - Dia 20 - Botão com efeito hover de arco-íris
✔️ - Dia 21 - Gotejamento líquido em slow motion
✔️ - Dia 22 - Ícones de notificação e alertas saltitante
✔️ - Dia 23 - Botão de download com efeito hover e active
✔️ - Dia 24 - Infinite Loading
✔️ - Dia 25 - Checkbox com efeitos de selecionados
✔️ - Dia 26 - Esfera 3D de partículas
✔️ - Dia 27 - Explosão de confetes de festa
✔️ - Dia 28 - Efeito de bolhas submersas, subindo
✔️ - Dia 29 - Efeito de impressão de texto
✔️ - Dia 30 - Fogos de artifícios e cumprimento de finalização
✔️
Desafio dia 01 - Ícones de mídias sociais em camadas
Veja o funcionando | Meu codigo | Post LinkedIn
Desafio dia 02 - Loaders animados
Veja o funcionando | Meu codigo | Post LinkedIn
Desafio dia 03 - Letreiro com mudança de cor de texto
Veja o funcionando | Meu codigo | Post LinkedIn
Desafio dia 04 - Botões com efeito de borda, hover e click
Veja o funcionando | Meu codigo | Post LinkedIn
Desafio dia 05 - Joias do infinito com efeito de pulsar
Veja o funcionando | Meu codigo | Post LinkedIn
Desafio dia 06 - Efeito de animação do texto brilhando
Veja o funcionando | Meu codigo | Post LinkedIn
Desafio dia 07 - Preloader com efeito de ondulação
Veja o funcionando | Meu codigo | Post LinkedIn
Desafio dia 08 - Radar animado
Veja o funcionando | Meu codigo | Post LinkedIn
Desafio dia 09 - O pêndulo de Newton
Veja o funcionando | Meu codigo | Post LinkedIn
Desafio dia 10 - Animação de troca de emojis
Veja o funcionando | Meu codigo | Post LinkedIn
Desafio dia 11 - Botões de ícone com efeito hover
Veja o funcionando | Meu codigo | Post LinkedIn
Desafio dia 12 - Animação de preenchimento ao passar o mouse
Veja o funcionando | Meu codigo | Post LinkedIn
Desafio dia 13 - Placeholders loading
Veja o funcionando | Meu codigo | Post LinkedIn
Desafio dia 14 - Fundo de texto animado com efeito parallax
Veja o funcionando | Meu codigo | Post LinkedIn
Desafio dia 15 - Animação de texto esfumaçado
Veja o funcionando | Meu codigo | Post LinkedIn
Desafio dia 16 - Botão com efeito de pressionamento de tecla
Veja o funcionando | Meu codigo | Post LinkedIn
Desafio dia 17 - Animação de bateria carregando
Veja o funcionando | Meu codigo | Post LinkedIn
Desafio dia 18 - Texto flutuante e imersivo
Veja o funcionando | Meu codigo | Post LinkedIn
Desafio dia 19 - Animação partículas de fundo
Veja o funcionando | Meu codigo | Post LinkedIn
Desafio dia 20 - Botão com efeito hover de arco-íris
Veja o funcionando | Meu codigo | Post LinkedIn
Desafio dia 21 - Gotejamento líquido em slow motion
Veja o funcionando | Meu codigo | Post LinkedIn
Desafio dia 22 - Ícones de notificação e alertas saltitante
Veja o funcionando | Meu codigo | Post LinkedIn
Desafio dia 23 - Botão de download com efeito hover e active
Veja o funcionando | Meu codigo | Post LinkedIn
Desafio dia 24 - Infinite Loading
Veja o funcionando | Meu codigo | Post LinkedIn
Desafio dia 25 - Checkbox com efeitos de selecionados
Veja o funcionando | Meu codigo | Post LinkedIn
Desafio dia 26 - Esfera 3D de partículas
Veja o funcionando | Meu codigo | Post LinkedIn
Desafio dia 27 - Explosão de confetes de festa
Veja o funcionando | Meu codigo | Post LinkedIn
Desafio dia 28 - Efeito de bolhas submersas, subindo
Veja o funcionando | Meu codigo | Post LinkedIn
Desafio dia 29 - Efeito de impressão de texto
Veja o funcionando | Meu codigo | Post LinkedIn
Desafio dia 30 - Fogos de artifícios e cumprimento de finalização
Veja o funcionando | Meu codigo | Post LinkedIn
📝
Licença
Este projeto está sob a licença MIT.