When you were learning the basics, you probably heard HTML5 and CSS3 thrown around a lot. They are the newest versions of these languages. HTML5 really didn’t offer too much new that’s worth dedicating a whole section too, so I wanted to focus on CSS3 – and more specifically CSS animations.

If you consider yourself a creative artistic person, CSS3 animations are going to open up a whole new world of possibilities! Here’s one of my favorite animations: simple fire animation. The creator animates a series of figure elements to create the effect of a flame. If you don’t know what a figure element is, think of it as a div, something that holds content.

If you’re into Web Design – you’ll find there’s a lot more to learn when it comes to CSS. Developers used to use Javascript for most of a website’s animation, but CSS3 (along with a lot of wait time for it to become the standard, FINALLY) allows you to create incredible fluid animation.

So this section is dedicated to those who really want to go more into design. The next section, Javascript, achieves a few similar goals. It’s up to you if you want to learn CSS animation, otherwise head over to Javascript.

5 Curated Resources

W3Schools - CSS3

free, Reference Sheet and Guide

You’re probably familiar with W3Schools by now, but they also have an entire CSS3 section. This will give you a nice overview of all the added features of CSS3.

This is a very well thought out and well designed tutorial on CSS Animation. It’s short and simple, but covers everything. Gives some knowledge in the beginning too about why animation is so important in Web Design.

Animate.css

free, CSS Library

If you read the “CSS Animations For Beginners” article and you understand animation now, then you’ll love this resource. It’s a stylesheet that has a bunch of pre-made animations. Look at the Github page to see how to properly install and use it.

Flexbox Froggy

free, Learning Game

Flexbox is a new form of CSS3 positioning. To me, it’s one of the hardest new features to fully grasp. It’s very powerful and totally worth knowing it fully. Here’s a fun little game for learning it.

CodePen

free, Code Editor and Community

Made this a resource earlier as a code editor, but there is also an entire community’s work behind it. Look at the top pens and see some awesome creations to draw some inspiration from. Some people obviously use Javascript, but you can tell right away because it shows the source code for each project.