Web Development Resources
Tags: webdev, productivity, javascript, react
Published: 2020-11-06 09:49:55

---
title: Web Development Resources
published: true
description: More than 150+ development resources.
tags: #webdev #productivity #javascript #react
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/yircgjcc7wekbi8j9z08.png
---

![Web Development Resources Logo](https://dev-to-uploads.s3.amazonaws.com/i/yircgjcc7wekbi8j9z08.png)

___
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](https://github.com/iamismile/web-dev-resources) repo. To get all the resources, visit my [repo](https://github.com/iamismile/web-dev-resources).***

## 🌟 **Resources**

### 💻 DEVELOPER ROADMAPS

- [Frontend](https://roadmap.sh/frontend) - Frontend Development Roadmap.
- [Backend](https://roadmap.sh/backend) - Backend Development Roadmap.
- [React](https://roadmap.sh/react) - React Development Roadmap.

### 📚 DOCUMENTATIONS

- [MDN Web Docs](https://developer.mozilla.org/en-US/)
- [DevDocs](https://devdocs.io)

### 🎭 DESIGN TOOLS

- [Figma](https://www.figma.com) - Figma helps teams create, test, and ship better designs from start to finish.
- [Adobe XD](https://www.adobe.com/products/xd.html) - 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 WEB WORKS?

- [How the Internet Works Video](https://www.youtube.com/watch?v=x3c1ih2NJEg) - How does the Internet Works?
- [How the Internet Works Brief Videos](https://www.youtube.com/playlist?list=PLzdnOPI1iJNfMRZm5DDxco3UdsFegvuB7) - A brief explanations on, how does the Internet works?

### 🖼 HTML AND CSS

- [freeCodeCamp](https://www.freecodecamp.org/learn) - Free course to learn Web Development.
- [HTML Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) - HTML elements reference by MDN.
- [HTML Entity](https://css-tricks.com/snippets/html/glyphs/) - HTML Entity Reference by CSS-Tricks.
- [CSS3 Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference) - CSS reference by MDN.
- [CSS Reference](https://cssreference.io) - A free visual guide to CSS.
- [Flexbox Froggy](https://flexboxfroggy.com) - A game that helps you to learn CSS Flex.
- [CSS-TRICKS Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) - A Complete Guide to Flexbox.
- [Grid Garden](https://cssgridgarden.com) - A game for learning CSS Grid.
- [Learn CSS Grid](https://learncssgrid.com) - A comprehensive guide to help you understand and learn CSS Grid Layout, by Jonathan Suh.
- [Can I Use](https://caniuse.com) - Up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.
- [CSS Effects](https://emilkowalski.github.io/css-effects-snippets/) - CSS Animations.
- [Keyframes](https://keyframes.app) - Create basic or complex CSS @keyframe animations with a visual timeline editor.
- [Animista](https://animista.net) - Play with a collection of ready to use CSS animations.
- [BEM](https://9elements.com/bem-cheat-sheet) - BEM naming cheat sheet.

### 🖋 FONTS AND TYPOGRAPHY

- [Google Fonts](https://fonts.google.com) - The #1 resource for free and easy-to-use webfonts
- [Fonts Arena](https://fontsarena.com) - Free fonts, free alternatives to premium fonts, done-for-you-research articles
- [FontPair](https://fontpair.co) - Font Pair helps designers pair Google Fonts together. Beautiful Google Font combinations and pairs.

### 🌈 COLORS AND TOOLS

- [Coolors](https://coolors.co) - Generate or browse beautiful color combinations for your designs
- [0to255](https://www.0to255.com) - A color tool that makes it easy to lighten and darken colors
- [Colors and Fonts](https://www.colorsandfonts.com) - Find colors and typography combinations ready to copy-paste in one click
- [ColorSpace](https://mycolor.space) - Generate nice Color Palettes
- [CSS Gradient](https://cssgradient.io) - Free css gradient generator tool
- [uiGradients](uigradients.com) - A handpicked collection of beautiful color gradients for designers and developers

### 📷 IMAGE RESOURCES

- [Unsplash](https://unsplash.com) - Free images and photos.
- [Pexels](https://www.pexels.com) - Free stock photos.
- [Pixabay](https://pixabay.com) - Free image or video.
- [LottieFiles](https://lottiefiles.com) - LottieFiles is a collection of animations designed for Lottie - gone are the days of bugging your developer.
- [removebg](https://www.remove.bg) - Remove Image Background.
- [Remove Photo Data](removephotodata.com/) - Remove personal data from photos before sharing them on the internet.

### 🎨 ILLUSTRATIONS

- [unDraw](https://undraw.co/illustrations) - Browse to find the illustrations that fit your needs and click to download.
- [manypixels](https://www.manypixels.co/gallery/) - 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](https://www.freepik.com) - Free graphic resources.

### 💧 ICONS

- [Ionicons](https://ionicons.com) - Open-Sourced and MIT licensed icon pack
- [Font Awesome](https://fontawesome.com) - Vector icons and social logos
- [Material Icons](https://material.io/resources/icons/?style=baseline) - 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](https://icons8.com/icons) - Download free icons in PNG and SVG.
- [flaticon](https://www.flaticon.com) - Free vector icons in SVG, PSD, PNG, EPS format or as ICON FONT

### ⚙ GENERATORS

- [Lorem Ipsum](https://loremipsum.io) - Lorem Ipsum generator
- [RealFaviconGenerator](https://realfavicongenerator.net) - Favicon generator
- [Favicon Maker](https://formito.com/tools/favicon) - Free Favicon maker
- [Meta Tags](https://metatags.io) - Meta Tags generator, preview how your webpage will look on Google, Facebook, Twitter, and more!
- [Clippy](https://bennettfeely.com/clippy/) - CSS clip-path maker.

### 👓 ACCESSIBILITY

- [Accessibility Blog - Medium](https://uxdesign.cc/designing-for-accessibility-is-not-that-hard-c04cc4779d94) - Seven easy-to-implement guidelines to design a more accessible web.
- [Accessibility Blog - Dev](https://dev.to/erhannah/13-ways-to-level-up-your-site-s-accessibility-22c6) - 13 ways to level up your site's accessibility.
- [Accessibility Cheatsheet](https://moritzgiessmann.de/accessibility-cheatsheet) - Practical approaches to Universal Design for making your website/web app accessible to everyone.

### 📉 SITE ANALYZERS

- [web.dev](web.dev/measure) - See how well your website performs. Then, get tips to improve your user experience.
- [Lighthouse Metrics](lighthouse-metrics.com) - Lighthouse Metrics provides easy insights into your site's performance.

### 📄 TERMINALS FOR WINDOWS

- [Windows Terminal](https://www.microsoft.com/en-us/p/windows-terminal/9n0dx20hk701?activetab=pivot:overviewtab)
- [FluentTerminal](https://github.com/felixse/FluentTerminal)
- [Hyper](https://hyper.is)
- [Cmder](https://cmder.net//)

### 📝 ONLINE IDE, EDITOR

- [Repl.it](https://repl.it/)
- [CodeSandbox](https://codesandbox.io)
- [CodePen](https://codepen.io)
- [JS Bin](https://jsbin.com/)
- [JSFiddle](https://ide.goorm.io)

### ⚡ JAVASCRIPT

- [freeCodeCamp](https://www.freecodecamp.org/learn) - Best free resource to learn JavaScript interactively.
- [Codecademy](https://www.codecademy.com/learn/introduction-to-javascript) - Free course to learn JavaScript interactively.
- [JavaScript.info](https://javascript.info) - Modern JavaScript Tutorial.
- [Eloquent JavaScript](https://eloquentjavascript.net) - This is a book about JavaScript, programming, and the wonders of the digital. You can read it online here.
- [JavaScript30](https://javascript30.com) - 30 days vanilla JS coding challenge. Build 30 things in 30 days with 30 tutorials.
- [JavaScript Reference By MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference)
- [JavaScript Event Reference](https://developer.mozilla.org/en-US/docs/Web/Events)
- [DOM Manipulation Reference](http://youmightnotneedjquery.com)
- [JavaScript Design Patterns](https://addyosmani.com/resources/essentialjsdesignpatterns/book/)

### ⚡ NODEJS

- [Node.js Tutorial](https://www.youtube.com/playlist?list=PL4cUxeGkcC9jsz4LDYc6kv3ymONOKxwBU) - Node.js Crash Course Tutorial by Net Ninja.
- [nodebestpractices](https://github.com/goldbergyoni/nodebestpractices) - Huge list of best practices for building node apps. Important for big projects.
- [The Node Way](http://thenodeway.io) - 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](https://www.freecodecamp.org/news/express-js-security-tips/) - How You Can Save and Secure Your App.

### ⚡ PYTHON

- [Codecademy](https://www.codecademy.com/learn/learn-python) - Free course to learn Python interactively.
- [Programiz](https://www.programiz.com/python-programming) - Learn Python Programming.
- [Awesome Python](https://github.com/vinta/awesome-python) - A curated list of awesome Python frameworks, libraries, software, and resources.

### ⚡ REACT

- [React](https://reactjs.org) - Official site documentations, tutorial.
- [Codecademy](https://www.codecademy.com/learn/react-101) - Free React course of Codecademy.
- [freeCodeCamp](https://www.freecodecamp.org/learn) - Free web development resourse, where you can also learn react.
- [React Tutorial](https://www.youtube.com/watch?v=iZhV0bILFb0) - React Tutorial - Fundamentals, Hooks, Context API, React Router, Custom Hooks by Coding Addict.
- [React Beach Resort](https://www.youtube.com/watch?v=l0JbuMVXaTs) - React Beach Resort project by Coding Addict.

### 🎮 APIs

- [JSONPlaceholder](https://jsonplaceholder.typicode.com) - Free to use fake online REST API for testing and prototyping.
- [OpenWeather](https://openweathermap.org/guide) - Simple and fast and free weather API from OpenWeatherMap you have access to current weather data, hourly, 5- and 16-day forecasts.
- [SWAPI](https://swapi.dev) - The Star Wars API.
- [Quotes REST API](http://quotes.rest) - 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.

### 🛠 DEVELOPER TOOLS

- [Postman](https://www.postman.com) - Postman makes API development easy. Simplify each step of building an API and streamline collaboration so you can create better APIs—faster.
- [Insomnia](https://insomnia.rest) - Leading Open Source API Client, and Collaborative API Design Platform for GraphQL, and REST.

### 📖 ONLINE LEARNING RESOURCES

- [freeCodeCamp](https://www.w3schools.com) - Learn to code at home. Build projects. Earn certifications.
- [w3schools](https://www.w3schools.com) - The world's largest Web Developer site. Tutorials references, examples, exercises, certificates.
- [Codecademy](https://www.codecademy.com/) - Learn the technical skills you need for the job you want. As leaders in online education and learning to code.
- [Programiz](https://www.programiz.com) - 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](https://javascript.info) - The Modern JavaScript Tutorial.
- [Command Line Tutorial](https://dev.to/iamismile/command-line-tutorial-58km) - Basic UNIX commands tutorial.
- [Try Git](https://try.github.io) - An interactive series of challenges to learn about and experiment with Git.

### 📦 OTHERS

- [HTTP Status Codes](https://httpstatuses.com) - HTTP Status Code directory, with definitions, details and helpful code references.
- [Tiny Helpers](https://tiny-helpers.dev) - A collection of free single-purpose online tools for web developers.
- [Free for Developers](https://free-for.dev#/) - This is a list of software and other offerings that have free tiers for developers.


---
***This is a shortlist of my Github [Web Dev Resources](https://github.com/iamismile/web-dev-resources) repo. To get all the resources, visit my [repo](https://github.com/iamismile/web-dev-resources).***
---