Review: Build your own website the right way using HTML & CSS

[akritic]

Build your own website the right way using HTML & CSS

I wrote this review with the aim of helping prospective buyers decide if this book is right for them. Sometimes the bewildering array of books on offer for a typical topic makes the decision a difficult one, and can lead to a loss of confidence in what is the right buy. Hopefully this guide will help anyone needing answers about this particular book.

The premise of the book should be immediately clear on reading the title; it’s for beginners and also for beginners with ‘the right’ kind HTML and CSS. To explain what I’m getting at I thought I’d write a few hypothetical questions that buyers might ask themselves before deciding whether or not to purchase.

"I used tables up until now and I really want to get started with CSS, is this the book for me?"

Let's break this up into a few parts to answer:

Tables: No doubt if you've used tables to build websites then you know a fair bit of HTML. If you're serious about learning CSS then you‘ll need to be prepared to rework your HTML knowledge into standards compliant code. It’s important to do this because you're going to want your CSS to do its job properly, so knocking your HTML into shape will set you off on the right foot. This book will take you through the basics as painlessly as possible. You’ll find that this book approaches HTML from a strong emphasis on W3C standards and semantic mark-up.

CSS: Likewise if you have used tables in the past for your design, be prepared to shake things up a little. You're going to have to remove all that presentational mark-up and put it in a separate file and link to it from your HTML. Sound worrying? This book will build your confidence in putting bad old presentational HTML to bed, there's probably not a better reason to buy the book. You'll learn the basics very quickly with the helpful step guide and examples.
CSS vs Tables-based layout: This book will cover some of the theory behind layout in CSS, but you're going to have to hold off thinking your sites will become ground breaking the day you open the first page. As with anything, experience and time will see your future projects flourish.

For the record, this book will not teach so called 'advanced' CSS layouts, and the reason is very simple; it is about getting a solid grounding first. Later you can progress with those skills and be in a far stronger position to tackle the problems that will inevitably occur when you start to dip your toe into more complicated CSS.

Saying that, there’s no reason to suggest this book doesn’t give you what you need to know in order to forge ahead. If you’re fairly apt at gaining new knowledge and skills, you’ll find the all the necessary knowledge in this book; perhaps the hardest part for many (myself included) would be to take this knowledge to the next level by yourself. But at least when you do either experiment by yourself or look at other books/tutorials, you’ll already be familiar with the concepts.


"I'm new to this and I've had trouble following other books/online tutorials, I'm looking for a book that explains how it all fits together, is this it?"
or,
"I've used a WYSIWYG editor up until now, will this book help me learn what’s going on in the code?"

Speaking from experience I can say yes. If you read the above then you'll already know something about why the book is good for beginners, not only with HTML but also CSS too. The most important factor for beginners using this book is to work through the example website that is given in the book, I made the mistake of trying to use it as a guide to building my own site. Try not to be distracted by your own plans but spend the time working through the book, it will pay dividends when you finally come to work on your own site. When I was getting nowhere with my project, I went back to the beginning and did just that.

There’s ample theory presented in this book, all of it very easy to absorb as it is clearly written and well structured. You don’t just get a block of pure theory without any examples. The book utilises diagrams where necessary to back up the text making it very accessible to new learners in this area.

Following the book, you’ll quickly become accustomed to the basics of HTML and CSS and you’ll see your progress go skyward. The best part is that you’ll be learning without it ever feeling like it’s an uphill struggle.

As for those coming to the book from a WYSIWYG background, using this book to learn will teach you how to spot what is relevant in the code your editor is generating, and give you the confidence to edit it directly.



"So ok, I could do with advancing my knowledge of HTML and CSS, but what else does the book teach?"

(The following can be found by reading the sample pdf, where you’ll find a full list in the Table of Contents.)

Learn how to include images/pictures and the accessibility features used to describe them, in addition to learning about the background property in CSS.
Tables: You'll learn to create tables for tabular data only.
Forms: You'll learn how to create a form. (as in a contact form)

For the complete website beginner the book will also teach you how to get your website online, and what tools you’ll need to do it. It covers all the basics about hosting FTP. In addition to this, there's a handy chapter on how to integrate a blogger.com blog into your site - no need to worry about a Content Management System yet! It also covers where you can get statistics tracking, and how to include a search tool for your site.

So as you can see, the book will teach you a great deal about getting your first website up and running. You'll also find a chapter on where you can go next to progress your learning, with a brief outline of other web-related topics and programming languages. Of course this is only a guide to the vastness that is web design/development, but it serves as a good introduction to the beginner.

Lastly don't forget that there are many ‘Website’ books out there which probably shouldn't be on the shelves still; if you want a fast track to correct and compliant code you couldn't do better than this beginner’s book.

Oh and just in case you’re not convinced, I've been using the excellent HTML-reference appendix ever since.


Words of caution:
This book is ideal for the beginner without a doubt. However someone coming to this book already having some experience with getting web pages online the tables way may find the first few chapters tedious. To be fair however, if you’ve been using tables you need this clean slate to work from just as much as the beginner.




Summary of Pro's: This book is for you if:

You need an introductory book to learn HTML and CSS with the aim of building your own websites, (of which you have many ideas already circulating).
You have no prior experience with computer languages and need a clear introduction(I can hold my hand up to that one)
You use tables and presentational HTML and are looking at modernising your pages.
You really just want to put up a website for your hobbie or club, from start to finish all inculded.


Summary of Cons:

You'll need to look elsewhere for Advanced CSS layout techniques (and the resulting Browser bugs/hacks.)
Don’t expect this book to teach you how to create a gradient in a graphics program or other such wonderful web graphics, you'll have to learn that in a book/tutorial specifically about creating graphics for the web.

Useful sitepoint books to progress to:
CSS Anthology
HTML Utopia: Designing without tables
Principles of Beautiful Web Design
Photoshop Anthology

[akritic]

Any comments from other sitepoint members on errors / improvements /clarification required are humbly accepted. This is a work in progress and hopefully I will update it as new issues arise.

[dmsuperman]

A good review, but I have a question. I seem to see all these books and sites and articles about how using CSS and div layouts are so much better than table-based layouts. When I make a layout, I can usually achieve the exact same effect in half the time using tables, whereas pure CSS layouts are usually more of a headache (at least getting them to look the same in both browsers). Why is it such a common idea that using pure CSS layouts are so much better? Tables are (generally) understood universally the same way, but CSS is different in each browser. To me it would seem that the reverse is true, that we should ditch using purely CSS layouts (read: layouts, not CSS all together) for table-based layouts. An answer to this question would be a great help, and again the review looks great. I'm certainly considering purchasing the book (could always use help in the CSS department).

[Dan Schulz]

CSS and semantic markup merely require a different way of thinking.

[kohoutek]

A good review, but I have a question. I seem to see all these books and sites and articles about how using CSS and div layouts are so much better than table-based layouts. When I make a layout, I can usually achieve the exact same effect in half the time using tables, whereas pure CSS layouts are usually more of a headache (at least getting them to look the same in both browsers). Why is it such a common idea that using pure CSS layouts are so much better? Tables are (generally) understood universally the same way, but CSS is different in each browser. To me it would seem that the reverse is true, that we should ditch using purely CSS layouts (read: layouts, not CSS all together) for table-based layouts. An answer to this question would be a great help, and again the review looks great. I'm certainly considering purchasing the book (could always use help in the CSS department).

Better is the wrong terminology. CSS is made for presentation. A table has not been invented to lay out your pages. A table merely does one thing; display tabular data. CSS was created to present your data.

Edit: Thank you for the review, armchaircritic.

[akritic]

dmsuperman, CSS layouts can be a headache perhaps, but not if you're doing fixed designs. fluid/liquid/hybrid layouts are involved but that's partly the fun. It really depends on how complicated you want your layout and the design to be.

[znebojsa]

from its title and description it sounds similar to "HTML Utopia: Designing witout tables using css" DO they explore basically the same ideas, or?

[markbrown4]

IMO, HTML Utopia: Designing witout tables using css is much better.

Though, I was coming from an already fairly solid understanding of HTML before I read that book.

Build your own website the right way using HTML & CSS is very much an entry level book into the world of HTML & CSS - if you own another book on CSS - you probably won't get too much out of this title.

[bigalreturns]

Great review, did you write it from your armchair?

A good review, but I have a question. I seem to see all these books and sites and articles about how using CSS and div layouts are so much better than table-based layouts. When I make a layout, I can usually achieve the exact same effect in half the time using tables, whereas pure CSS layouts are usually more of a headache (at least getting them to look the same in both browsers). Why is it such a common idea that using pure CSS layouts are so much better? Tables are (generally) understood universally the same way, but CSS is different in each browser. To me it would seem that the reverse is true, that we should ditch using purely CSS layouts (read: layouts, not CSS all together) for table-based layouts. An answer to this question would be a great help, and again the review looks great. I'm certainly considering purchasing the book (could always use help in the CSS department).

One reason for me...bandwidth. As long as you keep your layout CSS in a separate file, it can be cached by the browser, and then thats probably 5kb max that's going to be needed to describe the layout of your SITE. With tables, then you're looking at a substantial amount of markup (read bandwidth) used on every single PAGE. Take the scenario where your table markup uses 1kb/page. The CSS equivalent uses 4 kb. If your user browses 20 pages, then that's 16kb you could have saved. Multiply this by hundreds/thousands/hundreds of thousands of users a month and you can see the benefit of using CSS.
In terms of design time, it would probably take me longer to do a table layout than a CSS layout now. It's all about practice and experience. Also, consider you may have 20 pages with the same layout. You want to make a small update to the layout, say make a column 5px wider. With CSS, you open the layout.css, change the value, save and you're finished. With tables, you open each of the 20 files, edit them all, save them all. It's far more work in the end to use tables.

[Safwan]

Thanks for the review armchair, I'll give you a 10/10 rating for this review. I've decided that this book is not what i'm lookin for. maybe some other mid-level stuff is more suitable.

I started a web project early this year and i've been using table-based layout (because that's the way they tought me in class) until in the middle of the project development (unfortunately) I found out the cons of table-based design and the right way (CSS for all presentational stuff). Luckily, the project is no high priority stuff so i decided to try and redesign the whole webpage.

My first impression was that layout using CSS is really a pain in the a*s. Maybe my approach was wrong since I tried to implement the CSS-based layout more or less similar to the way I designed the table-based layout.
Besides that, cross-browser accesibility issue just makes my problem worse.
But when the project is finished, people started making weird request to change all the little things, colors, size, "I want that thing to be over here" etc. A little change in the css file solves everything. Phew~

Now, css doesn't seem so hard. I guess every changes needs time and a lot of patience to implement. (this is for dmsuperman )

[akritic]

... I've decided that this book is not what i'm lookin for. maybe some other mid-level stuff is more suitable.

I'm glad this review has helped you make the right decision
Good luck with your project

Andy

[Matt Mickiewicz]

My first impression was that layout using CSS is really a pain in the a*s. Maybe my approach was wrong since I tried to implement the CSS-based layout more or less similar to the way I designed the table-based layout.
Besides that, cross-browser accesibility issue just makes my problem worse.
But when the project is finished, people started making weird request to change all the little things, colors, size, "I want that thing to be over here" etc. A little change in the css file solves everything. Phew~

Now, css doesn't seem so hard. I guess every changes needs time and a lot of patience to implement. (this is for dmsuperman )

My initial thought is that you should be reading "HTML Utopia: Designing Without Tables Using CSS" http://sitepoint.com/books/css2/

The book is now on the 2nd edition and it's helped tens of thousands of people learn how to use CSS for layouts, while avoiding all the cross-browser compatability issues that tend to stump many dvelopers.

[dawgbone]

A good review, but I have a question. I seem to see all these books and sites and articles about how using CSS and div layouts are so much better than table-based layouts. When I make a layout, I can usually achieve the exact same effect in half the time using tables, whereas pure CSS layouts are usually more of a headache (at least getting them to look the same in both browsers). Why is it such a common idea that using pure CSS layouts are so much better? Tables are (generally) understood universally the same way, but CSS is different in each browser. To me it would seem that the reverse is true, that we should ditch using purely CSS layouts (read: layouts, not CSS all together) for table-based layouts. An answer to this question would be a great help, and again the review looks great. I'm certainly considering purchasing the book (could always use help in the CSS department).

I don't think anyone else has really answered this, so I'll give it a shot.

The primary reason is accessability. Granted, from the perspective of a user viewing your website on a standard browser with a DSL internet connection, there's very little difference between CSS and table based layouts. The presentation to that user is the same.

The issue though, is what happens when you change the enviornment that they are viewing your site in?

What if it's a visually impaired user loading your site through a screen reader? What if it's a linux user viewing your site in a text based browser like lynx? What if a viewer is viewing your site through their cellphone?

In all of those cases, table based browsers make it much more difficult for the user to get the information they want. Try it sometime, and you'll get an idea why a css-based layout is better in these instances than the equivilant table-based one.

[lloydi]

Excellent review - thanks for that Mr Critic :-)

I have to say that I agree with what you've written on the pros and cons. If you are a total beginner then the book's ideal, likewise if you've learned bad habits and are willing to unlearn and relearn. But it was never intended as a CSS book as such. The problem with many books that try to do everything is that they either become unworkably huge or unfeasably compromised. When I flick through some books I really can't imagine my sister being able to grasp how to do it, yet she was the person I had in mind when I wrote this book - a complete beginner, willing to learn, not familiar with all the jargon, doesn't need cutting edge techniques for sake of it but needs to learn the correct way of doing things so that by the end of the book, should she wish to, she could improve skills elsewhere. That was certainly the intention.

Anyway, thanks for the review - I'll link to it from the ickle book support site that I created at the launch of the book. :-)

[lloydi]

A good review, but I have a question. I seem to see all these books and sites and articles about how using CSS and div layouts are so much better than table-based layouts. When I make a layout, I can usually achieve the exact same effect in half the time using tables, whereas pure CSS layouts are usually more of a headache (at least getting them to look the same in both browsers). Why is it such a common idea that using pure CSS layouts are so much better? Tables are (generally) understood universally the same way, but CSS is different in each browser. To me it would seem that the reverse is true, that we should ditch using purely CSS layouts (read: layouts, not CSS all together) for table-based layouts. An answer to this question would be a great help, and again the review looks great. I'm certainly considering purchasing the book (could always use help in the CSS department).

Accessibility has been mentioned (think - mobile device ... how would it render), but the other important thing to say is that while a table may get you a quick visual result, if you then create 100s of pages from that and want to change the style later, the presentation is locked into the page and cannot simply be done by CSS alone. Of course, if you're using a CMS template of some kind that makes it a tad easier but, really, using a table for layout is just wrong, it's a shortcut. So please don't use 'em.

Remember: Every time you use a table for layout a kitten dies.

[lloydi]

from its title and description it sounds similar to "HTML Utopia: Designing witout tables using css" DO they explore basically the same ideas, or?

No, HTML utopia assumes some knowledge ofHTML, in particular the assumption that tables can be used for layout. So it's aimed at people who may have been using that technique and have begun to cotton on to the fact that it's the wrong way to do it and this book sounds like the perfect way to entice them from tables. In my book, tables are only used for the correct purpose - tabular data. No nasty habits formed in my book :-)

[akritic]

Thanks for the comments. I hoped to give the prospective buyer a clear idea of what they could expect, and tried to stress that for all the CSS wizardry out there on the www it's good to get a solid grounding first.

[abfan1127]

great review. also some interesting dialog regarding tables vs. css.
It seems to me they are both similar, but not exactly the same, tools, each with their own pros and cons.

[akritic]

I would say that using tables for layout doesn't have any pros. Except if you've learned to use them, and are resistant to learning a more streamlined method such as CSS. :P

It's true that you can achieve similar designs perhaps, but there are nuances with using each method.. but CSS is always going to be easier to manage.

[Dan Schulz]

There is one pro, actually, and that's for dealing with people who copy/paste Word documents straight into a content management system. I've actually seen this, and copying/pasting Word documents into a CMS that's using a semantic HTML/CSS front-end can actually break the layout.

[akritic]

Yikes. One to remember, especially if you intend on giving clients access to an update feature like a CMS.

Aren't there certain characters that wordprocessors use which break in html anyway? I'm thinking ' " ! and such..

[Dan Schulz]

Anything that's specific to Windows-1252 IIRC, curly quote brackets, and proprietary MS formatting that gets carried over when the page is copied and entered.

[Kevin Yank]

Dan, that really depends on the character encoding in use on your site, and whether it matches the character encoding in use by your CMS.

For example, if your site's pages are displayed with ISO-8859-1, and your CMS's admin pages are also displayed with ISO-8859-1, then Windows-1252 characters such as curly quotes will be pasted, stored, and displayed correctly by all current browsers, but will be reported as invalid ISO-8859-1 characters by HTML validators.

If your site's pages are displayed with UTF-8, and your CMS's admin pages are also displayed with UTF-8, then Windows-1252 characters such as curly quotes will be converted to UTF-8 by the browser when they are submitted to the CMS. These characters will therefore be pasted, stored, and displayed correctly by all browsers, and will not cause problems with HTML validators.

If, however, your site's pages are displayed with UTF-8 but your CMS's admin pages are displayed with ISO-8859-1 (or vice versa), then you can run into problems if your CMS is not converting the character encoding for display. If Windows-1252-encoded characters such as curly quotes are output directly to a UTF-8 page, for example, the characters will display incorrectly, and may be reported as invalid UTF-8 characters by HTML validators.

The moral of the story is that if you can use UTF-8 everywhere, you'll avoid a lot of problems. The main factor keeping many sites (including large portions of SitePoint) on ISO-8859-1 is the lack of built-in support for UTF-8 in PHP 5. This will be corrected in the upcoming PHP 6.

Hope that helps to clear up the issue somewhat.

[WebDonkey]

Was in the bookshop the other day and saw HTML Utopia. Expensive but couldn't resist especially when I have to wait a while for deliveries.

Just started reading, I know most of this stuff already but its always a pleasure to read a Sitepoint book. I never really applied my knowledge into a real site, I always end up reading but not doing. I am going to try and practice building sites as I go along and treat this like a course.

[akritic]

Was in the bookshop the other day and saw HTML Utopia. Expensive but couldn't resist especially when I have to wait a while for deliveries.

Just started reading, I know most of this stuff already but its always a pleasure to read a Sitepoint book. I never really applied my knowledge into a real site, I always end up reading but not doing. I am going to try and practice building sites as I go along and treat this like a course.

That you should. In my experience the sitepoint books geared towards building something real really do help you just to get to grips with stuff, be it a project envisioned in the book or otherwise just ideas. The most important thing about these types of books is to follow the book till the bitter end, (or not so bitter really, but who likes to do that? Well we should of course) And in doing so the reader does gain key skills. That's really what makes sitepoint publications stand out from the rest of the bookshelf. Real examples, real results.
P.s Sorry for taking so long to reply, I hadn't glanced at this thread since a while and just only poped in now and then. Good luck with your study.