I know the backend part of the system, but if I want to go about and implement HTML/CSS/JS from a Photoshop image, then I'm totally lost.
Any good resources? It seems to me that all good frontend devs just learn by experience/empirically -- there's little "formal training" (in some sense).
For instance you can still make sites that are based on static HTML and CSS and that have no Javascript or you can put a few little bits of Javascript in, or you can use a large number of techniques and frameworks to build something that is more like a mobile app than a web page, be it AngularJS or GWT, Enscripten, etc.
First there were the libraries like prototype and JQuery that would smooth over browser incompatibilities, but then the browsers got more compatible. For a long time there was a consensus that a macro language and calculations in CSS would make things worse. Then Blueprint came out and people were excited about that. Then people got sick of all web pages looking the same, and then people realized that the grid was the bad part of Blueprint, it was the other stuff that was good, but then you need a macro languages like LESS, and...
Thus you really have to set some goals for which technologies you want to master, because if you want to master them all you are going to be doing nothing but front-end development for a few years and then you will continuously be scrambling to keep up.
When writing HTML be as descriptive as possible in your use of tag names. If you only use "div" and "span" for everything you are failing your users and destroying accessibility. Go read this http://www.w3.org/TR/WCAG20/ and the various supporting documents. You cannot claim to have mastered HTML if you have failed to understand accessibility.
CSS just takes practice. With the browsers being less divergent now and easier to code for its harder to learn a deep deep level of mastery. Back in the days of IE6 you had to become quite the badass to make CSS work cross-browser without a bunch of stupid hacks.
For JavaScript there are some key things to focus upon:
* The scope model (learn closures and nesting functions)
* events and callbacks
* xmlHttpRequest (AJAX)
* the DOM
* the Node.js methods
Don't dick around wasting time learning frameworks and JQuery. Just learn through the vanilla code and learn to solve problems as directly as possible. It will pay off in the long run. Pass your code through the http://jslint.com/ tool. JSLint is OCD crazy opinionated and extremely strict, but it is that on purpose. It is designed to teach defensive coding practices so that you can right code correctly the first time which has a significantly lower probably of failure and is easier to maintain.