Make Art by Coding – Web Animation

Description

Learn to create shapes and graphics with this fantastic coding course! If your ambition is to work as a graphic designer, or web designer, this is the perfect course to bolster your portfolio of qualifications.
The type of image you will learn to design is called Scalable Vector Graphic (SVG), which differs from other image formats, in the sense that it is crafted by code and maths, which means it can be scaled up to any size needed.
Scalable Vector Graphics
SVG is an XML-based vector image format which supports interactivity and animation. It is a popular file type because all major modern web browsers have SVG rendering support, while SVG images can also be edited with any text editor or drawing software.
Learn how to create images by coding instead of using a design with the help of this intuitive file type.
KEY LEARNING POINTS
This is a course that will teach you to create images in the SVG format, using code rather than design software. This means you will be able to transfer this skill into a web or graphic design career.
Create shapes and graphics that are scalable depending on the size you need
Implement the Bezje curve which models smooth curves which can scale indefinitely
Learn how to save your images in other formats
Get to grips with the ViewBox and its attributes to help you view and scale your creations
Test functionality and cross browser compatibility
Work with polygons and how to effectively add them to your animations
Create and add trees and other objects to bring your animations to life
ADVANTAGES OF THE COURSE
Gain real experience by working on actual projects
Incorporate these skills and combine them with CSS to use images you create in web pages.
Build images that can scale indefinitely
Style shapes and interact with them in JavaScript
Alter shapes for use on webpages
This course is taught by a highly-experienced instructor
24/7 access to the course content for 12 months
Units of Study
Introduction Part 1
Introduction Part 2
Creating Rectangle and Circles
Creating Lines
SVG viewBox
Polygon element Part 1
Polygon element Part 2
Polygon element Part 3
Polygon element Part 4
Box Attributes
Box Attributes (Cont’d)
Bezier Curves Part 1
Bezier Curves Part 2
Bezier Curves Part 3
Bezier Curves Part 4
Quadratic Bezier Curves
Arcs
Arcs (Cont’d)
SVG-edit and Illustrator
Styling Inline SVG.mov
SVG in IMG tag
SVG in Background IMG
Modifying Inline SVG
SVG with Javascript
Adding Trees
Creating Trees
Creating Trees (contd)
Remove Button.mov
Adding Other Type of Trees
Sorting Trees
Sorting Trees (cont’d)
Refactoring Javascript
Refactoring Javascript (Cont’d)
Saving as SVG
Saving as SVG (Cont’d)
Save as PNG
Downloading Images.mov
Refactoring Part 1
Refactoring Part 2
Refactoring Part 3
Main Functionality
Main Functionality (Cont’d)
Testing Cross Browser Compatibility
Checking DOMcontentloaded
Styling Part 1
Styling Part 2
Styling Part 3
Modal for PNG Part 1
Modal for PNG Part 2
Modal for PNG Part 3
More Javascript Refactoring
Styling The Modal More
Adding Size Reset Button
Outro