How did you get better at CSS?

I've been developing for 2 years now and have been working at my first full-time job as a software developer for 5 months now (not counting my contract work) where I get to spend about 70/30 in backend/frontend respectively.

Whatever frontend work I've done has mostly been focused on placing new components on an Angular app with a sprinkle of CSS and mostly Bootstrap.

Not that my job requires this yet, but I'd like to strengthen my CSS skills so that I can feel confident in my ability to whip up anything I can visually imagine; instead of using a lot of basic CSS to make things look good enough (some position tweaking or color/formatting changes). I want to rely less on Bootstrap.

What resources have you personally used to improve your CSS skill when you were learning? I know there's plenty of tutorials out there (and I've access to a few), but for some reason, I can't seem to get the most out of these tutorials since you need to practice CSS enough to get a good knack of things.

Did you have a certain list of web pages, shapes, etc. that you wanted to replicate and just trial and error your way to the end result? Was there a structured path involved? Are there any practical/online resources available that you found particularly useful?

My motivation/Why: I do mostly backend, but I'd like to be able to whip up mocks for my personal endeavors/side projects more confidently.

Comments

[Jack Harner 🚀]

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.

Recreate A UI in CSS

Make something from real life with CSS

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.

[Antonio Radovcic]

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

[Tyler V. (he/him)]

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):

• Flexbox Froggy
• Grid Garden
• CSS Diner (Selectors) - Full disclosure: I haven't done this one yet, but it looks to be on par with the previous 2 😄

[Erik]

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.

[Aizaz Khaja]

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

[Matt Jared]

Reps. You gotta get your reps in.

• Make 50 tiny things. Some examples: 1. make three buttons all with different hover states, center all the buttons and then stack them on mobile. 2. make a dead simple resume on codepen for your favorite movie or tv character including a picture. think a bunch of text and an image. what's the hierarchy of the text? make the name HUGE, what units did you use to make it huge? what units are available 3. make a custom form field and check it on different browsers (including your phone) safari on iphones is wild as shit for buttons. Look that up. Fix it! 4. strip your personal site down to bare bones and rebuild everything up with real life content but only css that you wrote or tracked down. and so on and so on...
• Get the basics down cold via reading CSS Tricks and MDN (and other blogs). Box model, grids the OG way and the new slick way. See how Sass and Less work. Muck with mixins, functions, maps on your next assignment which is....
• Make 50 more tiny things (even smaller than what I wrote before. Everybody has "cards" in web design now. Make a card with some funky background colors and another one with an image as the header and a third that does a barrel roll.)
• Read other people's code and muck with it. Download the Bootstrap source code and go through every single partial and figure out what's going on with the UI elements.
• Make 50 more tiny things.
• Share what you know and have learned

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! =]

[Aizaz Khaja]

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

[Fen Slattery]

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:

• understanding specificity
• not over-specifying selectors
• organizing your CSS

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

[Aizaz Khaja]

Thank you for sharing, I will check your talks out :D

[Meghan (she/her)]

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?