

Ask YC: Best way to learn CSS/UI design? - ochiba

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. 
======
altay
Firebug firebug firebug: <http://www.getfirebug.com/>

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.

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.

Soon, you'll be thinking to yourself "man, this isn't complicated at all!"

And then you will open your page in IE 6.

And then you will punch a hole in the wall.

~~~
breck
I use the Web Developer Toolbar.<https://addons.mozilla.org/en-
US/firefox/addon/60>

Any reasons why Firebug is better?

WD seems to do the same things and more.

~~~
altay
That's what everyone says until they try Firebug. I'm not kidding -- I know at
least three people who asked me the same question, then came back a week later
and said "you're right, this is way better."

The interface is far more usable. Also, all WD can do with javascript is turn
it on and off; Firebug has a full-fledged javascript debugger. (It's how I
learned JS, in addition to CSS!) The DOM inspection tools are amazing.

Pretty much the only things I still use WD for are resizing the browser window
and checking if I'm in quirks mode. But if breaking the page by adding a label
to every div is a key feature for you, then maybe you should stick with WD. =)

~~~
breck
Thanks. I'm installing Firebug now.

------
zaidf
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.

UI design is really more of a set of beliefs than coding.

Start by reading Defensive Web Design for the Web by 37Signals guys.

Jakob Nielsen's useit.com alertbox articles are a great place to start too--
<http://www.useit.com/alertbox/> Back in high school I printed all his
useit.com articles at the library printer and compiled it neatly in a binder:)

Also checkout Jakob Nielsen's Homepage Usability: 50 Websites Deconstructed.

~~~
ed
Along the same lines, "Don't make me think" by Steve Krug provides an awesome
Usability foundation. (Better than Nielson, IMO.)

[http://www.amazon.com/Dont-Make-Me-Think-
Usability/dp/078972...](http://www.amazon.com/Dont-Make-Me-Think-
Usability/dp/0789723107)

~~~
zaidf
Ah, how did I miss that:) It's the last UI book I bought.

------
unfoldedorigami
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.

I wrote a cursory article about CSS techniques on Particletree.

An Overview of Current CSS Layout Techniques
[http://particletree.com/features/an-overview-of-current-
css-...](http://particletree.com/features/an-overview-of-current-css-layout-
techniques/)

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.

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.

~~~
niels
I second that! CSS Mastery by Andy Budd is great. After reading that book you
will really understand the box model and positioning, as well as a bunch of
other stuff. Of course learning CSS goes together with learning to write well
structured mark up also.

------
mtw
for learning CSS, start with the basics tutorials
<http://www.w3schools.com/css/default.asp> 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.

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.

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.

------
maurycy
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.

Just like with code or any other activity, it is great to try to mimic giants.

Also, two notes.

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.

Two. There's a lot of "layers" in the UI: information architecture, usability,
CSS, graphics, and perhaps some other I forgot to mention.

------
nickb
Start with CSS tutorials (box model etc):

<http://www.w3schools.com/css/default.asp>

<http://www.html.net/tutorials/css/>

and then move to these two books:

<http://www.zeldman.com/dwws/>

<http://www.simplebits.com/publications/bulletproof/>

And you should know more than web designers that charge a ton of money to
develop table-based sites.

------
simianstyle
1 Book has it all:

"CSS Mastery" by Andy Budd

You will be a ninja thereafter.

------
karzeem
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.

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.

------
andrewfong
Goofing around with CSS Zen Garden doesn't hurt.

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.

------
pistoriusp
You can also have a look at Blueprint, a CSS framework, which:

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.

<http://code.google.com/p/blueprintcss/>

~~~
brianr
That looks like it would be useful for typesetting, but it seems way more
heavy than necessary. Do you use it, and have you found it to actually be
helpful?

~~~
pistoriusp
Sorry, I didn't see this here.

I used it on one project. Whilst it was quick and easy to get the layout done
I do agree with you on it been heavy.

One thing that I did get from it was exposure to some decent CSS. I'm
confident that my future projects will benefit from having used and learned
from their techniques.

I'll certainly use it again.

------
Hexayurt
Once you've got a bit of a start (i.e. you can write

h1 { color: red }

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.

Highly recommended.

------
jsmcgd
<http://www.w3schools.com/css/default.asp>

Definitely should be your first port of call.

------
dfranke
Just read the W3C spec.

~~~
myoung8
I highly recommend NOT reading the W3C spec to start out if you actually want
to get anywhere.

Just dive in and start coding, CSS isn't really all that hard.

I found it really useful/fun to just copy another site (e.g. Facebook or Digg)
to get a hang of how things work. If you get stuck you can always take a look
at their CSS using Firebug or by opening up their stylesheet in the browser.

------
danw
I highly recommend the Sitepoint CSS books

