I highly recommend to use https://tailwindcss.com/ https://tailwindcss.com/, because it has a very small abstraction layer so is easier to understand. And it me

I highly recommend to use https://tailwindcss.com/ https://tailwindcss.com/, because it has a very small abstraction layer so is easier to understand. And it means you work only need a single .html file with everything you want so near zero context-switch. You can see is doable looking at https://duckduckgo.com/?q=tailwindcss+timeline https://duckduckgo.com/?q=tailwindcss+timeline, but the real question is how to learn it. Apart of the other comments, a good suggestion about this: - Your MAIN goal is to build structure/layout first, then later visual flairs This is the most key thing. - Start from the inside and go outward. So, if you are doing a form field, you start with the input, put the details (like an icon at the left), then the label, then layout both (putting the label on top for example), etc. - Make your html editor format the HTML, and try to build a good hierarchy structure So for example: <div class="flex"> <div class="flex-none w-14 h-14"> 01 </div> <div class="flex-initial w-32 ..."> 03 </div> </div> You wanna see at the code and have 100% clear what is the order of things. Also make spaces that separate components, so is easier to see when something end/start. -- I will put my major focus in the things that in https://tailwindcss.com/docs https://tailwindcss.com/docs are on "Layout", "Flexbox & Grid". DO THE EXAMPLES YOURSELF, not just "read the tutorial", do it with your own hand and see how things change and flow. When you get how do layout the rest is far easier.