Personally I suggest you learn HTML and CSS properly, get that working and working well before even thinking about javascript (and especially before thinking about SPAs!). Here's a little guide I wrote up for someone recently that may be of help to you:
So there are a few thing which you must consider, and understand, to be a CSS master (in my opinionated order of importance):
- Selectors
- Cascade
- Specificity
- Box model
- Positioning/floating
- HTML
Selectors allow you to target elements on a page, without selectors you can do very little (apart from add style rules to elements inline – bad practice!), so it’s a good place to start. Understand how the selectors work and their support.
The next thing to understand is one of the most important topics, which will avoid you writing too much CSS needlessly – the cascade!
Specificity determines which rules are applied to a given element. Most of the time it can be avoided and you can proceed with ignorance, but understanding it will tame your selectors and stop you getting into an arms race with yourself, adding more and IDs to selectors to get your styles applied (if that makes no sense, you don’t understand specificity, read on!)
Whenever I talk to people about CSS, most people understand font styling, backgrounds and all that jazz. That’s because it’s the simple stuff ;-) the areas where people always seem to have trouble are in understanding positioning and floating. These are both tied to the box model, so first thing is to learn that, then move onto positioning and floating:
Don't worry if your mind is blown a little at this point, they're fairly confusing concepts!
But what is CSS without markup? Or rather, what use is good CSS without good HTML? I think, to have a good understanding of CSS is to have a good understanding of HTML. The following websites contain masses of info about HTML:
They may be a little too deep for first learning, so I’d also heavily recommend the following books:
They both show you how to write good, semantic markup and style with CSS to create great results. I know, right, who needs books in this day and age when you have the internet?! Well these books are awesome, and are 100% worth the cost.
Some less targeted suggestions, but good resources for general CSS/HTML learning:
One final thing – and a great strength of the web - is that all websites are effectively open source*, in that you can view all the CSS/HTML/JS for a website. Next time you see something interesting, just crack open firebug and try to understand what’s going on, alter the values, see what effect it has. See how others organise their markup, how they style things, what functionality they delegate to javascript over CSS etc.
After you’ve understood all the above, you may fancy dabbling with some cutting edge CSS. Handy websites for playing about with some CSS3 technologies:
That’s everything I can think of at the moment! Of course, as with mastering anything, it is not how much reading you do but rather how much you practice what you read. Only when you struggle with these things in practice will you truly gain insight and strengthen your own mental model.
As for JavaScript, assuming you know some programing (given you mention CGI and PHP) I heartily recommend watching some of Douglas Crockford's videos which can be found here:
Crockford is a master of JavaScript and is responsible for some big advances (he invented JSON and started JSLint). The YUI theatre vids are particularly excellent and incredibly detailed :)
