Awesome Frontend Resources 
A list of awesome Frontend resources. Inspired by awesome-python.
Contents
- Awesome Frontend Resources
- General
- HTML & CSS
- JavaScript
- React
- Vue
- Roadmaps
- Books
- Tutorials
- Topic Tutorials
- Code Examples
- Cheatsheets & Awesomes & References
- Tools
- Contributing
General
Resources for general topics (roadmaps, Frontend blogs, tutorials covering many Frontend technologies, etc).
- Roadmaps
- Frontend Developer Roadmap @FrontendMasters - A step-by-step learning guide. Much more detailed than Roadmap.sh as topics and recommended resources.
- Frontend Developer Roadmap @Roadmap.sh - A step-by-step learning guide. Provides learning resources on some topic.
- Web Skills - Visual overview of useful skills to learn as a web developer.
- Books
- Frontend Developer 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 - A blog on JavaScript and React.
- Tutorials
- Frontend Development Libraries @FreeCodeCamp - A course on some libraries used in Frontend. Content: Bootstrap, jQuery, SASS, React, Redux and 5 projects.
- Topic Tutorials
- Git
- Git Immersion - A guided tour that walks through the fundamentals of Git, inspired by the premise that to know a thing is to do it.
- GraphQL
- The Fullstack Tutorial for GraphQL - The free and open-source tutorial to learn all around GraphQL to go from zero to production.
- Webpack
- Webpack from Nothing - A guide that explains how Webpack works by creating a project and configuring it manually.
- Git
- Code Examples
- 30 Seconds of Code - Useful ES6 snippets that you can understand in 30 seconds.
- Frontend Daily - 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 - Samples of real website projects.
- Little Snippets - A list of snippet made with HTML, CSS and JS.
- UI Design Daily - Samples of component and page design.
- Cheatsheets & Awesomes & References
- Awesome Design Systems - List of design systems, pattern libraries and everything inbetween.
- 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.
HTML & CSS
Resources for HTML and CSS.
- Tutorials
- Dash Learn to Code - A guide that teaches the concepts over 5 mini projects.
- Interneting Is Hard - A guide that teaches key concepts like flexible design and typography. The diagrams inside are wonderful.
- Learn CSS Layout - A guide that teaches the CSS fundamentals that are used in any website's layout.
- Shayhowe Learn to Code - 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 - A video series consisting of 25 videos explaining CSS Grid.
- CSS Diner - Learn how to use CSS selectors and practice with this game.
- Flexbox Defense - Learn how to use CSS Flexbox and practice with this game.
- Flexbox Froggy - Learn how to use CSS Flexbox and practice with this game.
- Flexbox Zombies - Learn how to use CSS Flexbox and practice with this game. (sometimes it's free).
- Grid Critters - Learn how to use CSS Grid and practice with this game. (sometimes it's free).
- Grid Garden - Learn how to use CSS Grid and practice with this game.
- Responsive Web Design @FreeCodeCamp - A guide that teaches flexible design concepts. There are 5 sample projects at the end of the guide.
- What The Flexbox?! - Video series consisting of 20 videos explaining CSS Flexbox.
- Code Examples
- CSS Layout - Popular layouts and patterns made with CSS.
- HTML/CSS Project Ideas @Codementor - Projects for reinforcing theoretical knowledge with real-world projects.
- Cheatsheets & Awesomes & References
- Grid by Example - Everything you need to learn CSS Grid Layout.
- HTML Cheatsheet @Digital - A full list of all HTML elements, including descriptions, code examples and live previews.
- htmlreference.io - A full list of elements, attributes and all information about them.
- Tools
- 0to255 - A tool for finding light and dark tones of colors.
- Can I use - Interactive browser support tables.
- CSS Layout Generator - A tool for visually creating layouts.
JavaScript
Resources for JavaScript.
- Books
- JavaScript (ES2015+) Enlightenment - A reference book that succinctly sheds light on ES5+ language changes.
- You Don't Know JS Yet - A series of books diving deep into the core mechanisms of the JavaScript language.
- Tutorials
- 30 Days of JavaScript - A step-by-step guide to learn JavaScript programming language in 30 days.
- Eloquent Javascript - A modern introduction to programming with JavaScript.
- Full Stack Javascript Path @TheOdinProject - 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 - A JavaScript guide covering the basics.
- Javascript Tutorial - A series of guide to help you learn the JavaScript programming language from scratch quickly and effectively.
- JavaScript Algorithms and Data Structures @FreeCodeCamp - A guide for teaching topics such as Basics, ES6, Regex, Debugging, Object Oriented Programming and Functional Programming by coding.
- The Modern JavaScript Tutorial - 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 - A functional javascript workshop.
- Promise Cookbook - a brief introduction to using Promises in JavaScript.
- Promises Workshop - A workshopper module that teaches you to use promises in JavaScript.
- Code Examples
- 30 Day Vanilla JS Coding Challenge - Build 30 things in 30 days with 30 tutorials.
- JavaScript Project Ideas @Codementor - Projects for reinforcing theoretical knowledge with real-world projects.
- Vanilla JavaScript Projects - Simple projects made with vanilla JavaScript.
- Cheatsheets & Awesomes & References
- 33 Concepts Every JavaScript Developer Should Know - 33 JavaScript concepts every developer should know.
- JavaScript Interview Questions & Answers - List of JavaScript interview questions.
- JavaScript Questions - A long list of advanced JavaScript questions and explanations.
- Modern JavaScript Cheatsheet - Cheatsheet for the JavaScript knowledge you will frequently encounter in modern projects.
- Simplified JS Jargon - A glossary that explains the many trendy words that make up the JavaScript ecosystem in a few simple words.
- JavaScript Design Patterns For Humans - An ultra-simplified explanation of design patterns implemented in JavaScript.
- Tools
- JavaScript Visualizer 9000 - A tool for interactively visualizing JavaScript's event loop.
React
Resources for React.
- Roadmaps
- React Roadmap @Roadmap.sh - Guide for giving you an idea of the React ecosystem.
- React Developer Roadmap - Guide for React developers asking what to learn next.
- Books
- DOM Enlightenment - Exploring the relationship between JavaScript and the modern HTML DOM.
- React Enlightenment - 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 - A step-by-step guide to learn React in 30 days.
- How To Code in React.js @DigitalOcean - A React guide covering the basics.
- Learn React @Scrimba - 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 - The best courses on React.
- React Fundamentals @FrontArm - 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 - An overview of the React user guide and related resources.
- React Tutorial - Learn in an interactive environment. Understand how React works not just how to build with React.
- Topic Tutorials
- React Hooks Official Docs - Official tutorial for React hooks.
- useEffect Course - Learn the basics of useEffect in 3 days.
- useHooks - Easy to understand React Hook recipes.
- Code Examples
- React by Example - Code-oriented React tutorial for programmers.
- React Project Ideas @Codementor - Projects for reinforcing theoretical knowledge with real-world projects.
- React Projects - Simple projects made with React.
- Cheatsheets & Awesomes & References
- Awesome React Design Systems - A collection of awesome React-based design systems.
- React Cheatsheet @Devhints - A wonderful cheatsheet for the React.
- React Interview Questions & Answers - List of React interview questions.
- React Patterns - Some React patterns, tips and tricks.
Vue
Resources for Vue.
- Tutorials
- Intro to Vue 2 @VueMastery - Learn the fundamentals of Vue 2 in this course that starts with the very basics.
- Intro to Vue 3 @VueMastery - Learn the fundamentals of Vue 3 in this course that starts with the very basics.
- Vue.js Fundamentals @Vueschool - Learn the core concepts of Vue 2 by developing a project.
- Vue.js 3 Fundamentals @Vueschool - Learn the core concepts of Vue 3 by developing a project.
- Topic Tutorials
- Vue.js Components Fundamentals @Vueschool - Learn Vue 2's Component concept by making two sample projects.
- Vue.js 3 Components Fundamentals @Vueschool - Learn Vue 3's Component concept by making two sample projects.
- Vue Router for Everyone @Vueschool - Learn how to build Single Page Applications in Vue 2 with the Vue Router.
- Vue Router 4 for Everyone @Vueschool - Learn how to build Single Page Applications in Vue 3 with the Vue Router 4.
- Vuex for Everyone @Vueschool - Learn about the Vuex library that provides state management with a central store.
- Code Examples
- Vue.js Workshops - Build and deploy 3 Vue.js apps from your browser.
- Cheatsheets & Awesomes & References
- Vue 2 Essentials Cheatsheet @VueMastery - Contains the explanation of the basic concepts of Vue 2.
- Vue 2 Complete API Cheatsheet - Contains shortcut links to concepts from the Vue 2 document.
- Vue 3 Cheatsheet for Developers - Contains the explanation of concepts of Vue 3.
- Vue 3 Composition API Cheatsheet @VueMastery - Contains the explanation of the Composition API features.
- Vue Patterns - Useful Vue patterns, techniques, tips and tricks and curated helpful links.
Contributing
I'm listing best sources I've come across. But there may be unknown treasures. Please feel free to forward it to me. Take a look at the contribution guidelines before creating a PR.