95% of the more complex errors I've seen* in CSS have been some combination of a misunderstanding of positioning (https://developer.mozilla.org/en-US/docs/Web/CSS/position) and the box model (https://developer.mozilla.org/en-US/docs/Web/CSS/box_model). The other 5% of relatively complex display errors are actually due to unfortunate choices when writing the HTML.

I think once you understand those, the rest is really quite simple. Media queries, clever nonsense with things like ":target" or ":not([class]) > div > img", it's all ultra-simple because there are no logic bugs you can introduce once you know the syntax – the only logic you need to think about is in the positioning of elements on the page.

As a backend web developer, you will find it all very simple. A bit of bloody-minded Googling will solve the majority of your problems, and the CSS answers on StackOverflow are more helpful & polite than they are in many other areas.

For HTML, some features I have found useful include definition lists, dfn, nav, header, section and article elements. It may also be useful to check out Schema.org.

So I guess my recommendation is to get the box model and positioning down pat for CSS, and get semantic elements down for HTML5.

If you like genuinely clever and awesome tricks, check out Lea Verou (http://lea.verou.me/).

*"seen" as in "made myself"