Advice: Web design books

Crispy

<div class="IPBDescription">for teaching myself XHTML, CSS</div>I'm in the unexpected position of having a bit of extra cash, so thought I'd look into starting a couple of websites for a blog and portfolio. I'm interested in a fairly comprehensive 'teach yourself' guide that will cover XHTML and CSS, basic Flash (not that I really want to use it, more so I'm aware of how it works) and draw my attention to 'best practises' along the way (e.g. how to use tables effectively).

The website I want to make needs to have multiple sections, be expandable to have other mini-sites within it (using completely different layouts), with plenty of images, a blog, possibly forum support and preferably in-browser video support.

So I was wondering if anyone can recommend any good books that cover this sort of thing and that are up-to-date with current practises. The more suggestions, the better! :)

P.S. I have a grounding in basic HTML but need to get with the times.

Spetsnaz

<a href="http://www.lynda.com/" target="_blank">http://www.lynda.com/</a> < online tutorials, better than a book, all videos etc. First few tutorials are free

<a href="http://www.w3schools.com" target="_blank">http://www.w3schools.com</a> < Awesome CSS and HTML site and other stuff

Crispy

I should probably mention that I would prefer a book because over the next few months I'm going to be doing 6 day weeks sat in front of a computer, so my preference is to have this in book form so my eyes can take a bit of a break from the monitor.

Still mention any other websites you can think of in any case, I'll note them all down for reference.

Kouji_San

Still... Learning script languages is much easier and quicker when you are actually working hands-on with the code, so you can actually see what your mess ups and wow moments do to the page you're working on :)


w3schools has a nice in-site sample editor as well, you could mess around in to see what the various tags do. But then again, I can see your needs for off-screen time :P (I don't use books for this so I'm no help in this department /hides)

Flash actionscript (although I'd advise video tutorials on youtube to learn the basics)
<a href="http://www.gotoandplay.com/" target="_blank">http://www.gotoandplay.com/</a>
<a href="http://www.actionscript.org/" target="_blank">http://www.actionscript.org/</a>
<a href="http://www.tonypa.pri.ee/" target="_blank">http://www.tonypa.pri.ee/</a> flash games, mosly (but it could be used for website design, if you're creative with code :P)

Crispy

I think I'll have a hunt around the bookshop after work today...

Rob

Best CSS resource I've used: <a href="http://www.htmldog.com/" target="_blank">http://www.htmldog.com/</a>

remi

The problem with most of the books that I've seen is that they live in the past. They use tables and frames rather than well crafted CSS. This is how I originally learned it, but my modern knowledge of web "programming" is from converting my sites to CSS and learning by trial, error, and goggle.

Corporal_Fortier

<!--quoteo(post=1757051:date=Mar 4 2010, 02:16 PM:name=Psyke)--><div class='quotetop'>QUOTE (Psyke @ Mar 4 2010, 02:16 PM) <a href="index.php?act=findpost&pid=1757051"><{POST_SNAPBACK}></a></div><div class='quotemain'><!--quotec-->The problem with most of the books that I've seen is that they live in the past. They use tables and frames rather than well crafted CSS.<!--QuoteEnd--></div><!--QuoteEEnd-->
Very true. Especially when you say you wish to learn "how to use tables effectively", this would mean not using tables at all (for the layout).

Kouji_San

It's just a sad fact that for some things, tables still have their place. Browser compatibility with div vs inline elements for instance galleries and perhaps forums, do their job better when done as tables.

Css is still to dependent on browser brands. And with browser detection still buggy, it's too bad crappy rule breaking IE is still among most users :P

remi

<!--quoteo(post=1757172:date=Mar 4 2010, 05:42 PM:name=Kouji_San)--><div class='quotetop'>QUOTE (Kouji_San @ Mar 4 2010, 05:42 PM) <a href="index.php?act=findpost&pid=1757172"><{POST_SNAPBACK}></a></div><div class='quotemain'><!--quotec-->It's just a sad fact that for some things, tables still have their place. Browser compatibility with div vs inline elements for instance galleries and perhaps forums, do their job better when done as tables.

Css is still to dependent on browser brands. And with browser detection still buggy, it's too bad crappy rule breaking IE is still among most users :P<!--QuoteEnd--></div><!--QuoteEEnd-->
CSS is actually pretty good, and if you're working with a good web developer (or are one) it's very possible to have every browser render identical to each other.

Though browser detection is buggy (and not even supported in CSS, afaik), there are hacks that have been developed so that you can very easily target particular browsers.

Especially now with the death of IE6, CSS is really the way to go 99% of the time.

Kouji_San

Yeah don't get me wrong, CSS is nice and clean and I use it for most things 99% of the time. But Tables are not all bad, they are nice and easy when positioning lot's of small cells, like a gallery or excel like information, without having to worry about all the browsers with overflow annoyances in divs. But it's best to keep them out of layout type of things. Oh and Javascript is one of the things I like to avoid, making things depend on JS could potentially screw up users who are scared of JS (which are lot's of people to make me not bother with it, judging from my statcounters)

Thank god IE 6 has been killed, but not everyone updates. I'd love to say to those people to get stuffed :P


Xhtml/css with occasional tables when they are useful is the way to go imho

Insane

A book is by all means a reasonable starting point. However, web design moves quickly enough that if you want to keep up to date, particularly in terms of current design trends and best practices, you'll need to follow it on the web.

Zaggy

<!--quoteo(post=0:date=:name=Fam)--><div class='quotetop'>QUOTE (Fam)</div><div class='quotemain'><!--quotec-->htmldog.com and <a href="http://headfirstlabs.com/books/hfhtml/" target="_blank">http://headfirstlabs.com/books/hfhtml/</a><!--QuoteEnd--></div><!--QuoteEEnd-->

Crispy

So in case anyone is interested, I eventually went for:
<i>HTML, XHTML & CSS, Sixth Edition: Visual Quickstart Guide</i> Castro, Elizabeth (2007, Peachpit Press)
ISBN: 0-321-43084-0

I'm very happy with the tone and structure of the book. It's not overly explanatory but it still very clear in how it presents the information. All the <a href="http://www.elizabethcastro.com/html6ed/examples/" target="_blank">examples</a> can be checked first-hand on supplementary online web pages, every section points out how well different browsers support features (not Chrome, though, unfortunately) and there are some very handy appendices (RGB Hexadecimal equivalents, a Hex colour chart and a list of HTML symbols and characters).

It covers:
- All your basic (X)HTML needs (I skimmed most of this since I have a decent understanding from W3.org online tutorials)
- Selectors and styles
- Layout with styles
- Dynamic effects with styles
- Stylesheets for handhelds
- Stylesheets for printing
- Lists
- Tables
- Forms
- Media (inc. embedding a range of players, Java applets and other plugins)
- Scripts (inc. a 'taste' of Javascript)
- Symbols & Non-English characters
- Testing and debugging web pages
- A bit on publishing/hosting your website
- A bit on SEO and making your web pages private
- Syndication and Podcasting (inc. RSS feeds, etc.)


Over the past two weeks I've been happily reading away and now have a pretty good overview of what I can achieve with just (X)HTML and CSS. The examples are very basic, but rightly so as they just concentrate on the barebones functionality of every feature without confusing the matter with anything too flashy in the source code.

Now (rare spare day on the weekend!) I'm just starting on a simple portfolio site, and will be referring to online tutorials when and where I get stuck, but I feel pretty prepared by the book, and would recommend it to anyone who, like me, prefers to have a hard copy reference by their side. Call me old-fashioned, but I just find it easier that way.

But yeah I'm very happy with the book (£22 well spent), and would recommend it to non-programmer types who want a good overview of how it's all done. I'll post an example when I get it up and running, but I'll probably be doing it all offline while I learn the ropes.

Insane

Given that you're starting now, once you have a reasonable grasp, you should look into <a href="http://net.tutsplus.com/tutorials/html-css-techniques/html-5-and-css-3-the-techniques-youll-soon-be-using/" target="_blank">HTML 5 and CSS 3</a>. At this point in time, I think getting used to them from the start would be a good idea.

Crispy

<!--quoteo(post=1759173:date=Mar 13 2010, 12:39 PM:name=Insane)--><div class='quotetop'>QUOTE (Insane @ Mar 13 2010, 12:39 PM) <a href="index.php?act=findpost&pid=1759173"><{POST_SNAPBACK}></a></div><div class='quotemain'><!--quotec-->Given that you're starting now, once you have a reasonable grasp, you should look into <a href="http://net.tutsplus.com/tutorials/html-css-techniques/html-5-and-css-3-the-techniques-youll-soon-be-using/" target="_blank">HTML 5 and CSS 3</a>. At this point in time, I think getting used to them from the start would be a good idea.<!--QuoteEnd--></div><!--QuoteEEnd-->Good lead. I'll follow it up when I get to that stage, but first come the baby steps! :)