Hey everyone,

I recently started my upcoming portfolio in Photoshop using a grid system recommended by Psdtuts.com. Anyways, once I finish that, I wanna be able to code the website in html/css in the best way possible. I understand most of the concepts, but some I don't. I'd like the code to be clean, and meet up to wc3 standards. To be completely honest, I really don't know how to do this. Whenever I code, it's usually "hacked" or just easy fixes that lead to bad, unstructured code that looks kinda good in one browser. I'd love for this change, but I've been unable to find a nice tutorial on doing this.

I don't quite understand how you can code the whole html as one thing, and then style it. Usually I would do EVERYTHING in divs. About section, a div position:absolute. I feel this is wrong.

One of the biggest things I don't understand is the padding attribute. No idea what it does.

I'd love to be able to code this upcoming website in a clean, valid format. Createblog hasn't let me down yet.

What does everyone suggest?

Thanks,
Henry

Using div's isn't wrong. But the way they are used 90% of the time is. There are a lot of useful tutorials for converting a PSD to an XHTML/CSS document. Padding and margin kinda do the same thing.

Coding with DIVs isn't wrong, it's just the position: absolute; you should avoid.

Padding is like putting bubble wrap around a box, you're adding some space around the box.

There is nothing wrong with using DIVs but you need to know when it's appropriate to use them.

DIVs should be nothing more than a "frame" for your content.

Everything else should use their appropriate function.

If you've got paragraphs of copy you would use the paragraph tag:


If you have an unordered list, or an order list:


If you have a blog title, or page title:


All of the examples I gave can also be styled using CSS just in the same matter as your DIVs can be styled.

Some resources you can check out that I recommend:
- http://net.tutsplus.com/tutorials/html-css...-for-beginners/
- http://net.tutsplus.com/tutorials/html-css...-for-beginners/
- http://net.tutsplus.com/tutorials/html-css...e-from-scratch/
- http://www.noupe.com/css/9-css-ethics-ever...hould-have.html
- http://css-tricks.com/ie-css-bugs-thatll-get-you-every-time/

The other thing I might suggest is playing around with premade CSS templates so you can see what does what, or mess it up to see how you can fix it. That's probably one of the easiest ways to learn coding.

Some premades you can download and play around with:
- http://www.freecsstemplates.org/
- http://www.free-css.com/
- http://freecss.info/
- http://www.sixshootermedia.com/free-templates/

Thanks to everyone who replied! I'm going to bookmark the sites, try em all out and report back with my results. I'm working very hard to become a better coder. Thank you again.