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
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.
HTML/CSS > Adventures in Web Animations Course
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.
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
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.
The 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
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.
Conclusion
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.
