Getting your design toolbox ready (MFW#2)

“My First Website” series navigation: first postwhole series

The website designer's toolboxHopefully by now you have followed the instructions in part 1 and got your folders all set up and ready to go. Now it’s time to collect the software that you will need to build your very first website from scratch.

There are only two programs that you must have at the beginning. One of them you already have on your computer. In fact, you are probably using it right now to view this website (provided that you aren’t reading this using an RSS reader.) Unfortunately, that particular piece of software may be old and in disparate need of an update.

The second little software gem is what you will need to actually enter all of the HTML and CSS goodness that you are going to learn. But don’t worry, you already have this software on your computer, too (but you can get something even better on the Internet for free!)

Let’s get going…

Bad browser – good browser

I’m sure it’s obvious that a browser is needed to view the website you will be making. But what browser you use is of great importance. Now, I’m not going to get into a “Firefox is better than Internet Explorer” or “Safari is better than Firefox” sort of debate. The fact is all three are very good browsers. But you must update to the latest version of your favorite!

If you are using Internet Explorer 6, then you will be in for some major headaches. Internet Explorer 6 (IE6) is old, outdated, and is only about 50% compatible with the latest web standards. If you doubt that last statement, then go to Google or Yahoo and enter “IE 6 CSS bugs” (be prepared to stare in awe at how many results come up.)

Internet Explorer 7 is only about 75% compliant with current standards.

Your best bet if you are an IE fan is to get the latest version, Internet Explorer 8. It IS standards compliant — about 6 years late, but who am I to judge the world’s largest software maker? (Grab it here.)

Firefox is a great browser. It has Mac, Windows, or Linux operating system versions, a clear, clean interface, easy to use, and power features. But what most designers like the most is that the Mozilla foundation (who make Firefox) work quite hard to keep it up-to-date with the latest standards. (Grab it here.)

Apple’s Safari is also gem of a browser. It also comes in Mac and Windows flavors, has a bunch of goodies that the others don’t have as well as being up-to-date. (Grab it here.)

Text editing software you already have

Obviously if we are going to hand-code a website then we need a text editor. Here’s what you already have on your computer:

Windows: Notepad
(Find it in here: Start Menu—All Programs—Accessories)

Mac: Text Edit
(You’ll find it in your Applications folder)

Both will work just fine, but they lack the cool features of the free downloads that you can find on the Internet. Let’s look at those next.

Free text editing software

Now we’re getting somewhere! Here are two free programs that have a bunch of useful features that make hand-coding a website an even more pleasurable experience. Both have the ability to show more than one document at a time in the same window (perfect for switching between the future pages of your first website) as well as syntax coloring (the software automatically adds color to the HTML and CSS so it’s easier to see.) One is for Windows and one is for the Mac.

Windows: NotePad2
Mac: Text Wrangler

What about graphic software?

I know that most newbie website designers are anxious to start making really cool graphics for their websites. But for this series, I’m going to hold off introducing those techniques for as long as possible. Here are my reasons:

Reason #1:
Too many newbies focus all of their attention on trying to make such graphics before they learn exactly when, where, and how to place them on a website.

Reason #2:
With such a focus on making graphics, newbies fail to learn all of the really cool things you can do with HTML and CSS. What’s great about using HTML and CSS to accomplish these cool feats of websites magic is that because they are code-based, your web pages will load extremely fast.

Reason #3:
The best graphic software is just too damn expensive. Photoshop costs about $700 and it’s cheaper (yet powerful) little brother, Photoshop Elements, is about $70. Sure, you could use cheaper software. But since Photoshop and Photoshop Elements are pretty much the standards, why settle for less?

Your assignment

Now that you know what you need to get your first website off the ground, go ahead and update your browser (and maybe even try a different one), download some free software, and have a little fun with them all.

In the next article in the series, you’ll get your pizza-greased fingers around some actual HTML!

If you enjoyed this post, then how about sharing it
with your friends using these services? Thanks!

8 Responses:

  1. News Getting your toolbox ready (MFW#2) | Web 2.0 Designer

    [...] See the original post here: Getting your toolbox ready (MFW#2) [...]

  2. Lacy

    Pretty nice post. I just stumbled upon your site and wanted to say
    that I have really liked browsing your posts. In any case
    I’ll be subscribing to your blog and I hope you write again soon!

  3. Franklin

    I always thought I needed to buy lots of expensive software to build web sites. But it looks like I’ll be able to do it for free. Thanks for the heads up!

  4. Gil Brown

    Did you know that supered was listed as a dangerous site due to the adware and other downloads it includes. Do you know of another editor that’s not considered dangerous. I hate adware and would be willing to pay a little for a clean editor.

  5. Gil Brown

    I decided to go with notepad2.

  6. David R - Admin

    Thanks for the head up Gil!

    I changed the link above to NotePad2 after doing some research on SuperEdi and on NotePad2. As a Mac user I don’t worry too much about adware and spyware, but I do know that it is a big concern for Windows users. I’d hate to recommend something that might damage another’s computer.

    I don’t know which paid editor is best, but there are a bunch you can download and test out before purchasing. Most of the programs I saw had similar features, so it’s probably more of a personal choice as to which one you decide to get.

    Thanks again!

  7. Gil Brown

    Wow David, now that’s responsiveness at it’s best. Thank you.
    When you have time, you may want to review notepad2 and compare it with your lessons. It does seem to be a muvh better editor with a lot more features. However, I think they need to be set correctly in order to follow your guideline. I got a little confused with the saving process. I think I got it now… Apparently you save one way to work on the doc and another to view it in a browser. (Remember, us newbies get easily confuse with any variation between instructions and practice. (However, making mistakes and learning to correct them is also a great learning method.)

    Anyhow, I love your site and style and still think it’s one of the best teaching sites I’ve come across.

  8. David R - Admin

    You’re welcome (and thanks for the compliments!)

    If you ever feel that I haven’t explained something well enough or that you’re stuck on any part of any tutorial, just let me know. This blog is to help beginners, and if it’s doing that then I need to adjust my writing. All comments are welcome!

    I should have some time this week to take a closer look at NotePad2 and give some tips on how to set it up and use it.

    There are some FAQs answered on their website. You can find them here:

Share your thoughts below: