Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/baspinarenes/awesome-frontend-resources
A list of awesome Frontend resources
https://github.com/baspinarenes/awesome-frontend-resources
List: awesome-frontend-resources
awesome awesome-list css html javascript react resources vue
Last synced: 3 months ago
JSON representation
A list of awesome Frontend resources
- Host: GitHub
- URL: https://github.com/baspinarenes/awesome-frontend-resources
- Owner: baspinarenes
- License: cc0-1.0
- Created: 2021-07-19T07:59:59.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-06-05T21:01:11.000Z (over 1 year ago)
- Last Synced: 2024-05-19T22:47:38.420Z (6 months ago)
- Topics: awesome, awesome-list, css, html, javascript, react, resources, vue
- Homepage:
- Size: 44.9 KB
- Stars: 33
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- ultimate-awesome - awesome-frontend-resources - A list of awesome Frontend resources. (Other Lists / PowerShell Lists)
README
# Awesome Frontend Resources [](https://github.com/sindresorhus/awesome)
A list of awesome Frontend resources.
# Contents
- [Awesome Frontend Resources](#awesome-frontend-resources)
- [General](#general)
- [Roadmaps](#general-roadmaps)
- [Books](#general-books)
- [Blogs](#general-blogs)
- [Tutorials](#general-tutorials)
- [Topic Tutorials](#general-topic-tutorials)
- [Git](#general-topic-git)
- [GraphQL](#general-topic-graphql)
- [Webpack](#general-topic-webpack)
- [Code Examples](#general-examples)
- [Cheatsheets & Awesomes & References](#general-cheatsheets-awesomes-refs)
- [HTML & CSS](#html-css)
- Roadmaps
- Books
- [Tutorials](#html-css-tutorials)
- [Topic Tutorials](#html-css-topic-tutorials)
- [Code Examples](#html-css-examples)
- [Cheatsheets & Awesomes & References](#html-css-cheatsheets-awesomes-refs)
- [Tools](#html-css-tools)
- [JavaScript](#js)
- Roadmaps
- [Books](#js-books)
- [Tutorials](#js-tutorials)
- [Topic Tutorials](#js-topic-tutorials)
- [Code Examples](#js-examples)
- [Cheatsheets & Awesomes & References](#js-cheatsheets-awesomes-refs)
- [Tools](#js-tools)
- [React](#react)
- [Roadmaps](#react-roadmaps)
- [Books](#react-books)
- [Tutorials](#react-tutorials)
- [Topic Tutorials](#react-topic-tutorials)
- [Code Examples](#react-examples)
- [Cheatsheets & Awesomes & References](#react-cheatsheets-awesomes-refs)
- Tools
- [Vue](#vue)
- Roadmaps
- Books
- [Tutorials](#vue-tutorials)
- [Topic Tutorials](#vue-topic-tutorials)
- Code Examples
- [Cheatsheets & Awesomes & References](#vue-cheatsheets-awesomes-refs)
- Tools
- [FullStack](#fullstack)
- [SQL (Structured Query Language)](#sql-tutorials)
- [Docker](#docker-tutorials)
_Resources for general topics (roadmaps, Frontend blogs, tutorials covering many Frontend technologies, etc)._
- Roadmaps
- [Frontend Developer Roadmap @FrontendMasters](https://frontendmasters.com/guides/learning-roadmap/) - A step-by-step learning guide. Much more detailed than Roadmap.sh as topics and recommended resources.
- [Frontend Developer Roadmap @Roadmap.sh](https://roadmap.sh/frontend) - A step-by-step learning guide. Provides learning resources on some topic.
- [Web Skills](https://andreasbm.github.io/web-skills/?compact) - Visual overview of useful skills to learn as a web developer.
- Books
- [Frontend Developer Handbook 2019](https://frontendmasters.com/books/front-end-handbook/2019/) - A summary of the state of the Frontend ecosystem in 2019 (learning path, tools, trends, salaries, community resources, etc). There are no 2020 and 2021 editions.
- Blogs
- [Dmitri Pavlutin](https://dmitripavlutin.com/) - A blog on JavaScript and React.
- Tutorials
- [Frontend Development Libraries @FreeCodeCamp](https://www.freecodecamp.org/learn/front-end-libraries/) - A course on some libraries used in Frontend. Content: Bootstrap, jQuery, SASS, React, Redux and 5 projects.
- Topic Tutorials
- Git
- [Git Immersion](https://gitimmersion.com) - A guided tour that walks through the fundamentals of Git, inspired by the premise that to know a thing is to do it.
- [Git Magic](http://www-cs-students.stanford.edu/~blynn/gitmagic/) - A guide to using Git from Standford university.
- [Atlassian Git Tutorials](https://www.atlassian.com/git/tutorials) - Learn the basics of Git through this comprehensive Git training.
- [Learn Git Branching](https://learngitbranching.js.org/) - The most visual and interactive way to learn Git on the web; you'll be challenged with exciting levels, given step-by-step demonstrations of powerful features, and maybe even have a bit of fun along the way.
- [Git from the Bottom Up](https://jwiegley.github.io/git-from-the-bottom-up/) - Help to advance your understanding of this powerful content tracking system, and reveal a bit of the simplicity underlying it — however dizzying its array of options may seem from the outside.
- [Oh Shit, Git!?!](https://ohshitgit.com/)
- [Think Like (a) Git](https://think-like-a-git.net/)
- GraphQL
- [The Fullstack Tutorial for GraphQL](https://www.howtographql.com) - The free and open-source tutorial to learn all around GraphQL to go from zero to production.
- Webpack \* [Webpack from Nothing](https://what-problem-does-it-solve.com/webpack/index.html) - A guide that explains how Webpack works by creating a project and configuring it manually.
- Code Examples
- [30 Seconds of Code](https://www.30secondsofcode.org/) - Useful ES6 snippets that you can understand in 30 seconds.
- [Frontend Daily](https://frontendaily.com/) - A list of challenges that you can code with HTML, CSS and JS for 27 days. Also, each project has a Sketch file.
- [Frontend Practice](https://www.frontendpractice.com/) - Samples of real website projects.
- [Little Snippets](https://www.littlesnippets.net/) - A list of snippet made with HTML, CSS and JS.
- [UI Design Daily](https://www.uidesigndaily.com/) - Samples of component and page design.
- Cheatsheets & Awesomes & References
- [Awesome Design Systems](https://github.com/alexpate/awesome-design-systems) - List of design systems, pattern libraries and everything inbetween.
- [Refactoring Guru](https://refactoring.guru/) - Makes it easy for you to discover everything you need to know about refactoring, design patterns, SOLID principles, and other smart programming topics.
_Resources for HTML and CSS._
- Tutorials
- [Dash Learn to Code](https://dash.generalassemb.ly/projects) - A guide that teaches the concepts over 5 mini projects.
- [Interneting Is Hard](https://www.internetingishard.com/html-and-css/) - A guide that teaches key concepts like flexible design and typography. The diagrams inside are wonderful.
- [Learn CSS Layout](https://learnlayout.com/) - A guide that teaches the CSS fundamentals that are used in any website's layout.
- [Shayhowe Learn to Code](https://learn.shayhowe.com) - A guide that teaches basic and advanced HTML & CSS concepts with use cases. The "Conference Page" is cumulatively coded throughout the guide.
- Topic Tutorials
- [CSS Grid](https://cssgrid.io/) - A video series consisting of 25 videos explaining CSS Grid.
- [CSS Diner](https://flukeout.github.io/) - Learn how to use CSS selectors and practice with this game.
- [Flexbox Defense](http://www.flexboxdefense.com/) - Learn how to use CSS Flexbox and practice with this game.
- [Flexbox Froggy](https://flexboxfroggy.com/#en) - Learn how to use CSS Flexbox and practice with this game.
- [Flexbox Zombies](https://mastery.games/flexboxzombies/) - Learn how to use CSS Flexbox and practice with this game. (sometimes it's free).
- [Grid Critters](https://gridcritters.com/) - Learn how to use CSS Grid and practice with this game. (sometimes it's free).
- [Grid Garden](https://cssgridgarden.com/#en) - Learn how to use CSS Grid and practice with this game.
- [Responsive Web Design @FreeCodeCamp](https://www.freecodecamp.org/learn/responsive-web-design/) - A guide that teaches flexible design concepts. There are 5 sample projects at the end of the guide.
- [What The Flexbox?!](https://flexbox.io/) - Video series consisting of 20 videos explaining CSS Flexbox.
- Code Examples
- [CSS Layout](https://csslayout.io/) - Popular layouts and patterns made with CSS.
- [HTML/CSS Project Ideas @Codementor](https://www.codementor.io/projects/html_css) - Projects for reinforcing theoretical knowledge with real-world projects.
- Cheatsheets & Awesomes & References
- [Grid by Example](https://gridbyexample.com/) - Everything you need to learn CSS Grid Layout.
- [HTML Cheatsheet @Digital](https://digital.com/tools/html-cheatsheet/) - A full list of all HTML elements, including descriptions, code examples and live previews.
- [htmlreference.io](https://htmlreference.io/) - A full list of elements, attributes and all information about them.
- Tools
- [0to255](https://www.0to255.com/) - A tool for finding light and dark tones of colors.
- [Can I use](https://caniuse.com/) - Interactive browser support tables.
- [CSS Layout Generator](https://layout.bradwoods.io/) - A tool for visually creating layouts.
_Resources for JavaScript._
- Books
- [JavaScript (ES2015+) Enlightenment](https://frontendmasters.com/books/javascript-enlightenment/) - A reference book that succinctly sheds light on ES5+ language changes.
- [You Don't Know JS Yet](https://github.com/getify/You-Dont-Know-JS#readme) - A series of books diving deep into the core mechanisms of the JavaScript language.
- Tutorials
- [30 Days of JavaScript](https://github.com/Asabeneh/30-Days-Of-JavaScript#readme) - A step-by-step guide to learn JavaScript programming language in 30 days.
- [Eloquent Javascript](https://eloquentjavascript.net/) - A modern introduction to programming with JavaScript.
- [Full Stack Javascript Path @TheOdinProject](https://www.theodinproject.com/paths/full-stack-javascript) - A guide for teaching Javascript with as much HTML, CSS and NodeJS as we need. There are many examples of projects in it.
- [How To Code in JavaScript @DigitalOcean](https://www.digitalocean.com/community/tutorial_series/how-to-code-in-javascript) - A JavaScript guide covering the basics.
- [Javascript Tutorial](https://www.javascripttutorial.net/) - A series of guide to help you learn the JavaScript programming language from scratch quickly and effectively.
- [JavaScript Algorithms and Data Structures @FreeCodeCamp](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/) - A guide for teaching topics such as Basics, ES6, Regex, Debugging, Object Oriented Programming and Functional Programming by coding.
- [The Modern JavaScript Tutorial](https://javascript.info/) - A guide from basics to advanced topics with simple but detailed explanations. Contains 2 parts which cover JavaScript as a programming language and working with a browser.
- Topic Tutorials
- [Functional Javascript Workshop](https://github.com/timoxley/functional-javascript-workshop#readme) - A functional javascript workshop.
- [Promise Cookbook](https://github.com/stevekane/promise-it-wont-hurt#readme) - a brief introduction to using Promises in JavaScript.
- [Promises Workshop](https://github.com/stevekane/promise-it-wont-hurt#readme) - A workshopper module that teaches you to use promises in JavaScript.
- Code Examples
- [30 Day Vanilla JS Coding Challenge](https://javascript30.com/) - Build 30 things in 30 days with 30 tutorials.
- [JavaScript Project Ideas @Codementor](https://www.codementor.io/projects/javascript) - Projects for reinforcing theoretical knowledge with real-world projects.
- [Vanilla JavaScript Projects](https://www.vanillajavascriptprojects.com/) - Simple projects made with vanilla JavaScript.
- Cheatsheets & Awesomes & References
- [33 Concepts Every JavaScript Developer Should Know](https://github.com/leonardomso/33-js-concepts) - 33 JavaScript concepts every developer should know.
- [JavaScript Interview Questions & Answers](https://github.com/sudheerj/javascript-interview-questions#readme) - List of JavaScript interview questions.
- [JavaScript Questions](https://github.com/lydiahallie/javascript-questions#readme) - A long list of advanced JavaScript questions and explanations.
- [Modern JavaScript Cheatsheet](https://mbeaudru.github.io/modern-js-cheatsheet/) - Cheatsheet for the JavaScript knowledge you will frequently encounter in modern projects.
- [Simplified JS Jargon](http://jargon.js.org/) - A glossary that explains the many trendy words that make up the JavaScript ecosystem in a few simple words.
- [JavaScript Design Patterns For Humans](https://github.com/sohamkamani/javascript-design-patterns-for-humans) - An ultra-simplified explanation of design patterns implemented in JavaScript.
- Tools
- [JavaScript Visualizer 9000](https://www.jsv9000.app/) - A tool for interactively visualizing JavaScript's event loop.
_Resources for React._
- Roadmaps
- [React Roadmap @Roadmap.sh ](https://roadmap.sh/react) - Guide for giving you an idea of the React ecosystem.
- [React Developer Roadmap](https://github.com/adam-golab/react-developer-roadmap) - Guide for React developers asking what to learn next.
- Books
- [DOM Enlightenment](http://domenlightenment.com/) - Exploring the relationship between JavaScript and the modern HTML DOM.
- [React Enlightenment](https://www.reactenlightenment.com/) - Learn React in the terse cookbook style found with previous Enlightenment titles (i.e., jQuery Enlightenment, JavaScript Enlightenment, DOM Enlightenment).
- Tutorials
- [30 Days Of React](https://github.com/Asabeneh/30-Days-Of-React#readme) - A step-by-step guide to learn React in 30 days.
- [How To Code in React.js @DigitalOcean](https://www.digitalocean.com/community/tutorial_series/how-to-code-in-react-js) - A React guide covering the basics.
- [Learn React @Scrimba](https://scrimba.com/learn/learnreact) - A course for React 101. You'll learn key React features while building two apps and practice what you learn through interactive coding challenges and exercises along the way.
- [React Courses @FrontendMasters](https://frontendmasters.com/learn/react/) - The best courses on React.
- [React Fundamentals @FrontArm](https://frontarm.com/courses/react-fundamentals/) - A course for teaching the basics of React with live exercises. Get practice building a real-world app with form validation, asynchronous storage, and proper structure.
- [React Official Docs](https://tr.reactjs.org/) - An overview of the React user guide and related resources.
- [React Tutorial](https://react-tutorial.app/) - Learn in an interactive environment. Understand how React works not just how to build with React.
- Topic Tutorials
- [React Hooks Official Docs](https://reactjs.org/docs/hooks-intro.html) - Official tutorial for React hooks.
- [useEffect Course](https://maxrozen.com/courses) - Learn the basics of useEffect in 3 days.
- [useHooks](https://usehooks.com/) - Easy to understand React Hook recipes.
- Code Examples
- [React by Example](https://reactbyexample.github.io/) - Code-oriented React tutorial for programmers.
- [React Project Ideas @Codementor](https://www.codementor.io/projects/reactjs) - Projects for reinforcing theoretical knowledge with real-world projects.
- [React Projects](https://react-projects.netlify.app/) - Simple projects made with React.
- Cheatsheets & Awesomes & References
- [Awesome React Design Systems](https://github.com/jbranchaud/awesome-react-design-systems#readme) - A collection of awesome React-based design systems.
- [React Cheatsheet @Devhints](https://devhints.io/react) - A wonderful cheatsheet for the React.
- [React Interview Questions & Answers](https://github.com/sudheerj/reactjs-interview-questions#readme) - List of React interview questions.
- [React Patterns](https://reactpatterns.com/) - Some React patterns, tips and tricks.
_Resources for Vue._
- Tutorials
- [Intro to Vue 2 @VueMastery](https://www.vuemastery.com/courses/intro-to-vue-js) - Learn the fundamentals of Vue 2 in this course that starts with the very basics.
- [Intro to Vue 3 @VueMastery](https://www.vuemastery.com/courses/intro-to-vue-3) - Learn the fundamentals of Vue 3 in this course that starts with the very basics.
- [Vue.js Fundamentals @Vueschool](https://vueschool.io/courses/vuejs-fundamentals) - Learn the core concepts of Vue 2 by developing a project.
- [Vue.js 3 Fundamentals @Vueschool](https://vueschool.io/courses/vuejs-3-fundamentals) - Learn the core concepts of Vue 3 by developing a project.
- Topic Tutorials
- [Vue.js Components Fundamentals @Vueschool](https://vueschool.io/courses/vuejs-components-fundamentals) - Learn Vue 2's Component concept by making two sample projects.
- [Vue.js 3 Components Fundamentals @Vueschool](https://vueschool.io/courses/vuejs-components-fundamentals) - Learn Vue 3's Component concept by making two sample projects.
- [Vue Router for Everyone @Vueschool](https://vueschool.io/courses/vue-router-for-everyone) - Learn how to build Single Page Applications in Vue 2 with the Vue Router.
- [Vue Router 4 for Everyone @Vueschool](https://vueschool.io/courses/vue-router-4-for-everyone) - Learn how to build Single Page Applications in Vue 3 with the Vue Router 4.
- [Vuex for Everyone @Vueschool](https://vueschool.io/courses?filter=free-courses) - Learn about the Vuex library that provides state management with a central store.
- Code Examples
- [Vue.js Workshops](https://public.vuejsworkshops.com/) - Build and deploy 3 Vue.js apps from your browser.
- Cheatsheets & Awesomes & References
- [Vue 2 Essentials Cheatsheet @VueMastery](https://www.vuemastery.com/pdf/Vue-Essentials-Cheat-Sheet.pdf) - Contains the explanation of the basic concepts of Vue 2.
- [Vue 2 Complete API Cheatsheet](https://marozed.com/vue-cheatsheet/) - Contains shortcut links to concepts from the Vue 2 document.
- [Vue 3 Cheatsheet for Developers](https://learnvue.co/wp-content/uploads/2021/01/A-VueJS-Cheatsheet-for-Developers-__-By-LearnVue.co_.pdf) - Contains the explanation of concepts of Vue 3.
- [Vue 3 Composition API Cheatsheet @VueMastery](https://www.vuemastery.com/pdf/Vue-3-Cheat-Sheet.pdf) - Contains the explanation of the Composition API features.
- [Vue Patterns](https://learn-vuejs.github.io/vue-patterns/) - Useful Vue patterns, techniques, tips and tricks and curated helpful links.
_Resources for Fullstack._
- SQL Tutorials
- [SQLBolt](https://sqlbolt.com/) - A series of interactive lessons and exercises designed to help you quickly learn SQL right in your browser.
- Docker
- [Docker Labs @collabnix](https://github.com/collabnix/dockerlabs) - Docker labs for different levels.