Designed Oriented CSS / HTML Tutorial / Book

Question

I am a software developer who sometimes writes CSS / HTML code. I am currently working on an application that requires a rather complex html / css layout, and I feel like I don’t understand the CSS / HTML layout sufficient to implement it. What books and study guides can you recommend me to improve my skills?

PS I understand that the difference between block and inline elements is what floats, etc., but what I miss is a consistent picture of how it works and how to place arbitrary elements in html / css.

PPS I tried several books before, and they either have a reference format (for example: http://www.amazon.com/Pro-CSS-HTML-Design-Patterns/dp/1590598040 ) or contain information that I already know, for example , most of the basic w3schools tutorials, most books for Amazon mannequins, etc., or worse, are designer-oriented. I do not need to read about colors, etc. I just need to learn how to make a layout in HTML / CSS, like in Java / Swing or other similar frameworks.

Answer 1

Let me preface this by saying that I prefer to search for reference materials on the Internet as needed (I store my knowledge in the cloud) rather than memorizing a whole book about css properties, which may be completely out of context; at the same time, I find it more useful to read deep into theories and manuals of a higher level, whether they be objects or books.

Have you been given a comprehensive style or maybe even a few layouts, and now you can do it in html + css? In this case, I suggest

• Handcrafted CSS: more bulletproof web design - first of all, it covers some of the more “hip” types, such as liquid layout, and allows you to be comfortable with the concept of graceful degradation (this means that IE6 and FF10 do not have to provide the same experience). This will save you a headache and suffering in the long run - mine was so popular that a colleague took her abroad ... for eight months.
• CSS: the missing tutorial and HTML, XHTML and CSS Bible - in sufficient detail and the material is not out of date. I would suggest reading the floats first (many quirks there, regardless of previous experience), and depending on which chapters fill the gaps in the knowledge that you feel, if any. In addition, it is used as a link.
• Convenient with general concepts, but need to look for random property? First, w3schools are evil - use MDN instead. Unrelated: The fantastic JS reference as well as the CSS / HTML that you are currently using.
• Bookmark quirksmode and caniuse so you don't go too far when the large browser suddenly refuses to display your machined code correctly.
• Research framework that is. Grid systems would be a fantastic way to save time if the design fits; crowned with jQuery-UI or formalize , you will have common fears that take care of you (looking at you, form layouts!).

If you want to dig deeper and better understand the principles of design and usability concepts behind a successful product, or if you still need to develop wireframes / page layouts, etc., the reading list will expand:

• A design book not intended for a designer — if I could raise it a hundred times, I would. There is no water, it’s easy to understand the chapters, focus on the basics of design (contrast, repetition, alignment, proximity), which ultimately will contribute to the creation of a consistent, readable website (or print medium).
• Do you still need more? Read the Universal Design Principles - now we deviate from the “common” design territory, but most ideas are passed on.
• I'll end the list with Don't make me think !: a common sense approach to web usability , which is exactly that.

And remember stackoverflow - if you run into a problem, someone probably already solved it :)

Answer 2

I recommend reading http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/ .

This is not a small article. This is a very detailed, thoughtful article that describes several aspects of the browser. The following may interest you:

• Chapter 5 - Layout (especially the end)
• Chapter 9 - CSS2 visual model (all parts)

Answer 3

I would advise you to take a look at this tutorial.

• https://webdesign.tutsplus.com/courses/30-days-to-learn-html-css

This is Jeffrey Paths 30-day HTML / CSS course, it explains everything you need, very nice and beautiful, and the best thing about it is free (you need to register for a free account, currently at the top right corner) .

Alternative:

• http://www.quackit.com/html/tutorial/
• http://www.csstutorial.net/

But there are many many resources for learning html and css on the Internet.

Answer 4

If you want to know how CSS works. Good tutorial from google

http://code.google.com/edu/submissions/html-css-javascript/

& as you said you know what CSS is . So, it is better to learn how to avoid the common mistakes made by beginners. There are several articles about this. There are few of them:

http://sixrevisions.com/css/12-common-css-mistakes-web-developers-make/

http://webdesignledger.com/tips/the-most-common-html-and-css-mistakes-to-avoid

http://www.designdetector.com/2006/06/ten-common-css-mistakes.php

Answer 5

Everything you want to know about html / css is on W3C

CSS tricks also have good reading material

Answer 6

I prefer text books. You can use notes to tag to place page markers in them (any of them can be read on the toilet!).

As for one for CSS - CSS The missing guide I found pretty well

HTML - Nutshell books (which I always found good) are good.

Answer 7

Just read how the DOM (Document Object Model) works. The most important thing to know is that html code is parsed from top to bottom, and this will help you to know the position elements. This will be very convenient when creating a layout, as well as when saving the structure as a grid. Also check our availability guidelines.

I also read some good technical articles / tutorials / etc on the developerWorks website.

All you need is Google, I think it’s just a matter of using the right keywords :)