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 ⭐ Repositório original do desafio: 30diasDeCSS ⭐
🌐 Link do website: https://theslladev.github.io/30DiasDeCSS-SASS/
demo-website-30-days-of-css-sass.720p.mp4
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 😉
- Acesse o link e siga as instruções: MilenaCarecho/30diasDeCSS#1
- 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
- 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
W3schools - MDN Web Docs - Online Tutorials - Creative Creations - DarkCode - SASS
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:
:mapPara mapear objetos:mathRealizar 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
- 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 ✔️
Veja o funcionando | Meu codigo | Post LinkedIn
Veja o funcionando | Meu codigo | Post LinkedIn
Veja o funcionando | Meu codigo | Post LinkedIn
Veja o funcionando | Meu codigo | Post LinkedIn
Veja o funcionando | Meu codigo | Post LinkedIn
Veja o funcionando | Meu codigo | Post LinkedIn
Veja o funcionando | Meu codigo | Post LinkedIn
Veja o funcionando | Meu codigo | Post LinkedIn
Veja o funcionando | Meu codigo | Post LinkedIn
Veja o funcionando | Meu codigo | Post LinkedIn
Veja o funcionando | Meu codigo | Post LinkedIn
Veja o funcionando | Meu codigo | Post LinkedIn
Veja o funcionando | Meu codigo | Post LinkedIn
Veja o funcionando | Meu codigo | Post LinkedIn
Veja o funcionando | Meu codigo | Post LinkedIn
Veja o funcionando | Meu codigo | Post LinkedIn
Veja o funcionando | Meu codigo | Post LinkedIn
Veja o funcionando | Meu codigo | Post LinkedIn
Veja o funcionando | Meu codigo | Post LinkedIn
Veja o funcionando | Meu codigo | Post LinkedIn
Veja o funcionando | Meu codigo | Post LinkedIn
Veja o funcionando | Meu codigo | Post LinkedIn
Veja o funcionando | Meu codigo | Post LinkedIn
Veja o funcionando | Meu codigo | Post LinkedIn
Veja o funcionando | Meu codigo | Post LinkedIn
Veja o funcionando | Meu codigo | Post LinkedIn
Veja o funcionando | Meu codigo | Post LinkedIn
Veja o funcionando | Meu codigo | Post LinkedIn
Veja o funcionando | Meu codigo | Post LinkedIn
Veja o funcionando | Meu codigo | Post LinkedIn
Este projeto está sob a licença MIT.