{"id":78482,"url":"https://github.com/requestly/awesome-frontend-resources","name":"awesome-frontend-resources","description":"A curated collection of awesome resources for frontend developers: tutorials, tools, libraries, design assets, and more! 🚀","projects_count":73,"last_synced_at":"2026-07-05T21:00:25.504Z","repository":{"id":244000445,"uuid":"813575034","full_name":"requestly/awesome-frontend-resources","owner":"requestly","description":"A curated collection of awesome resources for frontend developers: tutorials, tools, libraries, design assets, and more! 🚀","archived":false,"fork":false,"pushed_at":"2025-01-21T07:57:39.000Z","size":33,"stargazers_count":329,"open_issues_count":10,"forks_count":24,"subscribers_count":3,"default_branch":"main","last_synced_at":"2026-06-18T02:04:21.513Z","etag":null,"topics":["angular","cheatsheet","first-timers-only","frontend","need-help","react","react-native","reactjs","roadmap","vue"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/requestly.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"contributing.md","funding":null,"license":null,"code_of_conduct":"code-of-conduct.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-06-11T10:36:13.000Z","updated_at":"2026-06-08T18:56:46.000Z","dependencies_parsed_at":"2024-12-03T14:01:11.704Z","dependency_job_id":"d13943f8-7eb7-4e1b-8aa2-fd4c4eabf161","html_url":"https://github.com/requestly/awesome-frontend-resources","commit_stats":null,"previous_names":["requestly/awesome-frontend-resources"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/requestly/awesome-frontend-resources","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/requestly%2Fawesome-frontend-resources","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/requestly%2Fawesome-frontend-resources/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/requestly%2Fawesome-frontend-resources/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/requestly%2Fawesome-frontend-resources/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/requestly","download_url":"https://codeload.github.com/requestly/awesome-frontend-resources/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/requestly%2Fawesome-frontend-resources/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35168795,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-05T02:00:06.290Z","response_time":100,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"created_at":"2024-11-15T11:20:33.864Z","updated_at":"2026-07-05T21:00:25.504Z","primary_language":null,"list_of_lists":false,"displayable":true,"categories":["Docs \u0026 CheatSheets","Development Resources","Learning Resources","Legalities","Communities","Learning Paths and Roadmaps","Open Source Contributions"],"sub_categories":["Official Documentations","Playgrounds","Videos","Tutorials","Courses","MOBILE DEVELOPMENT","Books","Cheatsheets","FRAMEWORKS","LANGUAGES","DEVELOPMENT","Online Library","ENGINEERING","Articles"],"readme":"# Awesome Frontend Resources [![Awesome](https://awesome.re/badge.svg)](https://awesome.re)\n\n\u003e A curated collection of awesome resources for frontend developers: tutorials, tools, libraries, design assets, and more!\n\n### What is Awesome Frontend Resources?\n\nAwesome 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.\n\n## Contents\n\n1.  [Learning Paths and Roadmaps](#learning-paths-and-roadmaps)\n    - Development, Languages, Frameworks,\n    - Mobile Dev, Engineering\n2.  [Learning Resources](#learning-resources)\n    - JavaScript, Type Script,\n    - React, React Native, Angular, Vue, Node.js,\n    - Android, iOS, Electron, Flutter,\n    - Data Structure\n3.  [Docs \u0026 CheatSheets](#docs--cheatsheets)\n    - JavaScript, Type Script,\n    - React, React Native, Angular, Vue, Node.js,\n    - Android, iOS, Electron, Flutter\n4.  [Development Resources](#development-resources)\n5.  [Communities](#communities)\n6.  [Open Source Contributions](#open-source-contributions)\n\n## Learning Paths and Roadmaps\n\nThe journey of becoming a frontend developer can feel overwhelming, but structured learning paths and roadmaps can make the process more manageable and efficient.\n\n### DEVELOPMENT\n\n- [Frontend Beginner Roadmap](https://roadmap.sh/frontend?r=frontend-beginner) — A short roadmap for learning the basics before starting a frontend development role.\n- [Frontend Roadmap](https://roadmap.sh/frontend) — A comprehensive roadmap covering all areas of frontend development, guiding you from beginner to expert level.\n- [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.\n- [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.\n\n### LANGUAGES\n\n- [JavaScript Roadmap](https://roadmap.sh/javascript) — A comprehensive JavaScript roadmap starting from the basics and covering advanced topics.\n- [TypeScript Roadmap](https://roadmap.sh/typescript) — An extensive TypeScript roadmap beginning with the fundamentals and progressing to advanced concepts.\n\n### FRAMEWORKS\n\n- [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.\n- [React Native Roadmap](https://roadmap.sh/react-native) — A detailed guide for mastering React Native, from basics to advanced techniques in mobile app development.\n- [Vue Roadmap](https://roadmap.sh/vue) — A comprehensive roadmap for learning Vue.js, covering fundamental to advanced topics for building dynamic user interfaces.\n- [Angular Roadmap](https://roadmap.sh/angular) — An extensive Angular roadmap guiding you through the framework's core features, modules, and advanced concepts.\n- [Node.js Roadmap](https://roadmap.sh/nodejs) — A complete roadmap for Node.js, encompassing server-side development, APIs, and advanced backend techniques.\n\n### MOBILE DEVELOPMENT\n\n- [Android Roadmap](https://roadmap.sh/android) — A step-by-step guide for Android development, covering all essential aspects from basic setup to advanced features.\n- [iOS Roadmap](https://roadmap.sh/ios) — A comprehensive roadmap for iOS development, including Swift programming, UI design, and advanced iOS features.\n- [Flutter Roadmap](https://roadmap.sh/flutter) — An in-depth guide for Flutter development, from initial setup to building and deploying cross-platform mobile apps.\n\n### ENGINEERING\n\n- [Software Design and Architecture Roadmap](https://roadmap.sh/software-design-architecture) — A detailed guide for understanding and implementing software design principles and architectural patterns.\n- [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.\n- [Code Review Roadmap](https://roadmap.sh/code-review) — A comprehensive guide on how to conduct effective code reviews, improving code quality and team collaboration.\n\n## Learning Resources\n\n### Books\n\n- [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.\n- [Eloquent Javascript](https://eloquentjavascript.net/index.html) — A modern introduction to JavaScript, covering the language's core features and best practices.\n- [Learn Javascript: Beginer Edition](https://javascript.sumankunwar.com.np/en/) — A beginner-friendly guide to learning JavaScript from the ground up.\n- [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.\n- [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.\n\n### Online Library\n\n- [Open Library](https://openlibrary.org/) — A vast digital library offering free access to millions of books, including many on programming and JavaScript.\n\n### Tutorials\n\n- JavaScript\n  - [Javascript.info](https://javascript.info/) — A detailed and interactive JavaScript tutorial covering basic to advanced topics.\n  - [MDN: Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Web/JavaScript) — Comprehensive documentation and tutorials for JavaScript and web development.\n  - [JavaScrip Design Patterns](https://www.patterns.dev/) — A resource for learning design patterns in JavaScript for writing clean and efficient code.\n  - [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.\n- React\n  - [Youtube: React Tutorial for Beginners](https://www.youtube.com/watch?v=SqcY0GlETPk) — A beginner-friendly video tutorial introducing the fundamentals of React.\n- React Native\n  - [Official: Tutorial cum Doc](https://reactnative.dev/docs/getting-started) — The official React Native documentation and tutorial for getting started.\n  - [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.\n  - [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.\n- Vue\n  - [Official: Tutorial](https://vuejs.org/tutorial/) — The official Vue.js tutorial for learning the basics and advanced concepts of the framework.\n  - [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.\n- Angular\n  - [Official: Tutorial](https://angular.dev/tutorials/learn-angular) — The official Angular tutorial for learning the basics and advanced concepts of the framework.\n  - [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.\n- Node\n  - [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.\n  - [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.\n- Apple\n  - [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.\n\n### Courses\n\n- [CodeAcademy: Introduction to JS](https://www.codecademy.com/learn/introduction-to-javascript) — An interactive course introducing the basics of JavaScript.\n- [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.\n- [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.\n- [University of Helsinki: Full Stack Open](https://fullstackopen.com/en/) - Learn React, Redux, Node.js, MongoDB, GraphQL and TypeScript \n- [Youtube: Traversy Crash Course in Javascript](https://www.youtube.com/watch?v=hdI2bqOjy3c) — A popular crash course on JavaScript fundamentals by Traversy Media.\n- [Youtube: Javascript Under The Hood](https://www.youtube.com/playlist?list=PLillGF-Rfqbars4vKNtpcWVDUpVOVTlgB) — A video series exploring the inner workings of JavaScript.\n\n### Articles\n\n- [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.\n\n### Videos\n\n- [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.\n- [Closures Explained in 100 Seconds](https://www.youtube.com/watch?v=vKJpN5FAeF4) — A quick and concise video explaining JavaScript closures.\n\n## Docs \u0026 CheatSheets\n\n### Cheatsheets\n\n- [HTML Cheatsheets](https://websitesetup.org/html5-cheat-sheet/) — A handy reference for HTML5 elements and attributes.\n- [Emmet Cheatsheet](https://docs.emmet.io/cheat-sheet/) — A very handy reference to get started on Emmet which is an essential tool for writing HTML.\n\n### Official Documentations\n\n- [JavaScript(MDN)](https://developer.mozilla.org/en-US/docs/Web/JavaScript)\n- [React](https://react.dev/reference/react)\n- [React Native](https://reactnative.dev/docs/getting-started)\n- [Vue.js](https://vuejs.org/guide/introduction.html)\n- [Angular](https://angular.dev/overview)\n- [Node.js](https://nodejs.org/docs/latest/api/)\n- [Android](https://developer.android.com/develop)\n\n## Development Resources\n\n### Playgrounds\n\n- [Playcode](https://playcode.io/new) — A playground for learning/testing/experimenting in JS or TS, along with HTML5 and CSS, with extensive library support.\n- [JSFiddle](https://jsfiddle.net/) — An online IDE for testing and sharing HTML, CSS, and JavaScript code snippets.\n- [CodePen](https://codepen.io/) — A social development environment for front-end designers and developers, allowing you to build and deploy websites, showcase work.\n- [Regex101](https://regex101.com/) — A place to write and debug regular expressions with extensive and helpful feedback.\n\n## Communities\n\n- [dev.to](https://dev.to/) — A community platform for developers to share articles, tutorials, and discussions.\n- [r/Frontend](https://www.reddit.com/r/Frontend/) — A Reddit community focused on frontend development.\n- [r/learnjavascript](https://www.reddit.com/r/learnjavascript/) — A Reddit community for JavaScript learners to ask questions and share knowledge.\n- [r/javascript](https://www.reddit.com/r/javascript/) — A Reddit community for discussing all things JavaScript.\n\n## Open Source Contributions\n\n- [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.\n- **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.\n- **GitHub Repos inviting contributors** — Search on GitHub with label → `help-wanted` to find out the repos that are inviting contributors.\n\n**Some Awesome Projects**\n- [freecodecamp](https://github.com/freecodecamp) — FreeCodeCamp is a nonprofit organization offering people free coding education worldwide.\n- [Daily](https://github.com/dailydotdev/daily) — Daily is a tool for developers to stay updated with the latest tech news and trends.\n- [Storybook](https://github.com/storybookjs/storybook) — Storybook is a powerful open-source tool for developing UI components in isolation.\n- [CopilotKit](https://github.com/CopilotKit/CopilotKit) - CopilotKit is an advanced tool designed to enhance the development experience by integrating AI-powered coding assistance directly into your workflow.\n- [Shadcn UI](https://github.com/shadcn-ui/ui) - Shadcn UI is a UI component library designed to help developers build modern and responsive user interfaces with ease.\n- [Mermaid](https://github.com/mermaid-js/mermaid) - Mermaid is a JavaScript-based diagramming and charting tool that enables developers and technical writers to create complex diagrams using a simple, markdown-like syntax.\n- [docusaurus](https://github.com/facebook/docusaurus) - Docusaurus is an open-source tool developed by Facebook to help you easily build, deploy, and maintain documentation websites.\n\n## Legalities\n\n- [Choose a license](https://choosealicense.com/) — Explanations and comparisons of various licenses to help you find the right one to include with your code.\n","projects_url":"https://awesome.ecosyste.ms/api/v1/lists/requestly%2Fawesome-frontend-resources/projects"}