Don't do much news sites, most are pushing the shiny new tech of the month - which changes just about as often.
Advice - don't try to learn it all at once, lots of technologies (CSS is truly brain damaging to logical back-end folk, take it easy)... also best to keep your HTML as simple as possible and style and script out from there.
for a book, I suggest Stylin' with CSS: A Designer's Guide by Charles Wyke-Smith Very good terse visual intro to CSS, will give you a good insight on what CSS is capable of, which is quite a lot.
Javascript - if you don't want a lot of effects, you can do most effects with only a little javascript without resorting to JQuery (google to help you there) same with DOM work and AJAX - Google what you need and if you get some stackoverflow suggestions read though all the examples, sometimes the less popular ones are more sane.
Especially if you are looking to do public facing front-end work, read up whatever security tips for your backend (filtering/escaping input, preventing cross-site scripting, and database exploits, etc.).
The hardest thing about going from backend dev to frontend dev is understanding CSS and HTML layout. Without a clear mental model, the experience of trying to position things on a web page feels like really frustrating[1]. I cannot recommend more highly that you do the following:
- Read through http://book.mixu.net/css/ and take notes like you are in university. When you come to a point that seems ambiguous, copy-paste some of the example html/css into a file, modify it, and view it in the browser to check your understanding.
- Turn these notes into flashcards in a Spaced Repetition program like https://ankiweb.net/about. Try to write questions that ask why something turns out some way. Don't be surprised if many of the questions end up feeling like rote memorization. There is a reason why med students do a lot of rote memorization: they are trying to build a mental model of a very complex system.
After that if you have time and don't already have a project to work on, you might want to
- Build a bunch of things in just HTML/CSS. When you have a question about how to position something, try to predict what the answer is. If you can't, then look up resources and add another notecard to represent what you learned.
I didn't know about dev docs, but it looks like a great resource! I've been using Kapeli's Dash for a bit now, but this seems to be a free alternative, thanks!
Advice - don't try to learn it all at once, lots of technologies (CSS is truly brain damaging to logical back-end folk, take it easy)... also best to keep your HTML as simple as possible and style and script out from there.
for a book, I suggest Stylin' with CSS: A Designer's Guide by Charles Wyke-Smith Very good terse visual intro to CSS, will give you a good insight on what CSS is capable of, which is quite a lot.
Look for the basics on responsive layouts, those grids and templates are usually set up for non-developers and add a lot of cruft you can do without. - this looks good - https://developers.google.com/web/fundamentals/design-and-ui...
Javascript - if you don't want a lot of effects, you can do most effects with only a little javascript without resorting to JQuery (google to help you there) same with DOM work and AJAX - Google what you need and if you get some stackoverflow suggestions read though all the examples, sometimes the less popular ones are more sane.
Especially if you are looking to do public facing front-end work, read up whatever security tips for your backend (filtering/escaping input, preventing cross-site scripting, and database exploits, etc.).
Keep plugging along, you'll get there - Good luck