Creative Advanced CSS & JavaScript Animations – 150 Projects

Creative Advanced CSS & JavaScript Animations – 150 Projects, available at $94.99, has an average rating of 4.63, with 169 lectures, based on 2222 reviews, and has 21437 subscribers.

You will learn about master CSS & Javascript animations, transitions and transforms create more than 150 different examples using CSS animations, transitions and transforms create different buttons, images, cards, loaders, menus creative effects and so much more be able to create any creative CSS animations they can think of master the CSS clip-path property and learn how to use it in animating html elements This course is ideal for individuals who are web designers and developers who want to improve their CSS & Javascript skills or web developers who want to master CSS & Javascript animations and transforms and be able to create any creative animation they can think of It is particularly useful for web designers and developers who want to improve their CSS & Javascript skills or web developers who want to master CSS & Javascript animations and transforms and be able to create any creative animation they can think of.

Enroll now: Creative Advanced CSS & JavaScript Animations – 150 Projects

Summary

Title: Creative Advanced CSS & JavaScript Animations – 150 Projects

Price: $94.99

Average Rating: 4.63

Number of Lectures: 169

Number of Published Lectures: 167

Number of Curriculum Items: 169

Number of Published Curriculum Objects: 167

Original Price: $34.99

Quality Status: approved

Status: Live

What You Will Learn

master CSS & Javascript animations, transitions and transforms
create more than 150 different examples using CSS animations, transitions and transforms
create different buttons, images, cards, loaders, menus creative effects and so much more
be able to create any creative CSS animations they can think of
master the CSS clip-path property and learn how to use it in animating html elements

Who Should Attend

web designers and developers who want to improve their CSS & Javascript skills
web developers who want to master CSS & Javascript animations and transforms and be able to create any creative animation they can think of

Target Audiences

web designers and developers who want to improve their CSS & Javascript skills
web developers who want to master CSS & Javascript animations and transforms and be able to create any creative animation they can think of

Have you ever seen a web animation on codepen or on any website and then you think “Ohh that is awesome! I want to do that!” but then think it’s complex and far beyond your skills?

Well I’m here to tell you: No, it definitely is not!, I’m Ahmed Sadek, a full stack web developer and freelancer with more than 7 years of experience, and I wanna welcome you to my CSS and JavaScript Animations Course.

CSS & Javascript animations are quickly becoming essential design tools increasingly used to help our users understand and interact with our websites. they are definitely the next big step in web design! Absolutely amazing things can be done with it. It’s literally up to your imagination! they give life to your website and enhance the user experience and you know better user experience means a higher reputation and more satisfied visitors. So CSS and Javascript animations are critical skills for any web developer nowadays…and I’m here to make sure you learn it the right way.

So in this course you will master CSS animations, transitions, and transforms, starting from scratch, and not only that, we’re also gonna get our hands dirty and create many examples together so that you will get tons of ideas, and lots of inspiration to help you create any complex animation you can think of.

We’ll start by looking at the CSS transitionproperty, learning what it is and how it can give life to html elements.

Then we will move on to CSS transforms, which open the doors for many creative options, from movingelements around the page, to scaling and rotating them. So we’ll talk about all the transform functions that we can use in 2Dand 3Denvironments.

After that, we get to the fun part! We will use all the techniques and properties we learned about the CSS transforms and transitions, and we’ll start building some creative examples that will give you inspiration and help you make full use of what you’ve learned!

We’ll start this section by creating buttonhover effects, imagehover effects, menuseffects, cardseffects and some more different cool examples!

Then we will move over to CSS animationsand keyframes, where we’ll learn everything about them and all their properties.

after that we will move on to the section of the course, where we will be creating many CSS animations examples that will kickstart your imagination and help you create any animation you can think of!

then we will move forward to the clip path effects section where we will learn all about CSS clip path property and how we can use it to create some really creative examples and effects.

and finally we will take our skills to the next level by moving to the javascript effects section where we will be creating some more complex effects using the power of javascript.

By the end of this course, you’ll be able to understand how any web animation works, and you’ll have created more than 150different projects with different ideas that will help you increase your creativity, and stand out from other web developers. So if you are as excited as I am, hit the enroll button, and let’s dive right in with this CSS and Javascript Animations, Transitions and Transforms Creativity Course!

Course Curriculum

Chapter 1: CSS transitions basics

Lecture 1: Creative Advanced CSS & Javascript Animations – 140 Projects

Lecture 2: what is CSS transitions ?

Lecture 3: CSS transitions options

Lecture 4: different ways to write the CSS transition property

Lecture 5: what CSS properties can be transitioned ?

Chapter 2: CSS 2D transforms

Lecture 1: CSS 2D transforms basics

Lecture 2: CSS translate function

Lecture 3: CSS scale function

Lecture 4: CSS rotate function

Lecture 5: CSS skew function

Lecture 6: CSS transform origin property

Chapter 3: CSS 3D transforms

Lecture 1: CSS translate in 3D

Lecture 2: CSS rotate in 3D

Chapter 4: creative buttons effects using CSS transforms

Lecture 1: creative buttons effects using CSS transforms

Lecture 2: creative rotating button effect using CSS

Lecture 3: creative swipe button effect using CSS

Lecture 4: creative button hover effect using CSS

Lecture 5: creative button stretching effect using CSS

Lecture 6: creative button swipe effect from top to bottom with text using CSS

Lecture 7: creative button glowing effect using CSS

Lecture 8: creative two layers swapping button effect using CSS

Lecture 9: creative text scaling button effect using CSS

Lecture 10: creative circular swapping button effect using CSS

Lecture 11: creative rotating 3 layers button effect using CSS

Lecture 12: creative layers swapping from left to right button effect using CSS

Lecture 13: creative 3 circles to background button effect using CSS

Lecture 14: creative button hover effect using CSS

Lecture 15: creative splited button effect using CSS

Lecture 16: creative border swapping button effect using CSS

Lecture 17: creative border growing button effect using CSS

Lecture 18: creative first letter rotating button effect using CSS

Lecture 19: creative 4 borders growing button effect using CSS

Lecture 20: creative 2 cuts button effect using CSS

Lecture 21: creative 2 parts skewed button effect using CSS

Lecture 22: creative pulsing button effect using CSS

Lecture 23: diagonal swipe button effect using borders using CSS

Lecture 24: Creative 4 Lines Button Hover Effect using CSS

Lecture 25: CSS glassmorphism button hover effect using

Chapter 5: creative images effects using CSS transforms

Lecture 1: creative images effects using CSS transforms

Lecture 2: creative image effect using CSS 1

Lecture 3: creative image effect using CSS 2

Lecture 4: creative image effect using CSS 3

Lecture 5: creative image effect using CSS 4

Lecture 6: creative image effect 5

Lecture 7: creative image effect 6

Lecture 8: creative image effect 7

Lecture 9: creative image effect 8

Lecture 10: creative image effect 9

Lecture 11: creative image effect 10

Lecture 12: creative image effect 11

Chapter 6: creative menus effects using CSS transforms

Lecture 1: creative menus effects using CSS transforms

Lecture 2: creative growing borders menu effect

Lecture 3: creative background and borders menu effect

Lecture 4: creative splitted background menu effect

Lecture 5: creative 2 moving bottom borders menu effect

Lecture 6: creative blurry menu effect

Lecture 7: creative menu effect using the transition delay property

Lecture 8: 2 borders and a background menu effect

Lecture 9: border sniper menu effect

Lecture 10: creative menu border rotation effect

Lecture 11: creative colorful layered menu effect

Lecture 12: creative background color menu hover effect

Lecture 13: cursor menu animation hover effect

Lecture 14: text fading menu hover effect

Chapter 7: creative CSS cards effects using CSS transforms

Lecture 1: creative CSS cards effects using CSS transforms

Lecture 2: background translation card effect

Lecture 3: creative expandable card effect

Lecture 4: creative captain marvel card effect

Lecture 5: creative border card effect

Lecture 6: creative double face card hover effect

Lecture 7: creative layered card hover effect

Lecture 8: creative scaling card effect

Lecture 9: creative css product card effect

Lecture 10: crative css product card effect 2

Chapter 8: other cool examples with CSS transforms

Lecture 1: other cool examples with CSS transforms

Lecture 2: smoky text effect using css transforms

Lecture 3: Fill Text Effect On Hover

Lecture 4: social media icons hover effect with css transforms

Lecture 5: creative rotated text border effect using CSS transforms

Lecture 6: open – close text animation effect

Lecture 7: blur & focus text hover effect

Lecture 8: text focus and blur effect

Lecture 9: stacked card hover effect

Lecture 10: CSS text clip mask parallax scrolling effect

Chapter 9: css animations and keyframes

Lecture 1: animation introduction

Lecture 2: create css animations with more stages

Lecture 3: animation fill mode property

Lecture 4: animation iteration count property

Lecture 5: animation direction property

Lecture 6: animation shorthand method

Chapter 10: CSS animations creative examples

Instructors

Ahmed Sadek
full stack web developer, freelancer & teacher

Rating Distribution

1 stars: 9 votes
2 stars: 22 votes
3 stars: 127 votes
4 stars: 505 votes
5 stars: 1559 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!

Menu