HTML & CSS

Awesome Front-end Resources and CSS Animation Course

Maria Antonietta Perna
Share

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.

CSS Reference

The CSS Reference is a visual guide where CSS properties are organized into:

  • Animations
  • Backgrounds
  • Box model
  • Flexbox
  • Positioning
  • Transitions
  • Typography

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
  • Fonts
  • 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).

Web Animation

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
  • JavaScript

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:

Using CSS for web animation remains my preferred way of doing things, but there are instances when you need a robust JavaScript library to get the job done.

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.

If you have a JavaScript animation library you’d like to see in this series, get in touch!

Featured image courtesy of Unsplash.com