How to get better at CSS, laying out designs and UI Programming?

Question

Hi all,

I am pretty familiar with CSS and have used quite a bit of javascript and jquery also little experience of layout designing and working closely with Photoshop. But, somehow I don't feel as confident as when programming with database or C# side and face lot of problems when I am working with designing UI and laying out elements the way I want, For e.g. Like say a .psd file which the designers give to you...and you want to make your page look exactly like that..

So I know I just have to get into doing it more and learn along the way. But does anyone have any good suggestions or advice so that I get better at the UI programming...If there are some websites with videos and tutorial or any good books I should refer to improve..Thanks all for your help..

Answer 1

You can learn by doing if at all times you ask yourself if you can do a specific thing in a better way and when in doubt look this thing up using Google.

However, you will find that books give you a more complete picture of the entire process and teach you a lot that individual blog posts can't teach you. The Internet is like a reference; you have to know what to look for, but the book will provide you with useful hints you might not have thought of.

Answer 2

Practice, practice, practice.

I would surf the web for existing templates or sites and attempt to replicate them for practice.

Obviously, respect the author's rights and don't re-create someone's theme and then use it on one of your sites unless it's actually released out to the public.

Answer 3

I would look into "Semantic HTML" http://en.wikipedia.org/wiki/Semantic_HTML

Also looking into Doctypes: http://htmlhelp.com/tools/validator/doctype.html

Those 2 things once mastered have helped me in writing proper x-browser css that can look exactly like comps when you need it.

I would say avoid templating unless your designers always make the same site layout for UI, you will want to be more agile than that.

A good thing that tends to help x-browser css as well for beginners is a good reset.css: http://meyerweb.com/eric/tools/css/reset/

Answer 4

I'd also explore the area of UI usability. useit.com is a good source.

Answer 5

I installed firebug 2 years ago and immediately found myself spending more time reading other people's code - if I see a site I like or a technique I want to use, I just firebug it - it's a bit like a musician reading sheet-music and imagining how it sounds

I've found that answering questions on this site has helped me lots too - you get to know just exactly what it is that you do know and you become more aware of the areas in which you need to improve

I think that it's really important to know how the box-model works and how to make it work for you in all browsers - there are a few really simple fundamental rules, which when obeyed, help you to ensure that your x-broswer testing is pain-free - knowing how to add padding or margin to something without breaking your layout allows you to be exact with your designs - I used to leave 20 pixels extra horizontal space in my containers as a way of making my columns never dropped off the edge of a page, but now that I know how the box-model works, I can use the exact widths, heights, padding and margin that are detailed in the mock-ups that I'm given

I personally recommend using a semantic stylesheet framework - I suggest Blueprint semantic (although YUI and 960 are awesome too) - in-fact, switching to a CSS framework is perhaps one of the most important changes I made to my coding style last year and it helped me realise that almost all of the x-browser problems I was having were easy to fix without too much trouble

If you haven't done so already, add "CSS" and "HTML" to your "interesting tags" list in stackoverflow and read as much as you can. Answer questions, take the down-votes on the chin, savour the up-votes and keep trying to help others with their problems

One thing a lot of people forget is this: CSS is actually a really complex language. There's a hell of a lot more to it that meets the eye and it's very difficult to master - just.keep.fighting.the.good.fight

Answer 6

I'd give a look at CSS Zen Garden.

Answer 7

I had this frustration for a while too (I think many do). One specific thing that alleviated some of that frustration was learning about the significance of classes and ids (i.e. ids make javascript easier, classes facilitate large-scale changes). This might sound really simple, but it was a big step for me. I guess what I'm saying is that you just need to spend time with it. Don't shy away because it's intimidating or frustrating. It just takes time.