Coding HTML5 animations & banners made easy
4.5 (39 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
204 students enrolled

Coding HTML5 animations & banners made easy

Through a case study, learn how to easily create animations for the web using HTML, CSS and Greensock JS library (GSAP).
4.5 (39 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
204 students enrolled
Created by Yashin Soraballee
Last updated 10/2017
English
Current price: $13.99 Original price: $19.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 1 hour on-demand video
  • 2 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Assignments
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Use Photoshop to export images
  • Take measurements from Photoshop
  • Organise, code and style an HTML file
  • Animate HTML elements using TweenMax library from Greensock
Course content
Expand all 11 lectures 01:06:37
+ Building the banner
5 lectures 36:59
Adding the title text with correct webfont
09:12
Adding the logo
01:58
The middle screen and the CTA button
10:58
The last screen
07:51
+ Animating the banner
4 lectures 21:57
Animating the first screen
10:52
Animating the photos
04:58
Animating the last screen
04:04
Looping the animation
02:03
This assignment will help you practice what you learned during the lectures while recreating the animation.
Create the animated banner
1 question
Requirements
  • Have some very basic knowledge of HTML & CSS
  • Basic photoshop Skills
Description

This tutorial is mini project based where we will produce an HTML5 animated banner. Using a PSD file as asset, I will guide you through all the steps to exactly reproduce the banner in HTML before animating it. This tutorial will cover the following sessions :

- Export images from PSD,

- Organise folder by creating and linking HTML, JS, CSS files,

- Create HTML file,

- Style HTML elements by taking measurements from PSD,

- Animate the HTML elements using Greensock Javascript Library.


We will start by exporting the contents from the PSD, writing the HTML codes, adding CSS styles and finally use the Greensock Tweenmax library to animate the banner.

This course is for students who already have some basic knowledge about HTML, and wish to progress further by doing some more advanced styling and produce animations. If you don't have any HTML knowledge, you can still take the course and you will understand what it is all about. It will also help students reproduce an HTML document from a any PSD.


Who this course is for:
  • Anyone who wants to create animations for the web.