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
🎭 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
📝 ONLINE IDE, EDITOR
⚡ 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.
Top comments (20)
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.🙂
Thank you for sharing. 🙂
I'll add it to my github repo or you can contribute to it. (github.com/iamismile/web-dev-resou...)
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
Welcome🙂
Sure @ismile
Will contribute 🎉
Sure @ismile
I would love to contribute. 🎉 Will do that.
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...
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
Welcome☺
Thanks for ur efforts
Welcome
Thanks for your resource.
Very organised listings. Great work !!
Thank you
Great list above and nice work to compile the notes together
Thanks
Good job, thanks.
Welcome☺
mockaroo.com
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.