Have you ever wanted to learn how to add cool effects to your website without the need to write complicated code? Gone are the days when adding effects and animations to your website would require either java-script or J Query code. With the introduction of CSS 3, you can now create amazing effects using CSS transitions and transformations that will bring a lot of life and vibrancy to your website.
This course will teach you how to change the way elements behave when they are hovered over or when they are clicked on. You will learn how to work with elements from both 2D and 3D perspectives.
In the first section, you will learn about CSS transitions. You will learn the 4 main properties that will allow you to control what animatable properties you want to transition as well as set timing and control effects for them.
The second section will introduce you to CSS transforms. With CSS transforms, you will learn how to create shapes of different formats and styles from elements on your webpage. You will learn useful transformation functions such as skew, scale, rotate and much more. You will also learn how to combine transformations and transitions thus creating very interesting animations.
In the third section, you will learn about how you can take your transformations to the next level by learning how to create transformations from a 3D perspective. You will learn the differences between the 2D and 3D spaces and what it takes to prepare your elements on the website to be ready for 3D transformations.
By the end of this course, you will have all the necessary tools and knowledge to write beautiful animations that will make your website enticing and exciting to any visitor.
Transitions are a fantastic and effective way of adding some life and action to your website. In this video, you will learn exactly what they are and how are they are triggered.
Here you will learn how to write your very first transition when a user hovers over a button using the transition duration function
Let's test your ability to use the transition-duration property.
In this video, you will learn how to target specific properties to transition by using the Transition-Property declaration.
How do we know what properties we can animate or add transitions to? You will find out in this video
Transition delays are a powerful way of controlling the duration of your transitions. Find out more about them in this video.
In this video, you will learn how to add more effects and animation to your transitions by controlling the speed in which they transition.
Here, you will learn to transition multiple properties at the same time thus creating really interesting animations.
In this video you will learn how to write your transitions with minimal CSS code by using the transition shorthand.
This quiz aims to test your knowledge of everything that you have learnt so far in this section.
In this video, you will write your first transformation by learning how to rotate elements.
By combining transformations and transitions, you can create very exciting animations on your website. Find out more in this video.
In this video, you will learn about a powerful transformation property known as the skewing function.
Scaling elements can be a very useful animation on your website. Find out more in this video.
In this video, you will learn how to change the angle and sides from which elements on your website transform from.
In this video, you will learn how to move elements from their original position either vertically or horizontally.
By combining transforms, you can begin to create truly exciting animations on your website. This video will show you how to do so.
In this video, you will learn how to create your very own custom timing function by using the cubic bezier function.
A quiz to test your knowledge
3D transforms are a whole new level of transformations because they introduce a third axis (Z axis). This video will introduce you to this new concept.
In order to prepare your elements for 3D transformations, you first need to activate the 3D perspective. Find out more about this in this video.
Take your rotations to a whole new level by learning how to rotate elements from a 3D perspective.
In this video, you will learn how to change the angle from which elements are viewed on from a 3D perspective.
In this video, you will learn how to ensure that all your elements transform from the same perspective thus creating a consistent 3D transformation.
In this lengthy lab exercise, you will combine everything you have learned so far to create a rotating cube gallery.
In this video, you will learn how to move elements from their original position on a 3D perspective.
Hi there my name is Alexander Oni and welcome to my Udemy page. I am a professional web developer living in the United States of America. I currently work for a small web development company where I build websites for clients using the latest in web technology.
I have been building websites for the past 7 years now and have been working exclusively with WordPress for almost 4 years. My love for web development and teaching people how to build websites drove me to make my Udemy course on web development.
I am also a cyber security expert and have a masters degree in Information Security.
I enjoy watching football, movies and playing chess.