Shefali

Posted on Dec 26, 2023 • Edited on Jul 15 • Originally published at shefali.dev

21 Resources to Learn And Practice Your CSS Skills

#webdev #css #resources #programming

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 provides CSS resources, tutorials, and articles. This website covers a wide range of CSS topics and provides valuable knowledge about modern web development methods.

Flexbox Froggy

Flexbox is an important topic of CSS and you can learn it by playing a game called Flexbox Froggy. You can easily learn the properties of Flexbox while having some fun.

Grid Garden

Grid Garden is another interactive way to learn the grid layout system while having some fun.

CSS Diner

CSS Diner is a fun game that helps you practice and understand CSS selectors.

CSSBattle

CSSBattle is a competitive platform where you compete against others by creating the target images using CSS and improve your CSS skills.

CSS Zen Garden

CSS Zen Garden is a great source to get inspiration for creating unique designs using CSS.

Mozilla Developer Network (MDN)

MDN provides comprehensive documentation on CSS properties, values, and concepts. It’s a great resource for in-depth learning.

CSS Tricks Almanac

CSS Tricks 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.

Smashing Magazine – CSS

Smashing Magazine regularly publishes articles, tutorials, and case studies related to CSS. You can always stay updated with the latest trends.

CSS Reference

CSS Reference provides an easy-to-navigate reference guide for CSS properties. It’s a handy tool for quick lookups and learning.

Learn CSS Layout

Learn CSS Layout 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.

CSS Weekly

You can subscribe to CSS Weekly to receive a curated list of the latest CSS articles, tutorials, and tools every week. A great tool to stay informed all the time.

GitHub – Awesome CSS

Awesome CSS GitHub repository provides a curated list of CSS frameworks, libraries, and tools that can be really helpful.

CSS Grid Layout by Wes Bos

Wes Bos, a popular web developer, offers a free CSS Grid course. Dive deep into CSS Grid with easy exercises and real-world examples.

CSS Grid by Example

CSS Grid by Example, is an invaluable resource for mastering CSS Grid. It includes tutorials, examples, and practical tips for using CSS Grid effectively.

BEM (Block, Element, Modifier)

BEM 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.

CSS Animation Rocks

CSS Animation Rocks offers tutorials and examples for learning CSS animations. You can improve your websites’ looks with smooth and engaging animations using this valuable resource.

Can I Use

You can check browser compatibility for CSS properties using Can I Use. It is essential for understanding which features are safe to use.

W3Schools – CSS Tutorial

W3Schools provides a beginner-friendly tutorials with live examples. A great way to learn CSS fundamentals and advanced techniques.

Frontend Mentor

Frontend Mentor 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.

PlayCSS

You can improve your CSS skills by completing daily challanges on PlayCSS.

That’s all for today.

I hope it was helpful.

Thanks for reading.

For more content like this, click here.

You can also follow me on X(Twitter) for getting daily tips on web development.

Check out CSS Scan, a browser extension that lets you extract the code for any CSS element of all the websites across the internet. Click here to get a 25% discount on CSS Scan.

Keep Coding!!