/curso-de-svg

Contents from my course about SVG

Primary LanguageHTML

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 =)