Hello, I am an experienced (full stack) developer however I always struggle when it comes to playing with CSS. When there's a CSS guy (designer) available everything is smooth, however if I need to do even simple things with CSS I struggle for much time and resort to trial and error and probably hacky solutions.<p>Most of my projects just use the stock Bootstrap without any changes; if something (even something small) needs to change then my nightmare begins :( Also, in various projects I need to work with <i>non-CSS designers</i> (i.e people that create the site in photoshop or something similar) and then I need to replicate that design (from a bunch of images) to CSS; this is a huge PITA for me and usually I just avoid such projects.<p>Now, I believe I am familiar with the basics of CSS (selectors, box model, display, positioning, floats, responsive etc) however I can't undestand the whole picture.<p>What I would like to be able to do is replicate as faithfully as possible (I mean replicate with CSS) an existing site starting from scratch, i.e just with an empty index.html and my own css (let's forget bootstrap for now) plus maybe a basic reset-stylesheet. Is there a book I should read for learning this? Is there some on-line course/tutorial? Something else that you recommend? Maybe a framework? This mainly has to do with laying out things, having proper classes to reuse styles and being responsive, I don't care that much about colors, shadows, borders, fonts, etc since they can easily be copied over.<p>Thanks !
Quick question: Have you tried to formally learn CSS?<p>I think you can get by with layouts on 80% knowledge from just tweaking things but to really be able to go start to finish on a frontend layout, I would suggest investing the hours to know things like what the difference is between a fixed, absolute and relative positioned element or the difference between padding and margin.<p>There are plenty of youtube series and the like, they just require the investment of time.