Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/Neofonie/frontend-resources

useful resources for learning and keeping up-to-date here at neofonie
https://github.com/Neofonie/frontend-resources

List: frontend-resources

awesome-list css frontend javascript newsletter resources

Last synced: 3 months ago
JSON representation

useful resources for learning and keeping up-to-date here at neofonie

Awesome Lists containing this project

README 

        
# frontend-resources



## LEARNING



### Learning Resources



* [Cheatsheets](https://devhints.io/) a modest collection of cheatsheets 

* [Frontend Performance](https://github.com/thedaviddias/Front-End-Performance-Checklist) an exhausted list of elements you should check or at least be aware of

* [Web Developer Roadmap](https://github.com/kamranahmedse/developer-roadmap) the paths that you can take and the technologies that you would want to adopt in order to become a frontend, backend or a devops. 

* [Superhero.js](http://superherojs.com/) A stylish list of online resources to learn and understand the basics of JavaScript (ES5), how to organize code, which tools to use, etc. A very good starting point for the beginner and intermediate frontend developer.

* [JavaScript the right way](http://jstherightway.org/) Another resource for beginners and intermediate developers.

* [You don't know JS](https://github.com/getify/You-Dont-Know-JS) A free series of books on JS. A little dated, but still worth a read.

* [Eloquent JavaScript](https://eloquentjavascript.net/) A beginner-friendly resource from which even the experienced developer might learn a thing or two.

* [Modular JavaScript Book Series](https://github.com/mjavascript) "An open effort to improve our collective understanding of writing robust, well-tested, and modular applications"

* [Web-Skills](https://andreasbm.github.io/web-skills/) A visual overview of useful skills to learn as a web developer



### Magazines



* [medium](https://medium.com/topic/software-engineering) Back-end to front-end.

* [Hackernoon](https://hackernoon.com/) How hackers start their afternoon.

* [freeCodeCamp](https://medium.freecodecamp.org) Stories about development, design and data science.

* [techcrunch](https://techcrunch.com/tag/javascript/) The javascript news stream from techcrunch.

* [SmashingMagazine](https://www.smashingmagazine.com/) For web designers and developers.

* [CSS tricks](https://css-tricks.com/) Lots of tricks in css.



### Newsletter



* [Codrops Collective](https://tympanus.net/codrops/collective/) The Collective features the latest news and resources from the web design & web development community. 

* [Sidebar](https://sidebar.io/) Since 2012, Sidebar has been collecting the best links about UI design, typography, CSS, user research, and all other facets of design.

* [Web Development Reading List](https://wdrl.info/) A handcrafted, carefully created weekly update resource for web developers by Anselm Hannemann, founder of Colloq. 

* [ES6.Next News](http://esnextnews.com/) Weekly newsletter curated by Dr. Axel Rauschmayer



### Online Courses



* [CSS Grid (FREE!)](https://cssgrid.io/) learn CSS Grid with Wes Bos in 25 pretty good videos

* [Javascript30 (FREE!)](https://javascript30.com/) 30 Day Vanilla JS Coding Challenge

* [What TheFlexBox?! (FREE!)](https://flexbox.io/) a simple, free 20 video course that will help you master CSS Flexbox!

* [Udemy](https://www.udemy.com/)



### Podcasts



* [SyntaxFM](https://syntax.fm/) A Tasty Treats Podcast for Web Developers by Wes Bos and Scott Tolinski

* [CSS Podcast](https://pod.link/thecsspodcast) All about CSS with Una Kravets and Adam Argyle, Developer Advocates from Google

* [Shoptalk Show](https://shoptalkshow.com/) A podcast about building websites

* [Toolsday](https://spec.fm/podcasts/toolsday) A show by Una Kravets & Chris Dhanaraj about the latest in tech tools, tips, and tricks on Tuesdays at 2 

* [programmier.bar](https://www.programmier.bar/podcast) Wollt ihr mehr über Progressive Web Apps, CSS Grids, TypeScript oder andere spezifische Themen der Web- und App-Entwicklung erfahren? Dann hört rein in unseren Podcast! 



### Tech Tutorials



* [CSS Grid](https://learncssgrid.com/) a guide to learning CSS grid by @jonsuh

* [Grid Garden](https://cssgridgarden.com/) A playful intro to CSS grid.

* [Flexbox](https://medium.freecodecamp.org/the-complete-illustrated-flexbox-tutorial-d35c085dbf35) a complete illustrated Flexbox tutorial

* [Flexbox Froggy](https://flexboxfroggy.com/) A playful intro to CSS flexbox.



## DOING



### Essentials

* [Can i use?](https://caniuse.com/) Can i use this or that in this or that browser? Maybe. Take a look.



### Browser Extensions 



* [Awesome Screenshot](http://www.awesomescreenshot.com/) screen capture & image annotation too

* [EditThisCookie](http://www.editthiscookie.com/) add, delete, edit, search the cookies on your page

* [Lighthouse](https://developers.google.com/web/tools/lighthouse/) automated tool for improving the performance, quality, and correctness of your web apps

* [PerfectPixel](http://www.welldonecode.com/perfectpixel/) put a semi-transparent image overlay over the top of the developed HTML

* [Web Developer](https://chrispederick.com/work/web-developer/) nice outlining for different element types, for example

* [Page Ruler](https://chrome.google.com/webstore/detail/page-ruler/emliamioobfffbgcfdchabfibonehkme) measure elements on any web page

* [VisBug](https://chrome.google.com/webstore/detail/visbug/cdockenadnadldjbbgcallicgledbeoc) "FireBug for designers"



### Tools and Utilities

* [Postman](https://www.getpostman.com/front-end) working with url endpoints, simulate APIs

* [Insomnia REST Client](https://insomnia.rest/) powerful and easy tool for api calls

* [OBS - Open Broadcaster Software](https://obsproject.com/de) easy screen recording



## UNMAINTAINED



* [Web Love with Una](https://tinyletter.com/weblove/) the personal (monthly-ish) newsletter of Una Kravets, filled with tiny bits of web love and inspiration. 

* [JS Air](https://javascriptair.com/) Seems to be dead, but the available episodes are quite good.