CSS doesn’t seem like its easy for most new web developers that I’ve known. I’ve done so many web developer interviews where someone aces an algorithm challenge only to be thrown off by creating a custom CSS button with rounded corners and a drop shadow. That’s why it’s very helpful to have resources to become a CSS master.
Mastering CSS can also save design time. You don’t need to spend as much time in image/graphics programs if you learn how to manipulate images in CSS. You can apply filters to images, clip them, apply masks, and more just with standard CSS.
CSS is that thing you can’t seem to ever get working exactly how you want it. Jokes aside CSS stands for cascading style sheets, and it’s what allows web developers to customize the appearance of their webpages.
MDN (Mozilla developer network) – MDN is THE resource for when it comes to anything web. That being said it’s a massive resource not only covering CSS. Other topics include HTML, web standards, protocols, and the like. MDN mainly provides two types of resources. Tutorials and references. Their tutorials are great for beginners to learn the basics, and their references are great for experienced developers when they need a quick find. Looking to build a foundation for CSS? Check out their comprehensive guide on CSS. Want to learn something specific like CSS transform? Check out their page on transform. Want to learn about anything web related? I’m sure MDN has written something about it. One of the best resources to become a CSS master.
CSS-Tricks.com – CSS Tricks is another fantastic resource for CSS(and Design considerations). They have many in-depth guides you can see here. Looking to learn something in particular like flexbox or CSS grid? Look no further. On top of being a great place to learn they also have a newsletter worth checking out. They’re a high-quality resource, and if you spend any time doing front-end development they’re a resource that will pop up.
Marksheet.io – Marksheet.io is a website that I recently came across. It popped up as I was refreshing my memory on CSS animation, transforms, and transitions. I found it very succinct and straight forward, also it provided good graphic illustrations that helped me visualize what was going on. I recommend it as a straight to the point no-bullshit kind of resource.
Interneting Is Hard – Interneting is hard aims to help beginners learn about HTML & CSS with an emphasis on design. One thing I love about it is it stresses the importance of writing code, and how that helps you understand what you doing. Interning Is Hard is a detailed and hands-on resource. If you like getting your hands dirty and really seeing how things work this is a great place to start.
CSS Essential Training – This video course is available on Lynda, and aimed at teaching the basics of CSS. I think it’s a great CSS 101 resource, and it’s the one I used when I started learning about CSS. One of my favorite resources to become a CSS master.
In my experience, CSS is one of those things that’s conceptually easy to understand, but a bit difficult to put into practice. Many people (including myself) who understanding CSS still need to experiment with it to get the designs they wish. The takeaway here is CSS is something that you need to practice repeatedly to be able to use effectively.
If your looking to build a foundation on which you can logically use CSS in your own work then take a look at these resources
Interneting is Hard
CSS Essential Training
MDN (their CSS tutorial)
If you already know CSS then you’re familiar with how difficult it can be at times. I recommend the following resources for when you need a reference or are trying to learn something new
Also, the other resources if they cover a specific topic you’re looking for.