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.
Oldest comments (19)
Good job, thanks.
Welcome☺
Great list above and nice work to compile the notes together
Thanks
Thanks for ur efforts
Welcome
Thanks for your resource.
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☺
mockaroo.com
Very organised listings. Great work !!
Thank you
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
I would love to contribute. 🎉 Will do that.
Sure @ismile
Will contribute 🎉
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...