As you know, learning and upgrading skills are constant needs and desires for software developers to stay relevant in the industry. However, finding new resources is not an easy task when the demand for delivering features takes up all the time.

I have started curating a list of free Frontend Resources helpful for Frontend Developers at any level in the form of a GitHub repo. It consists of Roadmaps, Tutorials, Frameworks, and Documentations. I am also planning to add Interview Resources, Books, Tools, Extensions for Code Editors and Browsers, Best Practices, and Design Patterns. All to help myself and fellow developers stay up-to-date with ever-evolving technology.

GitHub Repo → https://github.com/requestly/awesome-frontend-resources/

---

Awesome Frontend Resources

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 — A short roadmap for learning the basics before starting a frontend development role.

• Frontend Roadmap — A comprehensive roadmap covering all areas of frontend development, guiding you from beginner to expert level.

• Full Stack Roadmap — Covers a wide range of technologies for both frontend and backend development, essential for full-stack development.

LANGUAGES

• JavaScript Roadmap — A comprehensive JavaScript roadmap starting from the basics and covering advanced topics.

• TypeScript Roadmap — An extensive TypeScript roadmap beginning with the fundamentals and progressing to advanced concepts.

FRAMEWORKS

• React Roadmap — A thorough React roadmap starting from the CLI and routers to testing and error boundaries, covering all essential concepts.

• React Native Roadmap — A detailed guide for mastering React Native, from basics to advanced techniques in mobile app development.

• Vue Roadmap — A comprehensive roadmap for learning Vue.js, covering fundamental to advanced topics for building dynamic user interfaces.

• Angular Roadmap — An extensive Angular roadmap guiding you through the framework's core features, modules, and advanced concepts.

• Node.js Roadmap — A complete roadmap for Node.js, encompassing server-side development, APIs, and advanced backend techniques.

MOBILE DEVELOPMENT

• Android Roadmap — A step-by-step guide for Android development, covering all essential aspects from basic setup to advanced features.

• iOS Roadmap — A comprehensive roadmap for iOS development, including Swift programming, UI design, and advanced iOS features.

• Flutter Roadmap — An in-depth guide for Flutter development, from initial setup to building and deploying cross-platform mobile apps.

ENGINEERING

• Software Design and Architecture Roadmap — A detailed guide for understanding and implementing software design principles and architectural patterns.

• Data Structures Roadmap — A thorough roadmap for mastering data structures and algorithms, essential for efficient problem-solving in software development.

• Code Review Roadmap — 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 — A comprehensive series diving deep into JavaScript concepts and mechanics.

• Eloquent Javascript — A modern introduction to JavaScript, covering the language's core features and best practices.

• Learn Javascript: Beginer Edition — A beginner-friendly guide to learning JavaScript from the ground up.

Online Library

• Open Library — A vast digital library offering free access to millions of books, including many on programming and JavaScript.

Tutorials

• JavaScript

  • Javascript.info — A detailed and interactive JavaScript tutorial covering basic to advanced topics.

  • MDN: Mozilla Developer Network — Comprehensive documentation and tutorials for JavaScript and web development.

  • JavaScrip Design Patterns — A resource for learning design patterns in JavaScript for writing clean and efficient code.

  • Professor Frisby's Mostly Adequate Guide to Functional Programming — An accessible guide to functional programming concepts in JavaScript.

• React

  • Youtube: React Tutorial for Beginners — A beginner-friendly video tutorial introducing the fundamentals of React.

• React Native

  • Official: Tutorial cum Doc — The official React Native documentation and tutorial for getting started.

  • Youtube: React Native Tutorial for Beginners by Codevolution — A beginner's guide to learning React Native, covering the basics of building mobile apps.

  • Youtube: React Native Course for Beginners by JavaScript Mastry — A comprehensive course for beginners to learn React Native.

• Vue

  • Official: Tutorial — The official Vue.js tutorial for learning the basics and advanced concepts of the framework.

  • Youtube: Vue 3 with TypeScript Jump Start — A beginner's guide to learning Vue 3 with TypeScript, providing a solid foundation in both technologies.

• Angular

  • Official: Tutorial

  • Youtube: Learn Angular A-Z: Complete Tutorial for Beginners

• Node

  • How to Get Started with NodeJS – a Handbook for Beginners

  • Official: Tutorial

• Apple

  • Official Swift Tutorial

Courses

• CodeAcademy: Introduction to JS — An interactive course introducing the basics of JavaScript.

• freeCodeCamp: JavaScript Algorithms and Data Structures — A free course covering JavaScript fundamentals, algorithms, and data structures.

• TheOdinProject: JavaScript Course — A comprehensive course for learning JavaScript in the context of full-stack development.

• Youtube: Traversy Crash Course in Javascript — A popular crash course on JavaScript fundamentals by Traversy Media.

• Youtube: Javascript Under The Hood — A video series exploring the inner workings of JavaScript.

Articles

• TypeScript vs JavaScript — An article explaining the relationship and differences between TypeScript and JavaScript.

Videos

• What the heck is the event loop anyway? — A clear and engaging explanation of the JavaScript event loop.

• Closures Explained in 100 Seconds — A quick and concise video explaining JavaScript closures.

Docs & CheatSheets

Cheatsheets

Cheatsheets act as quick references for you, boosting memory and saving time by summarizing key concepts.

• HTML Cheatsheets — A handy reference for HTML5 elements and attributes.

Official Documentations

• JavaScript(MDN)

• React

• React Native

• Vue.js

• Angular

• Node.js

• Android

Communities

Communities helps you connect with fellow developers. You can get benefits like shared knowledge, support, and career opportunities.

• dev.to — A community platform for developers to share articles, tutorials, and discussions.

• r/Frontend — A Reddit community focused on frontend development.

• r/learnjavascript — A Reddit community for JavaScript learners to ask questions and share knowledge.

• r/javascript — A Reddit community for discussing all things JavaScript.

Open Source Contributions

Open source are good way to start and practice your coding skills. It helps you learn from the best and show off your coding skills, that greatly help you in career.

• 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.

Please let me know if you find these helpful.

---

For further updates star us on Github → https://github.com/requestly/awesome-frontend-resources/

---

I also want to invite your contributions, if you have an awesome resource that you think is valuable for other developers, please comment or commit, welcoming both.

Thanks.