Advanced CSS Tutorials and Guides

This Tutorials section of our Advanced CSS Hub digs in to key areas of a modern CSS workflow, building on the concepts introduced in the Best Practices section.

Web performance is too often an afterthought, but it’s then too late. We have 20 tips for optimizing CSS performance, so this is a good place to start before developing your next award-winning application.

There’s little reason to avoid Flexbox or Grid when you need to support legacy browsers. All of our advanced CSS Grid tutorials describe best-practice techniques to implement modern layouts while retaining an attractive layout for older applications. (Some even work in IE5!)

We look at retrofitting popular layouts with CSS Grid, showing how easy it can be to create robust, responsive layouts without any hacks. Check out our step-by-step guide on rebuilding a card-based Tumblr layout, utilizing CSS Grid and other cutting edge CSS features. We also look at building a modern, responsive CSS Grid layout from scratch, with a focus on adding grid properties progressively and catering for a range of browsers.

We also cover how to convert a traditional, float-based layout into one that harnesses the benefits of CSS Flexbox and Grid, while discussing graceful degradation and progressive enhancement along the way.

While Grid is often used for page layouts, it can also be applied to single components. It may even change the way you approach HTML forms.

Once you’ve learned CSS transforms, it becomes possible to use the techniques for alignment, speech bubbles, animated spinners and card-flip animations. The possibilities for CSS and SVG are similarly extensive when you can use them as static images, backgrounds, responsive content, sprites, and even portable documents.

Few developers use CSS custom properties beyond text and background colors, but they offer the power to generate dynamic themes. That’s especially useful for those of us who refuse to use apps without a dark option! If you’re developing an app, Progressive Web App technology offers a variety of benefits, so consider CSS in PWAs.

Finally, once you think your site or app is complete, try printing a page. Print layouts are rarely adopted, but some additional CSS print styles can be added in minutes to add polish to any system.

As you can see below, we also have a range of books and video courses on advanced CSS topics, such as our video on building a responsive website from scratch, or our book on designing with CSS Grid layout.

Further Learning

This Advanced CSS hub also offers comprehensive guides to Modern CSS Best Practice, covering many of the newest advances in CSS, as well as introductions to a range of CSS Tools and Resources for debugging your CSS code and optimizing your CSS performance.