Use notepad++ instead of Dreamweaver
Dreamweaver is a great software, and it's nice when you need a bit of help with Css hints, quick application of styles or images from the properties toolbar. Still, after designing and building web pages for many years, I find that more and more I'm using Notepad++ (or maybe TextWrangler if you're on a Mac, Kate or Vim on Linux) to handcode both Html and Css. As a text editor it is more powerful and it helps to focus on writing Html based on the information rather than the layout. Handcoding Css also comes naturally after a while, and actually reinforces your memory and knowledge in the process!
For uploading those files, Filezilla is a great free FTP software, and your flavour of WAMP, XAMPP, LAMP for running Apache, MySQL and Php of course!
Comment your div tags, or at least your end divs!
This is a simple habit that will help make sure all div tags are correctly nested and closed. It also becomes useful if you need to cut, copy or paste individual divs with a lot of content.This can save you counting the number of closing divs at the bottom of the page! Some people also comment the opening div tag, though if the divs are well-named (semantically) it isnt generally so important.
Use indenting with tab
Dreamweaver kind of sucks at this, which is another reason I use notepad++. As with end-tag commenting it makes keeping track of nesting so much easier.
Also tab indent your lists, forms and other hierarchical elements. You can very quickly scan a page, even when choosing 'view source'. The benefit of this practice also increases when sharing code in a team.
Use correct semantic html
I made a separate post about this, discussing a case study of building templates for Debenhams. Strange Css bugs and confusion seem to magically disappear when the Html is simply describing information in terms of headings, paragraphs and lists. Declare a body id and class and you have all the control you need without having to litter the page with empty divs, span classes, line breaks and container divs for every row, column, image, paragraph etc. Ideally you should be able to completely reskin a website's content without having to change the markup (as Css Zen Garden does)
separate css into logical sections
Css reset
The reset.css exists to reduce inconsistencies between browsers. Things like default padding for elements, line heights and heading font sizes can all be standardized in this way. It can be useful to keep these defaults in a one file and keep specific text and layout styles separate.
Here's an example of a reset.css taken from meyerweb.com
/* v1.0 | 20080212 */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } /* remember to define focus styles! */ :focus { outline: 0; } /* remember to highlight inserts somehow! */ ins { text-decoration: none; } del { text-decoration: line-through; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: collapse; border-spacing: 0; }
Css grid frameworks
The layout grid existed in graphic design long before Html and Css were around.
A very popular choice is the 960 grid system because it can easily divided by 2, 3, and 5.
Useful links:
http://960.gs/
http://net.tutsplus.com/html-css-techniques/which-css-grid-framework-sho...
