Up2date techinques/tools to create proper CSS/XHTML

Question

I figured, that iam currently "trying" to style the HTML/CSS in the plain *.css textfiles... My problem is, that i need to create a complex WebApp and need to figure out the best way to start with this designstuff... Problem: I am a hacker, no designer ^^

so, my current plan would be:

• Buy a nice css-book ( as i am really lacking of knowledge here ), instead of try n error as iam doing at the moment

• Use one of your suggested tools ( if there are any ) to create the design

So, are there any "top-dog"-tools in the market? Unfortunately i could'nt get google to answer this question...

Thanks!

Answer 1

The answer really depends a bit on what your server side technology will be, for example in the .net world your work will be centred around Visual Studio and you'll be calling on other tools to lend a hand. Good tools include:

• TopStyle - great for CSS
• Aptana Studio - excellent for JavaScript, good all-rounder
• Dreamweaver - good for designers, but maybe not that useful for a 'hacker'
• Expression - Microsoft answer to Dreamweaver, I've only used it a bit but it seems good

Most importantly you should get a tool for validation, you'll learn a lot just by feeding what you're up to through one of these. This is no substitute for understanding what you're doing by studying a book, but it's a valuable way of checking for basic problems. There are various tools which will integrate with Firefox but I also like to have an offline tool available:

• Total Validator

Answer 2

All of the above are excellent. Dreamweaver (imho) has the most complete set of features for designing pages (Adobe actually licensed some of the technology from TopStyle a while back to improve their feature set). And it has excellent validation built-in.

Another FREE tool (remember, Dreamweaver will cost you at least a few hundred unless you steal it) is Aptana IDE. It has most code completion options that Dreamweaver has, and similar validation tools.

Aptana and Firebug plugin for Firefox make a pretty good combination. In addition, there are Firebug extensions and other Firefox plugins that are tremendously useful:

• Pixel Perfect: allows you to add a semi-transparent background image to line up elements on a page (shows up as extra tab within the Firebug plugin).
• Code Burner: adds html & css reference tab to firebug.
• ColorZilla (plain FireFOX extension): analyzes your colors and helps you manage them.
• MeasureIt (plain FireFOX extension): Helps you measure distances between elements on a page when Firebug isn't enough.
• WebDeveloper toolbar: does all sorts of nifty stuff, but I only use it to resize the browser to a specific window size (like 800x600).

Answer 3

Before choosing a book, Opera Web Standards Curriculum would be a great start. You won't lose your time with authors like Chris Heilmann.