5 ms·

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

by yashap 6y ago

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 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?

varrock 6y ago
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 https://developer.mozilla.org/en-US/docs/Learn/CSS
archarios 6y ago
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..
- archarios 6y ago
  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/ https://learnlayout.com/ as a reference
cheshire_cat 6y ago
Someone else recommended https://every-layout.dev/ https://every-layout.dev/ last week in another thread. Not sure how in-depth it is, since I haven't bought it (yet).
- systemvoltage 6y ago
  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.
  - Tomte 6y ago
    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()?
polytely 6y ago
I always have https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/ open when I do css work. their guides are very good
the_other 6y ago
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).
taphangum 6y ago
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 https://planflow.dev/blog/how-to-get-better-at-css. [1] - https://gumroad.com/l/Debbg/z823cp8 https://gumroad.com/l/Debbg/z823cp8 (I've added a pre-order discount code to the book for those interested).
mlboss 6y ago
I try to stick to layout supported by bootstrap framework. https://getbootstrap.com/ https://getbootstrap.com/
rmetzler 6y ago
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.

by yashap 6y ago

varrock 6y ago

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 https://developer.mozilla.org/en-US/docs/Learn/CSS

archarios 6y ago

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

archarios 6y ago
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/ https://learnlayout.com/ as a reference

cheshire_cat 6y ago

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

systemvoltage 6y ago
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.
- Tomte 6y ago
  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()?

polytely 6y ago

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

the_other 6y ago

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

taphangum 6y ago

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 https://planflow.dev/blog/how-to-get-better-at-css. [1] - https://gumroad.com/l/Debbg/z823cp8 https://gumroad.com/l/Debbg/z823cp8 (I've added a pre-order discount code to the book for those interested).

mlboss 6y ago

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

rmetzler 6y ago

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.