Loading repository data…
ThesllaDev / repository
30DiasDeCSS-SASS
Animações diárias em CSS utilizando pré-processador SASS, criadas durante um desafio de 30 dias. O projeto explora propriedades e tópicos como responsividade, variáveis, nesting, partials, módulos e mixins, com foco no aprendizado e compartilhamento diário no LinkedIn.
#100daysofcode#30daysofcode#30diasdecss#animacao#animation#challenge
Live repository statistics
★ 11Stars
⑂ 0Forks
◯ 0Open issues
◉ 11Watchers
README preview
📝🎨🚀 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 ⭐ Repositório original do desafio: 30diasDeCSS ⭐
Website desenvolvido por mim com todos os meus desafios:
🌐 Link do website: https://theslladev.github.io/30DiasDeCSS-SASS/
🎯 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: https://github.com/MilenaCarecho/30diasDeCSS/issues/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:
: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
Í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 ✔️
- ✔️
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