Some Tips and Tricks To Making Your Website Look Nicer(for css beginners)

Hey!

You're making a website, and you want it to look good, but you don't know how. Here's a helping hand, I'm sure this will be a helpful guide to building good looking websites.

If You Haven't Done So Start From The Beginning.

Before you do anything start with html. Most things that you can do using css and javascript that are actually important for your website you can do with html. After you've reached the extent of your html knowledge and the information available to you, stop using html.

Wait, what?

Yeah, use markdown instead. Learning markdown is way easier than html. This post is written using markdown, and every post on DEV uses markdown. I'm not going to explain markdown basics, but markdown is eventually processed into html any way, so you can still use html in a markdown file(you likely won't need to do this often, markdown usually makes things easy).

CSS Time!

Okay, you want to style your Web App or Website. Here are the most important basic tips.

Common Sense Tips:

1. Don't use thick borders
2. Don't colour your borders

3. Use online tools to help:

   • online colour pickers
   • online blenders
   • free css dividers(must be able to copy and paste code)
   • free basic css animations

4. some unique design

Smartie Tips:

1. Use svgs over other image types
2. Use classes for all animations and effects
3. Make some of the effects on hover or mouseover
4. Use scrolling/scrollbar effects(ex. a progress bar at the top)
5. Use css variables for your colours
6. Have a dark and light mode(not always applicable)
7. If your website has a functional usage, like a calculator or IDE, make a quick skippable UI tutorial
8. Make your title text change if the visitor does something, like leaving.

Okay that was a lot of things I should do, how do I do them?

Here's a link to a website I made in about a day or two using some of the things I've mentioned.

Here are two posts that will likely give you a boost:

1. 40+ High Quality Free Resources for Web Development
2. 50+ free tools and resources to create awesome user interfaces

Time To Get Coding!

Get to it!

Comments

[Bayu Angora]

I use soft thin text-shadow for my blog. I use most of smartie tips above too, except the progress bar. And I don't need any preloader too, because my website is fast enough to load.

[Sean]

Cool.