Every web developer should (and probably does) use these tools on a daily basis. They streamline your development and help speed up little niggles with your site.

Web Developer Toolbar

This handy toolbar includes features such as in browser CSS editing which lets you see CSS changes live, the ability to disable Javascript, Cookies, CSS and Images (for usability testing) and includes many handy features.

Some fancy tricks also include:

• Element outlining
  This allows you to see which <div/input/anything> tags are lining up wrong and combined with the CSS editor proves a powerful tool in element alignment.
• Disabling CSS
  This allows you to see how your layout holds up with browsers which don’t support CSS (such as screen readers). If your content is laid out poorly, it. will. be. read. out. loud. poorly.
• Browser Resizing
  Want to see how your site looks in a 1024×768 browsers? Click the re-size button and the toolbar will set your browser window to any size you specify!
• Quick Validation links
  Want to know if your XHTML or CSS validates? There’s quick handy links under the Tools drop-down.
• Generated Source vs Source
  Is your Javascript messing up your code? Then view the Generated Source to see what it’s actually doing to your pages.
• Quickly Edit HTML & CSS in-line
  It’s a quick and dirty way to see how your new CSS/HTML code works in your site. Simply open the editor and type away to see your page update live.

There’s many more options you can play with. All you need is Firefox and the Web Developer Toolbar.

Firebug

Firebug is a tool used by almost every web developer in the world. If you’ve not installed it yet, do it immediately as it will save you many man hours fixing bugs in your websites code. It’s had over 19 million downloads and averages 22,000 downloads every day.

Colorzilla

When I can’t remember how to count in hex (which often happens) I use Colorzilla. It makes sure my #009ecc is not #02a4d3 and that my #666 isn’t #999. It’s best to keep consistency and is what separates a good designer, with a great designer.

There’s loads more Firefox Add-ons you could also check out:

• YSlow https://addons.mozilla.org/en-US/firefox/addon/5369
• Pixel Perfect https://addons.mozilla.org/en-US/firefox/addon/7943
• Firecookie https://addons.mozilla.org/en-US/firefox/addon/6683
• PageDiff https://addons.mozilla.org/en-US/firefox/addon/4274

Internet Explorer Developer Tools

On the Internet Explorer front there’s not much for the modern Web Developer. However, using the Firefox tools above covers most if not all of your needs, except for IE8, IE7 and IE6 testing. This is what I’ll go over next.

The best tool is actually one released by Microsoft themselves. The aptly named Internet Explorer Developer Toolbar which gives you a few tools to play with which include a CSS and HTML editor, the ability to disable CSS and images, use a colour picker and outline elements. It’s basically a shorter version of the Firefox web developer toolbar. It also allows you to quickly switch between IE7 and IE8 browser rendering. Simply select which browser mode you need and you can see what your page looks like in IE7.

Now for IE6 (cringe). I know a lot of developer are now dropping support but as previously mentioned sometimes it’s not an option, and we sometimes need to think about this when developing mass market websites.

Spoon.net

It’s a tool I only recently found and because Microsoft won’t properly develop something which lets you run IE6 on your machine, Spoon developed a browser plug-in which lets you run ANY browser, well, IN browser. They call it “App Virtualization” and I call it magic as it let’s you run IE6! (note, as of writing I couldn’t get it to buffer on Windows 7 64-bit but could on Vista (32) and XP (32), let me know, maybe it needs to be XP Virtualized?)

Adobe BrowserLab

This amazing tool lets you preview your pages side by side and even overlay pages (known as onion skin). You can also preview your site in many browsers which include Internet Explorer 6/7/8, Safari 3/4 and Firefox 2/3. The only downside is you can’t preview it as a functional page so can only be used for styling sakes, and it’s a little slow to run sometimes.

I hope you found these tools useful for your web developing needs and good luck (you’ll need it if your working with IE6)

Many developers struggle to use the basic tools in Adobe’s award winning software Photoshop when designing websites. It can help a lot to know some simple techniques and tools when building XHTML pages. You don’t have to use the very awful splicing function at all.

Let’s start with the idea of building a very simple design using a set colour palette and a set width. After these simple tips I will also supply a number of useful links to visit to help you further.

Let’s boot up Photoshop and start with a new blank file. Choose a preset width and height (I’m using 1024×768) and let’s get designing!

Initially we need a colour palette for inspiration. If you want help see Adobe’s Kuler application. It’s awesome. Once you have found your colour palette you can then download it (provided your registered and logged in) open it and your colours will jump straight into Photoshop (Window>Swatches)! How cool!

Pick your favourite background colour (I’m using #ff8548) and fill the background. Then create two guide lines 960 pixels apart (or any other distance apart) and place them in the center. (If your not sure how to do this simply download 960 Guides). We now have a simple layout. Next we need to setup our header and navigation.

It’s as easy as writing some text and placing it at the top of the page. Make sure you keep the margins your giving the text around the edges the same. You could do this by making small 10px x 10px boxes and using these as padding. You could also draw more guide lines by dragging them from the rulers around the page. (If you can’t see them tap Ctrl+R) Using rulers and guises to position all your elements on the page is the best way to keep everything aligned and tidy. This is a fundamental in website design.

You can also use Lorem Ipsum (dummy text) to help see how your layout looks on the page.

Stick to the colours in your colour palette and have a play. I drew up a quick dummy web page with some lorem ipsum, a title and a navigation bar. I also drew in some guides to position my content better and to keep everything tidier. If you would like to download this PSD file be my guest. Pull it apart and see what you like.

This simple design could be a the building blocks of your first website.

Check out the following links to help you further;

1. Lorem Ipsum
2. Adobe Kuler
3. 960 Grid System
4. Web Designer Wall
5. Best Web Gallery
6. CSS Based
7. Pixel2Life Tutorials