Hacker News Reader

Comment by yashap | Hacker News Reader

So, I’m an experienced backend dev, who only occasionally dabbles in frontend. And whenever I do, my CSS experience is basically: https://media1.giphy.com/media/13FrpeVH09Zrb2/giphy.gif

I’d like to fix that, and learn CSS well. I’m not looking for a quick zine like this, more of an in-depth course, say roughly 5-10 hrs. Ideally free, but I’d pay if it’s good. Anyone have any favourites?

View on HN

I know you asked for a course, but I cannot recommend MDN's Learn CSS section enough [0]. It's long, but it was the only resource that got me over my CSS imposter syndrome. They go over so many great principles and have wonderful examples. I'm a huge advocate of tutorial videos, so I was surprised at how helpful I found their documentation.

[0] https://developer.mozilla.org/en-US/docs/Learn/CSS

I'm actually working on this, releasing it in about a week or so (doing the final edits).

It's called "How To Debug CSS"[1], if you go through my post history, you'll get a good idea of the backstory behind it.

Essentially, what I'm trying to do is help developers like you (who are like me, or at least how I was), in that I knew CSS for a long time, but never really felt like I 'got it', in the same way that I 'got' many of the other aspects of web development.

I've now gotten to a point where this is almost the complete opposite. I now feel like I have gained a certain level of mastery over CSS. And most of it had to do with a simple change of perspective.

Here's an article I wrote as sort of a subset of the book, that covers a lot more about how you can truly start to get better at CSS, as a developer: https://planflow.dev/blog/how-to-get-better-at-css.

[1] - https://gumroad.com/l/Debbg/z823cp8 (I've added a pre-order discount code to the book for those interested).

I always have https://css-tricks.com/snippets/css/a-guide-to-flexbox/ open when I do css work. their guides are very good

I try to stick to layout supported by bootstrap framework. https://getbootstrap.com/

Do you know anything about design? Learn some of that first. In the same way that programming makes loads more sense if you can do a little algebra and set theory, CSS makes more sense if you have some idea about how "the eye" moves across a visual space, what colour does and how typography developed (and thus defines the words designers use for type).

Someone else recommended https://every-layout.dev/ last week in another thread. Not sure how in-depth it is, since I haven't bought it (yet).

I do not recommend this (despite of how cool it looks). It is using algorithmic aspects of CSS which is not what it was designed for. These aspects were added later on in CSS3+.

Learn the basics of CSS first. Even after then, it is hard to recommend this Every-Layout approach.

I haven't bought it (yet?), but what's making it so enticing is the composability of the CSS fragments they show.

Can I achieve the same without those "algorithmic aspects"?

What do you mean by that? calc()?

Learning CSS well is a great goal to have. This zine will probably bring you faster to 80% or 90% of that goal than any other content, because it shows the most important aspects about CSS.

Yo, with Flexbox and CSS grid frontend styling is liek nbd anymore. I've been doing frontend for a while now tho so I might be biased..

I guess the trickiest thing still is some layout stuff that isn't covered by ^ and usually when I'm dealing with that kind of stuff I use https://learnlayout.com/ as a reference

Reply on news.ycombinator.com