Lucid Green

So you want to learn how to design websites eh? Well, one of the goals of this website is to help people just like you.

Stuff you gotta know before you start.

What creating websites is not:

Creating websites is not like using Microsoft Word. Not even close. Word stinks as a layout program. It is unpredictable and unstable. Toss out any idea you may have that creating websites is going to be “like writing a word document.” The sooner you get rid of that idea the better off you’ll be.

Creating websites is not, initially, easy.

The sooner you learn this the better. Websites aren’t one thing. Even a single web page is a collection of many different technologies. Get one wrong and your whole page is bad. There also isn’t just one browser in the world, and they don’t all play the same way. What works in one browser makes another (usually Internet Explorer) blow digital chunks.

It’s gonna take time to learn how to make a website. But the reward of being able to say “I made this” is worth it.

Creating websites is not like anything else, at least not if you want to create original websites. Sure you can go buy some 2-bit, website-in-a-box software, but then you get a limited set of templates and websites that look like every other Joe Schmo’s site. Yes, some of the templates are pretty, but they are generic, and ultimately limiting.

Freedom is what I’m selling here brother/sister. Learn to create websites for yourself and you will enjoy a world of unparalleled creative freedom.

Getting started: the basics.

What creating a website is:

So what exactly is a website? Simply speaking it is a collection of web pages all connected by hyper links.

Links are the defining factor of the web. They are what makes this unique medium… well, unique. One document links to another document and that other document can link to still other documents and before long you have a “web” of interconnected documents.

If you actually think about this it will change the way you think about websites. Websites are primarily about information.

Did you catch that? It’s important. Websites and the whole web is about information. (Remember, the “information super highway”). Your website is ultimately worthless unless it presents useful information in a logically arranged way. Fancy graphics and technology aside, websites are fundamentally about communicating information.

The surest sign that you are an immature web designer is that your website is not about information. Instead it has dancing hamsters everywhere, or little mail boxes with letters flying into them, but no really worthwhile content.

In summary, creating websites is a way of communicating. If you’ve got nothing to say, then don’t say it. If you do have something to say then say it in a well organized and attractive manner.

Practical steps to getting started

Here are the nuts and bolts. This is a rough curriculum for learning how to create websites. I’m sure it can be improved, and your comments are welcome.

1. Get a new browser
   Download FireFox right now and start using it for everything. Never EVER use Internet Explorer for learning to create websites. It’s buggy and non-standard, and if you learn to create sites for it first you will rue the day you were born. It’s like learning English grammar. Learn the rules before you learn the exceptions and your life will be much easier.
2. Learn (X)HTML
   XHTML (eXtensible HyperText Markup Language) is the language of the web. You may have heard of just plain HTML, and really there isn’t much difference. But XHTML is what all good websites use today. So you might as well get started on it. Don’t worry it’s really not that hard. It’s basically just the same is HTML 4.

   Resources:

   • Website: HTML Source – simple to follow tutorials.
   • Website: HTML Source: XHTML explained – get a jump on XHTML and use it from the start.
   • Book: HTML & XHTML: The Definitive Guide – Other’s might think I’m crazy for recommending an O’Reilly book, but they are the real deal. Don’t waste time on any of those “For dummies books” they don’t actually help you very much. Anything with an pencil drawn animal on the cover is the book you should buy.
3. Learn CSS
   CSS (Cascading Style Sheets) are the way that good websites are made to look good. They are what make XHTML look like something. Learning the basics of CSS is pretty easy, learning to code CSS well is an art form.

   Resources:

   • Website: Complete CSS guide – just what it sounds like
   • Website: Holy CSS Zeldman – A huge list of CSS resources
   • Website: CSS Zen Garden website – really great resource for studying CSS and XHMTL in practice
   • Website: HTML Source another tutorial site.
   • Book: The zen of CSS design – companion to the CSS Zen Garden website and a little more advanced, but by far the best book on CSS available.
   • Book: Cascading Style Sheets: The Definitive Guide – O’Reilly again, don’t waste your time with anything less.
4. Study, and copy, the masters
   Look at great websites, study how they arrange and present information. Use FireFox’s webdeveloper tool bar extension to study their source code and page structure. You may not be able to recreate their beautiful graphics, but you can learn a lot from their code.

   Resources:

   • Website: CSS Zen Garden – See hundreds of fantastic designs in one spot. Then follow the links to their home pages and see thousands more.
   • Website: The CSS Zen Garden’s archives – See ALL the zen garden’s designs.
5. Start making websites!
   Learn by doing. You should have been this all along, but don’t be afraid to start creating things. They don’t have to be put up on the internet, you can make things just for fun!
6. Get a good WYSIWYG editor.
   Notice that this is fourth on the list. Don’t jump the gun and start designing websites in a WYSIWYG (What You See Is What You Get) editor to start with. Websites are fickle things. If you actually know what is going on behind the scenes you will be a much happier and faster designer.

   The best WYSIWYG editor I know of is Dreamweaver, but it’s expensive. Nvu is free and is pretty good, if somewhat limited. Stay away from Microsoft’s FrontPage. Creating websites with it is is like trying to build a car with a tube of toothpaste, it makes no sense.

7. Get a good graphics editing program
   Most “real” web designers use Photo Shop. It’s waaaay too expensive for the average man like myself to get my hands on. I use Macromedia’s Fireworks which is very capable and robust.
8. Return to the masters
   “Originality is merely creative modification.” (I probably stole that quote from somebody!) Nobody can create something out of nothing.

   Start collecting screen shots of your favorite websites and imitate them. After all imitation is the greatest form of flattery!

   Seriously great designs are really just designs that improve or embellish something already out there. I’m not saying you should COPY somebody else’s design. But you can copy their style, their feel or even their layout if you insert enough modification.

That should be enough to get you started. If and when I get a chance to write more I will give some more practical tips / tutorials.