Aprendendo SVG Do Início ao Avançado
4.8 (110 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
469 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Aprendendo SVG Do Início ao Avançado to your Wishlist.

Add to Wishlist

Aprendendo SVG Do Início ao Avançado

Aprenda tudo que você precisa para começar a criar incríveis interações com SVG na Web.
4.8 (110 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
469 students enrolled
Last updated 6/2017
Portuguese
Price: $70
30-Day Money-Back Guarantee
Includes:
  • 5.5 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • O que é o SVG
  • Como criar um SVG
  • As formas de se utilizar um SVG
  • Formas básicas e estrutura
  • Como estilizar com CSS
  • Criar elementos responsivos e adaptativos
  • Criar Sprites utilizando Gulp
  • Criar Animações como Loaders
  • Criar Animações utilizando SMIL
  • Introdução as Bibliotecas JS de manipulação
  • Como usar filtros
  • Acessibilidade no SVG
  • Trabalhar com Performance
View Curriculum
Requirements
  • Conhecimentos básicos de HTML e CSS. Javascript será um bônus.
  • Editor de Texto
  • Vontade de aprender =)
Description

Antes de comprar direto, peça um cupom, você pode ganhar ótimos descontos <3

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 é 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.

Existem 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.

Who is the target audience?
  • Pessoas que queiram aprender como o SVG funciona não só superficialmente.
  • Designers que desejam entregar um design melhorado e preparado para os desenvolvedores.
  • Desenvolvedores que queiram criar páginas mais dinâmicas, preocupados com performance e qualidade.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
45 Lectures
05:40:29
+
Introdução ao SVG
7 Lectures 27:43



Por que usar?
08:39

Quando usar?
02:54

Como criar?
01:12

Onde baixar?
02:13
+
Como usar e suas vantagens/desvantagens?
5 Lectures 18:37
Como imagem
03:41

Como background-image
03:26

Via iframe/object/embed
02:28

Como Data URIs
03:48

Como inline
05:14
+
A estrutura do SVG
6 Lectures 50:45
Plano Cartesiano
02:54

ViewBox e Viewport
09:18

preserveAspectRatio
06:55

Formas Básicas
13:18

O elemento Path
09:03

Elementos Containers
09:17
+
Estilizando o SVG
5 Lectures 34:07
Métodos para estilizar pt1
06:18

Métodos para estilizar pt2
08:02

Peso das propriedades
04:02

Fill e Stroke
08:25

Colorindo ícones com mais de uma cor
07:20
+
Projeto #1 - Construindo um SVG responsivo e adaptativo
2 Lectures 24:12
Tornando o SVG Fluido
11:25

Tornando o SVG Responsivo e Adaptativo
12:47
+
Sistemas de Ícones em SVG
2 Lectures 19:34
Fixando o uso de ícones com Symbol
11:49

Usando o Icomoon
07:45
+
Projeto #2 - Criando um boilerplate em Gulp para gerar sprites
1 Lecture 21:56
Criando nosso boilerplate
21:56
+
Projeto #3 - Criando um loader com SVG e CSS Animations
2 Lectures 18:33
Editando e preparando o visual do nosso loader
06:17

Usando Keyframes para animar
12:16
+
Animações SVG com SMIL
4 Lectures 21:27
Entendendo o que é SMIL
03:46

Criando uma animação simples
07:34

Famoso Morph Path
06:11

Especificando um caminho para a animação
03:56
+
Manipulando SVG com JS
2 Lectures 19:50
Utilizando JS para estilizar e criar novos elementos
12:51

Algumas bibliotecas aconselhadas
06:59
5 More Sections
About the Instructor
Willian Justen de Vasconcellos
4.6 Average rating
1,648 Reviews
10,578 Students
5 Courses
Front End Developer at Toptal

Olá, eu sou Willian Justen. Atualmente Front end Developer no Core Team da Toptal, onde ajudo a criar novas features e manter a maior plataforma de freelancers do mundo, trabalhando de qualquer lugar do mundo. Já trabalhei em empresas como a Globo, HUGE e Queremos/WeDemand, 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.