Question

I am a software developer who occasionally write CSS/HTML code. I am currently working on an application which requires a quite complicated html/css based layout and I feel that I don’t understand CSS/HTML layout enough to implement it. Which books and tutorials can you recommend me to improve my skills?

P.S. I understand the difference between block and inline elements is, what floats are, etc, but what I am lacking is a coherent picture of how it works and how to layout arbitrary stuff in html/css.

P.P.S. I tried several books before and they either has a reference manual format (like this: http://www.amazon.com/Pro-CSS-HTML-Design-Patterns/dp/1590598040) or contain information which I already know, for example most of basic tutorials on w3schools, most books for dummies on amazon, etc, or even worse are designer oriented. I don’t need reading about colors, etc, I just need to learn how to do layout in HTML/CSS like I do in Java/Swing or other similar frameworks.

Answer 1

Let me preface this by saying that I prefer to look up reference material online as needed (I store my knowledge in the cloud) rather than learning by heart an entire book on css properties that could appear to be completely out of context; at the same time I find it more beneficial to read deep into higher-level theory and guides, be it feature articles or books.

Have you been given a comprehensive styleguide or maybe even a few mockups and it’s now up to you to make it into html+css? In this case I’d suggest

• Handcrafted CSS: More Bulletproof Web Design – above all, covers some of the more “hip” techniques like liquid layout and makes you comfortable with the concept of graceful degradation (meaning that IE6 and FF10 should not deliver the same experience). This saves you headache and heartbreaks in the long run – mine was so popular that a colleague took it overseas… for eight months
• CSS: The Missing Manual and HTML, XHTML and CSS Bible – quite in-depth and the material there is yet to be outdated. I’d suggest reading up on floats first (many quirks there regardless of previous experience) and whichever chapters would fill knowledge gaps that you feel you have, if any. Beyond that – used as reference.
• Comfortable with general concepts but need to look up an occasional property? First off, w3schools are evil – use MDN instead. Unrelated: fantastic JS reference as well as CSS/HTML that you’re currently after.
• Bookmark quirksmode and caniuse so that you will not be set back too far when a major browser suddenly declines to render your chiseled code correctly.
• Research frameworks that are out there. Grid systems would be a fantastic way to save time if the design fits; topped with jQuery-UI or formalize you’d have the common dreads taken care of for you (looking at you, form layouts!).

If you want to dig deeper and have better understanding of design principles and usability concepts behind a successful product, or if you are yet to come up with wireframes/page mockups etc., the reading list expands:

• The Non-Designer’s Design Book – if I could upvote it a hundred times, I would. No water, easy to understand chapters, focus on design basics (contrast, repetition, alignment, proximity) that would end up contributing to a consistent, readable website (or printed media)
• You still want more? Read Universal Principles of Design – we now deviate into “general” design territory, but most ideas are transferrable.
• I’ll finish the list with Don’t Make Me Think!: A Common Sense Approach to Web Usability which is exactly that.

And remember stackoverflow – if you’ve come across an issue, somebody probably has already solved it 🙂