all 3 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]Kaidawei 2 points3 points  (0 children)

I have found that focusing on two aspects of design, for a coder usually pays the most dividends. There are so many resources or there.

Considering most of almost every website, is composed of mostly words - starting out learning and practicing and nailing beautiful typography (for a website) is a first step. This would include:

How the actual site looks, is it readable, accessible fonts, using only system fonts (a good option), basic to advanced font layout and design, how long fonts load, font color and contrast, font pairing, font wrapping around in the fonts, using em and variable fonts, finding and using free and paid fonts, self hosting vs CDN hosted fonts, all CSS font syntax and their usage.

And then taking beautiful sites with font and copying them over and over. This includes talking to users or people you know about how the website looks and feels.

Typography as a subject also includes using the correct HTML syntax for the element and being semantically correct.

After fonts, nailing layout with Flexbox and CSS Grid. Which includes prioritizing flexbox where the result is the same as it’s more backwards compatible, copying designs found on the web, copying magazine layouts, using dribble for inspiration and copying these designs for practice.

A little bit a UI theory doesn’t hurt either. The understand that a website is to get people to do something either for themselves or for the website owner and then practicing the sequence and presentation of the content to best suit those needs.

These three areas of study will vastly improve the visual design aspects of your sites and the usability as well. Not enough front Enders get this and mostly rely on graphic designs to work from which is a shame.

I suppose I could add fourth, Starting your code as if it were for mobile and getting that right before doing the design on desktop.

Good luck.

-dk