This is a complete web development resource you need to build your next project. More than 150+ resources for your web development.

This is a shortlist of my Github Web Dev Resources repo. To get all the resources, visit my repo.

🌟 Resources

Figma - Figma helps teams create, test, and ship better designs from start to finish.
Adobe XD - Share your story with designs that look and feel like the real thing. Wireframe, animate, prototype, collaborate, and more — it’s all right here, all in one place.

How the Internet Works Video - How does the Internet Works?
How the Internet Works Brief Videos - A brief explanations on, how does the Internet works?

freeCodeCamp - Free course to learn Web Development.
HTML Elements - HTML elements reference by MDN.
HTML Entity - HTML Entity Reference by CSS-Tricks.
CSS3 Properties - CSS reference by MDN.
CSS Reference - A free visual guide to CSS.
Flexbox Froggy - A game that helps you to learn CSS Flex.
CSS-TRICKS Flexbox - A Complete Guide to Flexbox.
Grid Garden - A game for learning CSS Grid.
Learn CSS Grid - A comprehensive guide to help you understand and learn CSS Grid Layout, by Jonathan Suh.
Can I Use - Up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.
CSS Effects - CSS Animations.
Keyframes - Create basic or complex CSS @keyframe animations with a visual timeline editor.
Animista - Play with a collection of ready to use CSS animations.
BEM - BEM naming cheat sheet.

Google Fonts - The #1 resource for free and easy-to-use webfonts
Fonts Arena - Free fonts, free alternatives to premium fonts, done-for-you-research articles
FontPair - Font Pair helps designers pair Google Fonts together. Beautiful Google Font combinations and pairs.

Coolors - Generate or browse beautiful color combinations for your designs
0to255 - A color tool that makes it easy to lighten and darken colors
Colors and Fonts - Find colors and typography combinations ready to copy-paste in one click
ColorSpace - Generate nice Color Palettes
CSS Gradient - Free css gradient generator tool
uiGradients - A handpicked collection of beautiful color gradients for designers and developers

Unsplash - Free images and photos.
Pexels - Free stock photos.
Pixabay - Free image or video.
LottieFiles - LottieFiles is a collection of animations designed for Lottie - gone are the days of bugging your developer.
removebg - Remove Image Background.
Remove Photo Data - Remove personal data from photos before sharing them on the internet.

unDraw - Browse to find the illustrations that fit your needs and click to download.
manypixels - Free illustrations to power up your projects. Use them in a commercial or non-commercial way for your landing pages, blog posts, email newsletters, social media graphics, and more.
freepik - Free graphic resources.

Ionicons - Open-Sourced and MIT licensed icon pack
Font Awesome - Vector icons and social logos
Material Icons - Material icons are delightful, beautifully crafted symbols for common actions and items. Download on desktop to use them in your digital products for Android, iOS, and web.
icons8 - Download free icons in PNG and SVG.
flaticon - Free vector icons in SVG, PSD, PNG, EPS format or as ICON FONT

Lorem Ipsum - Lorem Ipsum generator
RealFaviconGenerator - Favicon generator
Favicon Maker - Free Favicon maker
Meta Tags - Meta Tags generator, preview how your webpage will look on Google, Facebook, Twitter, and more!
Clippy - CSS clip-path maker.

Accessibility Blog - Medium - Seven easy-to-implement guidelines to design a more accessible web.
Accessibility Blog - Dev - 13 ways to level up your site's accessibility.
Accessibility Cheatsheet - Practical approaches to Universal Design for making your website/web app accessible to everyone.

web.dev - See how well your website performs. Then, get tips to improve your user experience.
Lighthouse Metrics - Lighthouse Metrics provides easy insights into your site's performance.

freeCodeCamp - Best free resource to learn JavaScript interactively.
Codecademy - Free course to learn JavaScript interactively.
JavaScript.info - Modern JavaScript Tutorial.
Eloquent JavaScript - This is a book about JavaScript, programming, and the wonders of the digital. You can read it online here.
JavaScript30 - 30 days vanilla JS coding challenge. Build 30 things in 30 days with 30 tutorials.
JavaScript Reference By MDN
JavaScript Event Reference
DOM Manipulation Reference
JavaScript Design Patterns

Node.js Tutorial - Node.js Crash Course Tutorial by Net Ninja.
nodebestpractices - Huge list of best practices for building node apps. Important for big projects.
The Node Way - An entire philosophy of Node.js best practices a0nd guiding principles exists for writing maintainable modules, scalable applications, and code that is actually pleasant to read.
Express.js Security Tips - How You Can Save and Secure Your App.

Codecademy - Free course to learn Python interactively.
Programiz - Learn Python Programming.
Awesome Python - A curated list of awesome Python frameworks, libraries, software, and resources.

React - Official site documentations, tutorial.
Codecademy - Free React course of Codecademy.
freeCodeCamp - Free web development resourse, where you can also learn react.
React Tutorial - React Tutorial - Fundamentals, Hooks, Context API, React Router, Custom Hooks by Coding Addict.
React Beach Resort - React Beach Resort project by Coding Addict.

JSONPlaceholder - Free to use fake online REST API for testing and prototyping.
OpenWeather - Simple and fast and free weather API from OpenWeatherMap you have access to current weather data, hourly, 5- and 16-day forecasts.
SWAPI - The Star Wars API.
Quotes REST API - They Said So has more than 1 million+ quotes in the database, the largest such database in the world. And Quotes API gives an easy way to access the data.

Postman - Postman makes API development easy. Simplify each step of building an API and streamline collaboration so you can create better APIs—faster.
Insomnia - Leading Open Source API Client, and Collaborative API Design Platform for GraphQL, and REST.

freeCodeCamp - Learn to code at home. Build projects. Earn certifications.
w3schools - The world's largest Web Developer site. Tutorials references, examples, exercises, certificates.
Codecademy - Learn the technical skills you need for the job you want. As leaders in online education and learning to code.
Programiz - Learn to code in Python, C/C++, Java, and other popular programming languages with our easy to follow tutorials, examples, online compiler, and references.
JavaScript Info - The Modern JavaScript Tutorial.
Command Line Tutorial - Basic UNIX commands tutorial.
Try Git - An interactive series of challenges to learn about and experiment with Git.

HTTP Status Codes - HTTP Status Code directory, with definitions, details and helpful code references.
Tiny Helpers - A collection of free single-purpose online tools for web developers.
Free for Developers - This is a list of software and other offerings that have free tiers for developers.

Originally published here.