
Ask HN: What are your favorite web front-end ressources? - kvalium
New web front-end dev after some time as a back-end dev, I&#x27;m looking for ressources such as books or news sites. Do you know some? :)
======
LarryMade2
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.

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...](https://developers.google.com/web/fundamentals/design-and-
ui/responsive/)

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

------
afarrell
[http://book.mixu.net/css/](http://book.mixu.net/css/)

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/](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](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.

[1] [http://i.imgur.com/Q3cUg29.gif](http://i.imgur.com/Q3cUg29.gif)

~~~
kvalium
This book looks great! Thanks

------
mtmail
I use [http://devdocs.io/](http://devdocs.io/) and the old
[http://jqapi.com/](http://jqapi.com/) instead of books.

[https://developer.mozilla.org/en-US/](https://developer.mozilla.org/en-US/)
and [https://docs.microsoft.com/en-
us/scripting/javascript/refere...](https://docs.microsoft.com/en-
us/scripting/javascript/reference/javascript-reference) are up-to-date. Don't
go to the old w3w-schools.org regardless how good their SEO ranking on Google
is.

For packaging the industry is slowly moving from grunt and gulp to webpack.
[https://webpack.js.org/](https://webpack.js.org/) And react/angularjs as
frameworks of course.

[http://javascriptweekly.com/](http://javascriptweekly.com/) has decent
newsletters (bottom of the page). There's little overlap between the
Javascript and nodejs one.

~~~
Bilters
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!

------
swah
This free course was kinda great: [http://learn.handlebarlabs.com/p/react-
native-basics-build-a...](http://learn.handlebarlabs.com/p/react-native-
basics-build-a-currency-converter)

Its actually about React Native, but I still would like to link it :)

------
mozillas
I've known this one for a while now; it shows up first when you search "front-
end news" in Google [https://frontendfront.com/](https://frontendfront.com/)

~~~
kvalium
Nice one, I've bookmarked it, thanks :)

