Learn SVG Animation - With HTML, CSS & Javascript (Udemy.com)

Learn how these powerful animation are created using HTML,CSS & Javascript

( 48 Reviews )

Created by: Code Collective

Produced in 2017

What you will learn

Optimise SVG files for use online
Prototype animations in the online tool Codepen
Use Javascript to calculate the length of an SVG Path
Create SVG's that make use of Masks & Gradients

Quality Score

Content Quality

Video Quality

Qualified Instructor

Course Pace

Course Depth & Coverage

Overall Score : 82 / 100

Live Chat with CourseDuck's Co-Founder for Help

Need help deciding on a css course? Or looking for more detail on Code Collective's Learn SVG Animation - With HTML, CSS & Javascript? Feel free to chat below.

Join CourseDuck's Online Learning Discord Community

Course Description

Looking to enhance your next web development project? Or learn one of the most sort after animation skills?
Within two hours you will have created Six SVG projects looking at a number of different animation techniques. Using animation within the user interface of a website is now standard practise. This fast and effective course will introduce use to new ways to improve your client projects.

All SVG files are provided but we do also work through creating the SVG files in Adobe Illustrator(or Similar). Lessons are taught with video screencasts, explained in detail as we work through real projects created directly for this course.
Projects Include
- Animating Logos
- Animating Social Icons
- Hand Drawing Text
- CSS animation properties explained
- Using Gradients over Text and Icons (Cross Browser)
- Using Masks
- Using CodePen
- Introduction to SVG Optimisation Online
For a complete beginner to SVG we recommend taking our other course in the series.

Who this course is for:

Should already know what an svg file is
Should have used html/css before - not suitable for absolute beginner to coding
Students who want to improve their svg animations and try new techniques but don't know how

Time: 1.5h

*Some courses are excluded from this sale. Coupon not working? If the link above doesn't drop prices, clear the cookies in your browser and then click this link here.
Also, you may need to apply the coupon code directly on the cart page to get the discount.

Coupon Code

Instructor Details

Code Collective

4.1 Rating
48 Reviews

Get ahead in the developer world. Learn new skills that will help take your career to the nest level.
Over 1000 positive reviews and 20k students enjoy my courses.
If you need a specific course please contact us and we can create courses on anything related to coding.

Reviews

4.1

48 total reviews

5 star 4 star 3 star 2 star 1 star

Write a Review

By Mogamat Zain Daniels on

I REALLY FIND IT INTEREST IN CODING AND MANAGED TO ASK SOMEONE THE HELP ME.IM SURE THE MORE I PRACTICE THE BETTER I WILL BECOME

By Paul N on

Interesting course and kind invitation to dig further. I had to tweak the examples (add transform-box:fill-box along with transform-origin: 50% 50%) to have them work on my machine (Chrome 78).

By Abel Chavez on

The course is very instructive. Perhaps it can be extended by including keyboard events or another kind of interactions.

By Gabriel Gomez on

Excellent course, specific and right to the point. Covers all topics of the subject.Thanks

By Jessica Viel on

Really nice course ^^ really enjoy all the course but especially the course on gradients ^^ thanks !

By Julian French on

Course was great. I learned a lot. There were a couple hiccups that I had to figure out by googling, stack overflow, and looking at the questions. It doesn't seem like the instructor has kept active in responding to the questions.

By Sherman Dye on

I did learn some good lessons from this course, but I felt more time could have been spent to showcase different effects, and also to explain some different things like browser compatibility issues, the purpose of the viewbox, and other basic things about SVG.

By Christopher Little on

The instructor is good and I learned a lot, but there could be a lot more content for the price. Very short course. Great for cliff-note people.

By Jerremy on

Course content is almost identical to the course SVG & CSS Animation - Using HTML & CSS, no amazing and new things to learn

By Sam Stoker on

Another good course by the Code Collective. I took this class the same day and immediately after taking their other course, "SVG & CSS Animation - Using HTML & CSS." I appreciate how their classes are short, to the point and easy to understand. Though, I do feel this probably should have been part of the other course rather than being a separate one. It's much shorter than most courses for the same price. But, that said, I feel I have a good grasp of basic SVG animation now that I didn't have before, so I'll call that a win.

By Fernando Castro Garca on

Un cuso prctico muy bien explicado y con ejemplos claros y sencillos.Altamente recomendable!!!

By Graeme Plamer on

This course was good but there was one mistake in the code which I fixed via the Q&A. Also, it would be good to supply all the code from each exercise, CSS, HTML, JS.