Desafio para criar 30 mini projetos utilizando HTML, CSS e SASS em 30 dias

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

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)