Learn how to create html and css animated banners
2.4 (4 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
176 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Learn how to create html and css animated banners to your Wishlist.

Add to Wishlist

Learn how to create html and css animated banners

create simple and advanced bannners with only html and css, no javascript or jquery or any other library
2.4 (4 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
176 students enrolled
Created by ismail businge
Last updated 3/2016
Curiosity Sale
Current price: $10 Original price: $20 Discount: 50% off
30-Day Money-Back Guarantee
  • 1.5 hours on-demand video
  • 2 Articles
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • basic and intermediate plus some advanced html and css
  • designing html and css banners
  • animating html banners with css animation and transitions
  • css animation and transitions
  • advanced css propertie
  • 1 1/2 hrs of content
  • a look at the source code.
  • learn about vendor prefixies
View Curriculum
  • a computer and a text editor, notepad can do as well

Do you want to start adding animations to your banners or just learn about css animation in general and you don't want to learn javascript/jquery animation which is quickly geting outdate, for a good reason.

Css animation is light, fast to load and does not require you to learn a new language.

Add life to your website by adding animated banners with html and css animation and transitions.

Or just learn out creating animated banners for the sake of making some quick cash on fiverr or elance or Odesk.

this course is about the basics of creating animated html and css banners with out using any plugins, javascript or any libraries like jquery. infact the only files we will be creating are only .html and .css files.

We will cover the followings :

  • Css Transition and Animation
  • How to create cool effects using transition and animation
  • Creating Animated Banner in Css
Who is the target audience?
  • anyone interested in css animation or webdesign
Students Who Viewed This Course Also Viewed
Curriculum For This Course
28 Lectures
4 Lectures 07:26

lets over view the five banners we are going to recreate in our course and how the course is structured

Preview 02:57

an over view of what we are to learn in this section of how to create animated banners using html and css no javascript or jquery. designing banner 1

Preview 00:10

we need to have a basic template that we can derive our banners from with out doing every thing from scratch each time we start on a new banner, this is what we do in this video

Preview 04:00

here is an html file with all the banners we are to create and animate on one page, test this in mozilla, at its current state my not work in other browsers, simply because i wanted to keep the code easy to read with out clattering it with duplicated code to cater for other browsers. but you can add the vendor prefix for any browser you want to test in.
Sample of all banners on one page: test in mozila firefox
Designing and animating our banner 1 using Css animation
8 Lectures 34:10

This banner is divided in three section which we are going to do using, 3 div elements given a class of "section", later with css we can target this class and add a 30% width to the divs and float them left of each other which will make them align holizontally.

Preview 07:19

we shall continue styling our banner 1 with css rules
styling add ccs to the banner

As in the original banner, we are going to add a hover effect to each section of the banner, so when a user moves there cursor over one section it pops out or scales up.

adding animation to each section on hover

In this lesson we look at general animation in other software programs particularly photoshop. we look at what is needed to make any kind of animation in any program. a canvas and a timeline

talking about how css animation relates to other types of animation

in this lesson, we translate the animation we did in photoshop and replicate it with css keyframe animation and create our first css html timeline
introducing keyframe animations in css

for browser compatibility, you can use this document to check for browser vendor prefixies to make sure you animation works and behaves the same in all browsers.

Adding vendor prefix or support for multiple browsers

why do we add vendor prefixes

vendor prefixes
1 question

we look at how to apply keyframe like animation to our banner using css animation

applying our keyfram css animation to the banner

adding final touches to banner1

finalizing banner
Designing and animating our banner 2 using Css animation
6 Lectures 18:17
  • In this lesson we are going to setup the required html and css files for banner2

    preparing neccessary files for banner 2

    working on banner 2

    working on the html and css for banner 2

    in this lecture we look at adding a gradient and skew edge effect to our banner

    adding gradients a skew edge to our banner

    in this lesson we add a hover transition to create a smooth animation

    adding a hover transition to our element

    adding css animation to all elements in the banner

    adding css animation to all elements in the banner

    linking the different parts of the banner to different pages or websites using html anchor tags

    adding anchor tags or links to different areas on the banner
    Designing and animating our banner 3 and 4 using Css animation
    8 Lectures 23:44

    looking at what we need to do for banner 3, design and animation

    introducing banner 3

    preparing our template to cater for banner 3 and updating the style sheet file.

    prepairing the required html and css for banner 3

    In this video let us add a hover effect to give feed back to the users when they interact with the banner

    adding a hover effect to banner 3

    In this lesson, we find out what css properties and css rules we need to use to make our elements rotate 360 degrees

    talking about the transform, perspective and rotation css properties and at

    For this lesson we shall use css transitions to make our animation

    finalizing banner 3 and adding the css animation required

    looking at what we need to prepare for banner 4

    over view and preparing banner 4

    we start working on banner 4's html and css
    setting up the html and the css for banner4

    adding the final touches to banner 4

    finalizing banner 4
    Creating banner 5 and final words
    2 Lectures 01:53
    we break down how banner 5 and our final

    banner in this course on how to create animated banners with out javascript but simply basic html and css.

    creating banner 5

    It has been a great journey hope you have learnt alot from this course, and hope i can see your banner flooding the interent

    final words and conclusion
    About the Instructor
    ismail businge
    2.5 Average rating
    6 Reviews
    635 Students
    3 Courses
    Graphics Designer and webdesigner

    Hi ,My name is ismail. I am a graphics designer and web developer/designer .
    I have equal passion for both Programming and Designing though sometimes i find my self doing more programming than designing, its easy to dive into just fire up any text editor and you are good to go.

    i also make free tutorials on youtube, about web design, web development, making money online and other awesome things to talk about.

    I also do some 3d modeling and animation though i haven't done much of that lately as am concentrating alot on web development now days, when i get time i will make a course about 3d modeling and animation in either blender or cinema 4d.

    i also love sharing knowledge as this is how i know what i know now.