Online kurz SVG animace

1h 54min
Čas
18
Kapitol
Programování
Kategorie
5.0
Hodnocení
Začátečník
Level
český
Jazyk kurzu

Popis online kurzu SVG animace

SVG grafika je tu s námi už pěknou řádku let, najdeš ji v podstatě na každém webu (a nejen na webu). Na rozdíl od rastrové grafiky nejsou vektory limitovány rozměry nebo rozlišením obrazovky a vypadají perfektně v jakékoliv velikosti - od malých ikonek po celostránkové ilustrace. Navíc si s SVG můžeš pomocí CSS nebo JavaScriptu hrát stejně jako s jakýmkoliv jiným elementem. Dynamicky měnit jeho vlastnosti nebo animovat celé SVG i jeho jednotlivé části. Takto kouzlit bys s běžným PNG nebo JPG obrázkem nedokázal.

Jako v každé správné hře musíš ale pro kouzlení získat nejdřív nějaké skills. Cílem tohoto online kurzu je pochopit vše od základů až po cool věci a posvítit si u toho na všechna temná zákoutí uvnitř SVG. Online kurz SVG animace je určen spíše začínajícím frontend vývojářům, ale i pokročilejší tam určitě najdou dostatek užitečných a nových informací. 

Co se naučíš

  • Jak s SVG zacházet v rámci projektu
  • Co se ukrývá uvnitř SVG kódu
  • Jak můžeš na SVG aplikovat CSS styly a animace
  • Jak si upravit SVG v kódu i v grafickém editoru
  • A také že SVG je ideální formát nejen na ikonky

Co všechno dostaneš

  • Videotutoriály o práci s SVG
  • Spoustu odkazů na doporučené zdroje a nástroje pro práci s SVG
  • Odkazy na další zajímavé články ke každému tématu
  • Veškerý zdrojový kód co během kurzu uvidíš
  • Certifikát o absolvovaní kurzu,
  • Podporu od lektora a odpovědi na tvoje otázky v diskuzním fóru
  • Garance vrácení peněz do 14 dnů v případě nespokojenosti s kurzem

Seznam kapitol

Co je SVG a proč ho používat
1.1 Proč by tě mělo SVG zajímat a co tě čeká v kurzu
Dostupné pouze po zakoupení přístupu
1.2 Rastr vs Vektor
Dostupné pouze po zakoupení přístupu
Jak SVG vložit a spravovat na projektu
2.1 Rychlé vložení
Dostupné pouze po zakoupení přístupu
2.2 Sprite mapa
Dostupné pouze po zakoupení přístupu
2.3 Čištění kódu
Dostupné pouze po zakoupení přístupu
Nahoď styl
3.1 Obrys a výplň
Dostupné pouze po zakoupení přístupu
3.2 Dědičnost
Dostupné pouze po zakoupení přístupu
Pojďme si kreslit
4.1 Základní tvary
Dostupné pouze po zakoupení přístupu
4.2 Cesty
Dostupné pouze po zakoupení přístupu
4.3 Bézierovy křivky
Dostupné pouze po zakoupení přístupu
Animace
5.1 CSS animace
Dostupné pouze po zakoupení přístupu
5.2 Hamburger
Dostupné pouze po zakoupení přístupu
5.3 Animace podél cest
Dostupné pouze po zakoupení přístupu
SVG nejsou jenom ikonky
6.1 Grafy
Dostupné pouze po zakoupení přístupu
6.2 Mapy, plány, schémata
Dostupné pouze po zakoupení přístupu
Kde loupit, co nedělat a co naopak ano
7.1 Zdroje SVG
Dostupné pouze po zakoupení přístupu
7.2 Bad practice
Dostupné pouze po zakoupení přístupu
7.3 Úprava SVG v aplikaci Figma
Dostupné pouze po zakoupení přístupu

Hodnocení kurzu

Online kurz SVG animace

Michal R.

Online kurz SVG animace

Rychlý kurz pro úplné začátečníky, kteří zaslechli, že nějaké SVG existuje, ale stále neví co se s ním dá dělat a jak funguje. Kurz je bez zbytečné omáčky okolo a je zaměřen na důležité věci. Super i nějaký ten příklad z praxe. Velmi mě překvapilo, jak lehce jde udělat příklad z "realitky". Určitě někde něco podobného použiji. Děkuji za tento kurz a jen tak dál. Držím palce v další tvorbě.

Tomáš J.

Podívej se i na tyto kurzy

Lukáš Svoboda Lukáš Svoboda
Frontend kodér a UI/UX designer