I have just relaunched the redesign for my website and with the new design comes a detailed guide to coding a design from photoshop into CSS + HTML. You can read the article below and follow the tutorial on the website. CSS Tutorial Digg Tutorial Anyone can learn. No experience is needed. Just follow the huge tutorial with images and written instructions for each step of coding a design into a website. You will learn the basics and the more advanced coding all in one tutorial....
Suggestions.. -Looks like you have a case of classitus. Try using IDs where classes need not be, no reason to add a class with "wrapper" if you're only going to have one instance on the page. - Could do away without the clearing divs as well. - Primary and secondary nav are a bit inconsistent in IE. - Stylesheet could use some cleaning up to look a lot more consistent, might want to divide your sections up (common elements vs more specific elements) - Could use a univeral reset to save some bytes and not declare margin:0; padding:0; on every godamn element - Because you're using pixels you can't resize text in IE - You should provide a base/common font incase 'Trebuchet MS' is not available, such as sans-serif. - Why are you using 100000 pixels ? 9999 would suffice. Could use -xxx ems as well. - Could probably do away without the div around the nav ul - Your .nav li's look like they have double margins in IE - Could use shorthands (padding:top right bottom left; instead of padding-top, padding-bottom, etc) - Why are you using 100% width on the footer again? - Could use a different image replacement technique - Should have some sort of navigation on each part of your tutorial. heading tags and other elements in XHTML don’t require the period in front of them when you are writing there CSS. You should use proper terminology.. ex: "To target a class with your selector, start out with a period and type the class name. To target base elements, just type the element name" p { font-size:10px; } Would target all paragraphs .foo { color:red; } Would target all elements with a class of foo These css tutorials are getting pretty redundant and almost all of them are pretty simple... At least yours was longer than the average. I think you should have just created a mini site where you're not using a content management system and have more control over what happens, so you could have a single page with the whole tutorial on it..
Yeah my coding isn't great but I do use IDs usually but thought it was simpler for the tutorial to just use classes. Also I know heading tags don't need the period. Also some of the above is unnecessary nitpicking it seems. It won't effect the average person more to do with just saving bytes. People can learn to clean there code up after they know how to code. The tutorial is more a simple guide for people used to following photoshop tutorials.
"The coding which is causing the wrapper div to be centered is a combinaton of (must have both) the margin:0 auto in the wrapper attributes and the text-align:center in the body coding." text-align:center; doesn't center the wrapper division. It's the horizontal auto margins that do. You don't want people thinking the text-align does it (Should explain it's only for IE5.x) You're going to inject people with the classitus bug if you think it's perfectly fine to use class="wrapper". Teach them what the ID attribute is for. "What does the XHTML mean?" You didn't explain what XHTML meant. Nor did you explain what the div element should be used for. How about you use the term selector when explaining what CSS is/ how it's used? "After checking my coding I found no errors. That just comes after many years of coding." Validating is only the first step. Your markup should be properly structured without any extraneous elements unless completely necessary, should not be using presentational attributes/presentational names. Meh, guess I'm just bored... so excuse my behavior/rant/nazi-ism.
Nah your argument is correct. I just spent a lot of time writing which is why I was so quick to defend. The tutorial and coding can definitely be improved.
nice tutorials you wrote there. but just like writing codes, sometimes we found some bugs suggestion: try making tutorials only with simple text editors, so readers will actually learn from basics. peace