Getting ready

Where are we?

You’ve decided to create a new site by reusing an existing design. Now what?

This lesson’s goals

See how to:

  • Work out what you want.
  • Gather your tools.
  • Set up directories.

Knowing what you want – a little

You’ll be looking at lots of different designs. How do you know what to choose?

Making a list of things the design must have. Such as:

  • Mood. Modern, traditional, fun, conservative, extreme, decorative, plain…
  • Layout.
    • How many side bars?
    • Menu location – left, right, top, whatever.
    • Want a footer?
    • Place for a logo in the header?

When you’re making your must-have list, don’t be too picky. You may not find a design that’s exactly what you want.

If you’re making a site for young girls, don’t say: “The design must have a pink background with flower accent graphics.” You probably won’t find it.

Instead, say: “The design should be attractive to young girls.” That’s the right goal, and you’ll have more options to choose from.


I see some Flash templates out there. You can make a complete Flash site. What do you think?


I’d avoid that. Flash is great, but not for entire sites, unless you have very good reasons.

First, you need special tools to edit Flash. Some template companies offer online tools that make it easy to make a Flash site. But if you want to do something even a little bit different from what their tools do, you’re out of luck.

Second, Flash sites don’t index well with search engines. If search engine traffic is important to you, don’t use Flash.

Third, Flash sites can be just plain annoying. They’re cool when you first see them. But after a while they can be painful.


Does Flash have any place?


Yes! Slide shows with voice over, educational animations, games… I’ve done a lot with it over the years, and still use it. Just not for entire sites.

Gather your tools

Here’s a basic toolkit. Everything is free. You’ve seen this stuff before. I just want to remind you.

  • NetBeans or another IDE. For editing HTML, CSS, and JavaScript.
  • Firefox. The official CoreDogs browser.
  • Firebug. A Firefox extension. Lets you find the right CSS to change.
  • ColorZilla. Another Firefox extension. Lets you get the right color codes.
  • MeasureIt. Yet another Firefox extension. Lets you make things the right size.
  • Paint.NET or another graphics program. Make and change graphics. I use Paint.NET for simple things, and Gimp for more complex tasks.
  • WinSCP or another file transfer program. To get your work up to the server.

Set up your development directories

You’ll need to have a directory on your hard disk (or USB flash drive or whatever) to do your work. For example, if you’re working on a site called BiteSize, you might open your Documents directory, and make a directory called BiteSize.

Project directory

Figure 1. Project directory

When you work on a design, make snapshots as you go. A snapshot is a copy of the design at a point in time. If you mess something up, you can go back to the last snapshot.

When to make a snapshot? When you’ve got part of the design working. Say the first thing you work on is the top nav bar. When you get it right, take a snapshot. Then you work on the layout. When you get that right, take a snapshot. And so on.

How to make snaphots? First, make a subdirectory in BiteSize called current. This is where you do your work. After you’ve been working for a while, make a copy of current, and call it snapshot1. Keep working. When you’ve made a bunch o’ new changes, copy current again, and call it snapshot2. And so on.

After a while, your working directory will look like this:

Project directory with snapshots

Figure 2. Project directory with snapshots

snapshot1 would be the oldest snapshot. snapshot4 would be the newest snapshot. current would be your most recent work.

Suppose you made a bunch of changes to current, and they weren’t working. You’ve lost track of what you did. You’d rather just start this part over. You can delete current, copy snapshot4, and rename the copy to current.

What you’re doing is called “version control.” This simple approach is just fine for basic, one-person projects. Professionals working in teams use version control software, like Git.


  • Work out what you want, but only in general terms. Be open to new ideas as you look at designs.
  • Get your tools ready. IDE, browser, extensions, graphics editor, and file transfer tool.
  • Make working directories.

What now?

Let’s go find ourselves a design!


How to...