Collection: CSS Resources

Can you take the heat of CSS? Most developers can't stand CSS because it's so...design-y. Today, I share all of my resources, or go to links, that helped me understand CSS a little better.

In 2007, I wrote a post about whether "Developers Can Dress Up a Pig?" I shared a perspective that most employers don't recognize. Most developers don't have designer skills and vice-versa.

Those who have both skills I call devigners.

They can code JavaScript, PHP, C#, Java, and use CSS, Photoshop, and Illustrator combined. These individuals have their creativity turned up to 11.

When I started using CSS in 1999, it provided an eye-opening experience because of one web site that truly shocked me (it's listed below).

Now that I know what I know regarding CSS, it makes it harder to apply those styles in an architectural fashion so it makes sense.

With that said, I've accumulated a list of CSS resources over the years. I wanted to keep these as a resource for new web developers looking to understand how CSS works. 

• Learn CSS [NEW]
  For those looking to learn about CSS, this is one of the best mini-courses around. It's from Google and takes you step-by-step through 24 small, digestible modules.
  
  
• The "New" Responsive Design: CSS Container Queries [NEW]
  When you think of responsive design, you may think of media queries, but that is soon to change. CSS Container Queries is what the web is learning now for truly responsive web components no matter what device is used. This is a GREAT introduction to CSS Container Queries.
  
  
• CSS Zen Garden
  This is the one site that opened my eyes to CSS. If you "View Source" with your browser and look at each and every page, it is exactly the same HTML. The only think that changes from page to page is the CSS file. Mind. Blown.
  
  
• CSS Diner
  This is more of a recent entry in my bookmarks. The CSS Diner is a tutorial to understand all of the different types of CSS selectors, pseudo-classes, and child elements. I would definitely recommend this site to CSS beginners.
  
  
• CSS Grid Garden
  If you liked the CSS Diner, head over to the Garden to learn even more CSS goodness. It's another interactive tutorial.
  
  
• Flexbox Froggy
  Along the lines of the CSS Grid Garden and CSS Diner, here's one on learning how to use Flexbox.
  
  
• Introduction to CSS3
  If you are just getting into CSS, WhoIsHostingThis.com has a great introduction along with resources and guides with further reading of recommended books. The entire page is solid and worth a look.
  
  
• 20 CSS Codes to Simplify your Web Styling Tasks
  A great list of simple styles to apply to make your site stand out.
  
  
• CSS Compatibility Chart (Mobile Version)
  One of the most thorough CSS compatible charts on the web.
  
  
• CSS3 Information and Samples
  Another great chart with CSS3 examples.
  
  
• CSS Architectures Series
  This awesome series shows the different ways to organize your CSS and make it more manageable.
  
  
• Scroll Bar CSS Support
  This StackOverflow post was answered so well that I marked it as a reference for when I want to change that pesky old scroll bar.
  
  
• How to get started with CSS Shapes
  One of the major enhancements with CSS3 is the ability to make CSS shapes and this introduction gives you example and an idea of what's to come with browser support.
  
  
• CSS3 Scroll Effects
  Looking for a stylish way to scroll a list of items? Stroll.js is what you need to spice up scrolling lists.
  
  
• Card Tricks: Using Cards in Web Design Layouts
  Sitepoint has a recent post discussing the different ways to incorporate cards into your web design. Also, this is considered a web trend for 2015.
  
  
• Bootstrap
  Of course, I couldn't have a list of resources without an entry to Bootstrap. Bootstrap has become the de-facto standard CSS framework to assist developers in building web sites relatively quick. This weekend, they just announced a version 4.0 alpha. So prepare for the next version!
  
  
• CSS Social Buttons...for FREE!
  Looking for a social network button? Why not just download some and start using them. Advantage to CSS buttons? You can make them any size, any color, and any icon.
  
  
• MaintainableCSS
  This truly isn't a CSS file to download, but more of a collection of strategies for components, modules, and giving context to HTML controls instead of creating a ".red" class. Is it red text or red background? See what I mean? Definitely a great read for developers wanting to dig more into design.
  
  
• 8 Simple Rules For A Robust, Scalable CSS Architecture
  A great list of how to keep your CSS flexible while still maintainable. I wouldn't have included it if I didn't think it was valuable. ;-)
  
  
• CSS Visual Reference [NEW]
  Recently found a GREAT CSS resource showing a visual representation of what each CSS property does.
  
  
• Flexbox Playground [NEW]
  This playground gives you a chance to experiment...without breaking your own site. :-)
  
  
• The Complete Guide To Flexbox [NEW]
  Another great post on CSS-Tricks to teach you how to use Flexbox efficiently along with snippets.

Do you have a favorite CSS link you want to share? Post it in the comments below.