Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/deeppaz/awesome-resources-for-developers
Curated list of useful resources for frontend developers or all developers
https://github.com/deeppaz/awesome-resources-for-developers
List: awesome-resources-for-developers
Last synced: 3 months ago
JSON representation
Curated list of useful resources for frontend developers or all developers
- Host: GitHub
- URL: https://github.com/deeppaz/awesome-resources-for-developers
- Owner: deeppaz
- Created: 2021-03-20T16:45:16.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2021-04-22T15:11:28.000Z (over 3 years ago)
- Last Synced: 2024-04-23T10:54:36.285Z (6 months ago)
- Size: 27.3 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- ultimate-awesome - awesome-resources-for-developers - Curated list of useful resources for frontend developers or all developers. (Other Lists / PowerShell Lists)
README
## Contents
- [UI Graphics](#ui-graphics)
- [Test Your Website](#test-your-website)
- [Free Hosting For Your Project](#free-hosting-for-your-project)
- [Fonts](#fonts)
- [Colors](#colors)
- [Icons](#icons)
- [Logos](#logos)
- [Favicons](#favicons)
- [Icon Fonts](#icon-fonts)
- [Stock Photos](#stock-photos)
- [Stock Videos](#stock-videos)
- [Stock Music & Sound Effects](#stock-music--sound-effects)
- [Vectors & Clipart](#vectors--clip-art)
- [Product & Image Mockups](#product--image-mockups)
- [HTML & CSS Templates](#html--css-templates)
- [CSS Frameworks](#css-frameworks)
- [CSS Animations](#css-animations)
- [Javascript Animations](#javascript-animation-libraries)
- [UI Components & Kits](#ui-components--kits)
- [React UI Libraries](#react-ui)
- [Vue UI Libraries](#vue-ui)
- [Online Design Tools](#online-design-tools)
- [Others](#others)
## UI Graphics
>UI Graphics
| Website | Description |
| -------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ |
| [Humaaans](https://www.humaaans.com/) | Cool illustrations of people with the ability to mix and match |
| [Paaatterns](https://products.ls.graphics/paaatterns/) | Free collection of beautiful patterns for all vector formats |
| [404 illustration](https://error404.fun/) | Free illustrations for 404 pages |
| [Drawkit.io](https://www.drawkit.io/) | Illustrations for designers and startups |
| [Undraw.co](https://undraw.co/) | Open-source illustrations for any idea you can imagine and create |
| [Manypixels.co](https://www.manypixels.co/gallery/) | Monochromatic, Isometric high-quality illustrations |
| [flexiple.com](https://2.flexiple.com/scale/all-illustrations/) | One new high-quality, open-source illustration each day. Use our color-picker to adapt the illustrations to your brand identity! illustrations |
| [Open Peeps](https://www.openpeeps.com/) | Hand drawn illustration library |
## Test Your Website
>They are great for improving and making your website better.
| Website | Description |
| -------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ |
| [Pingdom tools](https://tools.pingdom.com/) | Website speed test |
| [Seositecheckup](https://seositecheckup.com/) | Seo website Checkup |
| [Sitechecker](https://sitechecker.pro/) | Get Free Website SEO Score Online |
| [Dotcom tools](https://www.dotcom-tools.com/) | Instantly Test your Website Speed |
| [Gtmetrix](https://gtmetrix.com/) | Website Performance Testing and Monitoring |
| [Webpagetest](https://www.webpagetest.org/) | Website Performance and Optimization Test |
| [Dareboost](https://www.dareboost.com/) | Website Speed Test and Website Analysis |
| [Seoptimer](https://www.seoptimer.com/) | SEO Audit & Reporting Tool |
| [Nibbler.silktide](https://nibbler.silktide.com) | Free tool for testing websites |
| [Webspeedtest.cloudinary](https://webspeedtest.cloudinary.com/) | Website Speed Test Image Analysis Tool |
## Free Hosting For Your Project
>Free hosting for your projects
| Website | Description |
| -------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ |
| [Netlify](https://Netlify.com/) | Netlify |
| [Firebase](https://link.com/) | Firebase |
| [AWS](https://AWS.com/) | AWS |
| [Heroku](https://Heroku.com/) | Heroku |
| [ Github Pages](https://gitghub.com/) | Github Pages |
| [Vercel](https://Vercel.com/) | Vercel |
| [Surge](https://Surge.com/) | Surge |
| [Render](https://Render.com/) | Render |
| [Gitlab Pages](https://gitlab.com/) | Gitlab Pages |
| [Stormkit](https://link.com/) | Stormkit |
## Fonts
>Fonts
| Website | Description |
| ----------------------- | ------------------ |
| [Google Fonts](https://fonts.google.com/)| Library of around 1000 free licensed font families |
| [DaFont](https://www.dafont.com/)| Archive of freely downloadable fonts |
| [1001 Free Fonts](https://www.1001freefonts.com/)| I think the name speaks for itself :smirk: |
| [Font Space](https://www.fontspace.com/)| A designer-centered free font website that has quick customizable previews |
| [Abstract Fonts](http://www.abstractfonts.com/)| Fonts free for personal and commercial use |
| [Free Typography](https://freetypography.com/)| A list of high quality fonts |
| [Befonts](https://befonts.com/) | High quality fonts for free |
| [Arabic fonts](https://arabicfonts.net/) | Arabic fonts for free |
| [Google Webfonts Helper](https://google-webfonts-helper.herokuapp.com/fonts) | A Hassle-Free Way to Self-Host Google Fonts |
| [FFonts](https://ffonts.net)| Stylish fonts for free |
| [Malayalam Fonts](https://smc.org.in/fonts/)| Malayalam fonts for free which are maintained by Swathanthra Malayalam Computing(SMC) |
| [Dev Fonts](https://devfonts.gafi.dev/)| Find and use the coding fonts for free |
## Colors
>Colors
| Website | Description |
| ----------------------- | ------------------ |
| [meodai](https://meodai.github.io/color-names/)| A handpicked list of 27462 unique color names |
| [Colormind.io](http://colormind.io)| Color palette generator |
| [0to255](https://www.0to255.com/) | A color tool that makes it easy to lighten and darken colors. It’s perfect for hover states, borders, gradients, and more. |
| [Paletton](https://paletton.com/)| Paletton.com is a designer color tool designed for creating color combinations that work together well.|
## Icons
>Icons
| Website | Description |
| ----------------------- | ------------------ |
| [Font Awesome](https://fontawesome.com/)| The web's most popular icon set and toolkit |
| [Line Awesome](https://icons8.com/line-awesome)| Swap in replacement of Font Awesome with modern line icons |
| [Material Icons](https://material.io/resources/icons/)| Material design icon library |
| [IonIcons](http://ionicons.com/)| Beautifully crafted open source icons from Ionic team |
| [Icofont](https://icofont.com/)| 2100+ free icons to spice up your creative designs |
| [Jam Icons](https://jam-icons.com/) | 890+ handcrafted icons to make your web app awesome |
| [Unicons](https://iconscout.com/unicons)| A set of 1100+ Free line style icons available as web font, SVG icons, and as components for JS frameworks like React, Vue and React Native. |
| [Shapedfonts Iconclub](https://shapedfonts.com/iconclub/)| 8000+ free icons |
| [Simple Icons](https://simpleicons.org/)| 1307 Free SVG icons for popular brands |
| [Linear Icons](https://linearicons.com/free)| 1000+ Ultra crisp vector icons |
| [Icons8](https://icons8.com/)| Free icons, photos, vectors and tools |
| [The Noun Project](https://thenounproject.com/)| Over 2 Million curated icons, created by a global community |
| [Iconscout](https://iconscout.com/)| Free Download Icons illustrations stock photos at one place |
| [IconSear.ch](https://iconsear.ch/search.html) | Search engine with over 50,000 SVG icons indexed |
| [Nucleo App](https://nucleoapp.com/)| Nucleo is a beautiful library of 27500 icons, and a powerful application to collect, customize and export all your icons. (Free & Paid) |
| [Bootstrap Icons](https://icons.getbootstrap.com/)| Free Icons built for Bootstrap but they'll work in any project |
| [Iconmonstr](https://iconmonstr.com/) | Discover 4496+ free icons in 313 collections |
| [Iconfinder](https://www.iconfinder.com/)| Free and premium vector icons in SVG, PNG, CSH and AI format |
| [Lordicon](https://lordicon.com/free-icons) | 50 free animated interactive icons |
| [UseAnimations](https://useanimations.com/) | Free Animated Icons in SVG and Json Format(for lottie) |
| [IconBros](https://www.iconbros.com) | 7843+ free icons grouped in 182 collections |
| [Material Design Icons](https://materialdesignicons.com/) | An icon collection allowing designers and developers targeting various platforms to download icons in the format, color and size they need for any project. |
| [Heroicons](https://heroicons.dev/) | Free, open source icons from the creators of Tailwind CSS. |
| [Zondicons](https://www.zondicons.com/icons.html) | A set of free premium SVG icons for you to use on your digital products. |
| [Endless Icons](http://endlessicons.com/) | A website offering a number of free icons. Icons are tagged and also compressed into kits. |
| [Icomoon](https://icomoon.io/app/) |Browse 5500+ Free Icons. Add any set you wish to easily browse and search its icons. |
| [Cryptoicons](http://cryptoicons.co/) | A set of 430 crypto and fiat currency icons. Completely free. |
| [Ikonate](https://ikonate.com/) | Fully customizable & accessible vector icons |
| [appicon](https://appicon.co/)| Quickly generate app icons in different sizes for your IOS, macOS and Android projects|
| [LineIcons](https://lineicons.com) | 2000+ Essential Line Icons for Designers and Developers |
| [SVG Repo](https://www.svgrepo.com/) | Download free SVG Vectors for commercial use. |
| [Unified icons](https://iconify.design/) |Thousands of icons, one unified framework. One library, over 40,000 vector icons. |
| [Teeny Icons](https://teenyicons.com/) | TeenyIcons is a set icons in SVG format easy to use in html |
| [Shitty Icons](https://shittyicons.com/) | Collection of Free icons. |
| [Iconspedia](https://www.iconspedia.com/) | Iconspedia is a website that contains a large collection of high quality free icons. |
| [iconhub](https://iconhub.io/) | Just practical stunning icons for everyone |
## Logos
>Logos
| Website | Description |
| ----------------------- | ------------------ |
| [World Vector Logo](https://worldvectorlogo.com/)| Download vector logos of brands you love |
| [Logo Maker](https://logomakr.com/)| Create custom logos |
| [Free Logo Maker](https://www.namecheap.com/logo-maker/)| Fast, All-in-One Logo Generator |
## Favicons
>Favicons
| Website | Description |
| ----------------------- | ------------------ |
| [Favicon.io](https://favicon.io/)| Generate a favicon from text, from an image, or from an emoji. Download in .ico and .png formats |
| [Favicomatic](https://favicomatic.com/)| Generate favicons of all the sizes and formats as well as the HTML code needed to support every possible browser or device |
| [RealFaviconGenerator](https://realfavicongenerator.net/)| Generate icons for all platforms (Windows, iOS, Android) |
## Stock Photos
>Stock photos
| Website | Description |
| ----------------------- | ------------------ |
| [Pixabay](https://pixabay.com/)| Over 1.7 million+ high-quality stock images and videos |
| [Picspree](https://picspree.com)| Royalty free images, stock photos, illustrations, and vectors |
| [Burst](https://burst.shopify.com/)| Free stock photos collections |
| [Stock Snap](https://stocksnap.io/)| Hundreds of high quality photos added weekly |
| [Morguefile](https://morguefile.com/)| Over 350,000 free stock photos for commercial use |
| [Kaboom Pics](https://kaboompics.com/)| Stock photography and color palettes. Good for product images |
| [New Old Stock](https://nos.twnsnd.co/)| Stock vintage photos |
| [Pic Jumbo](https://picjumbo.com/)| Good collections of different types of photos |
| [Stockvault](http://www.stockvault.net/)| Categorized stock photos |
| [Realistic Shots](https://realisticshots.com/)| Free high-resolution stock photos |
| [Negative Space](https://negativespace.co/)| High-Resolution Free Stock Photos |
| [SkitterPhoto](https://skitterphoto.com/)| Free high-resolution photography |
| [PxHere](https://pxhere.com/)| Free Images & Free stock photos - PxHere |
| [Piqsels](https://piqsels.com/)| Royalty Free Stock Photos |
| [FoodiesFeed](https://www.foodiesfeed.com/)| Food photo stock |
| [Nappy](https://www.nappy.co/)| A website offering Beautiful, high-res photos of black and brown people.|
| [Generated Photos](https://generated.photos/)| Unique AI Generated model photos|
| [Reshot](https://www.reshot.com/)| Uniquely free photos. Handpicked, non-stocky images.
| [Free Images](https://www.freeimages.com/)| Find and download free stock photos - all free for personal and commercial use|
| [Lorem Picsum](https://picsum.photos/)| An easy to use API to get beautiful placeholder images. Size and other parameters can be specified. |
| [scienceimage](https://www.scienceimage.csiro.au) | An image library specializing in science and nature images |
| [Saxifraga](http://www.freenatureimages.eu) | Free nature images |
| [Creative Commons](https://search.creativecommons.org) | Search for free images to reuse.
## Stock Videos
>Stock videos
| Website | Description |
| ----------------------- | ------------------ |
| [Pexels](https://www.pexels.com/videos)| Largest library of free to use videos, donated by the community |
| [Pixabay](https://www.pixabay.com/videos)| Large library of free to use videos, donated by the community similar to Pexels |
| [Coverr.co](https://coverr.co/)| Beautiful free stock video footage |
| [Videezy](https://www.videezy.com/)| Free HD stock footage & 4K videos |
| [Mix Kit](https://mixkit.co/)| Stock video clips & music |
| [Life Of Vids](https://www.lifeofvids.com/)| Free video clips and loops |
| [Videvo](https://www.videvo.net/stock-video-footage/)| Free and premium stock videos |
| [Loopvidz](http://stock.loopvidz.com/)| Free To Use Cinema graphs Created With VIMAGE App |
| [SplitShire](https://www.splitshire.com/)| Beautiful & exclusive free stock videos & photos |
## Stock Music & Sound Effects
>Free stock music and sound effects
| Website | Description |
| ----------------------- | ------------------ |
| [Free Stock Music](https://www.free-stock-music.com/)| Royalty free stock music for YouTube videos, podcasts, etc |
| [Bensound](https://www.bensound.com/)| Download Royalty Free Music for free and use it in your project |
| [Freesound](https://freesound.org/)| Free stock music and sounds |
| [Musopen](https://musopen.org/music/)| An online copyright free classical music library |
| [Unminus](https://www.unminus.com/)| Free Premium Music for Your Projects 🎁 Royalty Free. Cleared for YouTube. |
## Vectors & Clip Art
>Free vectors, clipart, illustrations, patterns and more
| Website | Description |
| ----------------------- | ------------------ |
| [Vecteezy](https://www.vecteezy.com/)| Find and download free vector art |
| [Freepik](https://www.freepik.com)| Free vectors, stock photos, PSD and icons |
| [Illlustrations](https://illlustrations.co/)| Beautiful 100 Illustrations - png, svg |
| [SVG wave](https://svgwave.in/) | A free, & customizable gradient 🌈 SVG wave generator for UI designs . |
## Product & Image Mockups
>Create mockups of devices and other products
| Website | Description |
| ----------------------- | ------------------ |
| [Smart Mockups](https://smartmockups.com/)| Create stunning product mockups (free & premium) |
| [Screely](https://www.screely.com/)| Instantly turn your screenshot into a mockup |
| [Screenshot.rocks](https://screenshot.rocks/)| Create beautiful browser & mobile mockups in seconds |
| [Screen Peak](https://screenpeek.io/)| Create a mockup from a URL |
| [Mockup World](https://www.mockupworld.co/)| The biggest source of free photo-realistic Mockups online |
| [Facebook Devices](https://facebook.design/devices)| Images and Sketch files of popular devices |
| [Mockuphone](https://mockuphone.com/)| 100% free mockups for all devices including IOS, Android, Windows Phone, Laptop & Desktop and TV |
| [Device Shots](https://deviceshots.com/)| Create high-resolution device mockups for social media, for free |
## HTML & CSS Templates
>Websites that offer free beautiful website templates and themes of all types
| Website | Description |
| ----------------------- | ------------------ |
| [HTML5Up](https://html5up.net/)| Very modern, unique responsive HTML5/CSS3 themes |
| [Templatemo](https://templatemo.com/)| Minimal, resume, gallery themes and more |
| [Templated.co](https://templated.co/)| Tons of minimalistic HTML5/CSS3 themes |
| [FreeHTML5](https://freehtml5.co/)| Free & premium HTML5 and Bootstrap themes |
| [StyleShout](https://www.styleshout.com/free-templates/)| Brilliantly crafted free website templates |
| [Start Bootstrap](https://startbootstrap.com/)| Bootstrap starter themes |
| [Zerotheme](https://www.zerotheme.com/)| HTML5, Bootstrap, Prestashop templates |
| [HTML5xCSS3](https://www.html5xcss3.com/)| Collection of wonderful templates in different categories |
| [Colorlib](https://colorlib.com/wp/templates/)| Almost any category of theme you can think of |
| [Free CSS](https://www.free-css.com/free-css-templates)| Huge collection of free templates |
| [Hubspot](https://www.hubspot.com/resources)| Templates, infographics, banners and much more|
| [Mobirise](https://mobirise.com/html-templates/)| Great looking HTML5/CSS3 templates|
| [Bootswatch](https://bootswatch.com/)| Free themes for Bootstrap|
| [Onepagelove](https://onepagelove.com/)| One-page websites, templates and resources|
| [Themes For App](https://themesfor.app/)| Free Bootstrap themes and landing pages|
| [BootstrapTaste](https://bootstraptaste.com/)| Premium & Free Bootstrap Templates|
| [BootstrapMade](https://bootstrapmade.com/)| Elegant, clean and beautiful free templates using Bootstrap. |
| [W3Layouts](https://w3layouts.com/)| W3Layouts: 3784+ Free Website Templates for 2020 |
| [Tooplate](https://www.tooplate.com/)| Tooplate: Free HTML Templates for everyone! |
| [Cruip](https://cruip.com/free-templates/)| Fully coded HTML templates to help you easily build your startup landing page without hassles. |
| [UIdeck](https://uideck.com/) | Free Landing Page Templates and Bootstrap Themes |
| [Splawr](https://splawr.com/) | Free web templates to kickstart your idea! |
| [W3css_templates](https://www.w3schools.com/w3css/w3css_templates.asp) | Some responsive W3.CSS website templates for you to use. |
| [All-Free-Download](https://all-free-download.com/free-website-templates/free-html-css-templates.html) | Download free-website-templates |
| [mashup-template](http://www.mashup-template.com/templates.html)| HTML5/CSS3 Free Templates |
## CSS Frameworks
>CSS/UI frameworks to help build great looking websites and applications
| Website | Description |
| ----------------------- | ------------------ |
| [Tailwind CSS](https://tailwindcss.com/)| Low level, utility-first framework |
| [Bootstrap](https://getbootstrap.com/)| Popular UI framework with tons of components that use both CSS and JS |
| [Materialize](https://materializecss.com/)| A modern responsive front-end framework based on Material Design |
| [Material Design Lite](https://getmdl.io/)| Light framework based on Material Design. No JS dependency |
| [Bulma](https://bulma.io/)| Modern CSS framework with no JS |
| [Skeleton](http://getskeleton.com/)| Extremely light framework for basic UI elements |
| [Semantic UI](https://semantic-ui.com/)| Empowers designers and developers by creating a shared vocabulary for UI |
| [Fomantic UI](https://fomantic-ui.com/)| A community fork of Semantic-UI |
| [Foundation](https://get.foundation/)| Mobile first framework with clean markup |
| [Pure CSS](https://purecss.io/)| A set of small, responsive CSS modules |
| [UIKit](https://getuikit.com/)| Lightweight and modular front-end framework |
| [Susy](https://www.oddbird.net/susy/)| Lightweight, grid-layout engine for Sass |
| [Milligram.io](https://milligram.io/)| Minimalist CSS framework |
| [Vanilla Framework](https://vanillaframework.io/)| Simple, extensible CSS framework written in Sass |
| [Spectre CSS](https://picturepan2.github.io/spectre/)| Lightweight, modern CSS framework |
| [Picnic CSS](https://picnicss.com/)| Lightweight and beautiful library |
| [Wing](https://kbrsh.github.io/wing/)| A beautiful CSS framework designed for minimalists |
| [Chota](https://jenil.github.io/chota/)| A micro (~3kb) CSS framework |
| [Blueprint CSS](https://blueprintcss.dev/)| A lightweight layout library for building great responsive mobile first UIs that work everywhere |
| [W3.CSS](https://www.w3schools.com/w3css/) | A modern CSS framework with support for desktop, tablet, and mobile design by default. Designed to be independent of jQuery or any other JavaScript library |
| [98.css](https://jdan.github.io/98.css/)| A design system for building faithful recreations of old UIs |
| [NES CSS](https://nostalgic-css.github.io/NES.css/)| NES-style CSS Framework |
| [Shoelace.css](https://www.shoelace.style/)| Lightweight, forward-thinking CSS library built with future CSS syntax |
| [MVP.css](https://andybrewer.github.io/mvp/) | A minimalist stylesheet for HTML elements. No class names, no frameworks, just semantic HTML and you're done |
| [Blaze.css](http://blazecss.com/) | Open source modular CSS toolkit providing great structure for building websites quickly |
| [Turret CSS](https://turretcss.com/) | Turret CSS is a styles framework for development of responsive websites. |
| [Cutestrap](https://www.cutestrap.com/) | A strong, independent CSS Framework. |
| [Shorthand](https://shorthandcss.com/) | Shorthand is a free and open source css framework, that allows you to make unique and modern design without writing any css |
| [XP.css](https://botoxparty.github.io/XP.css/) | XP.css is an extension of 98.css. A CSS library for building interfaces that look like old UIs. |
| [Framework7](https://framework7.io/) | Framework7 - is a free and open source framework to develop mobile, desktop or web apps with native look and feel. |
| [Hint.css](https://kushagra.dev/lab/hint/) | A pure CSS tooltip library for your lovely websites. |
| [imagehover.io](http://imagehover.io/) | Pure CSS Image Hover Effect Library |
| [mini.css](https://minicss.org/) | A minimal, responsive, style-agnostic CSS framework |
| [Tachyons](https://tachyons.io/) | Create fast loading, highly readable, and 100% responsive interfaces with as little css as possible. |
| [Material Bootstrap](https://fezvrasta.github.io/bootstrap-material-design/) | Material Design with Bootstrap |
| [Ivory](https://github.com/IVORY-UI/ivory) | A modern CSS framework for developing powerful web interfaces faster and easier |
| [Halfmoon UI](https://www.gethalfmoon.com/)| A responsive and lightweight framework, designed for quickly building beautiful dashboards and product pages. |
| [Metro 4](https://metroui.org.ua/index.html)| Create your site quickly and effectively with Metro 4. impressive components library built on html, css, javascript. |
| [css-doodle](https://css-doodle.com/) | A web component for drawing patterns with CSS |
| [latex.css](https://latex.now.sh/) | Make your website look like a LaTeX document |
| [Paper CSS](https://github.com/cognitom/paper-css) | Front-end printing solution |
## CSS Animations
>CSS animations to build awesome animations for websites and applications
| Website | Description |
| ----------------------- | ------------------ |
| [Animate.css](https://animate.style/)| Just-add-water CSS animations |
| [Bounce.js](http://bouncejs.com/)| Bounce.js is a tool and JS library that lets you create beautiful CSS3 powered animations |
| [Anime.js](https://animejs.com/)| Anime.js (/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library with a simple, yet powerful API. It works with CSS properties, SVG, DOM attributes and JavaScript Objects |
| [Magic Animations](https://www.minimamente.com/project/magic/)| Animations has been one of the most impressive animation libraries available |
| [Zdog](https://zzz.dog/)| Round, flat, designer-friendly pseudo-3D engine for canvas & SVG |
| [CSShake](http://elrumordelaluz.github.io/csshake/)| CSShake delivers exactly what it says on the box — a CSS library designed specifically for shaking elements within your web page |
| [Hover.css](http://ianlunn.github.io/Hover/)| Hover.css is a CSS animation library designed for use with buttons and other UI elements in your website |
| [AniJS](http://anijs.github.io/)| AniJS is an animation library that allows you to add animations to elements in a simple ‘sentence-like’ structure |
| [Animista](http://animista.net/)| CSS Animations On Demand |
| [Tachyons-animate](https://github.com/anater/tachyons-animate)| Tachyons itself is an atomic CSS library with a ton of utility classes for essentially designing anything by adding classes to what you need |
| [Sequence.js](https://www.sequencejs.com/)| Sequence.js is a JavaScript library that provides a responsive CSS framework for creating unique sliders, presentations, banners, and other step-based applications |
| [Infinite](https://tilomitra.github.io/infinite/)| These animations, like rotations and pulses, that are specifically designed to run and repeat forever |
| [OBNOXIOUS.CSS](http://tholman.com/obnoxious/)| Animations for the strong of heart, and weak of mind |
| [MOTION UI](https://zurb.com/playground/motion-ui)| A Sass library for creating flexible CSS transitions and animations |
| [Keyframes.app](https://keyframes.app/)| A graphical user interface for generating custom CSS keyframe animations |
| [thoughtbot](https://thoughtbot.com/blog/transitions-and-transforms)| CSS Transitions and Transformations for Beginners |
| [SVG Artista](https://svgartista.net/)| A useful tool to animate stroke and fill properties in SVG images with plain CSS code |
| [AOS](https://github.com/michalsnik/aos)| Animate on Scroll Library |
| [AnimXYZ](https://animxyz.com/)| AnimXYZ helps you create, customize, and compose animations for your website. Built for Vue, React, SCSS, and CSS |
## Javascript Animation Libraries
>javascript animations libraries to build awesome animations for websites and applications
| Website | Description |
| ----------------------- | ------------------ |
| [Greensock](https://greensock.com/)| A JavaScript library for building high-performance animations that work in every major browser |
| [Velocity.js](http://velocityjs.org/)| Velocity is a lightweight animation engine with the same API as jQuery's $.animate() |
| [lax.js](https://github.com/alexfoxy/laxxx)| Simple & light weight vanilla javascript plugin to create smooth & beautiful animations when you scroll! |
| [Rellax.js](https://github.com/dixonandmoe/rellax)| A buttery smooth, super lightweight, vanilla javascript parallax library |
| [three.js](https://github.com/mrdoob/three.js/)| An easy to use, lightweight, 3D library with a default WebGL renderer. |
| [wow.js](https://wowjs.uk/)| Reveal Animations When You Scroll. |
| [chocolat.js](http://chocolat.insipi.de/)| Free lightbox plugin. |
| [Animate On Scroll](https://michalsnik.github.io/aos/)| Animate on scroll library to reveal animations when You scroll. |
| [Tilt.js](http://gijsroge.github.io/tilt.js/)| A tiny requestAnimationFrame powered 60+fps lightweight parallax hover tilt effect for jQuery. |
| [Roughnotation](https://roughnotation.com/)| Rough Notation is a small JavaScript library to create and animate annotations on a web page |
| [tsParticles](https://particles.matteobruni.it/)| A lightweight library for creating particles, an improved version of the abandoned and obsolete particles.js |
| [Particles.js](https://vincentgarreau.com/particles.js/)| A lightweight JavaScript library for creating particles |
| [mo.js](https://mojs.github.io/)| The motion graphics toolbelt for the web |
| [Lightbox2](https://lokeshdhakar.com/projects/lightbox2/)| A small JS library to overlay images on top of the current page. |
| [Slick](https://kenwheeler.github.io/slick/)| Fully responsive carousel |
| [barba.js](https://barba.js.org/)| Create fluid and smooth transitions between your website’s pages. |
| [Locomotive Scroll](https://locomotivemtl.github.io/locomotive-scroll/)| A simple scroll library that provides detection of elements in viewport & smooth scrolling with parallax. |
| [Owl carousel](https://owlcarousel2.github.io/OwlCarousel2/)| Free responsive jQuery carousel |
| [Swiperjs](https://swiperjs.com/)| Free, Open Source, Modern Slider without jQuery. Available for Vanilla JS and all modern frameworks like React, Vue, Angular etc. |
| [Splide](https://splidejs.com)| Free, pure JS library for carousels and sliders |
## UI Components & Kits
>Not quite "frameworks", but tools for creating user interfaces with components or UI kits
| Website | Description |
| ----------------------- | ------------------ |
| [Bit](https://bit.dev/components)| Provides a huge library of reuseable UI Components for React, Angular, Vue, React Native. Also can be used for sharing UI Components among other team members |
| [UILang](http://uilang.com/)| A minimal, UI-focused programming language for web designers |
| [Medialoot CSS Components](https://medialoot.com/free-themes/css-components/)| Calendars, price grids and other UI components |
| [Froala Design Blocks](https://froala.com/design-blocks)| Over 170 responsive design blocks ready to be used in your web or mobile apps |
| [Mui Treasury](https://mui-treasury.com)| An open-source project that provides a collection of ready-to-use components based on Material-UI. |
| [Material Design For Bootstrap](https://fezvrasta.github.io/bootstrap-material-design/)| Open source toolkit for building material design with Bootstrap |
| [Photonkit](http://photonkit.com/)| Desktop UI library for Electron |
| [Flat UI](https://designmodo.github.io/Flat-UI/)| Minimal free user interface kit|
| [Shards](https://designrevision.com/downloads/shards/)| A free and modern UI toolkit for web makers based on Bootstrap |
| [Creative Tim](https://www.creative-tim.com/)| All types of UI libraries and kits including JS frameworks like React |
| [Brumm Shadow Maker](https://brumm.af/shadows)| An online tool to make css shadows|
| [AdminLTE](https://adminlte.io/)| Best open source admin dashboard & control panel theme|
| [SpinKit](https://tobiasahlin.com/spinkit/)| Simple CSS Spinners|
| [Epic Spinners](https://epic-spinners.epicmax.co/)| CSS spinners collection with Vue.js integration. |
| [Loading.io](https://loading.io/)| Online service provider for creating simple animations, spinners, progress bar and more |
| [Moving Letters](https://tobiasahlin.com/moving-letters/)| Animated Text with JavaScript and anime.js|
| [CSS Layout](https://csslayout.io/)| A collection of popular web layouts and patterns in pure CSS |
| [CSS Grid Generator](https://cssgrid-generator.netlify.app/)| An open-source project that allow users to quickly create dynamic layout based on CSS Grid. |
| [Codyhouse](https://codyhouse.co/)| Kick-start your web projects with CodyHouse's front-end framework and library of accessible HTML, CSS, JavaScript components |
| [Tailwind Starter Kit](https://github.com/creativetimofficial/tailwind-starter-kit)| Tailwind Starter Kit a beautiful extension for TailwindCSS, Free and Open Source |
| [Tailwindtoolbox](https://www.tailwindtoolbox.com/)| Open source starter templates and components, a plugins directory and useful tools/utilities to kick start your Tailwind CSS project. |
| [tailwindcomponents](https://tailwindcomponents.com/)| A free repository for community components using TailwindCSS |
| [sweetalert](https://sweetalert.js.org/)| SweetAlert makes popup messages easy and pretty. |
| [sweetalert2](https://sweetalert2.github.io/)| A beautiful, responsive, customizable, accessible replacement for javascript's popup boxes |
| [tailblocks](https://mertjf.github.io/tailblocks/)| Open source ready-to-use Tailwind CSS components. |
| [Soft Components](https://soft-components-docs.web.app/)| A set of framework-agnostic web components based on neumorphic design. |
| [Fast](https://www.fast.design/)| An interface system that can be used with modern Web Frameworks such as React, Vue and Angular. |
| [LottieFiles ](https://lottiefiles.com/)| Interactive animations in many formats like json,gif and mp4, libraries and plugins for Web & Mobile . |
| [Tailwindow ](https://component.tailwindow.com/)| Components created using Tailwind CSS utilities class, so it can be customized to make themes easily. |
| [Kutty](https://kutty.netlify.app/)| A set of accessible and reusable prebuilt Tailwind components that are commonly used in web applications. |
| [Tailwind Templates](https://tailwindtemplates.io/)| A free collection of Tailwindcss Templates - tailwind components for rapid UI development. |
| [Stitches](https://stitches.hyperyolo.com/)| An HTML template generator using functional css. |
| [Meraki UI Components](https://merakiui.com/)| Beautiful Tailwindcss components that support RTL languages & fully responsive based on Flexbox & CSS Grid. |
| [Daemonites Material Design For Bootstrap](https://http://daemonite.github.io/material/)| Daemonite's Material UI is a cross-platform and fully responsive front-end interface based on Google Material Design developed using Bootstrap 4 |
## React UI
>UI and component libraries for the React JavaScript framework
| Website | Description |
| ----------------------- | ------------------ |
| [Material UI](https://material-ui.com/)| React components for faster and easier web development, based on Material Design |
| [Chakra UI](https://chakra-ui.com/)| Build accessible React apps & websites with speed. [Openchakra](https://openchakra.app/) |
| [React Bootstrap](https://react-bootstrap.github.io/)| Bootstrap rebuilt for React. Include Bootstrap components right in your JavaScript |
| [ui-playbook](https://uiplaybook.dev/)| The documented collection of UI components |
| [ReactStrap](https://reactstrap.github.io/)| Another Bootstrap UI library for React |
| [React Admin](https://marmelab.com/react-admin/)| A frontend Framework for building admin applications. Supports API's out of the box|
| [BlueprintJS](https://blueprintjs.com/)| React-based UI toolkit for the web |
| [React Semantic UI](https://react.semantic-ui.com/)| UI components based off of the Semantic UI framework |
| [Shards React](https://designrevision.com/downloads/shards-react/)| React UI kit featuring a modern design system with dozens of custom components |
| [React Virtualized](https://bvaughn.github.io/react-virtualized)| UI set for data. Includes tables, lists, sorting, etc. |
| [React Toolbox](http://react-toolbox.io/#/)| Material design UI library for React |
| [Elastic UI](https://elastic.github.io/eui/#/)| Distributes UI React components and static assets for use in building web layouts |
| [React Desktop](http://reactdesktop.js.org/)| Desktop styled components in React. Includes MacOS and Windows based components |
| [Theme UI](https://theme-ui.com/home)| Build consistent, themeable React apps based on constraint-based design principles |
| [Onsen React](https://onsen.io/react/)| Distributes Components for hybrid mobile apps with React and Onsen UI |
| [Evergreen](https://evergreen.segment.com/)| Design system for React |
| [Rebass](https://rebassjs.org/)| React primitive UI components built with styled system |
| [Grommet](https://v2.grommet.io/)| mobile first UI component library |
| [Rimble](https://rimble.consensys.design/)| React design kit, library and guides |
| [Landing Page Template](https://github.com/cruip/open-react-template/)| Open source landing page template for react |
| [Elemental UI](http://elemental-ui.com/)| A UI Toolkit for React.js Websites and Apps |
| [Ant Design](https://ant.design/)| Open source design React UI library. |
| [Bumbag](https://bumbag.style/)| Bumbag is a friendly React UI Kit suitable for MVPs or large-scale applications. |
| [PRIMEREACT](https://www.primefaces.org/primereact/)| The ultimate collection of design-agnostic, flexible and accessible React UI Components |
| [Primer Components](https://primer.style/components/)| Primer Components are React components which implement GitHub's Primer Design System |
| [Orbit](https://orbit.kiwi/)| Design system and React UI components for travel projects. |
| [Base Web](https://baseweb.design/)| Base Web provides a robust suite of components out of the box |
| [Backpack UI](http://lonelyplanet.github.io/backpack-ui/?path=/story/styles--design-tokens)| Backpack is the Lonely Planet toolset that we use to build front end apps. |
| [Reaviz](https://reaviz.io)| Data visualization library for React based on D3 |
| [React Suite](https://rsuitejs.com/en/)| A suite of React components, sensible UI design, and a friendly development experience. |
| [React Spring](https://www.react-spring.io/)| Spring-physics based animation library for React applications. |
| [Recharts](http://recharts.org/en-US/)| A composable charting library built on React components. |
| [Vercel UI](https://github.com/geist-org/react) | Modern and minimalist React UI library |
| [Framer Motion](https://www.framer.com/motion/) | A React library to power production-ready animations. |
| [React Spectrum](https://react-spectrum.adobe.com/react-spectrum/index.html) | A React implementation of Spectrum, Adobe’s design system. |
| [React tsParticles](https://particles.matteobruni.it/)| A lightweight React component for creating particles |
| [particles-bg](https://github.com/lindelof/particles-bg)| A React particles animation background component |
| [Treact](https://treact.owaiskhan.me)| Gallery of free and modern React templates and UI components developed using TailwindCSS as the front-end framework |
| [OAH-Admin](https://gatsby-admin.paljs.com/extra-components/progress/)| a free React admin dashboard template based on Gatsby with oah-ui components and elements package. |
| [Carolina Admin Dashboard](https://demo.uifort.com/carolina-react-admin-dashboard-material-ui-free-demo/LandingPage)| Free React admin template is powered by Material-UI components framework and features a clean and fresh design following Google's Material Design specifications. |
| [Tabler](https://github.com/tabler/tabler-react)| Tabler is a free React admin dashboard template ideal for any kind of back-end web application. |
| [Sha-el-design](https://github.com/sha-el/sha-el-design)| React components for easier customization and smooth development flow. |
## Vue UI
>UI and component libraries for the Vue JavaScript framework
| Website | Description |
| ----------------------- | ------------------ |
| [Vuetify](https://vuetifyjs.com/en/)| Material design component framework |
| [Bootstrap Vue](https://bootstrap-vue.org/)| Use Bootstrap components with Vue |
| [Buefy](https://buefy.org/)| Lightweight UI components based on Bulma |
| [Semantic UI Vue](https://semantic-ui-vue.github.io)| Semantic UI Vue is the Vue integration for Semantic UI |
| [Quasar](https://quasar.dev/)| High-performance Material Design component suite with builders for SPA, SSR, PWA, Mobile (Cordova & Capacitor), Desktop (Electron) and Browser extensions |
| [Element](https://element.eleme.io/#/en-US)| Desktop UI library for Vue |
| [Fish UI](https://myliang.github.io/fish-ui/#/components/index)| Vue UI toolkit for the web |
| [Keen UI](https://josephuspaye.github.io/Keen-UI)| VueUI library with a simple API, inspired by Google's Material Design |
| [Onsen Vue](https://onsen.io/vue/)| Distributes Components for hybrid mobile apps with Vue and Onsen UI |
| [Vuejsexamples](https://vuejsexamples.com)| A nice collection of useful vuejs UI components |
| [Inkline](https://inkline.io)|Inkline is a modern UI/UX Framework for Vue.js designed for creating flawless responsive web applications |
| [Vuesax](https://vuesax.com/)|Unique and reusable UI components |
| [Antdv](https://antdv.com/)|UI library for Vue based on Ant Design |
| [Shards Vue](https://designrevision.com/downloads/shards-vue/)|A high-quality & free Vue UI kit featuring a modern design system with dozens of custom components |
| [Prime Vue](https://www.primefaces.org/primevue/)|Powerful yet simple to use, versatile, performant Vue UI Component Library to help you build stunning user interfaces.|
| [Chakra UI Vue](https://vue.chakra-ui.com/)|Chakra UI is a simple modular and accessible component library that gives you the building blocks to build Vue applications with speed.|
| [View UI](https://www.iviewui.com/)|Dozens of useful and beautiful Vue components made for people with all skill levels with extensive documentation.|
| [Particles.vue](https://particles.matteobruni.it/)| A lightweight Vue 2.x component for creating particles |
| [Particles.vue3](https://particles.matteobruni.it/)| A lightweight Vue 3.x component for creating particles |
| [TC Components](https://components.timos.design) | A library of high-quality ready to use components that will help you speed up your development workflow. |
| [Vant](https://youzan.github.io/vant) | Lightweight Mobile UI Components built on Vue. |
| [Equal UI](https://quatrochan.github.io/Equal/) | Open-source Vue 3 components system for your next project based on TypeScript |
## Design Systems & Style Guides
>Design systems, style guides, toolkits, docs. Some of these are design guides for top companies/websites
| Website | Description |
| ----------------------- | ------------------ |
| [Material Design](https://material.io/)| Google's Material Design |
| [Ant Design](https://ant.design/)| Design system for enterprise-level products |
| [Apple Design Resources](https://developer.apple.com/design/resources/)| Guides and templates for using Apple design and UI |
| [Primer](https://primer.style/)| Design, build, and create with GitHub’s design system |
| [Alta UI](https://www.oracle.com/webfolder/ux/middleware/alta/index.html)| Oracle's design system and toolkit |
| [Pulse](https://pulse.heartbeat.ua/)| Design system, guides and React component library |
| [Bolt](https://boltdesignsystem.com/)| Robust Twig and web component powered UI components |
| [Clarity Design System](https://clarity.design/)| UX guidelines, HTML/CSS framework, and Angular components |
| [AtlasKit](https://atlaskit.atlassian.com/)| Atlassian's official UI library, built according to the Atlassian Design Guidelines |
| [Audi Design Resources](https://www.audi.com/ci/en/guides/user-interface/introduction.html)| Audi UI design system and toolkit |
| [Carbon Design Systems](https://www.carbondesignsystem.com/)| Carbon is IBM’s open-source design system for products and experiences |
| [Yelp Style Guide](https://www.yelp.com/styleguide)| Yelp style guide, components and toolkit |
| [Comet](https://comet.discoveryeducation.com/)| Scalable design system of visual language, components, and design assets |
| [ETrade Design System](https://etrade.design/)| Guides and toolkits that blend finance with simplicity and ease of use |
| [Fundamental Library](https://sap.github.io/fundamental-styles/)| Open source and community driven project for consistent user interfaces|
| [Infor Design](https://design.infor.com/)| Guidelines and resources to create meaningful experiences for Infor’s products |
| [Lexicon](https://liferay.design/lexicon/)| An experience language for crafting beautiful UI |
| [Mailchimp UI/UX](https://ux.mailchimp.com/patterns/color)| Style guide and components from Mailchimp |
| [Marvel Style Guide](https://marvelapp.com/styleguide/overview/introduction)| Set of design principles and components |
| [Microsoft Fluent UI](https://developer.microsoft.com/en-us/fluentui#/)| Collection of UX frameworks from Microsoft |
| [Pluralsight Design System](https://design-system.pluralsight.com/)| Design guide with components for designing with Pluralsight |
| [Polaris](https://polaris.shopify.com/)| Design system that creates great experiences for all of Shopify’s merchants |
| [Mozilla Protocol](https://protocol.mozilla.org/)| Protocol is a design system for Mozilla and Firefox websites |
| [SendGrid Style Guide](http://styleguide.sendgrid.com/)| UI library for developing consistent UI/UX at SendGrid |
| [VTEX Styleguide](https://styleguide.vtex.com/)| Reusable patterns, components and assets related to product design in VTEX |
| [Rizzo](https://rizzo.lonelyplanet.com/styleguide/design-elements)| Style guide with UI components, JS components, widgets, etc |
| [Atomize](https://atomizecode.com/)| UI framework that helps developers collaborate with designers and build consistent user interfaces effortlessly |
| [StyleGuides.io](http://styleguides.io/)| A directory of 500+ styleguides |
| [Done Design System](https://uilibrary.github.io/done-design-system/)| Open source design system, guides & components |
| [Skoda Brand System](https://skoda-brand.com/explore-our-brand) | Design guideline for developing applications under the Skoda brand |
| [Spectrum](https://spectrum.adobe.com/) | Adobe’s design system that provides components and tools to help product teams work more efficiently, and to make Adobe’s applications more cohesive. |
| [Asphalt](https://asphalt.gojek.io/) | Gojek’s design language system. A collection of guidelines and components to create amazing user experiences. |
| [Laws of UX](https://lawsofux.com/) | A collection of the key maxims that designers must consider when building user interfaces. |
| [Checklist Design](https://www.checklist.design/) | Checklist Design is a curated list of checklists ranging from website pages, to UI components, all the way to branding assets. |
| [Humane By Design](https://humanebydesign.com/) | A resource that provides guidance for designing ethically humane digital products through patterns focused on user well-being. |
| [Pr1mer Guidelines](https://guidelines.pr1mer.tech) | An open source set of very general guidelines, inspired by Human Interface. Created and maintained by Pr1mer Tech |
## Online Design Tools
>All kinds of online tools for design, from photo editors to wireframing, and more
| Website | Description |
| ----------------------- | ------------------ |
| [Figma](https://www.figma.com/graphic-design-tool/)| Online graphic design tool (Free & paid options) |
| [Vectr](https://vectr.com/)| Free vector graphics software|
| [Taler](https://www.taler.app/)| Create social media banner designs in minutes from hundreds of customizable templates |
| [Canva](https://www.canva.com/)| Create beautiful designs (Free & Paid) |
| [Get Waves](https://getwaves.io/)| A free SVG wave generator to make unique SVG waves for web design |
| [Clippy](https://bennettfeely.com/clippy/)| Easy CSS clip-path maker |
| [Fancy Border Radius](https://9elements.github.io/fancy-border-radius/full-control.html)| Eight values specifying border-radius in CSS ( border-radius generator ) |
| [Wireframe.cc](https://wireframe.cc/)| Wireframing tool (free & paid) |
| [Fotor](https://www.fotor.com/)| Photo editor and design maker |
| [Pixlr](https://www.pixlr.com/)| Online photo editor |
| [Animoto Video Maker](https://animoto.com/apps/online-video-maker)| Make videos online |
| [RemoveBG](https://www.remove.bg/)| Remove image backgrounds |
| [Photo Creator](https://photos.icons8.com/creator)| Create your own photos instead of searching for stock |
| [Visme](https://www.visme.co/)| Create presentations, infographics and more |
| [Infogram](https://infogram.com/)| Create infograms |
| [ChartGo](https://www.chartgo.com/)| Create charts and graphs online |
| [Cartoon Photo](https://cartoon.pho.to/)| Turn photos into cartoons |
| [Whimsical](https://whimsical.com/)| Wireframes, diagrams and more (4 free) |
| [Whiteboard](https://witeboard.com/)| Online drawing tool |
| [Octopus](https://octopus.do/)| Sitemap builder |
| [CTA Button Maker](https://www.clickminded.com/button-generator/)| Create call to action buttons |
| [Blobmaker](https://www.blobmaker.app/)| Blobmaker is a free generative design tool, to help you quickly create random, unique, and organic-looking SVG shapes. |
| [Personas](https://personas.draftbit.com/)| A playful avatar generator for the modern age |
| [SoftUI](https://www.softui.io)| A Soft UI (neumorphism) CSS generator |
| [Photopea](https://www.photopea.com)| An Online Photoshop editor |
| [Excalidraw](https://excalidraw.com/)| Virtual whiteboard for sketching hand-drawn like diagrams |
| [Diagrams](https://www.diagrams.net/)| Diagram software and Flowchart maker |
| [MapInSeconds](http://mapinseconds.com/)| Simple way to visualize your data with a map |
| [Grid Malven](http://grid.malven.co/)| A css grid cheatsheet to reference when creating a css grid |
| [Flex Malven](http://flexbox.malven.co/)| A flexbox grid cheatsheet to reference when working with flexbox |
| [Smart Upscaler](https://icons8.com/upscaler) | Upscale images by 2-4x resolution |
| [GetAvataaars](https://getavataaars.com/) | Fun and Colorful free avatars web generator tool by Fang-Pen Lin using Pablo Stanley sketch library |
| [Big Heads](https://github.com/RobertBroersma/bigheads) | Easily generate avatars for your projects with Big Heads by Robert Broersma.
| [Webflow](https://webflow.com/) | Break the code barrier, Build better business websites, faster. Without coding. |
| [Trace](https://stickermule.com/trace) | Instantly remove the background from your photos |
| [Neumorphism.io](https://neumorphism.io/#55b9f3) | Generate Soft-UI CSS shadow code |
| [DB Designer](https://app.dbdesigner.net/) | Design your database for free online |
| [Ui Bakery](https://uibakery.io/) | Create full-fledged web apps visually |
| [Faux](http://knutsynstad.com/fauxcode/) | Turn real code into faux code |
| [Rive](https://rive.app/) | Real-time interactive design tool that allows you to design, animate, and immediately integrate your assets into any platform.
| [Unscreen](https://www.unscreen.com/) | Remove Video Background 100% Automatically and Free |
| [Kodeshot](https://www.kodeshot.net/) | Convert your source code into nice pictures for your articles, tweets, messages, posts... |
| [Wix](https://www.wix.com/) | Create a Website You’re Proud Of |
| [GTmetrix](https://gtmetrix.com/) | Website Speed and Performance Optimization |
| [Framer](https://www.framer.com/) | Is prototyping tool for teams |
| [Draw.io](https://www.draw.io/) | Free online diagram editor tool |
| [UXWing SVG Editor](https://uxwing.com/svg-icon-editor)| Creating and Edit SVG Online |
| [CSS Arrow](http://www.cssarrowplease.com/)| Create and export CSS code for a custom box with an arrow extending out from the side. Great for tooltips, flyouts and the like. |
| [Lucidchart](https://www.lucidchart.com/pages/)| Diagramming and visualization tools that allows creating databases, flowcharts, boards, floor-maps, and much more. 3 multi-page documents on the free tier |
| [Carbon](https://carbon.now.sh)| Create and share beautiful images of your source code by typing or drop a file. |
## Others
>Uncategorized Stuff
| Website | Description |
| -------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ |
| [everysize.kibalabs.com](https://everysize.kibalabs.com/) | Check your awesome responsive webpage looks great in every size |
| [Devhints.io](https://devhints.io/) | This is a modest collection of cheatsheets on Internet |
| [The Web Toolbox](https://thewebtoolbox.cc/)| A collection of handy, free-to-use tools for web developers, programmers and designers. |
| [WebDevTrick](https://webdevtrick.com/)| A famous blog for many amazing HTML, CSS, JQuery designs. |
| [css-tricks](https://css-tricks.com/)| Free CSS tricks and some unique ideas for beginners and advanced |
| [Material Design Resizer](https://material.io/resources/resizer/)| An interactive viewer that helps designers test material design breakpoints across desktop, mobile, and tablet |
| [Nodesign.dev](https://nodesign.dev) | A collection of tools for developers who have little to no artistic talent|
| [A11ygator](https://a11ygator.chialab.io/)| A web tool to scan websites against WCAG rules |
| [Commitizen](http://commitizen.github.io/cz-cli/)| Command line tool to formatted commit messages according to the standards |
| [CleanCss](https://www.cleancss.com/)| Tool For Code Formatter, Minifier, File Converter |
| [Tiny helpers](https://tiny-helpers.dev/)| A collection of free single-purpose online tools for web developers |
| [CSS Ribbon Generator](https://www.cssportal.com/css-ribbon-generator/)| This generator will assist in creating a pure CSS corner ribbon. |
| [Can I Use](https://caniuse.com/) | Check cross-browser compatibility of frontend technologies. |
| [kangax-js-compat-table](https://kangax.github.io/compat-table/es6/) | Check JavaScript versions (ES5, ES6, ES2016+ etc.) compatibility across different compilers, servers/runtimes and platforms (Desktop and Mobile).|
| [mydevice.io](https://www.mydevice.io/)| Most commonly used device resolutions including phones and tablets |
| [Codepen](https://codepen.io/) | Build, test and discover frontend code. |
| [Responsively](https://manojvivek.github.io/responsively-app/) | A tool for designers and frontend developers to design and debug their in all platforms with ease |
| [html2pdf.js](https://ekoopmans.github.io/html2pdf.js/) | Client-side HTML-to-PDF rendering using pure JS. |
| [CSS Reference](https://cssreference.io/) | A collection of all css properties and definitions in detail |
| [Critical Path CSS Generator](https://www.sitelocity.com/critical-path-css-generator) | Generate critical css for your web pages |
| [SVG Gobbler](https://github.com/rossmoody/svg-gobbler) | Browser extension to find SVGs on a webpage and download, copy to clipboard, or export as PNG. |
| [shortcode.dev](https://shortcode.dev) | A collection of useful snippets and code examples for HTML, CSS, JavaScript, Node, Artisan, Blade and more. |
| [PlayCode](https://playcode.io/) | Javascript playground. |
| [All The Tags](https://allthetags.com/) | All HTML tags briefly explained. |
| [Vue Telemetry](https://vuetelemetry.com/) | Reveal the Vue plugins and technology stack powering any website or explore a database of 5500+ websites. |
| [Grid.js](https://gridjs.io/) | Grid.js is a Free and open-source HTML table plugin written in TypeScript. It works with most JavaScript frameworks, including React, Angular, Vue and VanillaJs. |
| [Gerillass](https://gerillass.com/) | Gerillass is a website development tool built on top of Sass with a set of Sass mixins and functions for frontend developers to generate scalable CSS outputs. |
| [Sketchize](https://www.sketchize.com/) | Sketchize is built for UI/UX Designers to help them design lovely apps for mobile, tablet, and desktop devices. |
| [{CSS}Portal](https://www.cssportal.com/) | CSSPortal is home to a large range of CSS generators, tools and resources. |
| [DevDocs](https://devdocs.io/) | DevDocs combines multiple API documentations in a fast, organized, and searchable interface. |
| [papersizes](https://papersizes.io/) | The best resource for International Paper Sizes, Dimensions & Formats. |
| [Match Stick](https://matchstick.xyz/) | Visually compare your code and designs. Compare your mockups with your live website to pinpoint any missing details. |
| [flexboxfroggy](http://flexboxfroggy.com/) | Help Froggy and friends by writing CSS code! |
| [Designbetter Books](https://www.designbetter.co/books) | Essential reading on the practices that propel the best design teams forward. |
| [OverAPI](https://overapi.com/) | Collection Of All Cheat Sheets. |
| [Pageclip](https://pageclip.co/) | A server for your Static HTML forms |
| [Shields](https://shields.io) | Create badges with your own customization. |
| [williamsharkey](http://williamsharkey.com/Shapes.html) | Random SVG Graphic Generator |
| [Bootstrap CheatSheet](https://bootstrap-cheatsheet.themeselection.com/) | An interactive list of Bootstrap classes, variables, and mixins. The only Bootstrap CheatSheet you will ever need. |