Hacker News Reader

Comment by victor106 | Hacker News Reader

What’s the best resource (book, videos etc.,) to learn css these days?

Hey once you're past the fundamentals check these two cool games out. They teach how to quickly grasp the most difficult parts of CSS - the layout.

https://flexboxfroggy.com/ https://codepip.com/games/grid-garden/

I wish all learning was this fun.

Wow, that grid-garden game is great.

Here's original link for grid garden, and it doesn't need login to play https://cssgridgarden.com

I'd be curious to know what you consider the fundamentals to be.

I have heard lots of good about "CSS in depth" by Keith J. Grant. It explains why and how CSS does things, rather than just telling you to do one thing for that use case, and another thing for that use case. It is meant for people who already know a bit of CSS, but it wouldn't be too hard to learn the basics of CSS first then read this book. Also, it is free online on the publishers page, which is extremely generous of him and the publisher.

https://www.manning.com/books/css-in-depth

It's probably not for everyone but I just read the specification [1] last week. It is probably also worth noting that I did this to get a better understanding of some details and not for initially learning CSS. But those are mostly easy to read specifications and I think one could use them to initially learn CSS.

CSS level 1 is pretty short but will still teach you a big chunk of the fundamentals of current CSS even though it is more than 20 years old. After that you can focus on the changes and additions in later versions - those newer specifications are a lot more technical and precise and cover a lot more features, so they are also longer and less fun to read from cover to cover.

[1] https://www.w3.org/Style/CSS/current-work

That was brave. I learned how the box model works from the specification.

I commend you. I am with Kyle Simpson (of the You Don't Know JavaScript fame) here—too often people don't even try to learn about the stuff they are using and are surprised by the behaviour which is clearly stated in the specification. This is true for JavaScript, but this is especially true for CSS. I think it is one of the least respected technology, devs don't spend much time and effort in learning it and then complain about it being a mess and not making sense. So if anyone is tired at throwing stuff at the wall and seeing what sticks just go and read the specs. It's much easier now than back in the days of IE5/6, no grid and no flexbox.

MDN: https://developer.mozilla.org/en-US/docs/Learn/CSS

CSS is completely dependent on HTML. If you write poor HTML - then you've already shot yourself in the foot. If you can't learn them together - then it's really hard. People don't learn the different display types / or positioning, and then they freak out when they can't figure out why a margin-top isn't working on their inline element. I've never met anyone I consider to write decent markup or styles in any of my jobs. This is pretty good: https://maintainablecss.com/chapters/introduction/ - but it doesn't teach you CSS. It teaches you how to write maintainable CSS. MDN is the best we've got (so far)

An updated version of CSS: The Definitive Guide was released relatively recently, and I think is fairly good.

(https://www.amazon.co.uk/gp/product/B076HZSWTM/)

https://mastery.games

https://developer.mozilla.org/en-US/docs/Web/CSS

is all anyone needs except the standard itself.

Reply on news.ycombinator.com