Why does everybody hate it so much and prefer mdn?
It’s written for Google Adsense. It doesn’t get very many updates. Some information is misleading is wrong.
MDN is run by Mozilla a nonprofit and has the developers best interests in mind rather than advertiser’s best interests in mind.
But of the two- which would you recommend to beginners?
w3schools is ok if you need some quick info about css properties you forgot, or stuff like that, but as mentioned before it is quite outdated and MDN is better choice for sure.
In my opinion it really depends. Some of the MDN stuff is too detailed if I just need a quick refresher on the exact syntax how to select a child element and I like W3 for their try-it code editor frames, but at the end of the day I use both.
I don’t think there is a “wrong” way to learn since there are so many different ways to solve front end problems, try using both and see which one is more useful to you, maybe cross-reference with other sites to get a full picture.
That being said if you’re planning on following along with their learn HTML/ CSS tutorial pages I’d recommend MDN or the beta curriculum on here just because it’s more recent.