Getting started with SVG for Web Design

with

In this course, Gary Simon will teach you how to use SVG (Scalable Vector Graphics) in your web design projects. You’ll learn how to design and animate various web elements including a loader, animated icons, and line animations. Alongside gaining skills in CSS, JavaScript and HTML, you’ll also learn how to use various design applications including Adobe Illustrator, Adobe Photoshop and also Adobe Edge Animate. And lastly, you’ll learn how to make all these SVG animations responsive.

1× speed

Free Preview: Getting started with SVG for Web Design

Introduction

03:36

1.Introduction
1 lesson, 03:36

Free Preview
1.1
Introduction
03:36

2.Learn How to Create an Animated Loading SVG
4 lessons, 25:58

Free Preview
2.1
Designing in Adobe Illustrator
05:09

2.2
Saving and Setting the SVG Settings
03:51

2.3
Animating the SVG with CSS
13:19

2.4
Making the SVG Responsive
03:39

3.Learn How to Create Responsive SVG Icons
3 lessons, 29:13

3.1
Design in Adobe Illustrator
13:26

3.2
Making the SVG Icons Responsive
06:43

3.3
Adding Interactivity to Our Icons
09:04

4.How to Create a Website with Multiple SVG Elements
8 lessons, 1:15:10

4.1
Mockup Design in Adobe Photoshop & Adobe Illustrator: Part 1
14:32

4.2
Mockup Design in Adobe Photoshop & Adobe Illustrator: Part 2
13:14

4.3
Mockup Design in Adobe Photoshop & Adobe Illustrator: Part 3
07:40

4.4
Writing the HTML
10:10

4.5
Writing the CSS
09:42

4.6
Animating the Top Pencil
03:55

4.7
Animating the Notepads in Edge Animate
10:37

4.8
Animating the Button
05:20

5.Conclusion
1 lesson, 01:23

5.1
Course Overview
01:23


Preview for Getting started with SVG for Web Design
Lessons:
17
Length:
2.3 hours
Gary Simon has a 1 year old daughter named Natalie, and a beautiful wife Stephanie. He has two other interests aside from his internet business, which are fitness/lifting and being a hobby musician.
+ Expand Bio- Collapse Bio