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 (12)
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.
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 :)
Several things that have helped me w/ CSS:
.cssfile -> recompile the whole app -> repeat. Also allows you to flip through all the possible values using the up/down arrows and see the difference.I still despise CSS, but those all made life much easier :)
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!
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
Per
I've seen a lot of places recommend Scrimba! Thanks Stephen :)
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).
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 !
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 :)
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.
Yes taught is insane! You have no choice but o get better!
basically! 🧙♀️ no worries. best of luck with your learning 👍