How do I get better at web development?

Question

My code is plan and boring, I try to add colours but it's always plain with no plan and I don't know how to make gradient.

Answer 1

It is common for web designers to use packages such as Tailwind or Bootstrap to build sites as these types of libraries have a lot of built in visual features to help you build attractive websites.

Some of the issues they address is the ability to design a nice site that looks good in mobile as well as desktop. They call it "responsive".

Answer 2

that'a right. bootstrap and tailwindcss + use your own rules.
for instance: there is a blue something. it's almost okay for you, but you need a different colour. guess what you should do :-)
that's it! creating the same class with the modified values in the separate css (which is loaded after the bootstrap/tailwindcss to overwrite the original values)

Answer 3

I remember when I was coding one of my projects, I felt like it was just so....bleh, probably in the same way you feel.

Besides the tools that have already been mentioned, a big help for me was actually viewing some videos on UI design via Youtube. Even if the UI videos are mainly targeted toward mobile, they can still be extremely helpful for any platform.

After a couples of days or weeks of learnings and practicing, I made a major overhaul on my app (you can see an example page of this overhaul here: https://www.sololearn.com/post/1739300/?ref=app).

You can use other tools such as:

Material Theme Builder (helps with color choices)

https://material-foundation.github.io/material-theme-builder/

Google Fonts (font styles)

https://fonts.google.com/

* And remember, even though it's great to make things look pretty, don't forget about accessibility as well! They go hand-in-hand.