Code School’s Adventures in Web Animations Review

In our previous article  Web designer’s ultimate list of free resources, we decided to share with everybody the resources we use in our design and development process, an article that proved to be very popular on different web design communities.  As a result, we ended up getting in touch with Code School’s Nick Roberts. We agreed to review their latest course and he was kind enough to provide us with a one month subscription.

Although this is not a free resource or course, it still felt like a good introduction in CSS animation so we decided to give it a try.

Code School

Code School

For those who don’t know yet, Code School is an online learning platform that provides interactive courses built around a creative theme and storyline with a focus on practical and real-world examples.

Code School has a great selection of courses including web and mobile development. What is interesting is that the series are classified on Paths. Each path follows a different technology and language set, designed for different purposes, like the HTML / CSS path, the JavaScript path and the iOS path.

This makes it incredible easy to plan and organize your studies so by the time you finish one path, you will have a solid understanding of the theoretical concepts as well as a practical set of skills.

You can give it a try by following this link

HTML/CSS > Adventures in Web Animations Course

Code School's "Adventures in Web Animation"
Code School’s Adventures in Web Animations

Since it is an introduction to CSS animation, having some previous HTML / CSS  knowledge would be nice and it is also advised. However, everything is well done and Alyssa Nicoll does a great job explaining so we felt one can go through the entire course without having problems understanding the concepts behind animations, even without a previous working experience with HTML / CSS.

What we found very interesting is that the Adventures in Web Animations is very light-hearted. The use of cheerful colors, cartoonish and catchy intro song can make it very appealing to kids as well.

Adventures in Web Animations consists of 4 levels, each level addressing a single aspect of the CSS animation concept. The course takes a more practical approach by combining the theoretical concepts of CSS animation with real-world examples.

Each level has one or more videos where you will be presented with theoretical concepts as well as different coding techniques and styles. At the end of each video you will be given the chance to take a small challenging quiz that will test both your understanding of the theoretical aspects discussed in the course and your practical skills.

Code School Live Code Editor
Code School Live Code Editor

You also have the possibility to re-watch every video in case things aren’t clear or, like on every Code School course, study the course slides PDF file attached, as well as download the videos and the PDF for offline use.

At the end of each level and course you will be rewarded with one or more achievements that you can share and even add to LinkedIn  as reference.

Course levels

Level 1 & 2 – Transitions & Transforms

Level 1 Badge

Here you will learn the basic theoretical concepts of transitions and  how and when to transition colors, positions and visibility.

You will also learn how to use them to build practical real-world effects.


Level 2 BadgeThe second level is focused on transforms. The main aspects that are discussed here are rotation, scaling and translation.  Just like in the first level, you will find out why, how and when you can use them and you will also learn how to combine them all to get the desired result.

At the end of the level 2, you will have a fully animated modal window.

Level 3 & 4 – Keyframes & SVGs

Levels 3 & 4 Badges

Going a bit further, levels 3 and 4 are dedicated to more advanced animation concepts and techniques.

Level 3 is dedicated to CSS keyframes. You will learn how to create simple, multi-frame animations and advanced animations and how to use different transition types.

Level 4 will offer an insight on CSS SVG animations and its unique properties.

At the end of this course you are invited to participate to Soup to Bits: Adventure in Web Animations, to see how everything you’ve learned so far can be used in a real-world website and to improve your skills and knowledge.

Course Slides

As mentioned above, you will also have access to a 105 pages PDF containing all slides and observations used during the course. This is a great reference material, especially for beginners.



End Course Badge

Adventures in Web Animations left us with a very good impression.

The course does a great job providing a basic (and not only) introduction in CSS web animations and the light-hearted practical approach makes it engaging and appealing for every new comer, adults and children alike.

The Adventures in Web Animations course, alongside the Front-end Foundations and Front-end Formations, is a wonderful premium resource for those who seek to fathom their web design and development knowledge.

So if you would like to see what other courses Code School has to offer, you can give it a try here.


Tags: , , , ,

Bogdan Gheorghe


I'm a Bucharest based Software / Web developer with a passion for mobile and web. I like to discover and learn new and exciting technologies that can help me bring my ideas to life. I'm also a gamer, a photography lover and a sucker for urban architecture and city lights at night.

Follow Bogdan:

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *