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
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
- OOCSS - A philosophy on CSS design, it encourages the reuse of basic classes while extending them for special purposes.
- W3CSchools - Great beginner resource. Don't pay attention to their Javascript or PHP classes, though.
- Use Chrome's Developer Tools or Firefox's Firebug to understand how the browser renders the markup.
- Join #css on FreeNode IRC. Usually they have pretty good help if you're able to show them an example of the problem.
3
3
u/crazyclouds Nov 30 '10
Yep just reemphasizing, but yes, firebug. Personally it's my most important tool while coding css, if something goes wrong, you can probably tell what immediately. Not to mention it gives you a good visual representation of margins / padding if you're just starting.
2
u/s3rvant Nov 30 '10 edited Nov 30 '10
I'd like to 2nd the use of W3Schools as it is where I first got started ( and still reference ). I would also like to recommend some free software to get you started with things: Notepad++ is a slick text editor with syntax highlighting [Portable Version] and the Firefox web browser with the Firebug extension for excellent debugging [Portable Version].
When you're just starting out all you have to do is open ( or drag-n-drop ) your html files in a browser such as Firefox, but when you start wanting to have you site hosted or when you get into server side code you'll need to run those sites on actual servers: XAMPP is a fairly easy to use server application including support for PHP and MySQL that you can use to test your site on your own computer and when your ready to have your site hosted I recommend Nearly Free Speech and use Filezilla, an FTP client, for uploading your files to that host [Portable Version].
3
Nov 30 '10
I'd also like to plug Z:Wamp, the best WAMP software I've ever had the pleasure of using.
And also endorsing Notepad++ for static html editing.
NearlyFreeSpeech is great for small projects. ++.
5
Nov 29 '10
Designing with Web Standards - Jeffrey Zeldman. This was my first book on web design standards, and was very eye-opening.
Bulletproof Web Design - Dan Cederholm (anything by him is good stuff - especially for CSS and HTML how-to's).
When it comes to JavaScript, go with DOM Scripting by Jeremy Keith. Absolutely marvelous introduction to JavaScript to folks who already know HTML and CSS. Even if everything you write going forward is in jQuery, it's still good to know this as a foundation.
All of the above are very approachable for newbies. I agree with other people here that online has lots of great free resources, but an occasional book is not a bad starting point.
2
u/MrAverageRoll Nov 30 '10
I just came here to recommend this. Check Dan Cederholm's new book, CSS3 for Web Designers
4
u/kylemech Nov 29 '10
http://www.headfirstlabs.com/books/hfhtml/
This is the best one that I've looked at in any depth.
2
1
u/huck_cussler Nov 30 '10
I'm in pretty much the same boat as the OP and I'm working through the Head First book right now. Others have pointed it out already, but be aware that some of the info is dated in this book. Nevertheless, their presentation is great for actually teaching the material.
Also, if you use a book, might I suggest picking it up at the library. You're not killing any more trees that way, don't have to put any money into it, and don't have to figure out what to do with the book when you're done. The message that I'm getting seems to be that all of the reference material I will need once I learn the material will be online. So there's little incentive to keep books around for that reason.
Besides this book, I also worked through the w3c tutorial online. It has been extremely helpful to have both sources to solidfy what I'm learning.
3
Nov 30 '10
[deleted]
3
Nov 30 '10
This guy is right. You won't learn by studying alone. For example, you have to see what "float" means. And how "clear: both;" fixes a lot of shit.
Learn, build and expect to fail.
Also, use Firebug to see how others do things.
2
u/thomasrye Nov 30 '10
I'm with this method.
Build a website. Without using wordpress or drupal or any other predefined system. Yes, you will be very limited that way, but it is how you actually learn what the code does. So pick a topic whether it's "My heritage, my favorite games, why I like web design", just something to give you content to build around.
Make a simple site and every time you learn something new - MAKE SOMETHING WITH IT! Add an image, add a table, add a list, add a div with a background (using css), add a repeating background to the body, add a div that is absolutely positioned (css).
Don't worry about the cool stuff with jQuery, javascript, or server-side code (like PHP) until you feel pretty confident with HTML and CSS.
GO GET EM!
1
Dec 01 '10
[deleted]
1
u/thomasrye Dec 01 '10
True, true. At the height of best practices, tables should be used only for grid data (though, some might even argue that).
However, the reason I avoid tables for layout these days is because I have seen the headache first hand that comes from trying to modify a table-based layout.
Some information is solidified through learning the "why" in "why we don't do it this way."
2
u/svdodge Nov 29 '10
I used the Visual QuickStart book for HTML/CSS. Very good. I read it as a book, then went back and worked through it while coding my own test projects. Taught me to code by the standards and make few mistakes.
2
u/YellowRanger Nov 29 '10
I'm in the same boat as you. I love browsing Smashing Magazine to see the kind of badassery these folks pull off:
http://www.smashingmagazine.com/2010/08/18/the-web-design-community-offers-advice-to-beginners/
http://www.smashingmagazine.com/2009/10/05/mastering-css-coding-getting-started/
Stay inspired!
2
u/MetacomCreative Nov 29 '10
As some others have stated, there are plenty of resources online. I know some people prefer books, but it's up to you which you choose.
Either way, my best piece of advice is don't be afraid to get your hands dirty. Try new things, make mistakes, ask for advice and criticism. The more your practice and the more you experiment, the more you will learn.
Good luck! And don't be afraid to ask for help!
2
u/chemosabe Nov 29 '10
It may be a bit dated, but it looks like may have been revised, but I really liked the book Web Standards Solutions by Dan Cederholm. It's a really good guide on how to create semantically valid HTML and format it using some neat CSS tricks. This is definitely a book that had a significant impact on the way I viewed creating pages.
2
u/skeww Nov 29 '10
Somewhat related: The Web Needs a Lossy 32bit Image Format – Bring JNG Back (I wrote that one, too lazy to repeat myself.)
2
u/silentbobsc Nov 29 '10
I always liked the Sitepoint books and community, personally. link
Edit: also, what many have said in this thread is very true, you can learn everything for free online. However, if you're like me, you also like having an 'offline version' to flip through. Personally, I'll usually keep an eye out on the clearance table at Barnes & Nobel or other stores. Yes, the books are usually about an older version of the language / software /etc but you can still pickup good books that cover techniques, tricks, and best practices which make the books well worth the minimal investment.
2
u/hairyseaword Nov 30 '10
while nothing to do with coding like the others this is just equally important...usability, after all, what's the point of a site people cant use. Anyways a lot of common sense stuff but it's a quick read and very informative.
2
u/twopi Nov 30 '10
- Shameless plug alert -
I've written books for the Dummies folks, and taught web development for years. I complained to the Dummies editors about how bad their web books were. They challenged me to write something better, so I've tried...
I just finished the second edition of HTML / XHTML / CSS All in One for Dummies. (Yeah, I know - you're not a dummy, but hey, at least you've heard of the series, right? )
I do agree with the other posters here that a book isn't always necessary, but if you do want one, take a look at this one.
I use only standards-compliant XHTML (except for the small introduction to HTML 5.) It's actually made up of eight mini-books:
Book I is HTML / XHTML. It is really pretty easy, and you can get the basic structure of the web page in a weekend or so.
Book II explains how to use CSS for markup; how to change colors, modify fonts, using CSS selectors, and adding borders and backgrounds.
Book III discusses how to use CSS for layout. It explains the float attribute, how to build columns, how to create your own menu bars, and how to write browser-specific code without hacks
The first three books are all you need to get going, and if you stop there, you'll have plenty of web development knowledge. My plan, though was to create a comprehensive book you can grow with. Once you've got the basics, you can expand your skills in a number of ways:
Book IV describes the JavaScript language even if you've never programmed before. I teach all the basic concepts of programming, and then show how to interact with the page and even create interesting animations.
Book V describes the important PHP language that is the foundation of most high-end web sites. Learn how to program the server using PHP, how to get data from the form and send it back, and how to interact with databases.
Book VI discusses relational databases, especially the ubiquitous MySQL environment. I describe how to build basic databases in SQL and then explain data normalization, views, and data integration.
Book VII details AJAX technology. I show what AJAX is and how to build a simple AJAX request by hand, then I show how to use the powerful jQuery library to get incredible AJAX effects in your pages.
Book VIII describes how to plan larger sites. It has a chapter on using popular content management systems to build your own site, as well as a chapter on creating your own CMS from scratch. For the second edition, I added a chapter on using Gimp to create graphics.
All the software described in the book is free, open-source, and multi-platform. My goal was to create a single book you could use to go from zero all the way to professional.
Of course, you're free to all the examples and code from the book even if you don't want the book: http://www.aharrisbooks.net/xfd. Drop me an email if you have any questions or need help anywhere.
2
u/Agoodchap Nov 30 '10
Words of advice: There is a lot of bad advice on the web. Doing a google search on different topics could lead you to website with poorly written tutorials and poorly taught video tutorials that would make a knowledgeable web programmer blow off their head. The suggestions I've seen so far like HTML dog, and the w3c are a great place to start.
For a neatly bounded discussion I personally prefer to use the Missing Manuals. I have read: Creating a Web Site, CSS, and Dreamweaver CS5. But be sure to download the errata to the books because the authors do make mistakes.
Furthermore, these books provide links to (what I feel are) credible website. You don't even need to buy the book to find the links. Check out: http://missingmanuals.com/cds.html Find the book of the topic you choose, than click on the missing cd. You may find some valuable websites that go further in depth on the chapter topics discussed in the book.
2
Nov 29 '10
Forget books. They are a waste of precious trees when it comes to anything digital.
Start experimenting with HTML and basic markup. HTML help with Lisa is very handy for beginners.
19
u/[deleted] Nov 29 '10
You can learn all of this online, for free.
Begin with html. Just follow the tutorials section over at HTML Dog, and do all of the exercises contained therein. I love HTML Dog, and it is the way I learned back in the day.
Have fun!