Skip to content

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.

License

Notifications You must be signed in to change notification settings

ThesllaDev/30DiasDeCSS-SASS

Repository files navigation

📝🎨🚀 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/

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:

🧾 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

  • HTML CSS SASS

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: 📋

Desafio dia 01 - Ícones de mídias sociais em camadas

Dia 01

Veja o funcionando | Meu codigo | Post LinkedIn


Desafio dia 02 - Loaders animados

Dia 02

Veja o funcionando | Meu codigo | Post LinkedIn


Desafio dia 03 - Letreiro com mudança de cor de texto

Dia 03

Veja o funcionando | Meu codigo | Post LinkedIn


Desafio dia 04 - Botões com efeito de borda, hover e click

Dia 04

Veja o funcionando | Meu codigo | Post LinkedIn


Desafio dia 05 - Joias do infinito com efeito de pulsar

Dia 05

Veja o funcionando | Meu codigo | Post LinkedIn


Desafio dia 06 - Efeito de animação do texto brilhando

Dia 06

Veja o funcionando | Meu codigo | Post LinkedIn


Desafio dia 07 - Preloader com efeito de ondulação

Dia 07

Veja o funcionando | Meu codigo | Post LinkedIn


Desafio dia 08 - Radar animado

Dia 08

Veja o funcionando | Meu codigo | Post LinkedIn


Desafio dia 09 - O pêndulo de Newton

Dia 09

Veja o funcionando | Meu codigo | Post LinkedIn


Desafio dia 10 - Animação de troca de emojis

Dia 10

Veja o funcionando | Meu codigo | Post LinkedIn


Desafio dia 11 - Botões de ícone com efeito hover

Dia 11

Veja o funcionando | Meu codigo | Post LinkedIn


Desafio dia 12 - Animação de preenchimento ao passar o mouse

Dia 12

Veja o funcionando | Meu codigo | Post LinkedIn


Desafio dia 13 - Placeholders loading

Dia 13

Veja o funcionando | Meu codigo | Post LinkedIn


Desafio dia 14 - Fundo de texto animado com efeito parallax

Dia 14

Veja o funcionando | Meu codigo | Post LinkedIn


Desafio dia 15 - Animação de texto esfumaçado

Dia 15

Veja o funcionando | Meu codigo | Post LinkedIn


Desafio dia 16 - Botão com efeito de pressionamento de tecla

Dia 16

Veja o funcionando | Meu codigo | Post LinkedIn


Desafio dia 17 - Animação de bateria carregando

Dia 17

Veja o funcionando | Meu codigo | Post LinkedIn


Desafio dia 18 - Texto flutuante e imersivo

Dia 18

Veja o funcionando | Meu codigo | Post LinkedIn


Desafio dia 19 - Animação partículas de fundo

Dia 19

Veja o funcionando | Meu codigo | Post LinkedIn


Desafio dia 20 - Botão com efeito hover de arco-íris

Dia 20

Veja o funcionando | Meu codigo | Post LinkedIn


Desafio dia 21 - Gotejamento líquido em slow motion

Dia 21

Veja o funcionando | Meu codigo | Post LinkedIn


Desafio dia 22 - Ícones de notificação e alertas saltitante

Dia 22

Veja o funcionando | Meu codigo | Post LinkedIn


Desafio dia 23 - Botão de download com efeito hover e active

Dia 23

Veja o funcionando | Meu codigo | Post LinkedIn


Desafio dia 24 - Infinite Loading

Dia 24

Veja o funcionando | Meu codigo | Post LinkedIn


Desafio dia 25 - Checkbox com efeitos de selecionados

Dia 25

Veja o funcionando | Meu codigo | Post LinkedIn


Desafio dia 26 - Esfera 3D de partículas

Dia 26

Veja o funcionando | Meu codigo | Post LinkedIn


Desafio dia 27 - Explosão de confetes de festa

Dia 27

Veja o funcionando | Meu codigo | Post LinkedIn


Desafio dia 28 - Efeito de bolhas submersas, subindo

Dia 28

Veja o funcionando | Meu codigo | Post LinkedIn


Desafio dia 29 - Efeito de impressão de texto

Dia 29

Veja o funcionando | Meu codigo | Post LinkedIn


Desafio dia 30 - Fogos de artifícios e cumprimento de finalização

Dia 30

Veja o funcionando | Meu codigo | Post LinkedIn


📝 Licença

Este projeto está sob a licença MIT.

About

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.

Topics

Resources

License

Stars

Watchers

Forks