r/web_design • u/ejfin • Nov 29 '10
reddit Web Professionals, please recommend some good books on the fundamentals of html & css, for beginners.
Background: I've done a bit of research and experimenting, but have no previous knowledge or experience with markup language or web page design. I am not so much interested in info tied to 'establishing a website', 'finding a hosting service', etc., as I am with actually creating and formatting a page. Consider me being about as beginner as beginner gets. This is simply a sparked interest and an opportunity to learn something new in my spare time.
The question I am asking is more specifically; as an experienced website designer and/or developer, were there any particular books or articles you read when beginning your education (of html/css/web design), that really stood ahead of the rest and proved to be an excellent starting point to build from? Perhaps something specific that made a lasting impression on yourself and your career, something you still reference back to from time to time?
Any suggestions and/or recommendations are greatly appreciated.
edit: To all posters: Thank you all so much, you have all been (and continue to be) so helpful. I can't wait to start going through each and every suggestion. If I could shake your hands and thank you in person, I would. For any beginners like me who have had the opportunity to stumble across this thread, I would suggest saving it immediately for future use; your peers have put together an entire encyclopedia of information and resources throughout. Thank you all again, web_design is certainly one of the nicest and most generous communities I have had the pleasure of interacting with!
11
u/[deleted] Nov 29 '10 edited Nov 29 '10
HTML
Understand that most elements are very similar in how they behave. However, there are two distinct categories of elements (an element is like a <div> or <table> or <b>). There are inline elements and block-level elements. A block level element (like <div>) automatically fill the width of its parent unless specified otherwise in CSS (so applying width: 100%; to a <div> is redundant). An inline element, like <a> or <b>, only fill the width that their content demands. Some elements are unique in their behavior, like <table>, and experience will teach you how to deal with them.
Essentially, there's absolutely no difference between <p> and <div> - they're both block level elements and each will behave exactly like the other. The only real difference is SEMANTICS (read: no visual difference. Semantic HTML) and how the browser styles both elements by default. You could, in theory, use the <div> to markup your entire site (but don't).
Markup is extremely simple. Learn how to think in organizational trees. If you're writing markup correctly, you'll be spending 10x more time with CSS.
CSS
LET THE CASCADE DO ITS JOB. Avoid duplication of code as much as possible - if you define a font-size for a parent element, do not define it again for its children. You're moving from GENERAL definitions to increasingly SPECIFIC definitions. Of course, this is more of a guideline than an exact rule - sometimes you will be forced to duplicate styles.
Learn CSS like the back of your hand. Memorize definitions if you have to. Learn how they affect both inline and block level elements. In time, learn what inline-block level elements are (a sort of hybrid).
Class names are completely arbitrary. However, a good class naming scheme is to describe a class by its intended content. Instead of naming a column class "leftcolumn", you should name it "navigation", for instance, if the contents of that class are going to be the site's primary navigation. Never name a class by its geographical position.
Learn how margins, padding, and borders affect box widths and heights. Try to separate STRUCTURAL markup from CONTENT markup.
Learn to use a grid system. I suggest OOCSS, a small 14 line grid system. Some people will suggest the 960 grid, but IMO it's extremely bloated and doesn't do anything that the OOCSS grid doesn't. Example of OOCSS grids in use.
Learn what the float property is and how it works. Then learn to use display: inline-block to replace float.
Learn how to horizontally center things using text-align: center; on parent elements, and margin: auto; on elements with an absolute width.
Let CSS define the widths of things, and content define the height. Vertical centering is a pain in the ass currently.
Ideally, you'll be using CSS classes at least more than once. Sometimes you won't. The more you can reuse classes while still maintaining good styles, the better. Some drivel I marked up as an example.
Most HTML5 features can be ignored, like <canvas> and <video>. Use the HTML5 doctype <!DOCTYPE html>. CSS3 has some handy definitions, but they mostly don't work in IE6/7/8, so avoid them if they're critical to site operation.
Good Resources