Awesome Front-end Resources and CSS Animation Course
This is the editorial from our latest HTML/CSS Channel newsletter, you can subscribe here.
Here are our latest front-end treats:
- 20+ free front-end learning resources from Louis Lazaris
- A brand new course on CSS animation by Donovan Huchinson
Front-end Learning Resources
As front-end developers, it’s our job to stay abreast of the techniques and tools that make our final products easy to use, accessible and, why not, beautiful.
Louis Lazaris shares with us the 11th installment of his list of free 20+ docs and guides for front-end developers.
The list is impressive and includes resources on functional programming, ES6, Progressive Web Apps, accessibility, and more. Feel free to pick your favorites. As for me, the CSS Reference and the the Typography Handbook are the ones I immediately checked out.
The CSS Reference is a visual guide where CSS properties are organized into:
- Box model
You can also access a list of all CSS properties in alphabetical order.
The guide explains each property and possible values in clear and simple terms and offers great visuals to illustrate the results.
The Typography Handbook
Any tool that teaches principles, best practices and code for great web typography in a practical and accessible way has my vote. It seems to me that The Typography Handbook does just this.
This is an open source project on GitHub covering:
- Typographic Design
- Web Style Guide
The last part in particular shows a fair amount of code samples focusing on topics such as relative units, vertical space, font size, color, etc.
If you find most resources on web typography a bit intimidating and jargon-laden, The Typography Handbook will surprise you (totally in a good way).
We’ve evolved to be really good at noticing movement. … Observing movement and visual cues enable us to understand complex actions and ideas in a nonverbal way.
Animation on the web can be leveraged to the same effect and can add extra depth and meaning to the conversation between our users and the User Interface.
Bringing Websites to Life with CSS Animations — Donovan Hutchinson & Guy Routledge
Animation has become a key ingredient in web design and development. User interface designers teach us how subtle animation effects help users perform tasks on a website, prevent boredom when visitors wait for a resource to load, guide readers’ attention as they scan web content.
At this time, the most common ways of animating web content are:
- CSS transitions and @keyframes animation
To learn more about web animation, SitePoint Premium offers a brand new course — Animating with CSS — by animator rockstar Donovan Hutchinson.
The course covers the principles of effective user interface animation and their implementation using CSS transitions and @keyframes, easings and timing functions, multiple animations, animations on scroll, browser support and accessibility.
If you prefer articles, below are just a few of my favorite ones from SitePoint:
- Animation Advice from a CSS Master. This is the transcript of SitePoint’s live Q&A with Tiffany Brown, presented by Angela Molina
- 4 Tips for Using Animation in Design by Gabrielle Gosha
- Understanding the CSS animation-fill-mode Property by Louis Lazaris
- Animations: Using Easings to Craft Smarter Interactions by Daniel Schwarz
- Bringing Pages to Life with the Web Animations API by Dudley Storey.
For complex web animations requiring a JS solution, check out my series Beyond CSS: Dynamic DOM Animation Libraries. The first installment is an introduction on how to work with Anime.js and the second installment is about animating the DOM with KUTE.js, a modular and open source animation engine with lots of capabilities.
Stay tuned, more is to come.
Featured image courtesy of Unsplash.com