Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/im-vishu/webdev-toolbox

A complete hub of web development resources with 150+ links to docs, tools, tutorials, and communities.
https://github.com/im-vishu/webdev-toolbox

css databases developer-tools github html nodejs react resources webdevelopment

Last synced: 3 months ago
JSON representation

A complete hub of web development resources with 150+ links to docs, tools, tutorials, and communities.

Awesome Lists containing this project

README 

          


  


    WebDev Toolbox

  


  

  
The Complete Web Development Resource Hub


  


    Created & Maintained by Vishant Chaudhary

    

    Connect with me on 

      LinkedIn, 

      Twitter.

    

  





---



This repository is your **all-in-one collection of web development resources**.  

It brings together more than **150 carefully curated links** covering frontend, backend, tools, and communities — everything you need to learn, build, and grow as a developer.  



---



This is a complete web development resource you need to build your next project. More than 150+ resources are included here. Feel free to explore and use in your projects.



---



## Contents



- [Developer Roadmaps](#-developer-roadmaps)

- [Documentations and Cheatsheets](#-documentations-and-cheatsheets)

- [Design Tools](#-design-tools)

- [How the WEB works?](#-how-the-web-works)

- [HTML and CSS](#-html-and-css)

- [Front End Challenges or Skills](#-front-end-challenges-or-skills)

- [Fonts and Typography](#-fonts-and-typography)

- [Colors and Tools](#-colors-and-tools)

- [Image Resources](#-image-resources)

- [Illustrations](#-illustrations)

- [Icons](#-icons)

- [Generators](#-generators)

- [Accessibility](#-accessibility)

- [Site Analyzers](#-site-analyzers)

- [Terminals for Windows](#-terminals-for-windows)

- [Online IDE, Editor](#-online-ide-editor)

- [JavaScript](#-javascript)

- [Node.js](#-nodejs)

- [Python](#-python)

- [React](#-react)

- [APIs](#-apis)

- [Developer Tools](#-developer-tools)

- [Online Learning Resources](#-online-learning-resources)

- [Resume](#-resume)

- [Others](#-others)

- [Developer Blog Sites](#-developer-blog-sites)

- [YouTube Channels](#-youtube-channels)



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

- [Android](https://roadmap.sh/android) - Android Development Roadmap.

- [DevOps](https://roadmap.sh/devops) - DevOps Roadmap.



### 📚 DOCUMENTATIONS AND CHEATSHEETS



- [MDN Web Docs](https://developer.mozilla.org/en-US/) - The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.

- [DevDocs](https://devdocs.io) - Fast, offline, and free documentation browser for developers. Search 100+ docs in one web app.

- [DEVHINTS](https://devhints.io) - A modest collection of cheatsheets.

- [FLEX - Malven](https://flexbox.malven.co) - A visual cheatsheet for CSS flex layout.

- [GRID - Malven](https://grid.malven.co) - A visual cheatsheet for CSS grid layout.

- [CSS Grid Cheat Sheet](https://alialaa.github.io/css-grid-cheat-sheet/) - Your ultimate CSS grid visual guide.

- [OverAPI](https://overapi.com) - Collection Of Cheat Sheets.

- [Awesome Cheatsheets](https://lecoupa.github.io/awesome-cheatsheets/) - Awesome cheatsheets for popular programming languages, frameworks and development tools.

- [GitSheet](https://gitsheet.wtf) - A dead simple git cheatsheet.

- [HTML5 Doctor](http://html5doctor.com/element-index/) - This is a quick reference of elements that are new or have been redefined in HTML5.

- [HTML5 Canvas Cheat Sheet ](https://simon.html5.org/dump/html5-canvas-cheat-sheet.html) - HTML5 Canvas Cheat Sheet.

- [Cheatography](https://cheatography.com/programming/) - Programming Cheat Sheets.

- [CSS 3, Media Queries Cheat Sheet](https://mac-blog.org.ua/css-3-media-queries-cheat-sheet/) - CSS 3, Media Queries Cheat Sheet.

- [SEO Cheat Sheet](https://moz.com/learn/seo/seo-cheat-sheet) - The Web Developer's SEO Cheat Sheet.

- [Bootstrap 5 Cheat Sheet](https://bootstrap-cheatsheet.themeselection.com/) - ThemeSelection's Bootstrap 5 Cheat Sheet.



### 🎭 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.

- [Sketch](https://www.sketch.com) - Create, prototype, collaborate, and bring your ideas to life with the design platform used by over one million people — from freelancers, to the world's largest teams.

- [Whimsical](https://whimsical.com) - Communicate visually at the speed of thought – collaborative flowcharts, wireframes, sticky notes, and mind maps.

- [Undesign](https://undesign.learn.uno) - Collection of free design tools and resources for makers, developers and designers.

- [FlyonUI](https://flyonui.com/) - The Easiest Components Library For Tailwind CSS.

- [Shadcn Studio](https://shadcnstudio.com/) - Preview your theme changes across different components and layouts.



### 🌐 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?

- [DNS](https://howdns.works) - How DNS works?

- [HTTPS](https://howhttps.works) - How HTTPS works?



### 🖼 HTML AND CSS



- [freeCodeCamp](https://www.freecodecamp.org/learn) - Free course to learn Web Development.

- [Interneting Is Hard](https://www.internetingishard.com) - Friendly web development tutorials for complete beginners.

- [Learn to Code HTML & CSS](https://learn.shayhowe.com) - The guide covers a variety of web design and development topics, ranging from beginner to advanced skill levels.

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

- [HTML Shark](https://html-shark.com) - Smart moves and dirty tricks for coding websites, effects and elements in HTML.

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

- [CSS Layout](https://csslayout.io) - A collection of popular layouts and patterns made with CSS.

- [Modern CSS Solutions](https://moderncss.dev) - A series examining modern CSS solutions to problems.

- [CSS Diner](https://flukeout.github.io) - A fun game to help you learn and practice CSS selectors.

- [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 by Example](https://gridbyexample.com) - Everything you need to learn CSS Grid Layout.

- [Grid Garden](https://cssgridgarden.com) - A game for learning CSS Grid.

- [CSS TRICKS - A Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) - A comprehensive guide to CSS grid, focusing on all the settings both for the grid parent container and the grid child elements.

- [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://web.archive.org/web/20201108000840/https://emilkowalski.github.io/css-effects-snippets/) - CSS animations.

- [UI Snippets](https://ui-snippets.dev/) - Even more 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.

- [Autoprefixer](https://autoprefixer.github.io) - Autoprefixer is a PostCSS plugin which parses your CSS and adds vendor prefixes.

- [CSS Formatter](https://www.cleancss.com/css-beautify/) - Online CSS Formatter, CSS Beautifier.

- [Placeholder](https://placeholder.com) - How To Use Our Placeholders. Just specify the image size after our URL and you'll get a placeholder image.

- [DevProjects](https://www.codementor.io/projects/html_css) - Practice your coding skills with free HTML/CSS projects. Projects vary from beginner to advanced level.

- [HTML Cheat Sheet](https://www.interviewbit.com/html-cheat-sheet/) - A Complete HTML Cheat Sheet to help you master HTML.

- [CSS Cheat Sheet](https://www.interviewbit.com/css-cheat-sheet/) - Brush up on your CSS Skills with this comprehensive Cheat Sheet.

- [HTML and HTML5 Interview Questions](https://www.interviewbit.com/html-interview-questions/) - A Complete list of HTML Interview Questions to help you ace your interview.

- [ReadyTools HTML Structure Generator](https://www.readytools.co/code-hub/html-structure/) - Generate HTML Structures in seconds. Use Bootstrap or your style/javascript.

- [ReadyTools Components Generator](https://www.readytools.co/code-hub/components/) - Generate HTML Components easily.

- [ReadyTools Generated Buttons](https://www.readytools.co/code-hub/buttons/) - Copy fancy buttons with one click and use it on your website.

- [ReadyTools HTML Minifier](https://www.readytools.co/code-hub/html-minifier/) - Compress your HTML files for faster loading times and better performance.

- [HTMLrev](https://htmlrev.com/) - HTMLrev provides free HTML templates for websites and landing pages.



## 🖥 FRONT END CHALLENGES OR SKILLS



- [CodePen](https://codepen.io) - Build, share, and learn JavaScript, CSS, and HTML with our online code editor

- [Frontend Mentor](https://www.frontendmentor.io) - Improve your front-end skills by building real projects. Solve real-world HTML, CSS and JavaScript challenges whilst working on professional designs.

- [Good Code](https://moeminm.github.io/goodcode/) - Browse through dozens of front end coding challenges, complete with Adobe XD files and styleguides.

- [codier](https://codier.io) - Explore and attempt front-end coding challenges.

- [CSSBattle](https://cssbattle.dev) - CSS code-golfing is here! Use your CSS skills to replicate targets with smallest possible code. Feel free to check out the targets below and put your CSS skills to test.



### 🖋 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.

- [Fontjoy](https://fontjoy.com) - Fontjoy helps designers choose the best font combinations. Mix and match different fonts for the perfect pairing.

- [FontPair](https://fontpair.co) - Font Pair helps designers pair Google Fonts together. Beautiful Google Font combinations and pairs.

- [Font Playground](https://play.typedetail.com) - Play with variable fonts.

- [Font Anything](https://app.typeanything.io) - Type Anything is a free and awesome typography tool to create and test font combinations for your projects.



### 🌈 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.

- [ColorBox](https://colorbox.io) - Create amazing color sets superfast.

- [color x color](https://colorcolor.in) - A tool to create accessible color systems for UIs

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

- [Picular](https://picular.co) - The color of anything.

- [Colorable](https://colorable.jxnblk.com) - Choose font colors based on your background color.

- [Happy Hues](https://www.happyhues.co) - Curated colors in context.

- [Branition Colors](https://branition.com/colors) - Hand-curated collection of color pallets best fitted for branding.

- [Color Picker](https://www.readytools.co/tools/color-picker/) - Get a free color picker with color names, hex, rgb and hsl codes.

- [Color Palettes](https://www.readytools.co/color-palette/) - Free categorized Color Palettes for your projects. Get hex and rgb codes.

- [Color Contrast Checker](https://www.readytools.co/color/color-contrast-checker/) - Check color contrast easily to ensure your designs are accessible and visually appealing.

- [Color Gradient Generator](https://www.readytools.co/color/color-gradient-generator/) - Create stunning color gradients effortlessly.



### 📷 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.

- [LOADING.IO](https://loading.io) - Free spinner for your projects.

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

- [befunky](https://www.befunky.com) - BeFunky's all-in-one online Creative Platform has everything you need to easily edit photos, create graphic designs, and make photo collages.



### 🎨 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.

- [DrawKit](https://www.drawkit.io) - Hand-drawn vector illustration and icon resources, perfect for your next project.

- [freepik](https://www.freepik.com) - Free graphic resources.

- [Illustrations figma](https://www.artify.co/illustrations-figma) - More than 5000 vector illustrations you can use inside Figma. All the figma illustrations are in SVG & PNG formats and includes styles like flat, lined, abstract and more.

- [Vector Illustrations](https://www.artify.co/vector-illustrations) - Search over 5000 vector illustrations and more than 70 design styles, with an integrated editor to adjust the design at you wish.



### 💧 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.

- [Icones](https://icones.js.org) - Icons collection.

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

- [Tabler Icons](https://tablericons.com) - Fully customizable free SVG icons.

- [icofont](https://icofont.com/icons) - 2100+ free icons to spice up your creative designs.

- [Simple Icons](https://simpleicons.org) - 1463 Free SVG icons for popular brands.

- [Get Emoji](http://getemoji.com) - ✂️ Copy and 📋 Paste Emoji 👍.

- [Ikonate](https://ikonate.com) - Customizable icons pack.

- [useAnimations](https://useanimations.com) - Free animated icons.

- [3dicons](https://www.3dicons.com/) - A collection of over 5000 3D icons and characters with 4k resolution, each icon delivered in 5 color palettes, front and perspective views.

- [Iconshock](https://www.iconshock.com/) - The biggest icon pack with over 2 million professional icons in +400 icon sets with more than 30 design styles: material, flat, 3d, realistic, iOS, and more.



### ⚙ 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.

- [App Icon Generator](https://launchyourapp.dev/tools/app-icon-generator) - App Icon Generator.

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

- [i Hate Regex](https://ihateregex.io) - i Hate Regex is a regex cheat sheet that also explains the commonly used expressions so that you understand it.

- [Regex101](https://regex101.com) - Online regex tester.

- [Pyrexp](https://pythonium.net/regex) - Online visual regex tester.

- [Web Code Tools](https://webcode.tools) - Generate HTML5, CSS3, Microdata, JSON-LD, Twitter Cards, Open Graph and more!

- [Carbon](https://carbon.now.sh) - Create and share beautiful images of your source .

- [CSS Grid Generator](https://grid.layoutit.com) - Quickly design web layouts, and get HTML and CSS code. Learn CSS Grid visually and build web layouts with our interactive CSS Grid Generator.

- [CSS Scroll Shadows](https://css-scroll-shadows.now.sh) - Adjust the controls (👇) and see the CSS scroll shadows change.

- [CSS Shadow Generator](https://brumm.af/shadows) - Make a smooth shadow.

- [Haikei](https://haikei.app) - Generate unique SVG design assets.

- [transform](https://transform.tools) - Transform | A polyglot web converter.

- [Perflink | JS Benchmarks](https://perf.link) - JavaScript performance benchmarks you can share via URL.

- [Optimizeimages](https://www.optimizeimages.com) - Optimize images online with this free tool, compress & convert images in PNG, JPEG, SVG, AVIF, WebP and GIF formats, and even get picture HTML tags for correct implementation.

- [ReadyTools HTML and CSS Generator](https://www.readytools.co/code-hub/) - Effortlessly create HTML and CSS code with ReadyTools Code Hub. Enhance your website's appearance by copying generated buttons.



### 👓 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/webapp 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 for 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://jsfiddle.net/)

- [goormIDE](https://ide.goorm.io)

- [InterviewBit](https://ide.new/c)

- [CodiLink](https://codi.link)

- [OneCompiler](https://onecompiler.com/)



### ⚡ 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.

- [JavaScripture](https://www.javascripture.com) - JavaScripture.com is a testing ground and reference for all JavaScript APIs.

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

- [How JavaScript works](https://blog.sessionstack.com/how-javascript-works-event-loop-and-the-rise-of-async-programming-5-ways-to-better-coding-with-2f077c4438b5)

- [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)

- [JavaScript Tutorial](https://www.scaler.com/topics/javascript/) - Learn important concepts in JavaScript such as operators, loops, functions, OOPs, and much more.

- [DOM Manipulation Reference](http://youmightnotneedjquery.com)

- [JavaScript Design Patterns](https://addyosmani.com/resources/essentialjsdesignpatterns/book/)

- [RegexOne](https://regexone.com) - Learn Regular Expressions with simple, interactive exercises.

- [Scaler](https://www.scaler.com/topics/javascript/) - Best Free Resources to learn JavaScript by top geeks.

- [JavaScript Cheat Sheet](https://www.interviewbit.com/javascript-cheat-sheet/)- A Complete JavaScript Cheat Sheet to help you master JavaScript.

- [JavaScript Interview Questions](https://www.interviewbit.com/javascript-interview-questions/) - A Complete list of top JavaScript Interview Questions to help you ace your interview.



### ⚡ NODEJS



- [Node.js Tutorial](https://www.youtube.com/playlist?list=PL4cUxeGkcC9jsz4LDYc6kv3ymONOKxwBU) - Node.js Crash Course Tutorial by Net Ninja.

- [Mixu's Node book](http://book.mixu.net/node/index.html) - A book about using Node.js.

- [Node JS](https://nodejs.dev/learn) - Node.js original documentation.

- [30 Days of Node](https://www.nodejsera.com/30-days-of-node.html) - 30 days of node, a node.js tutorial series.

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

- [You Don't Know Node.js](https://github.com/azat-co/you-dont-know-node)

- [Awesome Nodejs](https://github.com/sindresorhus/awesome-nodejs) - Delightful Node.js packages and resources.

- [Express.js Security Tips](https://www.freecodecamp.org/news/express-js-security-tips/) - How You Can Save and Secure Your App.

- [Node.js Interview Questions](https://www.interviewbit.com/node-js-interview-questions/) - A Complete list of top Node.js Interview Questions to help you ace your interview.



### ⚡ PYTHON



- [Learn Python Programming](https://pythonbasics.org) - This site contains materials and exercises for the Python 3 programming language.

- [PY4E](https://www.py4e.com) - Python for Everybody.

- [Dive Into Python 3](https://diveintopython3.net/index.html) - Dive Into Python 3 covers Python 3 and its differences from Python 2. Compared to Dive Into Python, it's about 20% revised and 80% new material. The book is now complete.

- [Codecademy](https://www.codecademy.com/learn/learn-python) - Free course to learn Python interactively.

- [Programiz PRO](https://programiz.pro/learn/master-python) - Offers a curated learning path for Python beginners that provides structured, in-depth courses with interactive quizzes, coding challenges, and real-world projects.

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

- [Flask Tutorial](https://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-i-hello-world) - The Flask Mega-Tutorial by Miguel Grinberg.

- [Scaler Topics](https://www.scaler.com/topics/python/) - Free Resources to learn Python by top geeks.

- [Python Interview Questions](https://www.interviewbit.com/python-interview-questions/) - A Complete list of top Python Interview Questions to help you ace your interview.

- [Python Cheat Sheet](https://www.interviewbit.com/python-cheat-sheet/)- A Comprehensive Cheat Sheet to help you master Python.

- [Python Tutorial](https://wiingy.com/learn/python/python-overview/) - Python Tutorial: A Comprehensive Guide for Beginners

- [Python Developer Skills](https://www.scaler.com/blog/python-developer-skills/) - Boost your tech career with 20+ Python developer skills you need in 2024.



### ⚡ 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.

- [Awesome React](https://github.com/enaqx/awesome-react) - A collection of awesome things regarding React ecosystem.

- [React Icons](https://react-icons.github.io/react-icons/) - Include popular icons in your React projects easily with react-icons.

- [React Interview Questions](https://www.interviewbit.com/react-interview-questions/) - A Complete list of top React Interview Questions to help you ace your interview.

- [100+ React Redux Interview Questions and Answers (2023)](https://www.adaface.com/blog/react-interview-questions/)-A collection of React Redux Questions and answers.



### 🎮 APIs



- [Public APIs](https://public-apis.io) - A collective list of more than 1000 Free Public and Open REST APIs for developers.

- [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 easy way to access the data.

- [Rapid API](https://rapidapi.com/hub) - Rapid api contains is one of the largest API tool suite which contains lots of free APIs along with their documnetation, a dedeicated section called [Rapid API learn](https://rapidapi.com/learn), which contains guides and tutorials about using and creating APIs.



### 🛠 DEVELOPER TOOLS



- [DevToolLab](https://devtoollab.com) - A comprehensive platform that helps developers discover and explore the best tools for their development workflow. Features tools across various categories with user reviews and recommendations.

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

- [JSON Server](https://github.com/typicode/json-server) - Get a full fake REST API with zero coding in less than 30 seconds (seriously). Created with <3 for front-end developers who need a quick back-end for prototyping and mocking.

- [JSONing](https://jsoning.com/api/) - Instantly Mock a REST API from a JSON Object for Testing and Prototyping.

- [npm trends](https://www.npmtrends.com) - Which NPM package should you use? Compare NPM package download stats over time. Spot trends, pick the winner.

- [BUNDLEPHOBIA](https://bundlephobia.com) - Find the cost of adding a npm package to your bundle.



### 📖 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, exercies, 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.

- [Real Python](https://realpython.com) - Learn Python online: Python tutorials for developers of all skill levels, Python books and courses, Python news, code examples, articles, and more.

- [Study Tonight](https://www.studytonight.com) - Best place to learn Engineering subjects like Core Java, C++, DBMS, Data Structures etc through Hand-written simple Tutorial, Tests, Video tutorials.

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

- [Bold Coder](https://boldcoder.blogspot.com) - Best place to learn Java programming with online tutorials, examples and interview questions.

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

- [Scaler Topics](https://www.scaler.com/topics/) - Understand how programming works, Learn Python, Java, Data Structure, C/C++ and other popular programming languages with easy to follow tutorials and example programs.

- [InterviewBit](https://www.interviewbit.com/practice/) - Level up your programming skills with our comprehensive guide containing interview questions, practice problems, coding challenges and alot more.

- [Scaler Blogs](https://www.scaler.com/blog/) - Navigate the tech career with comprehensive roadmap articles, guiding the tech aspirants from the beginner to expert level in the ever-evolving tech industry.

- [PerfectBugReport.io](https://www.perfectbugreport.io/) - A simple checklist of the essential items to include in bug reports.



### 🧑 RESUME



- [ResumeGenius](https://resumegenius.com) - The only online resume builder that'll land you interviews. Create a professional resume in minutes, download, and print.

- [resume.io](https://resume.io) - Free online resume maker, allows you to create a perfect resume in minutes. See how easy it is to write a professional resume and apply for jobs today!

- [Resume Now](https://www.resume-now.com/resume/builder) - It Only Takes A Few Minutes. An online resume maker shouldn't take long to use—and our free-to-use resume builder doesn't.

- [Canva](https://www.canva.com/create/resumes/) - With Canva's free resume builder, applying for your dream job is easy and fast. Choose from hundreds of free.

- [novoresume](https://novoresume.com) - Make a perfect resume in 2020 and get your dream job using the free resume builder. Select a template. Personalize it.

- [RX-Resume](https://rx-resume.web.app) - Easily build your resume.

- [Overleaf](https://www.overleaf.com/) - Overleaf is a LaTeX editor which can be used to create ATS friendly resumes.

- [Resume Worded](https://resumeworded.com/) - Resume Worded can be used to check whether your resume is ATS friendly or not.

- [Open Resume](https://www.open-resume.com/) - Open Resume is an open source Resume builder and parser.



### 📦 OTHERS



- [mailsac](https://mailsac.com) - Disposable testing email inbox service.

- [Ethereal Email](https://ethereal.email) - Ethereal is a fake SMTP service, mostly aimed at Nodemailer users (but not limited to).

- [HTTP Status Codes](https://httpstatuses.com) - HTTP Status Code directory, with definitions, details and helpful code references.

- [Play With Docker](https://labs.play-with-docker.com) - A simple, interactive and fun playground to learn Docker.

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

- [Dev Resources](https://devresourc.es) - Dev Resources has everything for your developer journey, all presented in curated lists.

- [Themeselection](https://themeselection.com) - Selected high quality, modern design, professional and easy-to-use Free Admin Dashboard Template, HTML Themes and UI Kits to create your applications faster.

- [TshirtDesigns](https://www.tshirtdesigns.com/mockups) - Create your own t shirt and apparel mockups with this free mockup builder.



### 📔 DEVELOPER BLOG SITES



- [DEV](https://dev.to) - A constructive and inclusive social network. Open source and radically transparent.

- [Medium](https://medium.com) - Medium is an open platform where readers find dynamic thinking, and where expert and undiscovered voices can share their writing on any topic.

- [Hacker News](news.ycombinator.com) - Get the latest from Hacker News!

- [Hacker Noon](https://hackernoon.com) - Hacker Noon reflects the technology industry with unfettered stories and opinions written by real tech professionals.

- [freeCodeCamp News](https://www.freecodecamp.org/news/) - Free Code Camp community news.

- [Smashing Magazine](https://www.smashingmagazine.com) - Smashing Magazine — for web designers and developers.

- [Hashnode](https://hashnode.com) - Hashnode is a free content creation platform and community that allows you to publish articles on your own domain.



### 📺 YOUTUBE CHANNELS



- [The Net Ninja](https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg)

- [Traversy Media](https://www.youtube.com/user/TechGuyWeb)

- [freeCodeCamp.org](https://www.youtube.com/channel/UC8butISFwT-Wl7EV0hUK0BQ)

- [Coding Addict](https://www.youtube.com/channel/UCMZFwxv5l-XtKi693qMJptA)

- [Fireship](https://www.youtube.com/channel/UCsBjURrPoezykLs9EqgamOA)

- [LearnCode.academy](https://www.youtube.com/channel/UCVTlvUkGslCV_h-nSAId8Sw)

- [Wes Bos](https://www.youtube.com/channel/UCoebwHSTvwalADTJhps0emA)

- [Codevolution](https://www.youtube.com/channel/UC80PWRj_ZU8Zu0HSMNVwKWw)