DEV Community šŸ‘©ā€šŸ’»šŸ‘Øā€šŸ’»

Domitrius
Domitrius

Posted on

How did you learn to flex your CSS muscles?

I'm about 4 months into my new job and it's been absolutely amazing. I've felt myself growing in problem solving, clean code, and all in all building out a product.

I was so nervous about the first job, thinking it was going to be insane to try and learn the underlying hard parts of JS (thanks a lot Will Sentance for proving me wrong). As I've been building out new things I constantly found myself reaching for a framework to make all my CSS woes vanish. Thankfully my boss has since challenged me to stop reaching and build out our current project with as much of my own code as possible.

It was here I realized the gap that was left in my HTML/CSS fundamentals by using frameworks so fast.

I'd now like to rewind and do my usual, throw a question to this awesome community.

What do you guys recommend for diving deeper into HTML/CSS -- more so CSS?

BONUS: I've been using a ton of flexbox (obviously). I've been seeing there's continued growth in browsers that support Grid. Do you guys think you only need one? Which? Both?

Top comments (14)

Collapse
 
whoisryosuke profile image
Ryosuke

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.

Collapse
 
domitriusclark profile image
Domitrius

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

Collapse
 
hudsonburgess7 profile image
Hudson Burgess

Several things that have helped me w/ CSS:

  • Play with it in the browser console. It's a way faster feedback loop than edit a .css file -> recompile the whole app -> repeat. Also allows you to flip through all the possible values using the up/down arrows and see the difference.
  • Keep it succinct. Fight to express the layout you want with as few properties as possible. It's easy to make a hot mess with CSS; keeping the code clean makes it so much less intimidating.
  • Find a few good resources and keep them handy. For instance, the CSS Tricks flexbox guide. Don't be ashamed to keep referencing the same things -- there's a reason that's the first Google result for "flexbox."
  • Just write more of it. Don't be afraid to screw things up.

I still despise CSS, but those all made life much easier :)

Collapse
 
domitriusclark profile image
Domitrius

Yeah I've been using Mozilla a lot lately, while trying to force myself to go into the console and do quick style changes!

The one thing I've learned is as you build as an engineer/developer, you learn how to better ask the questions you keep typing into google. Never will I be ashamed to admit I hit the same few resources for basic things all the time (like the proper syntax of a switch statement LOL)

Thanks for your response Hudson!

Collapse
 
chiangs profile image
Stephen Chiang • Edited on

Flexbox and Grid of course aren't mutually exclusive, they serve different purposes and complement each other well.

Also, here's an interesting read on Common IE CSS Grid Misconceptions

That aside, Firefox has a good playground for that to learn on and check out Scrimba that have some awesome flexbox, grid, and general css courses by

perborgen image

Per

Collapse
 
domitriusclark profile image
Domitrius

I've seen a lot of places recommend Scrimba! Thanks Stephen :)

Collapse
 
whoisryosuke profile image
Ryosuke

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

Collapse
 
belhassen07 profile image
Belhassen Chelbi • Edited on

I'm going to start with the css grid & flexbox, I think this video explains it explains the differences and the need for them in depth even though it's just 4 minutes.

For the HTML/CSS part, I don't think there are tutorials or courses which can make you better when you know the basics and you didn't practice. I assume you know the basics very well, start creating things, even small ones, just draw with css (even I don't suggest you do that in production, SVG please), learn how to make animations and transitions. So yeah it's practice practice practice, at a certain point you'll go and learn a preprocessor like Sass, and an architecture for your CSS like BEM for example.So yeah for now, learn flexbox and css grids, play with codepen.io and try to make your app responsive without any framework with media queries !

Collapse
 
domitriusclark profile image
Domitrius

Awesome response!

Yeah, I definitely have a solid foundation of HTML & CSS and I've seen a few books recommended that kind of take you through sets of challenges you may come across and the answers for them.

We're leaning toward Sass very soon, which I've touched in a very small fashion previously, and I'm excited to now start writing for production.

Definitely will check out the video. Thanks for the quick response :)

Collapse
 
domitriusclark profile image
Domitrius

Just wanted to drop in and recommend udemy.com/advanced-css-and-sass/le...

My CSS/Sass skills underwent a HUGE boost in power from even finishing just one project with him.

Collapse
 
willjohnsonio profile image
Will Johnson

Yes taught is insane! You have no choice but o get better!

 
whoisryosuke profile image
Ryosuke

basically! šŸ§™ā€ā™€ļø no worries. best of luck with your learning šŸ‘

Super Useful CSS Resources

>> Check out this classic DEV post <<