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