“CSS is easy” … claims everyone who never learned it. There’s nothing complicated about defining property names and values, but the subtleties of getting a page layout to work is another matter.
CSS has become more sophisticated, powerful, robust, and consistent during the past decade. We saw a few dozen CSS2.1 properties explode into hundreds as CSS3 evolved. You require design skills, development knowledge, and many hours of experience to become reasonably proficient.
Fortunately, our Advanced CSS Hub offers the fastest path to enlightenment. You’ll quickly
transform your CSS knowledge and achieve guru status.
The Best Practices section of this hub provides guides for the core concepts. You can skip or dip into each guide as necessary.
And we also investigate how to use CSS with SVG, with a focus on SVGs used in conjunction with media queries.
The Tutorials section of this hub digs into key areas of a modern CSS workflow.
We cover tips for optimizing CSS performance — an important consideration before you build your site.
We look at retrofitting popular layouts with CSS Grid, showing how to create responsive layouts without hacks, how to rebuild a card-based Tumblr layout with Grid, and how to build a modern, responsive CSS Grid layout from scratch with Grid.
We also cover how to convert a traditional, float-based layout into one that harnesses the benefits of CSS Flexbox and Grid, and we also walk you through how to use Grid to lay out HTML forms.
We show how to use CSS transforms for alignment, speech bubbles, animated spinners and card-flip animations, and the possibilities for working with CSS and SVG.
We also take a fresh look at CSS for print styles, showing how print styles can be added in minutes to add polish to any system.
The Tools & Resources section of this Advanced CSS Hub covers the powerful tools that are available to help with your modern CSS workflow.
We cover stylelint and UnCSS in our article on analyzing the quality of your CSS.
We also look at several CSS optimization tools for boosting PWA performance, and we dig into the browsers themselves, looking at the CSS debugging tools in Chrome, Safari, Firefox, and Microsoft Edge.