loading...

re: How did you learn to flex your CSS muscles? VIEW POST

FULL DISCUSSION
 

If you're supporting only new browsers, sure, go for Grid. If you don't want to lose out on more users, use Flexbox. If you don't want to lose any users, good luck and hack away 😜

I found the best way to exercise CSS is with practice, much like anything. I can read docs and tutorial all day, but until I actually sit down and apply it to a project -- it's almost worthless. Half the time I'll reach for a neat CSS trick I found, only to find that in production it doesn't work on half the browsers (if it even works at all the first time in dev). It's practicing with the trick that allows you to see it's limitations, and fully understand it's scope.

I love visual guides like 30 Seconds to CSS, CSS Filters playground, CSS Grid Generator, or CSS Tricks Flexbox guide.

But the best thing I've found is going on places like Dribbble where people post UI + animations and try to replicate them in CSS. If you're capable of translating an entire design into HTML/CSS, you'll probably pick up a few tricks along the way. Maybe pick up a daily challenge like Daily UI and focus on creating everything from scratch in CSS.

I also like to browse repos of design systems like Bootstrap, Semantic UI, etc, and see how they accomplish some of their components or modules -- and what "tricks" they use to make it work across browsers. Same thing on Codepen, it's a great place to find cool stuff and quickly fork, iterate, and experiment.

 

Quick question. How do you test for browser compatibility? Is there a service for that?

 

There are services but most are paid, or require crazy setups.

It's often easier to just crack open all your browsers and emulators (e.g. XCode iOS). Or ideally, checking caniuse.com for the feature - since it's difficult to test stuff like older iPhones.

Ideally you check your site's analytics to determine what the range of your user's devices and browsers, and test the most common of those (rather than running the gamut).

Hmmm ... so it remains a dark art. :D Thanks for the reply!

basically! 🧙‍♀️ no worries. best of luck with your learning 👍

 

Awesome, the resources are perfect! Thank you. I definitely resonate with putting in time building things to learn best. I think I'm just gonna work on translating designs I find on the net into code.

I'm also a very visual learner, I've gone through some of Wes Bos' courses and found a lot of good content for more real-life situations.

Thank you so much :)

code of conduct - report abuse