To work faster

• Test CSS Flexbox Rules - to quickly generate the layouts you need.

• Optimizilla - Compressing is concerned with minimizing the number of bits required to represent an image. Compressing reduces an image size without much compromising its quality. Smaller size means faster loading time which equals happier users.
  

• BEM naming cheatsheet - Ever ran out of names for your CSS elements? Don't go naming them like below; use BEM instead! Visit the website to learn a good convention to consider.
  

• CSS selectors cheatsheet - Sometimes we have to modify a deep-nested element or target a few elements at the same time; this reference will come in handy at these times.
  

To play and learn

• Grid Garden - a fun way to learn CSS grid by playing a cute game
• Flexbox Froggy - while you're at it, why not learn flexbox by playing a game too. Fun!

For your reading pleasure

• 7 habits of highly effective media queries - this informative article is linked to many other resources to strengthen your understanding on building responsive apps.
• https://www.freecodecamp.org/news/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862 - this writeup has a lot of tips on working with breakpoints.