Awesome Frontend Resources

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
   • Development, Languages, Frameworks,
   • Mobile Dev, Engineering
2. Learning Resources
   • JavaScript, Type Script,
   • React, React Native, Angular, Vue, Node.js,
   • Android, iOS, Electron, Flutter,
   • Data Structure
3. Docs & CheatSheets
   • JavaScript, Type Script,
   • React, React Native, Angular, Vue, Node.js,
   • Android, iOS, Electron, Flutter
4. Development Resources
5. Communities
6. 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 — 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.
• IOS Developer Roadmap - A comprehensive roadmap covering all areas of IOS development. It covers patterns and techniques, app components, fundamentals, and so on.

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.
• Introduction to Algorithms, Fourth Edition (CLRS) — The book on algorithms. Gain a better theoretical understanding of the mathematical building blocks of the web.
• Pro Git 2nd Edition - The entire Pro Git book, written by Scott Chacon and Ben Straub and published by Apress, is available here.

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 — The official Angular tutorial for learning the basics and advanced concepts of the framework.
  • Youtube: Learn Angular A-Z: Complete Tutorial for Beginners — A video tutorial covering Angular from A to Z for beginners.
• Node
  • How to Get Started with NodeJS – a Handbook for Beginners — A beginner's handbook for getting started with Node.js, covering fundamental concepts and practical examples.
  • Official: Tutorial — The official Node.js tutorial for learning the basics and getting started with Node.js.
• Apple
  • Official Swift Tutorial — The official tutorial from Apple for learning Swift, covering basics to advanced concepts for developing iOS applications.

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.
• University of Helsinki: Full Stack Open - Learn React, Redux, Node.js, MongoDB, GraphQL and TypeScript
• 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

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

Official Documentations

• JavaScript(MDN)
• React
• React Native
• Vue.js
• Angular
• Node.js
• Android

Development Resources

Playgrounds

• Playcode — A playground for learning/testing/experimenting in JS or TS, along with HTML5 and CSS, with extensive library support.
• JSFiddle — An online IDE for testing and sharing HTML, CSS, and JavaScript code snippets.
• CodePen — A social development environment for front-end designers and developers, allowing you to build and deploy websites, showcase work.
• Regex101 — A place to write and debug regular expressions with extensive and helpful feedback.

Communities

• 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

• 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 — Explanations and comparisons of various licenses to help you find the right one to include with your code.