how to make good css layouts [closed]

Question

I currently know a bit CSS and also HTML, i also made a few websites. But the designs of my websites are always crappy and the code is also. I really want to make very beautiful websites. Does anyone got good starting points?

Like is this website a good point to start:

http://net.tutsplus.com/articles/web-roundups/10-hand-picked-tutorials-for-beginning-web-designers/

Answer 1

I suggest you first read some epic posts here:

• Why not use tables for layout in HTML?

• https://stackoverflow.com/questions/167531/is-it-ok-to-use-a-css-reset-stylesheet

• Common Web UI Styles

• Should I teach CSS layout directly to new learners or should I first teach how to make layout with tables, then table-less layouts?

• Fluid layouts with CSS

• How to make css smaller?

Also, always have in mind some important things:

• HTML must be semantic. Create your HTML structure like it meaning not it appearance.

• Use CSS to all positioning. Remember that float, position, z-index and clear are your friends.

• Avoid specific browser hacks. In fact, almost all can be done exactly for IE9, Chrome, Firefox, Opera and Safari. Near we have IE8 (only without CSS3 things). Your hard way will be IE7, but it isn't so much away from IE8.

• Choose your browsers by audience and graphics like this. I don't care about IE6 anymore and I'm stoping to care about IE7 too.

• Using table isn't a crime. Tables was created to tabular data, i.e. grids, lists with more than 2 columns, etc.

• Using table is a crime. Don't use it for your layout structure, like menus, headers, footers, etc.

• Using div also can be a crime. "Tableless" doesn't means "Divmore". Your markup must be clean and semantic ever. Dozens of divs are so bad as tables could be.

• Read W3C Specs and understand the web standards like you understand your own name.

And always discuss (here with us or on many blogs about it) why some approach is better than other.

Good luck!

Answer 2

There are a number of good resources out there. Here are a list of a few that I have used in the past:

http://www.smashingapps.com/2011/03/29/40-excellent-yet-free-css-tools-and-generators-for-developers.html

http://macrabbit.com/cssedit/

http://www.smashingapps.com/2010/04/19/10-excellent-free-web-apps-to-create-css-forms-and-grids.html

http://www.smashingapps.com/2010/07/27/top-17-websites-to-easily-generate-css-grid-layouts.html