Coding a website clean & valid Options

[henrybayuzick]

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

[jordanriane]

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:

CODE

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br />Nulla ultricies sodales neque non fermentum. Mauris ac justo sed felis congue malesuada quis id libero.</p>

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

CODE

<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>

If you have a blog title, or page title:

CODE

<h2>This is my blog entry's title</h2>

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/