Creating a Website: Step by Step Suggestions

1 - Pick Up Some Tools

First you need some programs to make your page. Don't worry, you can still make it without investing a lot of money.

HTML Tools
Most will already have the most basic tool for making pages, good old Windows Notepad. This is all you really need for writing HTML. However, you may want to pick up some simple shareware HTML code editors which will help speed up the editing process.

For a list of sites where you can find some of these tools, check out the shareware sites list in the Resources section.

Graphics Tools
You will also need something to edit and create all the pictures, backgrounds and banners that will be on your page. The best one is Adobe Photoshop. This is an excellent, professional graphics program, and is considered to be the industry standard. So it's great to learn it if one day you want a job in the graphic design or web design. Unfortunately, Photoshop is quite expensive. However, there is also Paint Shop Pro, another excellent program that has some of the same effects, is a bit easier to use, and is A LOT cheaper. Another alternative is Macromedia's Fireworks. Fireworks has a lot of great features for creating website graphics, but like Photoshop, it's very expensive.

You can usually download a shareware version of Paint Shop Pro from most of the major shareware sites.
Demo versions of Photoshop and Fireworks can also be found, if you want to try them out.

For Testing
When it comes time to test your site, you should have recent versions of both Netscape Navigator and Internet Explorer. You can also test with other browsers like Opera, (hey the more the better!) however, Netscape and Internet Explorer are the most common browsers in use, so you should have those.

Now you may be wondering, "why must I have both of these browsers?" Well if you are serious about making a great web site, that everyone can view you should create one that looks just as good in any browser. Remember, there are some things that work in Internet Explorer that don't work in Netscape and vise versa. The whole "Looks best in this browser or that browser" thing won't cut it. You shouldn't force anyone to download a browser just to view your page. As the site designer it's your job to make sure it works okay in both browsers.

If your worried about hard drive space, remember, you only need the browser component to test. If you use Netscape, only download the browser component of Internet Explorer. If you use Internet Explorer, only download the browser part Netscape Navigator, don't download AIM and Netscape Mail.

Download Internet Explorer here
Download Netscape Navigator here.

2 - Create an Outline and Sketch a Design

Ok turn off the computer. Yes you heard me! Turn it off! WAIT NOT NOW!!! [fewww] Read the rest of this first...
Before writing any HTML or making any graphics sit down with a pad of paper and write down what you plan to have on your page. Come up with a title. Think about the different sections and how you can organize them. You may also want to sketch out how you would like your page to look. Try several sketches then pick from them which you like the best. Keep in mind that you have to make this into HTML and Graphics, and people have to download it. So don't be too fancy, keep it as simple as possible. Once you have that done then you can go back to the computer.

3 - Create Some Basic Graphics

For more help with graphics see our list of graphics help pages.

Make and edit some graphics, like your background and banners, so you know what sizes they are, etc. and they will be ready to view when you preview and test your HTML as you create it.

4 - Start the HTML

Simple, right? Yeah sure. ^_^

If you need help, remember our list of HTML help sites.

Anyway, start converting your plans into reality by creating out the HTML code. Eventually create and add other graphics, and so on as you create your page. Preview your work with your favorite browser often so you can fix mistakes or problems in your HTML as you work.

At this point, you may also want to check out some design "do's and dont's". Then you will know what to avoid on your page. Check out: Design Tips

5 - Work Out Any Extra Bugs

Take a good look and fix anything you didn't like or you think didn't work as you planned. Note: Do not pull your hair out while trying to fix those pesky bugs.

6 - Final Testing

Need free webspace? Check out our list of Web Host review pages, and Homework Help: Lesson 1

If you haven't already uploaded your page to the internet, go ahead and upload it. Now go to your web address and check it out. Make sure you go to the web address, and test how it looks on the internet, not how it looks on your hard drive! You may find a whole bunch of new problems on the uploaded site.

Now ask yourself: Does it load without errors? No broken pics? Does it load in 30 seconds or less on a average dial-up connection? Does it look okay in both Internet Explorer and Netscape? How does it look in other screen resolutions? Fix any problems you may find.

One last tip, just when you think you have everything ready to go, ask a friend to go through your site. The best tester, is always someone else. Even if they do not find an error, they may still have valuable suggestions for improving your site.

7 - The Grand Opening and Promotion

Once you have a good chunk of your page completed and uploaded then you can start promoting it and opening it for public viewing. Don't let anyone know about your page till you have at least something good to show them. A single index page all by itself without any links to other parts of your site causes visitors to usually become frustrated and then they never will return. Remember a goal is to make something people will at least want to see more than once!

For tips on how to promote your site see Promoting Your Website and Homework Help: Lesson 3 and Lesson 4.