Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/requestly/awesome-frontend-resources

A curated collection of awesome resources for frontend developers: tutorials, tools, libraries, design assets, and more! 🚀
https://github.com/requestly/awesome-frontend-resources

List: awesome-frontend-resources

angular cheatsheet first-timers-only frontend need-help react react-native reactjs roadmap vue

Last synced: 1 day ago
JSON representation

A curated collection of awesome resources for frontend developers: tutorials, tools, libraries, design assets, and more! 🚀

Awesome Lists containing this project

README 

        
# Awesome Frontend Resources [![Awesome](https://awesome.re/badge.svg)](https://awesome.re)



> A curated collection of awesome resources for frontend developers: tutorials, tools, libraries, design assets, and more!



### What is Awesome Frontend Resources?



Awesome Frontend Resources is a curated collection of top tutorials, tools, libraries, and design assets for frontend development. Whether you're a beginner or a seasoned pro, this easy-to-navigate repository is designed to simplify your learning and development process.



## Contents



1.  [Learning Paths and Roadmaps](#learning-paths-and-roadmaps)

    - Development, Languages, Frameworks,

    - Mobile Dev, Engineering

2.  [Learning Resources](#learning-resources)

    - JavaScript, Type Script,

    - React, React Native, Angular, Vue, Node.js,

    - Android, iOS, Electron, Flutter,

    - Data Structure

3.  [Docs & CheatSheets](#docs--cheatsheets)

    - JavaScript, Type Script,

    - React, React Native, Angular, Vue, Node.js,

    - Android, iOS, Electron, Flutter

4.  [Development Resources](#development-resources)

5.  [Communities](#communities)

6.  [Open Source Contributions](#open-source-contributions)



## Learning Paths and Roadmaps



The journey of becoming a frontend developer can feel overwhelming, but structured learning paths and roadmaps can make the process more manageable and efficient.



### DEVELOPMENT



- [Frontend Beginner Roadmap](https://roadmap.sh/frontend?r=frontend-beginner) — A short roadmap for learning the basics before starting a frontend development role.

- [Frontend Roadmap](https://roadmap.sh/frontend) — A comprehensive roadmap covering all areas of frontend development, guiding you from beginner to expert level.

- [Full Stack Roadmap](https://roadmap.sh/full-stack) — Covers a wide range of technologies for both frontend and backend development, essential for full-stack development.

- [IOS Developer Roadmap](https://roadmap.sh/ios) - A comprehensive roadmap covering all areas of IOS development. It covers patterns and techniques, app components, fundamentals, and so on.



### LANGUAGES



- [JavaScript Roadmap](https://roadmap.sh/javascript) — A comprehensive JavaScript roadmap starting from the basics and covering advanced topics.

- [TypeScript Roadmap](https://roadmap.sh/typescript) — An extensive TypeScript roadmap beginning with the fundamentals and progressing to advanced concepts.



### FRAMEWORKS



- [React Roadmap](https://roadmap.sh/react) — A thorough React roadmap starting from the CLI and routers to testing and error boundaries, covering all essential concepts.

- [React Native Roadmap](https://roadmap.sh/react-native) — A detailed guide for mastering React Native, from basics to advanced techniques in mobile app development.

- [Vue Roadmap](https://roadmap.sh/vue) — A comprehensive roadmap for learning Vue.js, covering fundamental to advanced topics for building dynamic user interfaces.

- [Angular Roadmap](https://roadmap.sh/angular) — An extensive Angular roadmap guiding you through the framework's core features, modules, and advanced concepts.

- [Node.js Roadmap](https://roadmap.sh/nodejs) — A complete roadmap for Node.js, encompassing server-side development, APIs, and advanced backend techniques.



### MOBILE DEVELOPMENT



- [Android Roadmap](https://roadmap.sh/android) — A step-by-step guide for Android development, covering all essential aspects from basic setup to advanced features.

- [iOS Roadmap](https://roadmap.sh/ios) — A comprehensive roadmap for iOS development, including Swift programming, UI design, and advanced iOS features.

- [Flutter Roadmap](https://roadmap.sh/flutter) — An in-depth guide for Flutter development, from initial setup to building and deploying cross-platform mobile apps.



### ENGINEERING



- [Software Design and Architecture Roadmap](https://roadmap.sh/software-design-architecture) — A detailed guide for understanding and implementing software design principles and architectural patterns.

- [Data Structures Roadmap](https://roadmap.sh/datastructures-and-algorithms) — A thorough roadmap for mastering data structures and algorithms, essential for efficient problem-solving in software development.

- [Code Review Roadmap](https://roadmap.sh/code-review) — A comprehensive guide on how to conduct effective code reviews, improving code quality and team collaboration.



## Learning Resources



### Books



- [You Don't Know JS Yet](https://github.com/getify/You-Dont-Know-JS/tree/2nd-ed?tab=readme-ov-file) — A comprehensive series diving deep into JavaScript concepts and mechanics.

- [Eloquent Javascript](https://eloquentjavascript.net/index.html) — A modern introduction to JavaScript, covering the language's core features and best practices.

- [Learn Javascript: Beginer Edition](https://javascript.sumankunwar.com.np/en/) — A beginner-friendly guide to learning JavaScript from the ground up.

- [Introduction to Algorithms, Fourth Edition (CLRS)](https://en.wikipedia.org/wiki/Introduction_to_Algorithms) — _The book_ on algorithms. Gain a better theoretical understanding of the mathematical building blocks of the web.

- [Pro Git 2nd Edition](https://git-scm.com/book/en/v2) - The entire Pro Git book, written by Scott Chacon and Ben Straub and published by Apress, is available here.



### Online Library



- [Open Library](https://openlibrary.org/) — A vast digital library offering free access to millions of books, including many on programming and JavaScript.



### Tutorials



- JavaScript

  - [Javascript.info](https://javascript.info/) — A detailed and interactive JavaScript tutorial covering basic to advanced topics.

  - [MDN: Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Web/JavaScript) — Comprehensive documentation and tutorials for JavaScript and web development.

  - [JavaScrip Design Patterns](https://www.patterns.dev/) — A resource for learning design patterns in JavaScript for writing clean and efficient code.

  - [Professor Frisby's Mostly Adequate Guide to Functional Programming](https://mostly-adequate.gitbook.io/mostly-adequate-guide) — An accessible guide to functional programming concepts in JavaScript.

- React

  - [Youtube: React Tutorial for Beginners](https://www.youtube.com/watch?v=SqcY0GlETPk) — A beginner-friendly video tutorial introducing the fundamentals of React.

- React Native

  - [Official: Tutorial cum Doc](https://reactnative.dev/docs/getting-started) — The official React Native documentation and tutorial for getting started.

  - [Youtube: React Native Tutorial for Beginners by Codevolution](https://www.youtube.com/playlist?list=PLC3y8-rFHvwhiQJD1di4eRVN30WWCXkg1) — A beginner's guide to learning React Native, covering the basics of building mobile apps.

  - [Youtube: React Native Course for Beginners by JavaScript Mastry](https://www.youtube.com/watch?v=ZBCUegTZF7M) — A comprehensive course for beginners to learn React Native.

- Vue

  - [Official: Tutorial](https://vuejs.org/tutorial/) — The official Vue.js tutorial for learning the basics and advanced concepts of the framework.

  - [Youtube: Vue 3 with TypeScript Jump Start](https://www.youtube.com/playlist?list=PL4cUxeGkcC9gCtAuEdXTjNVE5bbMFo5OD) — A beginner's guide to learning Vue 3 with TypeScript, providing a solid foundation in both technologies.

- Angular

  - [Official: Tutorial](https://angular.dev/tutorials/learn-angular) — The official Angular tutorial for learning the basics and advanced concepts of the framework.

  - [Youtube: Learn Angular A-Z: Complete Tutorial for Beginners](https://www.youtube.com/watch?v=JWhRMyyF7nc) — A video tutorial covering Angular from A to Z for beginners.

- Node

  - [How to Get Started with NodeJS – a Handbook for Beginners](https://www.freecodecamp.org/news/get-started-with-nodejs/) — A beginner's handbook for getting started with Node.js, covering fundamental concepts and practical examples.

  - [Official: Tutorial](https://nodejs.org/en/learn/getting-started/introduction-to-nodejs) — The official Node.js tutorial for learning the basics and getting started with Node.js.

- Apple

  - [Official Swift Tutorial](https://developer.apple.com/learn/) — The official tutorial from Apple for learning Swift, covering basics to advanced concepts for developing iOS applications.



### Courses



- [CodeAcademy: Introduction to JS](https://www.codecademy.com/learn/introduction-to-javascript) — An interactive course introducing the basics of JavaScript.

- [freeCodeCamp: JavaScript Algorithms and Data Structures](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures-v8/) — A free course covering JavaScript fundamentals, algorithms, and data structures.

- [TheOdinProject: JavaScript Course](https://www.theodinproject.com/paths/full-stack-javascript/courses/javascript) — A comprehensive course for learning JavaScript in the context of full-stack development.

- [University of Helsinki: Full Stack Open](https://fullstackopen.com/en/) - Learn React, Redux, Node.js, MongoDB, GraphQL and TypeScript 

- [Youtube: Traversy Crash Course in Javascript](https://www.youtube.com/watch?v=hdI2bqOjy3c) — A popular crash course on JavaScript fundamentals by Traversy Media.

- [Youtube: Javascript Under The Hood](https://www.youtube.com/playlist?list=PLillGF-Rfqbars4vKNtpcWVDUpVOVTlgB) — A video series exploring the inner workings of JavaScript.



### Articles



- [TypeScript vs JavaScript](https://www.codewars.com/post/typescript-and-javascript-the-relationship-explained) — An article explaining the relationship and differences between TypeScript and JavaScript.



### Videos



- [What the heck is the event loop anyway?](https://www.youtube.com/watch?v=8aGhZQkoFbQ) — A clear and engaging explanation of the JavaScript event loop.

- [Closures Explained in 100 Seconds](https://www.youtube.com/watch?v=vKJpN5FAeF4) — A quick and concise video explaining JavaScript closures.



## Docs & CheatSheets



### Cheatsheets



- [HTML Cheatsheets](https://websitesetup.org/html5-cheat-sheet/) — A handy reference for HTML5 elements and attributes.



### Official Documentations



- [JavaScript(MDN)](https://developer.mozilla.org/en-US/docs/Web/JavaScript)

- [React](https://react.dev/reference/react)

- [React Native](https://reactnative.dev/docs/getting-started)

- [Vue.js](https://vuejs.org/guide/introduction.html)

- [Angular](https://angular.dev/overview)

- [Node.js](https://nodejs.org/docs/latest/api/)

- [Android](https://developer.android.com/develop)



## Development Resources



### Playgrounds



- [Playcode](https://playcode.io/new) — A playground for learning/testing/experimenting in JS or TS, along with HTML5 and CSS, with extensive library support.

- [JSFiddle](https://jsfiddle.net/) — An online IDE for testing and sharing HTML, CSS, and JavaScript code snippets.

- [CodePen](https://codepen.io/) — A social development environment for front-end designers and developers, allowing you to build and deploy websites, showcase work.

- [Regex101](https://regex101.com/) — A place to write and debug regular expressions with extensive and helpful feedback.



## Communities



- [dev.to](https://dev.to/) — A community platform for developers to share articles, tutorials, and discussions.

- [r/Frontend](https://www.reddit.com/r/Frontend/) — A Reddit community focused on frontend development.

- [r/learnjavascript](https://www.reddit.com/r/learnjavascript/) — A Reddit community for JavaScript learners to ask questions and share knowledge.

- [r/javascript](https://www.reddit.com/r/javascript/) — A Reddit community for discussing all things JavaScript.



## Open Source Contributions



- [How to contribute to open source](https://blog.rysolv.com/how-to-contribute-to-open-source) — A guide on how to start contributing to open-source projects.

- **How to find repos to contribute** — Search on GitHub with label → `first-timers-only` to find out the issues that are good for first time contributors. Further filter with programming language of your choice.

- **GitHub Repos inviting contributors** — Search on GitHub with label → `help-wanted` to find out the repos that are inviting contributors.



## Legalities



- [Choose a license](https://choosealicense.com/) — Explanations and comparisons of various licenses to help you find the right one to include with your code.