🎨 Estudos CSS - Repositório Completo

📋 Sobre o Repositório

Este repositório contém meus estudos completos de CSS, organizados em dois níveis: Básico e Avançado. Cada nível inclui aulas teóricas detalhadas e exercícios práticos para consolidar o aprendizado.

---

📁 Estrutura do Repositório

Estudos-CSS/
├── CSS_Basico/
│   ├── Aulas/          # 7 aulas teóricas
│   ├── Exercicios/     # 7 exercícios práticos
│   └── README.md       # Documentação detalhada
└── CSS_Avancado/
    ├── Aulas/          # 8 aulas teóricas
    ├── Exercicios/     # 8 exercícios práticos
    └── README.md       # Documentação detalhada

---

🎯 Níveis de Estudo

📚 CSS Básico

Status: ✅ Completo
Aulas: 7 aulas teóricas
Exercícios: 7 exercícios práticos

📖 Conteúdo Abordado:

• ✅ Fundamentos do CSS
• ✅ Box Model e Layout
• ✅ Cores e Tipografia
• ✅ Display Properties
• ✅ Position e Z-Index
• ✅ Centralização e Flexbox
• ✅ Listas, Botões e Formulários

🧪 Exercícios Práticos:

1. Página Pessoal - Layout básico e responsividade
2. Galeria de Fotos - Grid layout e hover effects
3. Card de Produto - Cards modernos e animações
4. Modal Interativo - Overlay e animações CSS
5. Loading Spinner - Animações complexas com keyframes
6. Layout Responsivo - Mobile-first approach
7. Hamburgueria Completa - Projeto final integrado

---

🚀 CSS Avançado

Status: ✅ Completo
Aulas: 8 aulas teóricas
Exercícios: 8 exercícios práticos

📖 Conteúdo Abordado:

• ✅ CSS Grid Layout
• ✅ Flexbox Avançado
• ✅ Animações e Transições
• ✅ Transformações 3D
• ✅ Variáveis CSS (Custom Properties)
• ✅ Media Queries Avançadas
• ✅ Pseudo-elementos e Pseudo-classes
• ✅ Otimização e Performance

🧪 Exercícios Práticos:

1. Grid Layout Complexo - Layouts avançados com CSS Grid
2. Dashboard Responsivo - Interface administrativa moderna
3. Carrossel Interativo - Slider com animações suaves
4. Menu Hambúrguer Animado - Navegação mobile avançada
5. Cards 3D - Efeitos de profundidade e rotação
6. Formulário Dinâmico - Validação e feedback visual
7. Portfolio Moderno - Layout profissional responsivo
8. Game CSS - Jogo simples usando apenas CSS

---

🛠️ Tecnologias Utilizadas

Frontend

• HTML5 - Estrutura semântica
• CSS3 - Estilização moderna e avançada
• JavaScript - Interatividade e funcionalidades

Ferramentas de Desenvolvimento

• Visual Studio Code - Editor principal
• Live Server - Servidor de desenvolvimento
• Chrome DevTools - Debugging e inspeção
• Git - Controle de versão

---

🎨 Características dos Projetos

✅ Funcionais

Todos os exercícios são completamente funcionais e podem ser executados imediatamente.

📱 Responsivos

Layouts adaptáveis para diferentes tamanhos de tela, seguindo mobile-first approach.

🎭 Interativos

JavaScript para melhorar a experiência do usuário e adicionar funcionalidades.

🎨 Modernos

Design atual seguindo as melhores práticas da web moderna.

♿ Acessíveis

Implementação de boas práticas de acessibilidade em todos os projetos.

---

🚀 Como Usar

📥 Clonando o Repositório

git clone [url-do-repositorio]
cd Estudos-CSS

🏃‍♂️ Executando os Exercícios

1. Navegue até o diretório do exercício desejado
2. Abra o arquivo index.html no navegador
3. Ou use o Live Server para desenvolvimento

📖 Estudando as Aulas

1. Acesse o diretório /Aulas/ do nível desejado
2. Leia os arquivos .md em ordem sequencial
3. Pratique com os exercícios correspondentes

---

📚 Recursos de Aprendizado

🎯 Metodologia

• Teoria + Prática - Cada aula é acompanhada de exercícios
• Projetos Reais - Exercícios baseados em cenários reais
• Progressão Lógica - Conteúdo organizado do básico ao avançado
• Feedback Visual - Resultados imediatos e visuais

🎨 Conceitos Abordados

Layout e Posicionamento

• Box Model completo
• Flexbox e CSS Grid
• Position e z-index
• Responsividade e media queries

Estilização Avançada

• Animações e transições
• Transformações 2D e 3D
• Gradientes e sombras
• Variáveis CSS

Performance e Otimização

• CSS otimizado
• Animações performáticas
• Boas práticas de código
• Debugging e troubleshooting

---

🎯 Objetivos Alcançados

✅ Fundamentos Sólidos

• Compreensão completa do CSS
• Domínio de seletores e propriedades
• Capacidade de criar layouts complexos

✅ Projetos Práticos

• 15 exercícios funcionais
• Projetos baseados em cenários reais
• Portfolio de trabalhos demonstrados

✅ Responsividade

• Design mobile-first
• Layouts adaptáveis
• Experiência consistente em todos os dispositivos

✅ Modernidade

• Uso de técnicas CSS modernas
• Animações suaves e performáticas
• Código limpo e bem estruturado

---

📈 Progresso do Estudo

📊 Estatísticas

• Total de Aulas: 15 aulas teóricas
• Total de Exercícios: 15 exercícios práticos
• Horas de Estudo: Aproximadamente 80 horas
• Projetos Completados: 15 projetos funcionais

🎯 Próximos Passos

• Estudos de CSS Frameworks (Bootstrap, Tailwind)
• CSS-in-JS e Styled Components
• Otimização avançada de performance
• Animações complexas e micro-interações

---

🤝 Contribuições

Este repositório é pessoal e documenta minha jornada de aprendizado em CSS. Sinta-se à vontade para:

• 🔍 Explorar os projetos
• 💡 Sugerir melhorias
• 🐛 Reportar bugs
• 📚 Usar como referência

---

📄 Licença

Este projeto é de uso pessoal e educacional. Todos os direitos reservados.

---

📞 Contato

Para dúvidas ou sugestões sobre os estudos de CSS:

• 📧 Email: [email protected]
• 🐙 GitHub: https://github.com/Thiago-Tertuliano
• 💼 LinkedIn: www.linkedin.com/in/thiago-tertuliano

---

🎨 Desenvolvido com ❤️ e muito CSS!