Make Art by Coding: Create an SVG Scene for Web Animation!

Focused View

John Bura,Mammoth Interactive

6:07:47

322 View

1 - Introduction.mp4

08:27

2 - Introduction contd.mp4

06:50

3 - Creating Rectangle and Circles.mp4

04:25

4 - Creating Lines.mp4

03:01

5 - SVG viewBox.mp4

07:07

6 - Polygon Element Part 1.mp4

03:33

7 - Polygon Element Part 2.mp4

02:26

8 - Polygon Element Part 3.mp4

03:29

9 - Polygon Element Part 4.mp4

04:33

10 - viewBox Attributes.mp4

04:57

11 - viewBox Attributes Contd.mp4

02:24

12 - Path Elements.mp4

07:10

13 - Path Elements Contd.mp4

02:55

14 - Bezier Curves Part 1.mp4

07:01

15 - Bezier Curves Part 2.mp4

05:12

16 - Bezier Curves Part 3.mp4

02:44

17 - Bezier Curves Part 4.mp4

06:03

18 - Quadratic Bezier Curves.mp4

04:01

19 - Arcs.mp4

08:57

20 - Arcs Contd.mp4

05:05

21 - SVGedit and Illustrator.mp4

06:24

22 - Styling Inline SVG.mp4

06:42

23 - SVG in IMG tag.mp4

06:42

24 - SVG in Background IMG.mp4

05:15

25 - Modifying Inline SVG.mp4

11:53

26 - SVG with Javascript.mp4

10:20

27 - Adding Trees.mp4

06:17

28 - Creating Trees.mp4

11:46

29 - Creating Trees Contd.mp4

03:25

30 - Remove Button.mp4

07:04

31 - Adding Other Tree Types.mp4

15:17

32 - Sorting Trees.mp4

08:40

33 - Sorting Trees Contd.mp4

04:31

34 - Refactoring Javascript.mp4

06:09

35 - Refactoring Javascript Contd.mp4

07:03

36 - Saving as SVG.mp4

08:52

37 - Saving as SVG Contd.mp4

05:48

38 - Save as PNG.mp4

07:21

39 - Downloading Images.mp4

08:04

40 - Refactoring Part 1.mp4

05:18

41 - Refactoring Part 2.mp4

06:15

42 - Refactoring Part 3.mp4

03:37

43 - Main Functionality.mp4

14:12

44 - Main Functionality Contd.mp4

03:37

45 - Testing CrossBrowser Compatibility.mp4

13:43

46 - Checking DOMcontentload.mp4

02:39

47 - Styling Part 1.mp4

10:12

48 - Styling Part 2.mp4

07:13

49 - Styling Part 3.mp4

06:10

50 - Modal for PNG Part 1.mp4

08:01

51 - Modal for PNG Part 2.mp4

06:27

52 - Modal for PNG Part 3.mp4

06:18

53 - More Javascript Refactoring.mp4

06:40

54 - Styling the Modal Some More.mp4

09:33

55 - Adding Size Reset Button.mp4

08:30

56 - Outro.mp4

01:29

57 - 1000 value Source Code.html

57 - sourcefiles.zip

58 - Please leave us a rating.html

59 - Bonus Lecture Get 130 courses.html

Description

Learn to create simple vector art with HTML, CSS, & JavaScript. A beginners course for web developers & digital artists.

What You'll Learn?

Recognize why you should use SVGs for web development.
Create SVG shapes.
Embed SVG on a web page.
Make a landscape scene entirely with code!

Who is this for?

Anyone who wants to make art for web pages using code!

What You Need to Know?

Basic understanding of HTML, CSS and JavaScript is highly helpful. To get a fast introduction, enroll in our "Kids Coding -Introduction to HTML, CSS and JavaScript" course.

An Internet connection to follow along in the free text editor JS Bin.

No SVG knowledge is required.

Illustrator CC or a free alternative

More details

Description
This course was funded by a wildly successful Kickstarter.

Gain hands-on experience with coding real projects!Â Make vector graphics by coding in this awesome course for beginners. Scaleable Vector Graphics (SVG) is an image format that uses vectors, in contrast to other image formats like jpg, gif, or pngs, which are raster graphics. SVG is made with math. For this reason, it can scale indefinitely! This makes it great for making logos, icons, and simple designs.

Why use SVG?

It has good support among all modern browsers, and it's an open standard.
It uses smaller file sizes compared to bitmapped files.
You can style shapes in CSS and interact with them in JavaScript! Thus you can programmatically alter shapes for use on web pages.

Enroll today to join the Mammoth community.
Who this course is for:
Anyone who wants to make art for web pages using code!

User Reviews

Rating

average 0

Total votes0

Focused display

John Bura is has been a successful Udemy instructor since 2011. John Bura has been programming games since 1997 and teaching since 2002. John is the owner of the game development studio Mammoth Interactive. This company produces XBOX 360, iPhone, iPad, android, HTML 5, ad-games and more. Mammoth Interactive recently sold a game to Nickelodeon! John has been contracted by many different companies to provide game design, audio, programming, level design and project management. To this day John has 40 commercial games that he has contributed to. Several of the games he has produced have risen to the top 10 in the Apple's app store. In his spare time John likes to play ultimate Frisbee, cycle and work out.

Mammoth Interactive

Instructor's Courses

Mammoth Interactive is a leading online course provider in everything from learning to code to becoming a YouTube star. Mammoth Interactive courses have been featured on Harvard’s edX, Business Insider and more.Over 11 years, Mammoth Interactive has built a global student community with 1.1 million courses sold. Mammoth Interactive has released over 250 courses and 2,500 hours of video content.Founder and CEO John Bura has been programming since 1997 and teaching since 2002. John has created top-selling applications for iOS, Xbox and more. John also runs SaaS company Devonian Apps, building efficiency-minded software for technology workers like you."I absolutely love this course. This is such a comprehensive course that was well worth the money I spent and a lot more. Will definitely be looking at more Mammoth Interactive courses when I finish this." – Student Matt W."Very good at explaining the basics then building to more complex features." – Student Kevin L.Try a course today.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.