awesome-frontend-resources
github.com/baspinarenes/awesome-frontend-resources ↗A list of awesome Frontend resources
Use this list with your AI agent
Add the Context Awesome MCP server to Claude, Cursor, or any MCP client, then ask:
"Show me html & css resources from awesome-frontend-resources"
Installation instructions →What's inside
HTML & CSS
- 0to255
A tool for finding light and dark tones of colors.
- Can I use
Interactive browser support tables.
- CSS Diner
Learn how to use CSS selectors and practice with this game.
- CSS Grid
A video series consisting of 25 videos explaining CSS Grid.
- CSS Layout
Popular layouts and patterns made with CSS.
- CSS Layout Generator
A tool for visually creating layouts.
JavaScript
- 30 Days of JavaScript
A step-by-step guide to learn JavaScript programming language in 30 days.
- 30 Day Vanilla JS Coding Challenge
Build 30 things in 30 days with 30 tutorials.
- 33 Concepts Every JavaScript Developer Should Know
33 JavaScript concepts every developer should know.
- 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.
- Functional Javascript Workshop
A functional javascript workshop.
React
- 30 Days Of React
A step-by-step guide to learn React in 30 days.
- Awesome React Design Systems
A collection of awesome React-based design systems.
- DOM Enlightenment
Exploring the relationship between JavaScript and the modern HTML DOM.
- 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 by Example
Code-oriented React tutorial for programmers.
General
- 30 Seconds of Code
Useful ES6 snippets that you can understand in 30 seconds.
- Atlassian Git Tutorials
Learn the basics of Git through this comprehensive Git training.
- Awesome Design Systems
List of design systems, pattern libraries and everything inbetween.
- Dmitri Pavlutin
A blog on JavaScript and React.
- 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 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.
Fullstack
- Docker Labs @collabnix
Docker labs for different levels.
- SQLBolt
A series of interactive lessons and exercises designed to help you quickly learn SQL right in your browser.
Vue
- 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 2 Complete API Cheatsheet
Contains shortcut links to concepts from the Vue 2 document.
- Vue 2 Essentials Cheatsheet @VueMastery
Contains the explanation of the basic concepts of Vue 2.
- 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.
Showing a sample of 101 resources. View the full list on GitHub →