CSS Resources from my Bookmarks
Tags: css, resources
Published: 2019-04-03 12:47:44

---
title: CSS Resources from my Bookmarks
published: true
description: A collection of resources and tools for learning and using CSS.
tags: css, resources
cover_image: https://thepracticaldev.s3.amazonaws.com/i/iui601cb2eiwgctrjl32.png
---

I've got a _lot_ of bookmarks! So I'm going to share some of them on here! This may become a (occasional) series 😊

##Text formatting

[Deep dive CSS: font-metrics, line-height and vertical-align by Vincent De Oliveira](http://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align)

##Alignment

[Box Alignment Cheatsheet by Rachel Andrew](https://rachelandrew.co.uk/css/cheatsheets/box-alignment)

##Animation

[How to Use CSS Variables for Animation by Dennis Gaebel](https://webdesign.tutsplus.com/tutorials/how-to-use-css-variables-for-animation--cms-28868)
[Easy CSS Watermelon Slice animation tutorial by Muna Mohammed](https://dev.to/munamohamed94/easy-css-watermelon-slice-animation-tutorial-3ngm)

##Grid

[Basic Concepts of grid layout - MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)
[Grid fallbacks and overrides by Rachel Andrew](https://www.rachelandrew.co.uk/css/cheatsheets/grid-fallbacks)
[CSS Grid Layout and Progressive Enhancement - MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement)
[GRID: A simple visual cheatsheet for CSS Grid Layout](http://grid.malven.co)
[Grid by Example:](https://gridbyexample.com) A collection of Grid resources maintained by Rachel Andrew

##Flexbox

[Tweet by Ali Spittel on centering with Flexbox](https://twitter.com/ASpittel/status/1088483548301049857?s=09)

##Shapes

[Experimental layouts with CSS Shapes and clip-path by Michelle Barker] (https://codepen.io/michellebarker/post/experimental-layouts-with-css-shapes-and-clip-path)
[CSS Shapes Resources by Kristopher Van Sant](https://codepen.io/KristopherVanSant/post/css-shapes-resources)

##Units

[The new (and old) CSS units you've never heard about by Massimo Artizzu](https://dev.to/maxart2501/the-new-and-old-css-units-youve-never-heard-about-1mn1)

##Specificity

[CSS Specifity by Emma Wedekind](https://dev.to/emmawedekind/css-specificity-1kca)
[CSS specifity and the cascade by Andy Bell](https://andy-bell.design/wrote/css-specifity-and-the-cascade/)

## Responsive design

[Using Media Queries For Responsive Design In 2018 by Rachel Andrew](https://www.smashingmagazine.com/2018/02/media-queries-responsive-design-2018/)
[Creating Responsive Diamonds Using Viewport Units by Meghan Sterling](https://medium.com/@sterling.meghan/creating-responsive-diamonds-using-viewport-units-eb8b91aed0cf)

##General

CSS Tricks: [css-tricks.com](https://css-tricks.com/)
[CSS: From Zero to Hero by Ali Spittel](https://dev.to/aspittel/css-from-zero-to-hero-3o16)
[Things nobody ever taught me about CSS by Charlie Gerard](https://medium.com/@devdevcharlie/things-nobody-ever-taught-me-about-css-5d16be8d5d0e)
[CSS Reference - MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference)

##Other collections of resources

[Resources to Help You Create CSS Images! by Victoria Bergquist](https://medium.com/cssfrankfurt/resources-to-help-you-create-css-images-14386a7c1d96)