Objetivo do Curso

O curso tem como objetivo passar desde os conceitos básicos do SVG até os mais avançados, permitindo criar basicamente o que se quiser com SVG. O curso será desenvolvido em pequenos módulos com vídeos curtos, facilitando assim o aprendizado e o desenvolvimento do aluno, visando sempre uma didática simples, concisa e bastante aplicada a prática de trabalho.

Existirão alguns projetos ao decorrer do curso, para aplicarmos os conceitos aprendidos, fazendo com que o aluno perceba sua evolução e também comece a trabalhar mais em sua parte criativa e com código.

Ementa

• Introdução ao SVG
  • Introdução do Curso
  • História
  • O que é?
  • Por que usar?
  • Quando usar?
  • Como criar?
  • Onde baixar?
• Como usar e suas vantagens/desvantagens?
  • Como imagem
  • Como background-img
  • Via iframe/object/embed
  • Como Data URIs
  • Inline SVG
• A estrutura do SVG
  • Plano Cartesiano
  • ViewBox e ViewPort
  • preserveAspectRatio
  • Formas Básicas
  • Elemento Path
  • Groups, defs, use e symbol
• Estilizando o SVG
  • Métodos para estilizar e Peso das Propriedades
  • Fill e Stroke
  • Colorindo ícones com mais de uma cor
• Projeto #1 - Construindo um SVG responsivo e adaptativo
  • Tornando o SVG Fluido
  • Tornando o SVG adaptativo
• Sistemas de Ícones em SVG
  • Fixando o uso de ícones com Symbol
  • Usando o Icomoon
• Projeto #2 - Criando um boilerplate em Gulp para gerar sprites
• Projeto #3 - Criando um loader com SVG e CSS Animations
  • Editando e preparando o visual do nosso loader
  • Usando Keyframes para animar
• Animações SVG com SMIL
  • Entendendo o que é SMIL
  • Criando uma animação simples
  • Famoso Morph Path
  • Especificando um caminho para a animação
• Manipulando SVG com JS
  • Utilizando JS para estilizar e criar novos elementos
  • Algumas bibliotecas aconselhadas
• Criando animações com as propriedades de Stroke
  • Criando um loader animado usando propriedades do stroke
  • Fazendo o efeito de desenhar
  • Usando o scroll para controlar o desenho
• Filtros SVG
  • Alguns tipos de filtros
  • Criando uma animação com filtros
• Acessibilidade no SVG
  • Dicas e informações para deixar tudo mais acessivel
• Performance
  • Criando e Exportando com Illustrator
  • Usando ferramentas para otimizar
• Busque Conhecimento
  • Projeto Awesome-SVG e outros
  • Agradecimentos

Certificado

Todos os alunos que terminarem o curso irão receber um certificado de conclusão

Repositório do Curso

Todas as informações aqui, também podem ser encontradas no repositório do curso, lá eu disponibilizarei os exemplos que serão feitos no curso e também irei tirar todas as dúvidas através das issues que podem ser abertas lá.

Formas de compra

Através da Udemy

Contato

Qualquer dúvida ou curiosidade, é só mandar um email para willianjustenqui@gmail.com ou então falar comigo através de qualquer rede social.