Learning some shorthand CSS (MFW#7)

“My First Website” series navigation: first postwhole series

mfw7In the last post in this series we centered our web page, added some padding and margins, and put a border around it all. But, in order to do so, it took about 13 lines of CSS code. Ouch! Most people, after seeing that much coding, would give up the idea of hand-coding a website and run to a WYSIWYG visual editor.

Never fear, there are actually a few ways to take that obnoxiously long CSS code and shrink it down to only 4 lines! In this post, you’ll learn how to miniaturize your CSS code and — as promised — talk about some spacing anomalies.

Read on…

How big is the Internet?
And just how much of it is worth your time?

It’s time to boggle your mind with some statistics…


According to the most recent research, it is estimated that there are now over ONE TRILLION web pages on the Internet today. Both Google and Microsoft confirm this with Google stating that it already has those trillion+ web pages indexed (that’s gotta eat up a lot of storage space.)

Putting this into perspective: it means that there are more web pages than there are humans living on this planet (world population is estimated to be approximately 6.7 billion). Taking it even further with a little bit of elementary arithmetic, it’s the same as saying that each one of us bipedal, opposable-thumbed, conscious individuals has about 150 web pages of content online.

If you spent only one minute to read each web page in existence today, it would take you about 31,000 years of non-stop reading to get to each one; no sleeping and no bathroom breaks (unless you’re using wireless laptop, netbook, or iPhone ;) )

Read on…

HTML line break tag – when and how to use it

HTML line break codeA lot of beginners to website design want to know how to create a line break using HTML. And while the tag used to create a line break is easy to remember, knowing when and how to use it correctly is a little more complicated. In addition, there are many times when you shouldn’t even use the HTML line break code at all.

In this post we’ll take a look at line breaks, what is the HTML tag for one, and when to and not to use them.

(By the way, if this is your first time visiting Newbie Website Design, then I encourage you to check out the My First Website series to learn how to build websites the right way.)

Let’s get learn more about HTML line breaks, shall we?

Read on…

Margins, padding, and borders oh my! Plus centering a website with CSS (MFW#6)

“My First Website” series navigation: first postwhole series

mpbIn this post of the “My First Website” series, we’re not going to touch the HTML of our website at all! Instead, we will focus only on the CSS. Specifically, how to add margins, padding, and borders. In addition, we are going to take our web page (which was stuck hard and fast to the left side of the browser window) and center it using some simple CSS.

If you haven’t done so already, fire up Notepad (Windows) or TextEdit (Mac), open the document called “style.css”, and get your “index.html” loaded up in your browser to view your results as you go through this tutorial…

Read on…

9 hidden gems at Newbie Website Design

Blogs have a lot of posts — A LOT of them — and Newbie Website Design is no different. Unfortunately, most people don’t have the time to go back through the pages and pages of older posts looking for the “hidden gems” of great advice or even writing genius. ;) To help those with limited time to hunt for the good stuff, I’ve gone through the past posts and hand-picked some of the most popular from times gone by. Enjoy!

Internet forum behavior
A short and funny video about how to behave on an Internet forum.

Create a strong, secure password
Learn the right way to create an extremely hard-to-crack password.

Technology for country folk
A humorous look at some common techno-lingo.

4 Classic navigation positions
Learn about the 4 classic navigation positions as well as how to choose which is best for your website.

A quick look at why beginners to website design should avoid using visual WYSIWYG editors.

Learning from “Your Logo Makes Me Barf”
Learn what not to do when designing your logo with some “slap-your-forehead” examples.

Make My Logo BIGGER Cream!
A humorous video that pokes fun at bad graphic design plus a few lessons you can pull from it.

Boxes – the building blocks of websites
A visual guide to help you uncover just where the invisible boxes of a website’s design are located.

Cleaning up an all-centered website
Find out how to fix the most common mistake made by beginners to website design.

The best website fonts for legibility

Best fonts for website legibilityIn a previous post titled The best fonts for websites, I talked about how to choose the best fonts for your website so that no matter which operating system your visitor is using (Windows, Mac, Linux, etc.) or which version (Windows 98, XP, Vista, Mac OS 8 through 10.5) they will be able to see exactly what you intended.

In this post, however, I’d like to talk about which font style is best for legibility (i.e. which font is easiest to read on a computer monitor.) But before reading deeper into this post, I encourage you to check out the post mentioned above (The best fonts for websites) as well as the post titled Different types of fonts. They both contain information that will help you understand this post.

All done? Ok! Let’s uncover which fonts are best for website legibility:

Read on…

Screencast #4: Make a negative space logo in Photoshop

Photoshop screencast for beginnersIn a previous post called Creative use of negative space in logos, I presented a list of very cool logos that use negative space (a.k.a. white space) to bring out hidden letters or shapes. The graphic used at the beginning of that post wasn’t something I found on the Internet but rather something I created in Photoshop.

In this screencast, you’re going to learn how to create one for yourself. In addition, I threw in a few more ultra-convenient keyboard shortcuts to help you get around Photoshop in style!

Click the “Read on…” link below to view the screencast:

Read on…

The best colors for a website’s content

eyeNothing can influence your website’s visitors more than its colors. Colors create the mood and set the matching tone for your content. The right colors in the right places can excite, inspire, and encourage your visitors to dig deeper into your website. On the flip side, the wrong colors in the important places can destroy all of the hard work you put into the graphic elements of your website design.

Many beginners to website design ask “What are the best colors for a website design?” Well, before you can even decide a total color pallet for your website, you need to know what are the best colors for your website’s content.

After reading this post, you’ll know.

Read on…

What are web safe “hex” colors? (Plus an HTML color chart!)

Chart of web safe hex colorsAs a beginner at website design, I remember the first time I encountered phrases like “web safe colors”, “HTML colors” and “hex colors.” Obviously the last term, “hex colors”, has nothing to do with using colors to bring ill-fortune to those so-called friends who wronged me in the past. But as a newbie to website design, how was I to know the truth? ;)

In this post, I’ll clear up exactly what web safe and HTML colors are and what exactly are “hex colors” (a.k.a. hexadecimal colors).

So put down your voodoo dolls and let’s get into it!

Read on…

Adding some CSS to our website (MFW#5)

“My First Website” series navigation: first postwhole series

css-babyIt’s time for the moment you’ve all been waiting for: adding CSS to our website! In the previous post in this series we finally were able to get some very basic content on our first website. Unfortunately, as far as websites go, it’s pretty lame — no styling, no colors, and what we got was one long liquid layout (a layout whose width varies with the width of the browser window.)

So roll up your sleeves, get Notepad, TextEdit, or your favorite text-digesting software ready to go, because we’re gonna add some CSS!

Read on…

Internet Explorer 6 must die!

die-ie6I’ve been pondering for some time about writing this post. And while browsing one of my favorite blogs today I came across an article that is exactly in line with my recent thinking: IE6 Must Die for the Web to Move On

Now why am I, and millions of other website designers, being so harsh toward Internet Explorer 6?

Oh… where to begin!

The list of negative points in many designer’s books can stretch for miles. But let me give you the highlights:

Read on…