21 Resources to Learn And Practice Your CSS Skills
Tags: webdev, css, resources, programming
Published: 2023-12-26 07:42:42

Mastering CSS is a very crucial part in your web development journey. Although CSS is not so complex to understand, having access to some useful resources can make your job easier.

Today, we’re going to look at 21 resources, which are useful to learn, practice and and make your CSS workfow more effecient.

Let’s get right into it.🚀

## CSS-Tricks

[CSS-Tricks](https://css-tricks.com/) provides CSS resources, tutorials, and articles. This website covers a wide range of CSS topics and provides valuable knowledge about modern web development methods.


![CSS-Tricks](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yom4hycqj918piyykr7i.png)

## Flexbox Froggy

Flexbox is an important topic of CSS and you can learn it by playing a game called [Flexbox Froggy](https://flexboxfroggy.com/). You can easily learn the properties of Flexbox while having some fun.


![Flexbox Froggy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0hlmi9txb1uf2lnjvhd6.png)

## Grid Garden

[Grid Garden](https://cssgridgarden.com/) is another interactive way to learn the grid layout system while having some fun.


![Grid Garden](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fcv3g5ikn1qq1r3x77aw.png)

## CSS Diner

[CSS Diner](https://flukeout.github.io/) is a fun game that helps you practice and understand CSS selectors.


![CSS Diner](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cjwzxklty5z4kwkavu6t.png)

## CSSBattle

[CSSBattle](https://cssbattle.dev/) is a competitive platform where you compete against others by creating the target images using CSS and improve your CSS skills.


![CSSBattle](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dav29cssk47r9mh7rqcm.png)

## CSS Zen Garden

[CSS Zen Garden](http://www.csszengarden.com/) is a great source to get inspiration for creating unique designs using CSS.


![CSS Zen Garden](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i8bykxey3mhuvt3xrdf4.png)

## Mozilla Developer Network (MDN)

[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS) provides comprehensive documentation on CSS properties, values, and concepts. It’s a great resource for in-depth learning.


![Mozilla Developer Network (MDN)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kenpng62kmqpwcmqkxg2.png)

## CSS Tricks Almanac

[CSS Tricks Almanac](https://css-tricks.com/almanac/) is a reference guide that covers a wide range of CSS topics. It’s an excellent resource for understanding CSS properties and their usage.


![CSS Tricks Almanac](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a7uvfycpncq8wiit1dru.png)

## Smashing Magazine – CSS

[Smashing Magazine](https://www.smashingmagazine.com/category/css/) regularly publishes articles, tutorials, and case studies related to CSS. You can always stay updated with the latest trends.


![Smashing Magazine - CSS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3nlurf91f7thw3nvees4.png)

## CSS Reference

[CSS Reference](https://cssreference.io/) provides an easy-to-navigate reference guide for CSS properties. It’s a handy tool for quick lookups and learning.


![CSS Reference](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dxpv0cvldw7bee2gtrzp.png)

## Learn CSS Layout

[Learn CSS Layout](https://learnlayout.com/) is a simple tutorial that covers the basics of building layouts with CSS. It’s perfect for beginners looking to understand the fundamentals of layout.


![Learn CSS Layout](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g1drwmc209g1nnet9pwu.png)

## CSS Weekly

You can subscribe to [CSS Weekly](https://css-weekly.com/) to receive a curated list of the latest CSS articles, tutorials, and tools every week. A great tool to stay informed all the time.


![CSS Weekly](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6q773a7u94cfsvj5r3zu.png)

## GitHub – Awesome CSS

[Awesome CSS](https://github.com/awesome-css-group/awesome-css) GitHub repository provides a curated list of CSS frameworks, libraries, and tools that can be really helpful.


![GitHub – Awesome CSS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dmfdhu22yz089te7dpzl.png)

## CSS Grid Layout by Wes Bos

Wes Bos, a popular web developer, offers a free [CSS Grid course](https://cssgrid.io/). Dive deep into CSS Grid with easy exercises and real-world examples.


![CSS Grid Layout by Wes Bos](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xz7oukb7mi8v34690jnp.png)

## CSS Grid by Example

[CSS Grid by Example](https://gridbyexample.com/), is an invaluable resource for mastering CSS Grid. It includes tutorials, examples, and practical tips for using CSS Grid effectively.


![CSS Grid by Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5276zr3ct97yxd88yifw.png)

## BEM (Block, Element, Modifier)

[BEM](http://getbem.com/) is a methodology for organizing and naming CSS classes in a scalable and maintainable way. Learning the principles of BEM can improve the structure of your stylesheets drastically.


![BEM (Block, Element, Modifier)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u92s8znnwrdm0sbypemm.png)

## CSS Animation Rocks

[CSS Animation Rocks](https://cssanimation.rocks/) offers tutorials and examples for learning CSS animations. You can improve your websites’ looks with smooth and engaging animations using this valuable resource.


![CSS Animation Rocks](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/35se075sud694gk8fdrn.png)

## Can I Use

You can check browser compatibility for CSS properties using [Can I Use](https://caniuse.com/). It is essential for understanding which features are safe to use.


![Can I Use](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1lm8vnt6zrks30p6hkw4.png)

## W3Schools – CSS Tutorial

[W3Schools](https://www.w3schools.com/css/) provides a beginner-friendly tutorials with live examples. A great way to learn CSS fundamentals and advanced techniques.


![W3Schools - CSS Tutorial](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f1qs7gwtq5pjaka51hbj.png)

## Frontend Mentor

[Frontend Mentor](https://www.frontendmentor.io/) offers realistic design challenges that include HTML, CSS, and JavaScript. You can create projects and add them to your portfolio and receive feedback from the community.


![Frontend Mentor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/apzcfuh2x9tltpdsqeqh.png)

## PlayCSS

You can improve your CSS skills by completing daily challanges on [PlayCSS](https://playcss.app/).


![PlayCSS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mag6m1pa0v6t4wnkksm5.png)
That’s all for today.

I hope it was helpful.

Thanks for reading.

For more content like this, [click here](https://shefali.dev/blog).

You can also follow me on [X(Twitter)](https://twitter.com/Shefali__J) for getting daily tips on web development.

Keep Coding!!
<a href="https://www.buymeacoffee.com/devshefali" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="41" width="174"></a>