Web Development Resources

---

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

💻 DEVELOPER ROADMAPS

• Frontend - Frontend Development Roadmap.
• Backend - Backend Development Roadmap.
• React - React Development Roadmap.

📚 DOCUMENTATIONS

• MDN Web Docs
• DevDocs

🎭 DESIGN TOOLS

• 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 WEB WORKS?

• 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?

🖼 HTML AND CSS

• 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.

🖋 FONTS AND TYPOGRAPHY

• 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.

🌈 COLORS AND TOOLS

• 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

📷 IMAGE RESOURCES

• 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.

🎨 ILLUSTRATIONS

• 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.

💧 ICONS

• 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

⚙ GENERATORS

• 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

• 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.

📉 SITE ANALYZERS

• 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.

📄 TERMINALS FOR WINDOWS

• Windows Terminal
• FluentTerminal
• Hyper
• Cmder

📝 ONLINE IDE, EDITOR

• Repl.it
• CodeSandbox
• CodePen
• JS Bin
• JSFiddle

⚡ JAVASCRIPT

• 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

⚡ NODEJS

• 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.

⚡ PYTHON

• 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

• 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.

🎮 APIs

• 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.

🛠 DEVELOPER TOOLS

• 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.

📖 ONLINE LEARNING RESOURCES

• 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.

📦 OTHERS

• 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.

---

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

Comments

[ThemeSelection]

Awesome list indeed. 🤩
We have also made an opensource Bootstrap 5 Cheatsheet. It is an interactive list of Bootstrap 5 classes, variables, and mixins. 🎁 It will be great if you can add it to the list.🙂

[Ismile Hossain]

Thank you for sharing. 🙂
I'll add it to my github repo or you can contribute to it. (github.com/iamismile/web-dev-resou...)

[ThemeSelection]

Thank you very much for the positive response.🙂
In case you add it to the list, we are open to add any of your item/blog posts/product link or section in our popular ThemeSelection Blogs: Dev.To Themeselection

[Ismile Hossain]

Welcome🙂

[ThemeSelection]

Sure @ismile

I would love to contribute. 🎉 Will do that.

[ThemeSelection]

Sure @ismile

Will contribute 🎉

[veteranlogix11]

Thanks for your knowledge regarding web development its great content but if you want to learn Backend development then I think you should click this link to explain properly : veteranlogix.com/roadmap-of-back-e...

[Adnan Ashraf]

Thanks for ur efforts

[Ismile Hossain]

Welcome

[Nicolás Omar González Passerino]

Great work. Extensive and well organized.
Also, I love the "meta tags" page. That is a case of "i didn´t though about that, but now I need to use it".
Thanks for the work

[Ismile Hossain]

Welcome☺

[Olalani Oluwaseun]

Great list above and nice work to compile the notes together

[Ismile Hossain]

Thanks

[Shubham Poriya]

Very organised listings. Great work !!

[Ismile Hossain]

Thank you

[IQ Seviyesi]

Good job, thanks.

[Ismile Hossain]

Welcome☺

[Ismile Hossain]

Thanks for your resource.

[Thien Nguyen]

Thanks for your effort, great list. Would be great if you can also add iotools.cloud/ to the list when you get a chance. Cheers.

[Milos Djakovic]

mockaroo.com