Best-Web-Development-Resources
Curated list of awesome resources for developers and enthusiasts.❤
Any resource we missed out on?
What are you waiting for? Go ahead and raise a Pull Request and we’ll merge it in no time (Conditions Apply 😁)
| Link/Name | Description | |:———————————————-|:————————————-| |https://roadmap.sh/frontend|Frontend Developer Roadmap| |https://roadmap.sh/backend|Backend Developer Roadmap| | https://www.cursoemvideo.com/ | One of the best site to learn HTML, CSS, JS, PHP in Portuguese. Classes are free. | | https://cs50.harvard.edu/ | Harvard University’s introduction to the intellectual enterprises of computer science and the art of programming. | | https://formspree.io/ | Best form builder on the internet | | https://cssgradient.io/gradient-backgrounds/ | Best CSS gradient collection | | https://www.manypixels.co/gallery/ | Free Vectors and illustrations. | | https://illlustrations.co/ | Free illustrations up for grabs | | https://undraw.co/ | Open-source illustrations for grabs | | https://illlustrations.co/ | Free illustrations up for grabs | | https://glyphy.io/ | Copy the Glyphs to Your Clipboard | | http://thepatternlibrary.com/ | Best pattern library | | https://www.flaticon.com/ | Library of icons. | | https://feathericons.com/ | Open-source icons collection. | | https://materialdesignicons.com/ | Collection of material design icons | | https://thenounproject.com/ | Library of custom icons created by global community. | | https://leungwensen.github.io/svg-icon/ | Collection of SVG icons. | | http://svgicons.sparkk.fr/ | Library of SVG icons. | | https://placeit.net/ | Best website mockup placeholder | | https://smartmockups.com/ | Another awesome website mockup placeholder | | https://webcode.tools/ | Web code snippet generator | | https://medium.com/@dustin/stock-photos | Stock photos that dont suck | | https://codepen.io/ | The best place to build, test, and discover front-end code.| | https://codesandbox.io/ | An instant IDE on any device with a web browser. | | https://jsfiddle.net/ | The best place to build, test, and discover front-end code in web browser | | https://neumorphism.io/ | Generate Soft-UI CSS code | | https://getwaves.io/ | Make some waves!| | https://www.openpeeps.com/ | Get character specific illustrations. | | https://getavataaars.com/ | Make your own avatar. | | https://coolors.co/palettes/trendi | Latest trending palletes. | | https://www.opendoodles.com/ | Free Vectors and illustrations. | | https://simpleicons.org/ | SVG icons of all popular brands.. | | https://useanimations.com/#explore | Animated icons | | https://svgporn.com/ | SVG icons of all popular brands | | https://logohub.io/ | Make logo for your own project | | https://akveo.github.io/eva-icons/#/?type=fill | Library of icons. | | https://lukaszadam.com/illustrations | Free illustrations.. | | https://ikonate.com/ | Library of icons. | | https://www.blobmaker.app/ | Organic SVG shapes for your next design | | https://lottiefiles.com/ | SVG Animations for your designs | |https://www.pexels.com/| The best free stock photos & videos shared by talented creators.| |https://www.vecteezy.com/ | Free vector art, stock photos & videos. | | https://graphicburger.com/ | Tasty design resources that are high resolution. | | https://pixelbuddha.net/ | Premium design resources of the highest quality for professional community. | | https://unsplash.com/ | Beautiful, free images and photos that you can download and use for any project. | | https://freebiesbug.com/ | Latest PSDs and other resources for free | | https://www.urbanfonts.com/ | Awesome collection of free fonts | | https://www.invisionapp.com/inside-design/design-resources/tethr/ | Best iOS design KIT ever | | https://www.freepik.com/ | Huge collection of vectors and images for free | | https://www.materialpalette.com/ | Generating color palette of your material design | | http://www.flatuicolorpicker.com/ | Must have for Flat UI lover | | https://coolors.co/ | Get the colors of your website done not just impressively but fast too | | https://colorfulgradients.tumblr.com/ | Automatically generated color gradients for you | | https://briangonzalez.github.io/jquery.adaptive-backgrounds.js/ | Extracts dominant color from image and applies it to parent background | | https://www.webfx.com/web-design/hex-to-rgb/ | Instantly convert hex color to rgb | | https://brandcolors.net/ | Colors used by famous brands | | https://bootflat.github.io/color-picker.html | Awesome flat color generator | | https://colorhunt.co/ | Infinity of color palettes | | https://balsamiq.com/ | Rapid, Effective wireframe playground | | https://wireframe.cc/ | Wireframes made easy | | https://www.uxpin.com/ | Easy mockup design maker | | https://sidebar.io/ | Collection of best design links everyday | | https://niice.co/ | Design search engine for UI/UX lovers | | https://www.webfx.com/tools/whats-my-browser-size/ | Find your browser size in an instant | | https://html5boilerplate.com/ | Most popular frontend HTML template on the web | | https://emberjs.com/ | A framework for ambitious web developers | | http://coffeescript.org/#introduction | It’s just JavaScript, but a lot simpler | | https://stylus-lang.com/ | Expressive, robust CSS | | http://www.responsivepx.com/ | Find exact breakpoints of a website | | http://brackets.io/ | A modern, open source text editor | | http://ami.responsivedesign.is/ | Find out whether your site is responsive or not in an instant | | http://www.responsinator.com/ | Mobile responsive website design checker | | https://momentjs.com/ | Parse, validate, manipulate, and display dates in JavaScript. | | https://semantic-ui.com/ | Development framework to create beautiful, responsive layouts | | https://materializecss.com/ | Modern responsive front-end framework based on Material Design | | http://milligram.github.io/ | Minimalistic CSS framework, when gzipped it is just 2kb in size.| | https://developers.google.com/speed/pagespeed/insights/ | Analyzes the content of a web page. | | https://www.webpagetest.org/ | Free website speed test from multiple locations. | | https://tools.keycdn.com/speed | Includes a waterfall breakdown and the website preview. | | https://developers.google.com/web/tools/chrome-devtools/ | Set of web authoring and debugging tools built into Google Chrome. | | https://riot-optimizer.com/ | Image optimazation tool designed to efficiently optimize images for the web | | https://kraken.io/web-interface | Robust, ultra-fast image optimizer and compressor with best-in-class algorithms | | https://www.humaaans.com/ | Mix-&-match illustrations of people with a design library | | https://uispace.net/ | Search for high quality and hand-crafted freebies | | https://error404.fun/ | Fun 404 illustrations | | https://avataaars.com/ | Create avatar illustrations in Sketch App with this free library. | | https://www.openpeeps.com/ | A hand-drawn illustration library. | | https://www.opendoodles.com/ | A Free Set of Sketchy Illustrations | | https://www.blackillustrations.com/ | Beautiful illustrations of black people for your next digital project | | https://heroicons.dev/ | Free MIT-licensed high-quality SVG icons for you to use in your web projects. | | https://uigradients.com/ | Collection of beautiful color gradients | | https://www.0to255.com/ | Tool to chose, lighten, and darken colors | https://www.remove.bg/ | Remove image background | | https://p5js.org/ |A JavaScript library for creative coding, with a focus on making coding accessible and inclusive for beginners| |https://ml5js.org/| Friendly Machine Learning for Web | |https://developer.mozilla.org/en-US/| Mozilla’s Resources and guides to web development | |https://infinityfree.net/| Unlimited free web hosting for your websites | |https://tailblocks.cc/| Ready-to-use Tailwind CSS code blocks | |https://www.minifier.org/| Minifies JS and CSS code to reduce website load time | |https://unminify.com/| Makes JS and CSS code more readable | |https://search.google.com/test/mobile-friendly| Test if your code is mobile-friendly | |https://www.pingdom.com/| Get detailed statistics about your websites performance and speed | |https://analytics.google.com/| Free web analytics service | |https://www.protopie.io/| Easiest way to prototype | |https://www.w3schools.com/whatis/| One of the best site to learn web development from scratch. It has tutorials of HTML, CSS, JavaScript, JQuery etc.| |https://www.freecodecamp.org/learn/responsive-web-design/| One of the best sites to learn and practice responsive web design | |https://www.pixeden.com/free-icons-set| Plenty of free icon sets, weather, social, line icons, and many more. | |https://tinypng.com/| Optimizes your WebP, PNG and JPEG images by 50-80% | |https://squoosh.app/| Optimizer that allows you to compress and compare images with different codecs in your browser. | |https://www.flaticon.com/| icons of web development in SVG, PSD, PNG, EPS format or as webfonts | |https://mockitt.wondershare.com/|online tool for building a web wireframes and prototypes | |https://www.toptal.com/designers/htmlarrows/symbols/| Best place to get any type of HTML symbols and ASCII characters. | |https://pinetools.com/image-gradient-generator| Website on which we can add gradient to any image. | |https://gf.dev/website-audit | Audit Your website like test your website speed , fully load time , time taken to load first byte , etc | |https://tailwindcss.com/| CSS framework packed with classes like flex, pt-4, text-center and rotate-90 | |https://fontawesome.com/ |Get vector icons and social logos | |https://alligator.io/css/css-resources/| A curated list of CSS resources | |https://gtmetrix.com/|Gives you insight on how well your site loads and provides actionable recommendations on how to optimize it.| |https://www.toptal.com/developers/hastebin/about.md| Haste is the prettiest, easiest to use pastebin ever made.| |https://sourceforge.net/|SourceForge offers easy access to all the open source code you’ll ever need. | |https://validator.w3.org/|The Validator is a free service by W3C that helps check the validity of Web documents. | |https://stripo.email/| Stripo is an awesome email design platform with API’s to most email marketing platforms. | |https://tutorial.djangogirls.org/en/ | Best website for django | |https://troopl.com | Create a free online portfolio of your work in minutes. | |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. | |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. | |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. | |https://www.iconshock.com/ |2 Million+ professional icons library. Over 400+ icon sets in more than 30 styles, including Flat, Material, iOS, Glyph, Colorful, Window 10, Revamped Office, 3D Realistic, Isometric, & more! Most of the icons are vector and pixel perfect conveniently grouped in sets by industries, and our customs designs are even better :) | |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. | |https://www.tshirtdesigns.com/mockups | You can upload your own mockups files or choose one from our directory, and adap any design to the mockup builder to create realistic and ready to use mockups for your POD business. |
Contributors ✨
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!