Tutorial to become a fricking baller at CSS and HTML

[Partial]

Anyone got any good, free online tutorials? I've done the W3Schools stuff but I find it a little too elementary to be applied to most real world situations.

[Iago]

Check out some of these ALA articles (http://www.alistapart.com/topics/code/css/) on CSS. A lot of them are written by the guys who really defined it at grassroots (Eric Meyer et al.)

Other than that I'd suggest looking at gorgeous (www.simplebits.com) websites (http://jasonsantamaria.com/) with great (http://stopdesign.com/) CSS (http://www.housingworks.org/) and deconstructing them. Seriously it's one of the best ways to learn. Try installing the Aardvark and Web Developer toolbars for Firefox as you can then see a visual representation of where each element is on the page.

Good luck!

[Robo]

Wasn't there already a thread regarding you and HTML/CSS, Partial? You should have bumped that one, the context might have been helpful.

In my perhaps-limited-but-no-moreso-than-yours experience, you don't learn to become a fricking baller at anything through a tutorial (and certainly not a free online one). You learn by doing, and by examining what others have done. I'd second the suggestion of Iago (who is quickly becoming one of my favorite new posters and will hopefully stick around :)) - when you see a great website, take a look at what makes it so.

Hope that helps. :) Good luck!

[Kraetos]

http://www.goer.org/HTML/

Gets the job done. Teaches HTML and CSS nearly simultaneously, which is how it should be done.

[Iago]

Just thought I'd bump this thread to pimp @font-face, which is supported almost across the board now (Mobile Safari excepted).

Essentially it allows you to upload a font to your webspace and then use it in CSS. Great alternative to sIFR and all those other horrid flash/image replacement techniques. The code looks as follows:


@font-face {
font-family: "NameYouReference";
src: url(www.mysite.com/myfont.otf);
}

p {
font-family: NameYouReference, Helvetica, "Lucida Grande", sans-serif;
}


Mr. Jeffrey Zeldman has uploaded an open-type version of Franklin if you'd like to give this a go. It's at: http://www.zeldman.com/u/FranklinITCProJZ-Med.otf.

If you want to declare multiple uploaded fonts, just use multiple @font-face rules with different font-family properties.