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.
175 students enrolled
25% off
Take This Course
  • Lectures 28
  • Length 1.5 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works


Find online courses made by experts from around the world.


Take your courses with you and learn anywhere, anytime.


Learn and practice real-world skills and achieve your goals.

About This Course

Published 3/2016 English

Course Description

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

What are the requirements?

  • a computer and a text editor, notepad can do as well

What am I going to get from this course?

  • 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

Who is the target audience?

  • anyone interested in css animation or webdesign

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.


Section 1: Introduction

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


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


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

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.
Section 2: Designing and animating our banner 1 using Css animation

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.

we shall continue styling our banner 1 with css rules

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.


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

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

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.

1 question

why do we add vendor prefixes


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


adding final touches to banner1

Section 3: Designing and animating our banner 2 using Css animation
  • In this lesson we are going to setup the required html and css files for banner2


    working on banner 2


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


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


    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

    Section 4: Designing and animating our banner 3 and 4 using Css animation

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


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


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


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


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


    looking at what we need to prepare for banner 4

    we start working on banner 4's html and css

    adding the final touches to banner 4

    Section 5: Creating banner 5 and final words
    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.


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

    Students Who Viewed This Course Also Viewed

    • Loading
    • Loading
    • Loading

    Instructor Biography

    ismail businge, 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.

    Ready to start learning?
    Take This Course