├── CONTRIBUTING.md ├── LICENSE └── README.md /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | If you're reading this, you're awesome! ❤️ 4 | 5 | Thank you for helping us make this project great. Here are a few guidelines that will help you along the way. 6 | 7 | ## Guidelines 8 | 9 | - Before committing to this repository, please check if the resource has already been listed or not. 10 | 11 | - Add a single resource in one pull request as it will be easier to review. 12 | 13 | - Pull request title should include resource name and category. 14 | - Example: `[Font Awesome Icons] -> [Icons]` 15 | 16 | - Pull request description should include a link to the resource and a brief description. 17 | 18 | - If appropriate category is not present, create a new one and mention it in pull request description. 19 | 20 | - The resource must be completely free or have a free tier. 21 | 22 | Thank you! ❤️ 23 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Pranshu Dobhal 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Web Development Resources 2 | 3 | We, as developers, often struggle to find the right resources for our projects and spend a lot of time researching. 4 | 5 | This repository aims to solve that by making finding resources embarrassingly easy. 6 | 7 | Please read [`contributing guidelines`](./CONTRIBUTING.md) before submitting new resources. 8 | 9 | ## Gradient Generators 10 | 11 | | Website | Description | 12 | | ---------------------------------------------------------------------- | ---------------------------------------------------------------------------- | 13 | | [Mesh](https://meshgradient.com) | Mesh is a simple way to create beautiful, unique gradients using shaders | 14 | | [Gradienta](https://gradienta.io) | Multicolor gradients, available in pure CSS and JPG | 15 | | [Cool Backgrounds](https://coolbackgrounds.io) | Generate some cool backgrounds | 16 | | [Magic Pattern](https://www.magicpattern.design/tools) | A collection of tools to enhance your design and code workflow | 17 | | [uiGradients](https://uigradients.com/) | A handpicked collection of beautiful color gradients for designers and developers | 18 | | [WebGradients](https://webgradients.com/) | A free collection of 180 linear gradients that you can use as content backdrops in any part of your website | 19 | | [CSS Gradient](https://cssgradient.io/) | A free tool that lets you create a gradient background for websites | 20 | | [CSSGears](https://gradients.cssgears.com/) | A simple and beautiful list of editable gradients | 21 | | [100 Mesh Gradients](https://www.meshgradients.design/) | Hand-Curated Mesh Gradient Collection | 22 | | [Gradient Hunt](https://gradienthunt.com/) | A free and open platform for color inspiration with thousands of trendy hand-made color gradients | 23 | | [CSS Gradient Buttons](https://gradientbuttons.colorion.co/) | Hundreds of CSS gradients buttons | 24 | | [Colorful Gradients](https://colorfulgradients.tumblr.com/) | Gradients automatically created by a computer | 25 | | [Grabient](https://www.grabient.com/) | Beautiful and simple UI for generating web gradients | 26 | | [Color Gradient Generator](https://mybrandnewlogo.com/color-gradient-generator) | CSS color gradients for cool backgrounds and UI elements | 27 | | [Color Gradient](https://colorgradient.dev/) | A free tool for creating css gradients | 28 | | [EggGradients](https://www.eggradients.com/) | Ready to use gradient background colors | 29 | | [Gradientos](https://www.gradientos.app/) | Find and test gradients easily. Pick colors and see the gradient live on a demo website on some common UI elements | 30 | | [Gradient Generator](https://colordesigner.io/gradient-generator) | A free gradient generator | 31 | 32 | ## Icons 33 | 34 | | Website | Description | 35 | | ---------------------------------------------------------------------- | ---------------------------------------------------------------------------- | 36 | | [Heroicons](https://heroicons.dev) | A set of free MIT-licensed high-quality SVG icons for UI development | 37 | | [Heroicons](https://heroicons.com) | Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS | 38 | | [Iconic](https://iconic.app) | Free, “do wtf you want with” pixel-perfect icons | 39 | | [The noun project icons](https://thenounproject.com/browse/icons/term/free/) | A diverse collection of icons | 40 | | [Iconfinder](https://www.iconfinder.com) | A marketplace for icons, illustrations and 3D illustrations in SVG, AI, and PNG format | 41 | | [Icon icons](https://icon-icons.com) | Free icons for your project, find the perfect icon you need in our amazing collection, available in SVG, PNG, ICO or ICNS | 42 | | [Iconmonstr](https://iconmonstr.com) | Free simple icons for your next project | 43 | | [Icons8](https://icons8.com) | Icons, illustrations, photos, music, and design tools | 44 | | [lordicon](https://lordicon.com) | A powerful library of carefully crafted animated icons, ready to use in digital products, presentations, or videos! | 45 | | [Google Icons](https://fonts.google.com/icons) | A collection of beautiful icons from Google | 46 | | [Icones](https://icones.netlify.app) | A collection of beautiful icons | 47 | | [React Icons](https://react-icons.github.io/react-icons/) | Include popular icons in your React projects easily with react-icons | 48 | 49 | ## Tailwind Components 50 | 51 | | Website | Description | 52 | | ---------------------------------------------------------------------- | ---------------------------------------------------------------------------- | 53 | | [Tailblocks](https://tailblocks.cc) | Ready-to-use Tailwind CSS blocks | 54 | | [Tailwind Components](https://tailwindcomponents.com) | A free repository for community components using Tailwind CSS | 55 | | [MerakiUI](https://merakiui.com) | Tailwind CSS Components That Support RTL Languages & Fully Responsive Based On Flexbox & CSS Grid With Elegant Dark Mode | 56 | | [Tail Kit](https://www.tailwind-kit.com) | Tail-kit gives you access to over 250 free components and free templates, based on Tailwind CSS 2.0. It's all compatible with React, VueJS and Angular application | 57 | | [Tailwind Toolbox](https://www.tailwindtoolbox.com) | Free Tailwind CSS Templates, Components and Resources | 58 | | [Tailwind UI Kit](https://tailwinduikit.com) | Build captivating experiences with accessible, fully responsive, drop-in-ready Tailwind CSS components and fast track your workflow | 59 | | [Mamba UI](https://mambaui.com) | A free, open-source collection of UI components and templates based on Tailwind CSS | 60 | | [Kutty](https://kutty.netlify.app) | A tailwind plugin consisting of accessible and reusable components for building web applications | 61 | | [Daisy UI](https://daisyui.com) | The most popular, free and open-source Tailwind CSS component library | 62 | | [Gust UI](https://www.gustui.com) | A Free Tailwind UI kit for visionary applications | 63 | | [Wickedblocks](https://wickedblocks.dev) | A free collection of Tailwind blocks & components | 64 | 65 | ## Images and Illustrations 66 | 67 | | Website | Description | 68 | | ---------------------------------------------------------------------- | ---------------------------------------------------------------------------- | 69 | | [Pexels](https://www.pexels.com) | The best free stock photos, royalty free images & videos shared by creators | 70 | | [Freepik](https://www.freepik.com) | Free Vectors, Stock Photos & PSD Downloads | 71 | | [Pixabay](https://pixabay.com) | Stunning free images & royalty free stock | 72 | | [Unsplash](https://unsplash.com) | Beautiful free images and pictures | 73 | | [Humaaans](https://www.humaaans.com) | Mix-&-match illustrations of people with a design library | 74 | | [Manypixels](https://www.manypixels.co/gallery) | 2,500+ royalty-free illustrations to power up your designs | 75 | | [Undraw](https://undraw.co) | Open-source illustrations for any idea you can imagine and create | 76 | | [The noun project photos](https://thenounproject.com/browse/photos/term/free/) | A diverse collection of stock photos | 77 | | [Illlustrations](https://illlustrations.co) | Open source illustrations kit | 78 | | [Storyset](https://storyset.com/) | Awesome free customizable illustrations for your next project | 79 | 80 | ## Design Inspirations 81 | 82 | | Website | Description | 83 | | ---------------------------------------------------------------------- | ---------------------------------------------------------------------------- | 84 | | [Envato](https://elements.envato.com) | Unilimted resource to graphic designs | 85 | | [Dribble](https://dribbble.com) | A collection of beautiful design by top creators | 86 | | [CollectUI](https://collectui.com) | Daily inspiration collected from daily ui archive and beyond | 87 | | [Landing Folio](https://landingfolio.com) | The Best Landing Page Design Inspiration, Templates and More | 88 | | [Openby.design](https://openby.design) | Custom crafted free UI design resources, for personal and commercial projects | 89 | | [Awwwards](https://www.awwwards.com) | Best Web Design trends | 90 | | [Behance](https://www.behance.net) | One of the world's largest creative network for showcasing and discovering creative work | 91 | | [Mobbin](https://mobbin.design/browse/ios/apps) | Save hours of UI & UX research with our library of 50,000+ fully searchable mobile app screenshots | 92 | | [Screenlane](https://screenlane.com) | Web & mobile UI design inspirations | 93 | | [Scrnshts](https://scrnshts.club) | A hand-picked collection of the finest app store design screenshots | 94 | 95 | ## Colors 96 | 97 | | Website | Description | 98 | | ---------------------------------------------------------------------- | ---------------------------------------------------------------------------- | 99 | | [Accessible Color Generator](https://learnui.design/tools/accessible-color-generator.html) | A tool for creating color variations on a base color to meet WCAG AA or AAA color contrast ratio guidelines | 100 | | [ColorSpace](https://mycolor.space) | Color palettes generator and olor gradient tool | 101 | | [Coolors](https://coolors.co) | The super fast color schemes generator | 102 | | [Adobe Colors](https://color.adobe.com/create/color-accessibility) | A color palette generator | 103 | | [Color Hunt](https://colorhunt.co) | Color palettes for designers and artists | 104 | | [HTML Color Codes](https://htmlcolorcodes.com) | Easily find HTML color codes for your website using our color picker, color chart and HTML color names with Hex color codes, RGB and HSL values | 105 | | [Paletton](https://paletton.com/) | The color scheme designer | 106 | --------------------------------------------------------------------------------