Making things look not-terrible – especially in HTML/CSS

https://www.refactoringui.com/book and https://hellowebbooks.com/learn-design/ are good introductions for non-designers. Color selection, a bit of font theory, spacing, best use of icons.

refactoringui is by the author of tailwind CSS framework. Later launched https://tailwindui.com/#components It costs money, I use the screenshots for inspiration only.

For simple overviews targeted at folks who are developers include:

https://www.taniarascia.com/design-for-developers/ (Tania Rascia's take is my favorite, for its clarity and scope, even though I disagree with a few of the suggestions)

https://paul.copplest.one/blog/design.html (Paul Copplestone's is a little less up my alley, but some folks prefer it)

Use a UI component library like MUI or Bootstrap. There are a lot of them, and you can customize them to your needs.

I think the best thing you can do is to keep it simple. Always ask yourself are you making it flashy for yourself, either because you're procrastinating or because you personally like the particular flash. And then ask yourself, does my audience care? Plenty of examples of "poorly" designed websites that dominated their market share. The users don't generally care.

To answer your question, I like to add a lot of placeholder text and images to all the columns and divs I plan on incorporating into the layout. When you are designing from scratch it's easy to say your color scheme or border choice looks bad, because it all looks too empty or scarce.

Start with the content first and use design to make it the content as accessible and efficient(UI) as possible, that's the most important thing IMO.

Problem is there are many ways to do something in CSS and a lot of CSS is kinda ugly.

My approach was reading some good CSS books (Handcrafted CSS is a good one, Stylin' with CSS is another) and articles, also find sites with the look you like.

With an understanding how good CSS works, you can better use a browser's CSS inspector to identify the key elements that make the layouts work in your favorite sites, create test pages and build your own stylesheet.

Alternatively shop for with a pre-made CSS library (there's tons of em out there), I'd look for lightweight ones where figuring out how it works is more of a possibility.

I know how you feel. I was just trying to make a demo a bit nicer looking for work: "Uhh...maybe if I add rounded corners...?"

Nice to see so many interesting suggestions here!

99% of time, i can get away "borrowing" from some pattern: http://ui-patterns.com/

I am in same boat since a long time. I think you should consider hiring someone on fiverr. They do the design for you and then you go and implement it in html/css.

i know there have been 'design courses for (idiot) programmers' that i heard about thru indiehackers or similar. i believe it's maybe prob decent, and almost certainly costs money. maybe a google search would find it?

sounded like it started from an organic place - some idiot programmer asking his design-y friend for advice. and it spiraled from there.

use flex box. and make sure to put this line everytime you use css

* { box-sizing: border-box; }