Learning HTML and CSS

HTML Dog is a great site for finding answers to your questions about HTML and CSS. It provides tutorials for every level, from beginner to advanced. If you patiently work through the HTML tutorials in order, you will learn the proper way to code Web pages.

> HTML Basics (here at Journalists' Toolkit)

W3schools has a very nice CSS reference.

> CSS Basics (here at Journalists' Toolkit)

Do you understand the doctype and how to use it? You should! Are you specifying the correct character set for use on your Web pages? See: Top Lines in HTML and CSS (here at Journalists' Toolkit).

Web page editing programs

The nicest professional editor, in my opinion, is Dreamweaver. I have been using it for many years.

Alternatively, there are a number of free and open-source Web editing programs today:

• Nvu (pronounced N view): Windows, Mac or Linux
• Amaya: Windows, Mac or Unix
• KompoZer: "KompoZer is based on Gecko, the layout engine inside Mozilla; it's a super-fast, very reliable, standards conformant engine maintained on a daily basis by a wide community of developers." Windows, Mac or Linux

If you do not know how to upload files to a Web server, see this FTP tutorial.

How to use a Web page editing program

1. Do not rely on the WYSIWYG ("design view") mode of any editing program. This makes you stupid, not smart.
2. Always write your HTML and CSS by hand so you know exactly what you are putting in there.
3. To test your code, open the page in at least two different Web browsers. Only a current Web browser will show you what the code is really doing.
4. Use the built-in file and site management of your editing program to keep your local files in perfect sync with the live site on your Web server.

Firefox and add-ons

Among the many things that make Firefox far superior to Microsoft's Internet Explorer is the ability to enhance it with free add-ons. These little programs download and install painlessly from the Firefox site itself.

These are my favorite Firefox add-ons for Web work:

1. Web Developer toolbar: Adds almost everything a Web designer or programmer needs to inspect pages: See the CSS, the HTML, the Javascript; turn images on and off; outline CSS elements to figure out how pages were built; validate in two clicks.
2. Firebug: The few tasks that the Web Developer toolbar can't do are handled admirably by Firebug, which allows you not only to view code but also to edit it.
3. FireFTP: The easiest way to upload and download files between your computer and your host Web server.
4. Pearl Crescent Page Saver Basic: An easy way to get a screenshot of a Web page; you can choose to grab the entire page, including what is not visible outside the viewport.
5. MeasureIt: A quick way to determine the width, in pixels, of anything on a Web page in the browser. Great for design troubleshooting.
6. ColorZilla: Use an eyedropper tool to instantly get the hexadecimal code for any color on a Web page.

Intermediate/advanced

• Ajax: A New Approach to Web Applications, by Jesse James Garrett (Feb 18, 2005)
• JavaScript Kit, "your comprehensive JavaScript, DHTML, CSS, and Ajax stop"
• jQuery Tutorials
• jQuery Tutorials for Designers

Big list of helpful sites

Tutorials Round-Up: Ajax, CSS, PHP and More, from Smashing Magazine (Jan. 26, 2007)