What is news.YC's take on learning CSS with limited prior experience? Are there specific books and/or tutorials that you could recommend?<p>In our previous startup, I was mainly involved in writing the back-end code. This time however, I'll need to contribute to the CSS interface coding too.
Firebug firebug firebug: <a href="http://www.getfirebug.com/" rel="nofollow">http://www.getfirebug.com/</a><p>This brilliant Firefox extension is how I learned CSS. Click the "inspect" button, then click any page element, and it'll show you all the CSS rules being applied to that element. It'll also highlight the margin+padding so you can wrap your head around the box model. <p>Best of all, you can change CSS properties on the fly. Naturally, the best way to learn is to hack up someone else's CSS, so go to a site you like the looks of, and play with the styling. <p>Soon, you'll be thinking to yourself "man, this isn't complicated at all!" <p>And then you will open your page in IE 6.<p>And then you will punch a hole in the wall.
I would first make a distinction between CSS and UI design. You can make sucky UIs in CSS and you can make great UIs without CSS.<p>UI design is really more of a set of beliefs than coding. <p>Start by reading Defensive Web Design for the Web by 37Signals guys. <p>Jakob Nielsen's useit.com alertbox articles are a great place to start too-- <a href="http://www.useit.com/alertbox/" rel="nofollow">http://www.useit.com/alertbox/</a> Back in high school I printed all his useit.com articles at the library printer and compiled it neatly in a binder:)<p>Also checkout Jakob Nielsen's Homepage Usability: 50 Websites Deconstructed.
If you're only going to buy one book on CSS, I highly recommend CSS Mastery by Andy Budd. It actually has a great introductory section in there, and no one puts into plain English better the reasons why certain hacks are used in certain browsers. Web Standards Solutions by Dan Cederholm is a solid intermediate level book and if you want a good one on usability, I think Jakob Nielsen's Prioritizing Web Usability is a solid, well-researched read. While Defensive Web Design for the Web by 37signals is alright, I think it's a bit dated and I found it focused more on sites that execute certain principles badly. I really wished there were more books on sites that get interfaces right--or even one on evolution of a design with commentary by the UI engineers...but that would be too useful.<p>I wrote a cursory article about CSS techniques on Particletree. <p>An Overview of Current CSS Layout Techniques
<a href="http://particletree.com/features/an-overview-of-current-css-layout-techniques/" rel="nofollow">http://particletree.com/features/an-overview-of-current-css-...</a><p>It's from 2005, but I think it's a good start for getting your head around the fundamentals. And honestly, while Firebug is a great tool for debugging CSS issues, it won't help you introduce to what's going on.<p>In the end, there's no crash course into CSS/UI design. It's an investment and even after you get a handle on executing good CSS, it won't necessarily help you create fantastic UIs. Remember, one doesn't always follow the other.
for learning CSS, start with the basics tutorials <a href="http://www.w3schools.com/css/default.asp" rel="nofollow">http://www.w3schools.com/css/default.asp</a>
try to create a couple of pages, try a CSS framework like blueprint. your next step would be trying to customize the CSS of a wordpress template. play with background colors, font colors, change the layout of elements.
as always, constant practice makes perfect. <p>UI design on the other hand is something completely different (although you need to know CSS/HTML and javascript to do it). read the online book designinginterfaces.com, the 37Signals blog, try to change the structure and layout of a blog template. <p>you will find it hard and the first few tries won't be pleasant to see, but if you keep doing it for a few months, then you will be actually be able to do UI design.
Besides the standard specifications, tutorials you'll find everywhere I would recommend you to analyse the existing stuff, pages you especially enjoy, or those created by CSS gurus etc.<p>Just like with code or any other activity, it is great to try to mimic giants.<p>Also, two notes.<p>One. Don't know how about others but I've found myself rather unable to learn conceptually new things on deadlines or working on real projects. So, at least, don't feel bad if you won't deliver good stuff.<p>Two. There's a lot of "layers" in the UI: information architecture, usability, CSS, graphics, and perhaps some other I forgot to mention.
Start with CSS tutorials (box model etc):<p><a href="http://www.w3schools.com/css/default.asp" rel="nofollow">http://www.w3schools.com/css/default.asp</a><p><a href="http://www.html.net/tutorials/css/" rel="nofollow">http://www.html.net/tutorials/css/</a><p>and then move to these two books:<p><a href="http://www.zeldman.com/dwws/" rel="nofollow">http://www.zeldman.com/dwws/</a> <p><a href="http://www.simplebits.com/publications/bulletproof/" rel="nofollow">http://www.simplebits.com/publications/bulletproof/</a><p>And you should know more than web designers that charge a ton of money to develop table-based sites.
You shouldn't have much trouble. I learned by drawing up a layout in InDesign (you can do it on a piece of paper, it doesn't matter). Get that how you want it, without regard to what you do or don't know how to do in CSS.<p>Then turn that into HTML/CSS. I find WebKit's CSS compliance to be better than anything else out there, but Gecko browsers are pretty good too, so use one of those two engines. You can solve most bugs with one or two Google searches. Within a week or two, you'll know 90% of what you need to, and it'll take you another couple months to learn the obscure stuff.
Goofing around with CSS Zen Garden doesn't hurt.<p>You'll also want access to all the major browsers out there -- which means virtual machines or multiple boxes for OS-specific browsers. Heck, you should even try out non-OS specific browsers on different OSes. I once had this bug in which my page rendered differently between Firefox / Windows and Firefox / OS X. They both had the same version number, and I am still baffled to this day.
You can also have a look at Blueprint, a CSS framework, which: <p>Blueprint is a CSS framework, which aims to cut down on your CSS development time. It gives you a solid CSS foundation to build your project on top of, with an easy-to-use grid, sensible typography, and even a stylesheet for printing.<p><a href="http://code.google.com/p/blueprintcss/" rel="nofollow">http://code.google.com/p/blueprintcss/</a>
Once you've got a bit of a start (i.e. you can write<p>h1 { color: red } <p>or whatever, try CSSEdit for the Mac. It's really good for rapidly understanding what you can do with CSS - it's pretty much the OmniGraffle of CSS editing, if that makes any sense to you.<p>Highly recommended.
<a href="http://www.w3schools.com/css/default.asp" rel="nofollow">http://www.w3schools.com/css/default.asp</a><p>Definitely should be your first port of call.