🎨 CURSO COMPLETO

CSS Fundamentals

Curso prático e completo de CSS com foco em design moderno, responsividade, animações e técnicas avançadas de estilização.

📚 14 Aulas
⏱️ ~12 horas
🎯 Iniciante a Avançado
🎨 Projetos Visuais

🎨 Sobre o Curso

Este curso foi desenvolvido para ensinar CSS de forma prática e progressiva, desde os fundamentos básicos até técnicas avançadas de layout, animações e design responsivo. Cada aula inclui exemplos visuais, exercícios práticos e projetos reais.

🎯 O que você vai aprender

  • Fundamentos CSS: Seletores, propriedades e cascata
  • Layout Moderno: Flexbox, Grid e técnicas de posicionamento
  • Design Responsivo: Mobile-first e media queries
  • Animações CSS: Transitions, transforms e keyframes
  • Metodologias: BEM, OOCSS e arquitetura CSS
  • Pré-processadores: Sass/SCSS e ferramentas modernas
  • CSS Avançado: Custom properties, calc() e CSS moderno
  • Projetos Reais: Landing pages, dashboards e componentes

📚 Módulos do Curso

🎨 Aula 1: Fundamentos CSS

Sintaxe básica, seletores, propriedades essenciais e como conectar CSS ao HTML.

⏱️ Duração: 50 min | 🎯 Nível: Iniciante
Iniciar Aula 🎨

🎯 Aula 2: Seletores e Especificidade

Tipos de seletores, combinadores, pseudo-classes e como funciona a especificidade CSS.

⏱️ Duração: 45 min | 🎯 Nível: Iniciante
Iniciar Aula 🎯

🎨 Aula 3: Cores e Tipografia

Sistemas de cores, fontes web, hierarquia tipográfica e design visual.

⏱️ Duração: 40 min | 🎯 Nível: Iniciante
Iniciar Aula 🎨

📦 Aula 4: Box Model e Layout

Modelo de caixas, margin, padding, border e conceitos fundamentais de layout.

⏱️ Duração: 55 min | 🎯 Nível: Intermediário
Iniciar Aula 📦

🧩 Aula 5: Flexbox e Grid Layout

Sistemas de layout moderno, organização de elementos e criação de interfaces complexas.

⏱️ Duração: 60 min | 🎯 Nível: Intermediário
Iniciar Aula 🧩

� Aula 6: Responsividade

Design responsivo, mobile-first e adaptação de layouts para diferentes dispositivos.

⏱️ Duração: 65 min | 🎯 Nível: Intermediário
Iniciar Aula �

✨ Aula 7: Transforms e Transitions

Transformações 2D/3D, transições suaves e efeitos visuais.

⏱️ Duração: 50 min | 🎯 Nível: Avançado
Iniciar Aula ✨

🎬 Aula 8: Animações CSS

Keyframes, animações complexas, performance e melhores práticas.

⏱️ Duração: 60 min | 🎯 Nível: Avançado
Iniciar Aula 🎬

🔮 Aula 9: CSS Moderno

Custom properties, calc(), CSS functions e recursos mais recentes.

⏱️ Duração: 55 min | 🎯 Nível: Avançado
Iniciar Aula 🔮

⚙️ Aula 10: Pré-processadores CSS

Sass, SCSS, variáveis, mixins, funções e organização de código.

⏱️ Duração: 65 min | 🎯 Nível: Avançado
Iniciar Aula ⚙️

🌐 Aula 11: CSS e JavaScript

Integração CSS-JS, manipulação dinâmica de estilos e bibliotecas.

⏱️ Duração: 55 min | 🎯 Nível: Avançado
Iniciar Aula 🌐

🏗️ Aula 12: Metodologias CSS

BEM, OOCSS, SMACSS e organização de código CSS em projetos grandes.

⏱️ Duração: 45 min | 🎯 Nível: Avançado
Iniciar Aula 🏗️

⚡ Aula 13: Performance CSS

Otimização, Critical CSS, lazy loading e métricas de performance.

⏱️ Duração: 50 min | 🎯 Nível: Avançado
Iniciar Aula ⚡

🚀 Aula 14: Projeto Final

Construção de um website completo aplicando todas as técnicas aprendidas.

⏱️ Duração: 120 min | 🎯 Nível: Projeto
Iniciar Aula 🚀

🔧 Pré-requisitos

💻 O que você precisa

  • HTML Básico: Conhecimento fundamental de HTML
  • Editor de Código: VS Code com extensões CSS
  • Navegador Moderno: Chrome DevTools para debug
  • Criatividade: Vontade de criar designs incríveis! 🎨
Ferramenta Descrição Status Download
VS Code Editor com suporte completo a CSS Essencial Baixar
CSS Peek Extensão para navegação CSS Recomendado Instalar
Live Sass Compiler Compilador Sass em tempo real Opcional Instalar
Prettier Formatador de código CSS Recomendado Instalar

🎓 Metodologia de Ensino

🎨 Visual Learning

Exemplos visuais ricos com antes/depois para cada conceito CSS ensinado.

💻 Hands-on Design

Cada aula inclui exercícios práticos de design e estilização.

🚀 Do Zero ao Pro

Evolução gradual dos conceitos básicos até técnicas profissionais avançadas.

🏆 Projetos Reais

Criação de interfaces modernas que podem compor seu portfólio.

🛠️ Ferramentas Complementares

🎨 Recursos de Design

  • Figma: Para prototyping e design systems
  • Adobe Color: Paletas de cores harmoniosas
  • Google Fonts: Tipografias web gratuitas
  • Unsplash: Imagens de alta qualidade para projetos
  • Can I Use: Compatibilidade de propriedades CSS

🎨 Design Tools

  • • Figma Community
  • • Adobe XD
  • • Sketch (Mac)
  • • InVision

🔧 Dev Tools

  • • Chrome DevTools
  • • Firefox Dev Edition
  • • Sass/SCSS
  • • PostCSS

📚 Referências

  • • MDN CSS Reference
  • • CSS-Tricks
  • • Can I Use
  • • W3C CSS Specs

🎯 Inspiração

  • • Dribbble
  • • Behance
  • • CodePen
  • • Awwwards