How should I start learning CSS3 and HTML5 (is there any websites that might help)

Hi

I have a feeling that I should have started to learn CSS3 and HTML5 earlier (not sure) but I am still learning other things (php and so forth) so I planed to lear CSS3 & html5 for later

but I think that it might be nice to learn them from now. would you be able to share any useful links which would help me start learning?

thank you for your help

There isn’t a big rush with this, as both of them are a long way off being finished. If you Google those topics you’ll find a wealth of information on the web. If you want everything presented to you on a convenient platter, check out this new SitePoint book, which sounds perfect for your purposes:

Home - HTML5 & CSS3 for the Real World

I really should have asked the question to get that answer::
“There isn’t a big rush with this, as both of them are a long way off being finished”

Considering I have a lot to learn on php and js and so forth. Do you think I would be in a disadvantaged side if I went in a job interview (not freelance of course) or there these two not at this stage wet.

ps - I always wanted to make sure: what are these (css,html, php …) officially called - are they called “technologies” or are they all considered programming languages

Thanks ralph.m

If the interviewer knew a lot about the web, was wise and intelligent, then no. BUT … that’s the kind of interviewer you only meet in dreams. I suspect you’ll need to be able to throw around the right buzz words to impress people these days. You just need to be aware of the basics of HTML5 and CSS3 at this stage, as most of it is not really usable. A few little things like CSS3 rounded corners will get you a long way. I think if you read that book (you know, instead of watching TV for a few nights) you’ll be pretty well prepped.

ps - I always wanted to make sure: what are these (css,html, php …) officially called - are they called “technologies” or are they all considered programming languages

They are all languages (categorized as styling, markup, programming etc.) but yes, I also consider them technologies. I’d be interested in other responses to this. “I’m up to date with the latest web technologies” sounds sexy, but to me it’s the same as saying “I’m proficient in (web languages such as) HTML, CSS and PHP”.

I like the reply, thanks for your help :slight_smile:
I will definitely get that book

Whether I wanted or not I got the basics of css3 (in terms of terminology). so if I had to I could probably be able to through buzz words and sound as if I know how to use them (basically reproduce what I read in different blogs - but I don’t know how to use these at all, as as I said I concentrated in the “technologies” that I really need to expand on).

At university (on assignment briefs) they called them web technologies but I don’t often see this reference among such forums

thanks a lot

With CSS3, it’s really just more options, such as

element {border-radius: 5px;}

However, as most of it is still experimental in most browsers, you have to use proprietary prefixes, so the above rule more commonly looks like this at the moment:

element {
  [COLOR="Blue"]-moz-border-radius: 5px;[/COLOR] /* for Firefox */
  [COLOR="Blue"]-webkit-border-radius: 5px;[/COLOR] /* for Safari and Chrome */
  [COLOR="Blue"]-khtml-border-radius: 5px;[/COLOR] /* for Konqueror */
  [COLOR="Blue"]-o-border-radius: 5px;[/COLOR] /* for Opera */
  border-radius: 5px;
}

Essentially, HTML5 just has some new elements like <nav>, <header> and <footer> (and some different syntax rules) but to use them at this stage you have to dance around a bit, especially in browsers like IE8 and under, which can’t handle unknown element like this without the aid of JavaScript.

That book isn’t really a reference material for markup and very niche so if you want to learn said non normative markup it’s probably not the best of books. It basically just briefly covers the items related to that fictitious newspaper demo site and how and to apply some JavaScript hacks. It does cover some common CSS 3, which might be useful if you are a little outdated.

I think it’s worth learning both now. They are not terribly difficult, and while both will certainly change in the future, I think it’s worth keeping up with the cutting edge of development so that if you are called upon to use them for a job, you’ll know how and you’ll know the pros and cons of using them. That’ll put you ahead of people who haven’t bothered to learn them and then have to scramble to catch up.

The best way to teach yourself these technologies is to build yourself a website using them. I learnt HMTL5 by building my portfolio site with it, and while I would do parts of it differently now (fewer tags, for example), there is absolutely no substitute for trying everything out to see how it works.

CSS3 elements have been around for a long time, in one form or another, and you’ll find a lot of tutorials on them. For HTML5, try going through the HTML5 Boilerplate - A rock-solid default template for HTML5 awesome. and understanding what every part of it does (and then stripping out all the stuff you won’t need). Also take a look at [url=http://html5doctor.com/]HTML5 Doctor, helping you implement HTML5 today and read through the whole thing.

Site cracks me up:



                               -o/-
                               +oo//-
                              :ooo+//:
                             -ooooo///-
                             /oooooo//:
                            :ooooooo+//-
                           -+oooooooo///-
           -://////////////+oooooooooo++////////////::
            :+ooooooooooooooooooooooooooooooooooooo+:::-
              -/+ooooooooooooooooooooooooooooooo+/::////:-
                -:+oooooooooooooooooooooooooooo/::///////:-
                  --/+ooooooooooooooooooooo+::://////:-
                     -:+ooooooooooooooooo+:://////:--
                       /ooooooooooooooooo+//////:-
                      -ooooooooooooooooooo////-
                      /ooooooooo+oooooooooo//:
                     :ooooooo+/::/+oooooooo+//-
                    -oooooo/::///////+oooooo///-
                    /ooo+::://////:---:/+oooo//:
                   -o+/::///////:-      -:/+o+//-
                   :-:///////:-            -:/://
                     -////:-                 --//:
                       --                       -:

And liberal sprinklings of the word “awesome” everywhere. As if they were Mozilla or something.

If you know the basics of HTML and CSS (the current, working versions) you will easily pick up the extra junk added to both. Any employer who can’t realise that is someone you don’t want to work for.

Then again, who am I to be saying stuff like that? Lawlz.

++ on the HTML5 doctors, though. It’s a nice site to keep up on what has changed and what hasn’t (often everything from tags that have changed like the <hgroup> waffle, or more often Best Practices, like how <nav> went from “Use It Absolutely Everywhere” to “Stick to major navigation”).

Thanks for the links and suggestions, I will read those,
I searched around and found lots of post like “top 30 tutorials on css3” - so I will be looking at those, but I thought there was any “must know” recourse/thing that I should know: for example I did not come across the two resources @patrick provided abover (at least I dont think I have)

thanks

You should have run across the doctors site… it’s run by “doctors” which are mostly people who are actively working on the HTML5 spec themselves. (every so often, they get mail from people thinking it’s a medical site… and Bruce will sometimes post the hilarious descriptions of puss-filled sores or other bodily complaints for the lawlz…)

You might also want to check out Bruce Lawson’s blog, even tho it’s private: Bruce Lawson’s personal site : HTML5

Yeah, that’s right, he’s riding a unicorn fighting Nazis with the power of HTML5 and a “lazer” gun. Yup.

If your CSS is good, learning some CSS3 junk from any decent tutorial site should be fine.

HTML5 you need to be a bit more discerning about. Resources from Opera, Mozilla or Chrome guys (like Paul Irish) should be pretty safe. The important thing to remember about HTML5 is it’s in Draft. That means anything, even <header> tags and stuff, can change at any time (even though obviously some of it is less likely to change than others… there are “more stable” areas and “actively contested” areas).

Also be aware there is a growing split between the WHATWG version of the specs and the W3C version… mostly they split on the newly-announced Schema.org plan (vs W3C’s RFDa plan) and accessibility stuff (which isn’t a big deal really… if you care about accessibility and want to follow “the spec” you can just follow W3C for now and even if a lot of stuff ends up being left out of the WHATWG version, you as an author should always be free to add it in anyway).