Path // www.yourhtmlsource.comStart Here → WHAT DO I NEED?

What Do I Need?

So, you’ve decided to join the web designer’s happy gang? That’s wonderful. You’re probably asking, “What software do I need to get before I can start?” And the answer? Probably nothing.

Clock This page was last updated on 2012-08-21

The basic stuff

Yep, that’s right. You already have everything you need to create a competent website. All computers will come with some of the basic tools necessary to write HTML and CSS, and to edit images. First of all, you’ll need a text editor to write your HTML and CSS files. If you have a PC and use Windows, you can use Notepad, the most basic text editor on your computer. If you have a Mac with OS X, you can use TextEdit. You know how to get them right?

On a PC, open Start > Programs > Accessories > NotePad The NotePad icon
On a Mac, open Finder > Applications > TextEdit The TextEdit icon

sourcetip: Mac users going the TextEdit route will need to change some preferences to get the application to save files correctly. In the Preferences, under “Format”, choose “Plain Text”. Then under “Open and Save”, tick the box that says “Ignore rich text commands in HTML files”.

Other than that, you need an Internet browser, which you have already because you’re reading this in one. Bear in mind however, that it is probably best to have a copy of each of the popular browsers installed on your system. You’ll probably settle on one to use as your own primary browser, but it’s very helpful to have the others as you can check how your site looks in each browser (since sometimes pages will look different) and make sure that it works, which is important.

Image editing is where it gets tricky. Most people won’t have an image editor that can save in the Internet’s two graphics formats. Microsoft Paint, which comes with Windows, can save in both .gif and .jpg format, though it isn’t really much of an editor to begin with. Your best bet would be to get a 30 day trial of something like Photoshop. You could also use » GIMP, a free Photoshop-like image editor, if you’re able to put up with it.

Do I have other options?

But of course. It all depends on what you have installed on your computer. Common programs that you may have are things like Microsoft FrontPage, FrontPage Express or Microsoft Word. These editors are WYSIWYG editors, i.e. you are watching your page as you design it. However, these three programs generate truly horrible HTML code and I strongly advise against using them, as the code is messy and works badly in many browsers.

My advice is simple: start with a text editor. It might be a harder slog for the first week or so, but you will learn much more, and have a much clearer understanding of your code. Taking the easy option with FrontPage or whatever will leave you outputting sloppy HTML and not learning much about how to design and structure pages. Even worse, once you encounter a bug in a layout that your editor can’t fix automatically, you won’t be able to go into the code and fix it yourself.

Once you’ve used NotePad or similar for a while and are comfortable with your knowledge of HTML you can allow yourself to use editors that do more of the hard work for you. Assisted text editors like Notepad2 (PC) or TextMate (Mac) are great for saving you time once you know exactly what you’re doing. Try to stay away as much as possible from graphical (WYSIWYG) editors, as unless you need to design a site very quickly, a hand-coded page will always be superior to an automatically generated one. Care enough to spend time working on your site.

In a perfect World...

In a perfect world we would all have a couple of thousand to splash out on fancy software to get the best results with the minimum effort. In some areas, you get what you pay for in software, but there are a lot of very nice programs you can get now that are cheap or even free.

That said, if you feel that you would benefit from a more advanced html editor, you can read our own software reviews page to get some download information.

What do I use?

My own software selection reads thusly. When I’m using Windows, I use these programs:

  • Notepad++: a powerful text editor for the PC. Free and open source.
  • PaintShop Pro: a really excellent image editor. It’s shareware, so you’ll need to pay for it after a while. You also get Animation Shop, to make GIF animations.
  • FileZilla: once your site is built, you need to FTP it onto the Internet. FileZilla is a free piece of software for this.

When I’m using my Mac, I use:

  • TextMate is a terrific text editor which can do syntax highlighting for dozens of common markup and programming languages.
  • Transmit is my favourite FTP program on the Mac.

There’s lots of great open source software for the Mac. So you see, with a bit of downloading you can have built up a collection of great authoring software, mostly for free. Here’s some full reviews of these programs.