A list of awesome Frontend resources.
- Awesome Frontend Resources
- General
- HTML & CSS
- JavaScript
- React
- Vue
- Roadmaps
- Books
- Tutorials
- Topic Tutorials
- Code Examples
- Cheatsheets & Awesomes & References
- Tools
- FullStack
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.
- Git Magic - A guide to using Git from Standford university.
- Atlassian Git Tutorials - Learn the basics of Git through this comprehensive Git training.
- Learn Git Branching - 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 - 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!?!
- Think Like (a) Git
- 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.
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.
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.
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.
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.
Resources for Fullstack.
- SQL Tutorials
- SQLBolt - A series of interactive lessons and exercises designed to help you quickly learn SQL right in your browser.
- Docker
- Docker Labs @collabnix - Docker labs for different levels.