Writing good XHTML and CSS Part 1

In two articles I’m going to outline my opinion on what you need to understand and write high quality XTHML and CSS. The articles will focus on producing code that stands up to the rigors of the web and future proofs code. The articles are aimed at coders starting out and looking to get to grips with writing professional front end code. Of course if you don’t agree with something the comments box is there for you to add your opinion. In part 1 I’m going to look at what you need to get off the ground.

Understand your environment

Before you even write a line of code it is important to understand the environment you are operating in. Websites can be viewed on a multitude of different platforms. One reason to code professionally is so that websites will appear consistently on as many platforms as possible. It may come as a surprise but about 40% of web users don’t access the web through Internet Explorer. As such it is important to become familiar with the fact that you need to test and build for a multitude of browsers.

A basic setup

Screenshot from BBEdit
Screenshot from BBEdit

In order to begin coding there are a number of software packages you will need. Some are free and others are worth the investment. Although you can code in Notepad or TextEdit I strongly recommend using an application like BBEdit (Mac) or Homesite (Windows). These programs will allow you to write code more quickly and will allow you to read it clearly once you have written it. If you don’t have the budget for these programs then I recommend PSPad (Windows) or Textwrangler (Mac)- both free. All of these programs allow you to have multiple pages open at one time and will allow you to manage your coding effectively. For images you will need a some graphics software. Photoshop is the industry standard and is difficult to beat. A free alternative is the GIMP.

Browser mayhem

I mentioned before that there are many browsers on the web. In order to write first-class code you will need to get hold of these browsers. If you have budget I suggest that you also have a Windows machine and an Apple Macintosh on which to test your code. You can get most browsers for free and the very nice people at Evolt keep a browser archive where you can download older browsers. For most browsers it is simply a case of installing old versions in custom folders. My personal preference is too keep all browsers in one folder called ‘Browsers’. I keep a shortcut on my desktop so I can quickly call up code in any browser.

As a minimum I suggest you install and become familiar with the following browsers:

Windows

Mac

Keep an eye on the browser statistics published at W3 schools. If a new browser pops up and you haven’t heard of it install it and make sure you test on it. You will learn that browsers interpret code very differently so be prepared to love and loathe certain browsers!

Help yourself

There are some great free tools to help you write excellent code. The first is Firefox which I mentioned in the list of browsers. Firefox interprets code almost flawlessly and I would recommend using this browser as your default for coding. Furthermore there are some great plug-ins that will help you in the future. The Web Developer toolbar is a must and contains just about everything you will need to stress test your code. I also recommend that get hold of Fangs. This will help you understand how screen readers and search engine robots will see your code.

If you do not want to use Firefox there is a similar plugin for Internet Explorer - The Web Accessibility Toolbar.

Now you have a development and testing environment we will move onto writing code in Part 2 of How to Write Good XHTML and CSS

Tags

Can you help make this article better? You can edit it here and send me a pull request.

See Also