HTML5 Online Course
From modern websites and interactive data visualizations to games and hybrid apps, users today expect smooth animations and engaging transitions as part of any application. Fortunately, HTML5—the latest version of the HTML standard—offers a powerful set of tools to help you meet those expectations.
In this video-based course, you’ll learn how to harness HTML5 APIs such as the DOM, CSS3, Canvas, SVG, and WebGL to create rich and dynamic motion graphics. Along the way, you'll also gain a solid understanding of the foundational math concepts behind complex animations—essential skills for any modern web developer.
Who should take this course?
The HTML5 Online Course is ideal for beginners who want to start a career in web development, as well as students, hobbyists, and professionals looking to strengthen their foundation in building web pages. It’s also suitable for graphic designers, UI/UX enthusiasts, and content creators aiming to understand how modern websites are structured. No prior coding experience is required, making it a perfect starting point for anyone new to web technologies.
Course Curriculum
Introduction
- Easing and Acceleration
- Interpolation
- Introduction
- What is the Difference between a Transition and an Animation?
- Introduction to Vectors
- Vector Examples
Rendering Elements
- Rendering Elements Using DOM Objects #1
- Rendering Elements Using DOM Objects #2
- Rendering Elements Using the HTML5 Canvas Object #1
- Rendering Elements Using the HTML5 Canvas Object #2
- Rendering Elements Using SVG with Raphaël #1
- Rendering Elements Using SVG with Raphaël #2
Animating Elements
- Setting up a Conventional Rendering Scene
- Using the DOM to Animate Objects
- Animating Elements Using CSS3 Transitions
- Animating Elements Using CSS3 Keyframes
- Using SVG with Raphaël to Animate Objects
- Animating Elements Using the HTML5 Canvas Object #1
- Animating Elements Using the HTML5 Canvas Object #2
Introduction to WebGL
- Downloading and Setting Up Three.JS
- Introduction to Cameras
- Rendering Simple Geometries
- Animating Geometries
- Importing Models from Blender
- Rendering Imported Models
- Animating Imported Models
Complex Animations
- Animating Spritesheets #1
- Animating Spritesheets #2
- Particle Generators #1
- Particle Generators #2
- Particle Generators #3
Practical examples
- Practical Examples #1
- Practical Examples #2
- Practical Examples #3