Ask HN: What are your favorite web front-end ressources?

Don&#x27;t do much news sites, most are pushing the shiny new tech of the month - which changes just about as often.<p>Advice - don&#x27;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.<p>for a book, I suggest Stylin&#x27; with CSS: A Designer&#x27;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.<p>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 - <a href="https:&#x2F;&#x2F;developers.google.com&#x2F;web&#x2F;fundamentals&#x2F;design-and-ui&#x2F;responsive&#x2F;" rel="nofollow">https:&#x2F;&#x2F;developers.google.com&#x2F;web&#x2F;fundamentals&#x2F;design-and-ui...</a><p>Javascript - if you don&#x27;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.<p>Especially if you are looking to do public facing front-end work, read up whatever security tips for your backend (filtering&#x2F;escaping input, preventing cross-site scripting, and database exploits, etc.).<p>Keep plugging along, you&#x27;ll get there - Good luck

<a href="http:&#x2F;&#x2F;book.mixu.net&#x2F;css&#x2F;" rel="nofollow">http:&#x2F;&#x2F;book.mixu.net&#x2F;css&#x2F;</a><p>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:<p>- Read through <a href="http:&#x2F;&#x2F;book.mixu.net&#x2F;css&#x2F;" rel="nofollow">http:&#x2F;&#x2F;book.mixu.net&#x2F;css&#x2F;</a> and take notes like you are in university. When you come to a point that seems ambiguous, copy-paste some of the example html&#x2F;css into a file, modify it, and view it in the browser to check your understanding.<p>- Turn these notes into flashcards in a Spaced Repetition program like <a href="https:&#x2F;&#x2F;ankiweb.net&#x2F;about" rel="nofollow">https:&#x2F;&#x2F;ankiweb.net&#x2F;about</a>. Try to write questions that ask <i>why</i> something turns out some way. Don&#x27;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.<p>After that if you have time and don&#x27;t already have a project to work on, you might want to<p>- Build a bunch of things in just HTML&#x2F;CSS. When you have a question about how to position something, try to predict what the answer is. If you can&#x27;t, then look up resources and add another notecard to represent what you learned.<p>[1] <a href="http:&#x2F;&#x2F;i.imgur.com&#x2F;Q3cUg29.gif" rel="nofollow">http:&#x2F;&#x2F;i.imgur.com&#x2F;Q3cUg29.gif</a>

I use <a href="http:&#x2F;&#x2F;devdocs.io&#x2F;" rel="nofollow">http:&#x2F;&#x2F;devdocs.io&#x2F;</a> and the old <a href="http:&#x2F;&#x2F;jqapi.com&#x2F;" rel="nofollow">http:&#x2F;&#x2F;jqapi.com&#x2F;</a> instead of books.<p><a href="https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;" rel="nofollow">https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;</a> and <a href="https:&#x2F;&#x2F;docs.microsoft.com&#x2F;en-us&#x2F;scripting&#x2F;javascript&#x2F;reference&#x2F;javascript-reference" rel="nofollow">https:&#x2F;&#x2F;docs.microsoft.com&#x2F;en-us&#x2F;scripting&#x2F;javascript&#x2F;refere...</a> are up-to-date. Don&#x27;t go to the old w3w-schools.org regardless how good their SEO ranking on Google is.<p>For packaging the industry is slowly moving from grunt and gulp to webpack. <a href="https:&#x2F;&#x2F;webpack.js.org&#x2F;" rel="nofollow">https:&#x2F;&#x2F;webpack.js.org&#x2F;</a> And react&#x2F;angularjs as frameworks of course.<p><a href="http:&#x2F;&#x2F;javascriptweekly.com&#x2F;" rel="nofollow">http:&#x2F;&#x2F;javascriptweekly.com&#x2F;</a> has decent newsletters (bottom of the page). There&#x27;s little overlap between the Javascript and nodejs one.

This free course was kinda great: <a href="http:&#x2F;&#x2F;learn.handlebarlabs.com&#x2F;p&#x2F;react-native-basics-build-a-currency-converter" rel="nofollow">http:&#x2F;&#x2F;learn.handlebarlabs.com&#x2F;p&#x2F;react-native-basics-build-a...</a><p>Its actually about React Native, but I still would like to link it :)

I&#x27;ve known this one for a while now; it shows up first when you search &quot;front-end news&quot; in Google <a href="https:&#x2F;&#x2F;frontendfront.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;frontendfront.com&#x2F;</a>