awesome-frontend-resources

KO | EN

gitlite — search

#javascript #react #ai #typescript #llm #android #machine-learning #deep-learning #linux #macos #cli #kubernetes #vue #security

awesome-frontend-resources

(★ 337)

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

파일 탐색기

최종 버전 다운로드 (.zip)

code-of-conduct.md
contributing.md
README.md

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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.
- [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.

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

**Some Awesome Projects**
- [freecodecamp](https://github.com/freecodecamp) — FreeCodeCamp is a nonprofit organization offering people free coding education worldwide.
- [Daily](https://github.com/dailydotdev/daily) — Daily is a tool for developers to stay updated with the latest tech news and trends.
- [Storybook](https://github.com/storybookjs/storybook) — Storybook is a powerful open-source tool for developing UI components in isolation.
- [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.
- [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.
- [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.
- [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.

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

awesome-frontend-resources

파일 탐색기

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

awesome-frontend-resources

파일 탐색기

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README