Text Size

Tips & Tricks

Web Hosting

After using Godaddy.com for several years, and being put off by their embarrassing marketing campaigns, I switched to Hostgator. Hostgator provides better service, their server farm uses wind power, and as a web developer with multiple clients I can host several domains under the same account at no extra charge (using their “Reseller” hosting plan). If you are planning to do web development as a freelancer, you'll need to host your client's work, and I recommend Hostgator.

HTML Starter Template

Here's a basic HTML template that you can use to get started, with all the correct header coding. [ New version Sept. 23, 2008 to avoid validation Doctype warnings. ]

To use it, download it to your computer using right-click on your mouse (or Control-click for Mac users without a two-button mouse)... if you simply click on it, it will load into your browser and all you'll see is a blank page.

Video Tutorial: Fetch

Listamatic Rollover Menus

I used to create rollover lists as table graphics using ImageReady, but since adopting css web standards, my favourite rollover menu technique can be found at Listamatic:
Can you take a simple list and use CSS to create radically different list options? The Listamatic shows the power of CSS when applied to a simple list.
Note that this technique does not support drop-down menus. Those are more complicated and trickier to make work in all browsers.

Randomizer

When you need to show random content on a page (such as when the instructor asks you to include a "fortune cookie" function on your home page), use the method from JavaScriptKit.com:
Description: Easily display a random piece of content chosen from many on the page to your visitors using this script! Just wrap the participating contents each inside a DIV with a special CSS classname, and that's it! Furthermore, you can have multiple "groups" of random content, with the script picking one to display randomly for each group.

To download the javascript file, right-click this link and name it "random.js."

Making JavaScript Adapt to XHTML

I read once about a code snippet that adapts javascript code to XHTML, and I forgot about it faced with a student's code last year. By enclosing your javascript code in a CDATA section in the head of your web page, Validator will ignore it. You can find out how to use CDATA by going to this page at codehouse.com.

Getting Forms to Validate

Issue #1: Adding the slash

It turns out that the code from Dynamic Drive works with HTML 4.0 Doctype but not XHTML 1.0 Transitional. To make it validate on your page, add the slash at the end of each input selector:

from

<input type="radio" name="choice" value="none" onclick="chooseStyle(this.value, 60)">Default style<br />

to

<input type="radio" name="choice" value="none" onclick="chooseStyle(this.value, 60)" />Default style<br />

Issue #2: Adding an Action and a Method

The Dynamic Drive code offers a simple <form> selector, but this is not enough for proper validation. Revise your code to look like this:

<form action="#" method="post">

Web Templates

Use CSS Tinderbox for your web template needs:
The CSS Tinderbox is an effort to support open source web design by providing very basic, yet solid, CSS/XHTML templates that web designers/developers can use as the foundation for their own projects.

Making Favicons

Program Guru's Favicon tool helps you to build custom favicons for your website.

RSS Feeds the Easy Way

Typing code is a pain and I avoid it whenever possible. So when you have to generate RSS Feeds, use the RSS Headliner tool. Also, be sure you include the correct RSS Feed Icon. You can find a free, complete set of PSD files at feedicons.com.

Style Sheet Switcher (v1.1)

You can use DynamicDrive's Style Sheet Switcher to give your website visitors the option to choose a different look for your site (including changing the fontsize for better accessibility). To download the javascript file, left-click this link and name it "styleswitch.js."

NOTE: If you use the button code from DynamicDrive, it will not validate using your Doctype. See the Tip above called “Getting Forms to Validate”.