HTML/CSS: The right way

[connor]

I'm helping a buddy of mine out with some JS stuff (and also some basic html/css. He's learned it before, but isn't up to date on current "best practices", etc).

Anyways, he loves MDN, but feels like that is sometimes too comprehensive. He's looking for more of a here's how to do the things the right way kind of approach. Some of the things he mentioned:

• how do I make the font Helvetica
• what's the right way to do a table in html5
• how do I align the table's header text left
• how do I make the font color light gray
• I want something to be bold, do I use <b> or <em> or some css or what?

After looking at that, it seems that yes - anyone should know how to do that stuff. But after chewing on it a bit, the "right" way to do all of those things aren't completely obvious (especially to someone with hacked together knowledge or who is self-taught).

I'd love to start a discussion and see what some people had to say about this.

[necolas]

Sounds a candidate for a short blog post

[case]

Re: blog posts, this definitely already exists in the form of Google-searching across gazillions of awesome posts scattered around the web.

Am thinking more along the lines of this fantastic js patterns site but for html & css instead.

[uxder]

I think it would be interesting to throw in general css guidelines and maintain modularity. A css patterns might be nice.

http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml
http://smacss.com/

or useful guides like this...
http://csswizardry.com/2012/05/keep-your-css-selectors-short/

[ZachMoreno]

Here's another useful guide for front-end code standards & best practices.

http://na.isobar.com/standards/

[thatryan]

I have been wanting for a while to construct a "from basics" step-by-step type of tutorial site to act as a place to start for people getting into front-end development. Even bought a stupid domain name, thewebdevschool.com ;)

Would love to see if anyone would be interested in building something like that?

[chriscoyier]

This is an awesome one : http://learn.shayhowe.com/

[renoirb]

Indeed. Many blog posts, sites like w3fools. But this is not crazy actually.

We see that kind of open-source on a github documentation effort deployed for many others:

• PHP the right way
• PHP Deep end security
• Learn Phtyon the hard way

We have nice blog posts and contributors from you @chriscoyier @paulirish, html5doctor, diveintohtml5, @skoop, and many others. But they are specific for each author and project and not fork-pull-request proposal for the community.

It is time to build this kind fork-contribute documentation project effort. And bring yet an other good source of documentation.

A simple Jeckyll site from a GitHub pages would do and people could contribute :)

[renoirb]

An update.

I just purchased htmlcsstherightway.com I am member of a French Canadian W3C/Accessibility non for profit organization called W3Québec. I'll give the rights to them and or give rights to publish on that exact topic on the domain.

If people are interrested in contributing/translating. I'll make the content available and will gladly accept pull requests :)

Content is going to be published in this repository https://github.com/renoirb/htmlcsstherightway probably using github pages.

[jonathan-fielding]

I would love to contribute to a place where people can learn html and css, i remember learning html from a book in my school library back in 2000, and would love to help the younger generation learn properly.

I can't translate, but I can contribute to english version