Close

July 30, 2018

The One-Line Difference Between Ugly and Amazing Websites

Forget personal taste.

I’m telling you as sure as I’m sitting here… whatever your personal thoughts about the differences between this before and after… one will get you, “Um well… something just feels off.”

And, the other: “Wow! Clean, fresh. Amazing!”

It’s just how people are.

Anyway, here’s the before:

And, here’s the after:


This is a template I’m working on for a new course I’m doing. And, the difference is a single CSS declaration, but it’s light-years in terms of how it looks and how clients will react to it.

The code?

body, p, h1, h2, h3, h4, h5, h6 {
    font-weight: 300;
}

Yup, that’s it.

Making the font-weight thin.

As I was building this, something just didn’t seem right. And, it was annoying the hell outta me. So, I started playing around with the fonts and voila… that was the trick. Suddenly, all was right in devtopia once again!

Of course, this won’t be the case in every situation.

Sometimes, thinning the text will make things worse.

It’s knowing when to and when not to.

That’s the difference between a gimmick or “hack”… and a fundamental.

And, it’s these subtle fundamentals that make all the difference.

I had a designer-friend of mine tell me that once.

It’s true.

And, it’s stacking up all these seemingly small things that makes the difference between a successful, celebrated and well-paid developer… and one who struggles, gets treated like dirt and has to scratch and claw for every penny.

Anyway, if you want to learn more stuff like this, check out my new HTML course. It’s all about the fundamentals and the simple stuff that makes a big impact. My guess is even if you’ve already learned some HTML…

You’ll find things you never knew…

That’ll make you a better developer.

Like Adolf Ezeribe, who just reviewed the course:

“An Excellent Refresher and HTML Primer for anyone.”

Anyhoo, up to you.

Link is here: https://skl.sh/2Lqhh1v

Later,

John

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.