To new web devs from a new web dev:
Try to design your site before you write a single line of code. Be it Photoshop, Paint, a piece of paper, a literal goddamn canvas, you name it. You may thank yourself for it later.

True that. I create simple UML diagrams before mocking up.

@saintograph
Indeed, UMLs are always a great practice.

Follow this medium chanel and your ux design skills will improve

“UX Planet” https://medium.com/ux-planet

@heyheni Thanks for the link.

Somewhat disagree.
The web is more about UX than pretty graphics so a picture sometimes doesn't help much.
I'd start with a wire frame (in balsamic), a rough responsive layout grid, perhaps a prototype with interactive navigation patterns (in invision-app).
Then feel it out if the navigation and components are appropriate.
Before you start drawing your pretty icons and buttons.

And when you design, use a software where you can quickly check the css equivalents of all values, like sketch, unless you are good at exporting Web resources from PS.

I tend to use Sketch to get a rough idea, then decide on colors and details later.

True, you have to know everything before you draw or code anything. Who is going to use that website, what does he need, what are the benefits for the user?

@jiraTicket
I hadn't heard of Balsamiq. Great advice, I'll likely put it under my tool belt.

Make a logical flowchart on draw.io , then you can use it as a map on your journey.

@Andre I think balsamic is the biggest wireframe tool there is. simple to learn and quick to use. I never used to use wireframe for smaller projects cause I thought it took too much time, but balsamic is so easy that I now sometimes do.

Warning : you might fall in love the simplistic style and squiggly lines, and start to wish your real design looked more like the wireframe. :)