Skip to: Navigation | Content | Sidebar | Footer


Weblog Entry

Standards Resources for Beginners

August 25, 2004

Questions about beginners resources have been coming fast and furious lately; let’s build a list!

I’m not the first to have been asked recently about resources for those new to standards, and I won’t be the last.

But I have a hard time fielding these questions too, because I’ve stopped looking for (or even keeping track of) the types of resources that cover basic principles. I’m aware of WestCiv’s great free courses. I know of MaxDesign’s growing list of tutorials. I recommend DWWS to anyone who will listen. But comprehensive resources that assume no prior knowledge? It’s been a long time since I’ve seen one of those.

So, rather than respond to each person individually and point them to books that are probably too advanced for the people they’re trying to teach, I figured I’d open up this question for feedback and see if collaboratively there’s enough knowledge to build a good list of beginner’s resources.

Ground rules: any resource is fair game, online or off. Use discretion and ask yourself whether it’s something that would be truly educational for a person with no previous web knowledge at all, or at least no experience beyond old-school tables. Try to make this a useful list for a true beginner, instead of a list of what you found interesting reading last week.


Reader Comments

Scott says:
August 25, 03h

As always, http://www.w3schools.com is a great resource for alot of language and uses valid code.

August 25, 03h

I usually point beginners toward the NYPL Online Style Guide, co-authored by Zeldman.

http://www.nypl.org/styleguide/

Gives a good explanation of XHTML and CSS without getting too indepth.

j0rd says:
August 25, 03h

i second the vote for http://www.w3schools.com/ . I use it to this day.

August 25, 03h

Without a doubt, Zeldman’s “Designing with Web Standards” is the best resource I’ve ever seen.

http://www.zeldman.com/dwws/

Awesome, just awesome. I went from total noob to pretty competent in just a little while. I honestly can’t say enough good things about it.

August 25, 03h

http://www.htmldog.com/ is a great resource, they have XHTML and CSS tutorials that assume no prior knowledge, are easy to read, go into a surprising amount of detail, and include lots of information on best practices, semantics, and things like that alongside the syntax.

Billy says:
August 25, 03h

Lately I’ve been enjoying Adam Howell’s CSS 1.0 Once-A-Day project – http://www.weeklystandards.com/cssproject/.

August 25, 03h

Most important in Germany I think

http://selfhtml.org/

SELFHTML deutschsprachig
SELFHTML en langue française
SELFHTML en español
SELFHTML japanisch

August 25, 03h

One of the better resources on this level that I have come across in a long time is Web Design from Scratch:

http://www.webdesignfromscratch.com/

Check out the tabs and the navigate down the right hand side.

11
leon breedt says:
August 25, 04h

something i am asked again and again by designers at our company is how to do complex forms without reverting to some form of tables.

complex forms don’t lend themselves well to the one field per row convention that a lot of CSS-only sites seem to use. especially optional fields, it seems a waste to dedicate an entire row to one when it could be placed next to a related required option.

any suggestions highly appreciated :)

Mario says:
August 25, 04h

Being a newbie myself (maybe a month now), I’ve started to document my efforts. Hardly authoratative, it’s my hope that I am better suited to understand what it means to not have a clue and be able to create clear documentation.

If its helpful to anyone, than that’s great. The address is littlelama.cjb.net

(Please keep in mind….really new….)

Tony says:
August 25, 04h

http://www.csscreator.com/css-forum/

A forum dedicated to helping people learn CSS.

seth says:
August 25, 04h

@Leon - I’m sure there are other ways, but this might get you thinking… http://www.quirksmode.org/index.html?/css/forms.html

15
Stephen says:
August 25, 06h

Hi Everyone:

Actually, as a web-design newbie, I’m looking for a particular kind of resource: one that addresses the “artistic” aspects of designing. In particular, I’m looking for a “design palette” that explores different visual effects.

Here’s a good example: in the issue of the current Photoshop User’s magazine, there was an article on using a grid against a photo to create a particular effect. You would load a photo into photoshop, turn on a grid, use the marquee (sp?) tool to select a particular square of the grid, then play with the contrast and color to change just that particular square. You could do this on several different adjacent and non-adjacent squares to obtain some sort of “modern grid effect” in your photos. I thought this was cool, because you could then take that photo, crop and resize, and use it potentially as a top banner on a site, with a matching color scheme for the remainder of the site.

You could call this particular effect the “modern grid” pattern. I’m looking for websites that explore other types of visual “patterns” (those of you familiar with design patterns might see where I’m going with this).

I’m looking for lots of other kinds of examples like this - things that show “what’s possible” - basically, things that get my imagination kick-started (since lately, I’ve hit a serious creative drought).

The CSS design garden is good for this, but I’m looking for other resources. Anything you can throw this way would be good.

Thank you everyone for your time, and thanks to Dave for addressing this topic!

Stephen

August 25, 06h

www.sitepoint.com is an excellent resource for standards, and anything else to do with web design. But I’ve seen a lot to do with CSS now that they have their expert blogs.

As well, their HTML Utopia book is great… anyone new to table-less layouts (I was) can gain from that book.

Possibly the best resource is just taking a look at existing standards-based sites and looking at the CSS they used.

17
Taylor says:
August 25, 06h

http://www.alistapart.com/ was my first introduction to table-less design. I started with “Practical CSS Layout Tips & Tricks” by Mark Newhouse: http://www.alistapart.com/articles/practicalcss/.

Perhaps not suitable for the absolute HTML virgin, but definitely useful for a would-be convert.

18
Taylor again says:
August 25, 06h

I got the title of the article wrong; should be “Practical CSS Layout Tips, Tricks, & Techniques”. Oops.

Rob says:
August 25, 07h


Dan Cederholm’s book “Web Standrads Solutions” may be outside the beginner level, but that depends on what type of beginner. Beginner to HTML? Probably out of your league. But for somone who’s a beginner to standards-based design it’s a solid introduction to practical tools. Get sold on standards by Zeldman (see post #4); receive solid how-to advice from Cederholm.

The best part is that he shows you four ways of approaching a problem, and guides you through the pros and cons of each. You learn the reason for the method, and not just the method itself.

http://www.simplebits.com/publications/solutions/

August 25, 07h

Nothing like a good tool to help you get started. For the Windows users out there, take a look at TopStyle Lite, free from Bradbury Software - http://www.bradsoft.com/topstyle

August 25, 10h

I like CSS Vault - http://www.cssvault.com

This site combines CSS Design (it has a Gallery section which can be very inspiring) and CSS Resources.

I also agree with Scott (comment 1): W3Schools (http://www.w3schools.com) is also a great resource.

August 25, 11h

Besides referring people directly to the spec, I show people example sites such as the zen garden, and Eric Meyer’s CSS Edge.
http://www.meyerweb.com/eric/css/edge/
They’re really good at getting people interested in how it all works. They can learn a lot by just looking at the source code, and experementing by making a few changes.

I have also recommended Eric Meyer on CSS to people also. Though, I’m not all the way through it myself, the parts I’ve read are really good.

W3 Schools can be good for some things, but should be mentioned along with a warning. Its HTML tutorial is not good; it doesn’t teach valid, nor structurally and semantically correct code from the start, and they they basically describe HTML as a presentational language

Having said that, however, it does contain some useful information, especially for beginners, its just not *all* good information.

August 26, 01h

I would reference the book, Creating a Web Page with HTML : Visual QuickProject Guide. Next I would move on to Dan Cederholm’s new book, Web Standards Solutions.

August 26, 01h

W3 Schools is alright, but it’s very flawed, particularly when it comes to web standards.

W3 Schools inadequacies are one of the reasons that I wrote the beginner’s guides for HTML Dog (http://htmldog.com ). There’s no reason not to teach web standard HTML and CSS from the outset - and assume no prior knowledge of web design and development.

I get a LOT of messages from complete beginners who have found HTML Dog useful. And most of them don’t realise the “special” web standards nature behind it.

25
Dave says:
August 26, 01h

I found a nice blog, updated frequently, with some nicely explained theories including floats & tags which I’ve found useful to refer people too.
Just my £0.01 / $0.02.

http://cssing.blogspot.com/

Nathan says:
August 26, 02h

About 4 weeks ago I stumbled onto the CSS Zen Garden website, since then I have been riding the wave from site to site and so far everything I have found linked from mezzoblue has proven invaluable. At this point it may be worth adding that within this time my knowledge has increased significantly and as a result I have a new passion for my work (that’s right it was starting to bore me). Before that my understanding of CSS was what I had learned from using Dreamweaver, and as it turns out that was sweet %#$@ all. Additionally I no longer use Dreamweaver and all of my coding is now done by hand, thankyou tableless design. And I have to say this without sounding like a suck up; I owe a lot of this to Dave Shea, Thankyou for your efforts and the inspiration, I hope one day to have a submission to Zen Garden (though not just yet).

As for the most useful websites for XHTML, CSS and Standards I have found (IMO)
http://www.mezzoblue.com Good place to start, this was how I found everything else.
http://www.positioniseverything.net To true, the things I never knew about browsers.
http://www.alistapart.com Great resource for practically everything.
http://www.w3.org Obviously.
http://www.htmldog.com Great resource for practically everything.

I have tonnes more but armed with these, I have gone from novice to capable in as little as 4 weeks so I’d say that’s a good sign of informative resources and teachers who seem to care about what they are teaching.

Cheers

Nathan says:
August 26, 02h

I don’t like to post twice in a row but I forgot to mention what is probably ‘my’ most important resource…

http://www.westciv.com Style master has been extremely helpful.

Cheers.

28
Geert says:
August 26, 03h

There is great series of tutorials on a blog from Belgium. What’s so great about that tutorial is that it actually starts from the graphic design phase and ends with a cool CSS based template page. It’s really a step by step easy written tutorial. You can find it at:
http://veerle.duoh.com/index.php?id=P208

August 26, 04h

Not sure if this would be so much as hands-on learning, but the articles on Digital Web give you some pretty good insight into some of the more visible issues:
http://www.digital-web.com/topics/css/

riccard0 says:
August 26, 04h

Just stumbled upon it:
http://www.dezwozhere.com/links.html

August 26, 04h

One thing that all authors get wrong, especially when they’re beginners is alt text. Many either omit it entirely, or explicitly declare it as empty even though, in many cases, it should contain the text of the image or an appropriate description that serves the same purpose. Ian Hickson explains this the best with his documents on the issue.

Hixie explains the difference between good and bad alternate text, and also gives advice about how user agents should render the alternate content, and thus what authors should expect from a user agent. Until, I read these, I always got it wrong. I recommend them to everyone, whether your a beginner just starting out, or even a web development guru like Dave.

http://www.hixie.ch/advocacy/alttext
http://www.hixie.ch/advocacy/alt-tooltips

Anthony says:
August 26, 05h

I’ve had particular trouble recommending resources for people who are new to HTML whom I want to nudge in the standards-based direction. Can someone learn and use proper HTML/XHTML and CSS layout without understanding what came before? I guess so, but I find it hard to recommend standards resources to someone who doesn’t understand the pain of the FONT tag and the fun of nested TABLEs.

35
Brian Williams says:
August 26, 05h

Apart from the ‘how’, it’s helpful to know where to find the ‘what’ and ‘why’ .
I’m finding the MACCAWS primer a handy addition to DWWS as I go about the business of changing minds and habits here at work (megabank-dot-com).

http://www.maccaws.org/kit/primer/

Kevin says:
August 26, 05h

It’s been too long… but I learned by using a WYSIWYG editor and then viewing the source. Granted, this was in 1997 (with NaviPress, God rest its soul), and HTML was soup even then. But, it worked for me because I didn’t need to do EVERYthing from scratch. As I learned more, and got more confident, I could edit more and more of the source directly until I was able to abandon the WYSIWYG altogether. Today, I’d recommend Composer of NVu (http://www.nvu.com) for people getting started who just want to create a simple page.

August 26, 06h

The Web Design References site is a huge mega-reference (over 3,000 links) of information and articles. It is dedicated to providing knowledge of web design and development. It advocates accessibility, usability, web standards and many related topics.
http://www.d.umn.edu/goto/webdesign/

Also web designers and developers are invited to join the webdev listserv and receive the award-winning Web Design Update Newsletter for site updates. The Web Design Update is a plain text email digest typically published weekly.
http://www.d.umn.edu/goto/webdevlist

August 26, 06h

I originally started my own site, HTMLSource — http://www.yourhtmlsource.com/ — because it was unnerving how so many of the very popular beginners’ resources (http://www.htmlgoodies.com/ and the aforementioned w3schools) were happy to teach dodgy code: HTMLGoodies still refers to HTML 4.0 as “new”, and suggests you “just keep adding <OL>s until the text bumps over far enough for you” to indent text. That’s no way to live.

Over four years it has grown into a very large centralised resource, that covers most aspects of designing and coding a complete site. As with Patrick’s HTML Dog, I try to make sure that all the code taught is valid HTML & CSS. It is possible to teach beginners this stuff without them having to go through the same stages that most of us did over the last few years. I get mail every day from people relieved to have found it.

August 26, 06h

My first book about HTML was “Teach yourself HTML 3.2 in 24 hours” from Dick Oliver.
I bought this book in 1999.

The editor 1st Page 2000 was a step further with the Web Design Group: http://www.htmlhelp.com/

In Dutch:
• http://www.xs4all.nl/~werksman/webmees/index.html
• http://www.handleidinghtml.nl/

41
Betsy Barnard says:
August 26, 10h

I found these tutorials very helpful. I still use them if I need to refresh my memory about syntax, or about formatting I don’t use very often.

http://www.elated.com/tutorials/authoring/css/

Roger says:
August 26, 10h

While I’m honoured to see my own http://www.456bereastreet.com/lab/developing_with_web_standards/ mentioned here, I have to say that I didn’t really have beginners in mind when I wrote it. It’s primarily aimed at intermediate to advanced web developers. If it works for beginners too, that’s great :-)

As for recommendations, Designing With Web Standards and http://www.htmldog.com/ , which have already been mentioned, are great. I also think Joe Gillespie’s CSS From the Ground Up http://www.wpdfd.com/editorial/wpd0204news.htm#feature is worth taking a look at.

43
Victor Nystad says:
August 26, 12h

I usually recommend two books for people new to standards. One of them is Zeldmans “Designing with Web Standards” obviously. The other one is “Cascading Style Sheets: Separating Content from Presentation” by Owen Briggs, which takes a more practial approach. Highly recommended!
http://www.amazon.com/exec/obidos/tg/detail/-/159059231X/qid=1093549366/sr=8-1/ref=sr_8_xs_ap_i1_xgl14/103-8423278-2334243?v=glance&s=books&n=507846

August 26, 12h

Dave - as a beginner myself, I have to say one of my first stops is usually mezzoblue.

Sure, some of what you cover may be over my head at times - but it’s not like I’ll drown by diving in at the deep end of the pool here. :-)

Thanks for everything you put up (and put up WITH!) here.

Jim

August 26, 12h

I started with CSS: The Definitive Guide by Eric Meyer, having only mucked about on my own with an HTML editor before. I do like comprehensive tomes, and maybe other beginners wouldn’t, but I found it gave me a great idea of the entire potential of CSS, and a clear treatment of the specifics that I still find illuminating.

August 27, 01h

come check out my css directory -
http://www.roderickhoward.com/cssdirectory/

47
Mike Richardson says:
August 27, 04h

While I’m no longer a beginner, I still find I need regular access to specific help.

One of the best sites I have found for both beginners and general reference is
http://www.w3schools.com.

Not only does it take you through the bascis of HTML, and XHTML but also CSS and plenty of other languages. It also provides tests on the basic and, if you’re willing to shell out a few bucks, some certification of your basic knowledge.

Mike Richardson
Cyber-Rich Design
mrichardson4@satx.rr.com

August 27, 06h

I had not noticed this site listed, but I find it an excellent HTML/CSS reference tool when dealing with cross-browser support and which items work in which browsers.

http://www.blooberry.com/

BTW… great list so far, I’ve found several here that I’ve never seen before. I mentor a few friends who are learning web development and these are excellent resources. Thanks to everyone!

August 27, 06h

Here is the list that Dan Cederholm had developers put together a couple months back, several great articles in can be found there.

The Complete List: http://www.orderedlist.com/articles/simple_list
Original Format of list: http://www.simplebits.com/notebook/2004/06/16/contest.html

August 27, 12h

As a newbie to CSS and Web Standards I have found nearly all the sites listed so far to be great resources for beginners.

My picks are as follows:

For the process of web design -
http://www.webdesignfromscratch.com/

For beginner CSS and HTML tutorials -
http://www.htmldog.com/
http://www.echoecho.com/

For inspiration -
http://www.csszengarden.com/
http://www.cssbeauty.com/
http://cssvault.com/.

For tutorials on CSS aspects -
http://www.maxdesign.com.au/presentation/index.cfm
http://www.realworldstyle.com/

On Usability issues -
http://www.useit.com/alertbox/

And for its simple introduction to accessability issues and site links -
http://www.btinternet.com/~adrian.rayfield/index.html

Also, mezzoblue and its like, for all the articles on web design that have taken over my life :)

August 28, 02h

I’ve always thought it would be great to have a site that was dedicated to this topic. SOmething that contains some well-written, easy to follow tutorials and even a nice web based discussion board where people could ask questions and get answers. It feels, very often, that this CSS/XHTML based design stuff is almost like for an elite corps of people who devote their lives to this stuff and don’t always have the time or desire to help others, but that’s just my opinion. I’ve always wished for a nice place where I could ask questions that I would get friendly help for.

Tazz says:
August 28, 04h

Ref to Post 15.

Stephen, your talking about something a little off the topic. But nevertheless, http://good-tutorials.com is launch pad to a variety of sources related to the artistic aspect of design, basically creating special effects on images in PS, such as buttons, plastic/glass effects, fire, it’s endless.

As for the rest of the readers, I found the Style Master software at http://www.westciv.com/ invaluable with its hands-on tutorial on building a table-less webpage.

The no crap primer is awesome for absolute beginners at http://wendypeck.com/css101.html (take off http://www.dezwozhere.com/links.html)

Kevin says:
August 28, 05h

I’ve been working on a community based resource at http://infinisphere.com/. Primary content is similar to ALA, in that it is article based. However, with the CMS I’m using all registered users can submit articles. By users, for users. All are welcome to contribute their knowledge.

Sadish says:
August 29, 07h

I have tried to take the links that talks about XHTML / CSS, and put it in my website at http://weekly.alittleaway.com
you may find a good link there.

Neil Ford says:
August 30, 02h

It’s got to be Zeldman’s “ Designing with web standards”.

It is simply the most practical book on standards based design. And entertaining to boot.

57
Sean says:
August 30, 10h

When I first started out, I visited http://webmonkey.wired.com/webmonkey/ on a regular basis. Not very standards/xhtml oriented, but it did help me get the job done with easy to follow turorials on html/design and backend technologies.

August 30, 11h

While not necessarily following the line of thinking of the other comments, I strongly believe in http://www.diveintoaccessibility.org or any site on that topic for newbies. Correct training from the beginning.

September 01, 05h

Might we now add this thread to the list? Honestly, I went through and bookmarked so many pages, I will never be able to keep up. I only wish I had something I could add to the list.

60
Carmelyne Thompson says:
September 02, 04h

Well if I were to make a suggestion to someone looking into free web resources, I’d recommend the following in order:

1. w3schools.com - would serve as the main reference.

2. glish.com/css/ - simple and understandable layouts they can take apart and understand.

3. bluerobot.com/web/layouts/ - another css layout resource site that’s so simple to dissect.

4. css.maxdesign.com.au/index.htm - well this should be next after knowing the reference material and layout techniques.

5. csszengarden.com - should definitely go here after having some techniques down.

Personally, I think wanting to mark up properly comes after learning basic CSS and realize that it is the way to go.

Once the basics are covered, I can tell them to go to alistpart.com and get Meyers book, simplebits.com, sitepoint.com, and sites where designers and developers have their blogs dedicated to such endeavors.

John says:
September 05, 08h

Stu’s Cutting Edge CSS is worth a visit.
http://www.stunicholls.myby.co.uk/index.html

Narain says:
September 09, 07h

All the beginners, start with inspirations. I believe inspirations leads to better learning. If that is the case,

here is my list of inspirations & learning for CSS for the beginners.

Undoubtfully, it should be
http://www.cssvault.com

also these,
http://www.stylegala.com
http://www.unmatchedstyle.com

More in terms of learning the “web” itself is

http://www.wpdfd.com

Though it is repeated, still
http://www.alistapart.com
http://www.simplebits.com
http://www.mezzoblue.com

Donimo says:
September 10, 05h

For more learn by example resources you can try perusing ‘The List’.

Meryl’s got it up to 1059.


http://meryl.net/css/

September 11, 11h

For several years now I’ve taught a 4 hour intro course to XHTML, another one for intro to CSS and also Graphics for the web.

These courses are designed for *total* beginners. My online course notes are extensive, and available at http://www.mactips.info/tutorials .

The XHTML course includes accessibility and validation as fundamental requirements. It includes many screenshots and several MP3s and a short movie.

September 15, 07h

Veerle Pieters has created a nice PDF chalked full of hyperlinks to many great CSS sites. The links are organized into categories that range from “learning” to “image replacement”.

http://veerle.duoh.com/index.php?id=P243

September 16, 04h

As a preamble to doing anything with css ChunkeySoup’s article is nicely written with useful links in all the right places:

http://www.chunkysoup.net/basic/quickcss/

Gob says:
September 24, 09h

A couple more nice resources for the beginners are:

1. http://tranchant.plus.com/web/html-tutorial/
(Has a CSS Tutorial too, but that is not complete at present)

2.http://tobyinkster.co.uk/html-tutorial

(These are from the Opera Web Developer Bookmarklets, which Literary Moose so kindly included)

September 29, 07h

Hi, I would recommend O’Reilly definitive guides to get the theory: XHTML (Musciano, Kennedy) and CSS (Meyer).

After you got that right you can get more info from www.alistapart.com, Zeldman’s book and www.sitepoint.com.

I am sure Dan’s book is also great, but I haven’t bought it yet.

Somebody mentioned examining good site’s code, I agree, but remember, examine, learn the techniques, don’t steal :)

69
Serge, designer says:
October 11, 03h

I am amazed at the number of books on the programming languages and scripts. Why don’t someone who has enough brains compose a book which will include EVERYTHING? I’m just being curious…

70
Dano says:
November 05, 05h

At http://www.w3.org/2002/03/tutorials the W3C provides an excellent list of tutorial resources.

71
Edgard Durand says:
November 06, 10h

This article will help me a lot. Thanks to all link contributors.