I learned mostly by projects at work.
Floats and clearing have been a giant headache in my first 3 years working full-time in front-end.
If your motivation is practising for personal projects, I assume you can get by with CSS for modern-ish browsers.
So I'd suggest you learn Flexbox and CSS-Grid next.
At least for me, Flexbox brought huge simplification when we started using it at work, since it allows alignment and justifying items with ease.
With CSS-Grid you have a tool to tackle whole page-layouts.
My go-to reference for flexbox: css-tricks.com/snippets/css/a-guid...
A good free CSS-Grid-course: cssgrid.io
To add some fun resources that I've enjoyed using to learn, these are web browser games to help kick off your understanding (or further it if you've got the basic pieces down):
I've used all three of those and they helped me learn Grid and Flexbox in a fun way.
Flexbox Zombies is another great one. It takes a bit longer but it does a great job at spaced repetition.
I love these game type resources. They're an excellent way to get into things and remove the initial hesitation of getting into something new. Reminds me of Vim Adventures! Thanks for sharing
Practice, Practice, & Practice.
I learned most of my CSS knowledge by just messing around on CodePen. Become Familiar with the inspector and start poking through people's code.
As far as resources go, CSS Tricks is my go to. Lots of great articles and tutorials from some insanely talented people in the CSS community.
Reps. You gotta get your reps in.
It all comes down to reps IMO. The more you hit save and refresh to see something changed (whether you intended it or not) the closer you'll be to mastery. Or at least comfort in your job! =]
This is pretty cool. If you have the time and energy, you should create a CSS bootcamp! And we're not talking bootcamp similar to what we have in the industry, but more of a "ok! let's get these exercises done today, GO!" :D
I've got a talk and some linked resources that should help a lot! It's all about how to make CSS seem less scary and frustrating, including:
Honestly more than anything, though, I recommend that folks try out a CSS extension, like Sass. I've mentored a lot of folks who are trying to get better at CSS, and most all of them have told me that learning Sass fixed so many of their issues. (I've got a talk with resources about Sass too, haha.)
Thank you for sharing, I will check your talks out :D
A good place to start would be to ask the question, what do you mean "get better at CSS". Where do you feel you most struggle? In a purely memory/technical aspect in remembering which html and properties to use to get the look you're going for, or do you not like the designs themselves that you make?
We're a place where coders share, stay up-to-date and grow their careers.
We strive for transparency and don't collect excess data.