Contents from my course about SVG
HTML JavaScript CSS
Permalink
Failed to load latest commit information.
como-usar Add "como usar" module May 13, 2016
elementos-containers Add elementos containers May 18, 2016
estilizando-svg-css
estrutura-svg Add preserveAspectRatio May 17, 2016
filtros Add filtros May 28, 2016
formas-basicas Add formas basicas topic May 17, 2016
history Add history module May 31, 2016
icomoon_4_icons Add icomoon files May 22, 2016
icones-svg Add ícones svg May 22, 2016
illustrator Add illustrator images May 28, 2016
js Add js module May 31, 2016
loader-svg Add loader svg May 24, 2016
logo-responsiva Add Disney Jun 2, 2016
smil-animations Fix example May 29, 2016
strokes Add strokes module May 31, 2016
svg-sprite-boilerplate Fix Gulpfile, svg must be outside of mode Jun 7, 2016
.gitignore Add gulp boilerplate May 23, 2016
readme.md Removing pre-venda link Jul 16, 2016

readme.md

Curso de SVG

Esse repositório servirá para armazenar todo o conteúdo passado durante o curso de SVG.

Objetivo

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.

Instrutor

Olá! Eu sou Willian. Atualmente Freelance Web Engineer, onde ajudo a criar novas experiências e tendências para Web através de vários projetos no Brasil e fora dele. Já trabalhei também em empresas como a Globo.com, HUGE e Queremos, sempre focando na qualidade e melhor entrega para o usuário. Escrevo bastante no meu blog, falando sobre SVG, CSS, JS e minhas experiências como desenvolvedor.

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
    • Elementos Containers
  • Estilizando o SVG

    • Métodos para estilizar
    • 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

Compra

Se você já curtiu a ementa e/ou conhece o meu trabalho e quer me apoiar.

Link para compra

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. Até mesmo uma issue aqui nesse repositório =)