{"id":66255,"url":"https://github.com/itzashoffcl/awesome-webdev-resources","name":"awesome-webdev-resources","description":"A curated list of useful websites and resources for web developers","projects_count":646,"last_synced_at":"2026-07-03T17:00:23.171Z","repository":{"id":251054316,"uuid":"836261145","full_name":"ItzAshOffcl/awesome-webdev-resources","owner":"ItzAshOffcl","description":"A curated list of useful websites and resources for web developers","archived":false,"fork":false,"pushed_at":"2024-11-22T11:42:34.000Z","size":534,"stargazers_count":206,"open_issues_count":10,"forks_count":25,"subscribers_count":6,"default_branch":"main","last_synced_at":"2026-06-16T02:02:43.121Z","etag":null,"topics":["awesome-list","awesome-webdev-resources","css","html","javascript","react","resources-for-web","useful-websites","web-dev-resources","web-development","web-development-resources","web-resources","webdev-resources","website-resources"],"latest_commit_sha":null,"homepage":"https://itzashoffcl.github.io/awesome-webdev-resources/","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ItzAshOffcl.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"contributing.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-07-31T13:28:56.000Z","updated_at":"2026-06-09T17:12:57.000Z","dependencies_parsed_at":"2024-08-14T08:25:59.339Z","dependency_job_id":"bfbd86f1-554f-4c0e-aa54-ef67592506f0","html_url":"https://github.com/ItzAshOffcl/awesome-webdev-resources","commit_stats":{"total_commits":23,"total_committers":4,"mean_commits":5.75,"dds":"0.13043478260869568","last_synced_commit":"70a9767f9a053e2a57f6c093fe67e5bd312b4227"},"previous_names":["itzashoffcl/awesome-webdev-resources"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ItzAshOffcl/awesome-webdev-resources","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ItzAshOffcl%2Fawesome-webdev-resources","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ItzAshOffcl%2Fawesome-webdev-resources/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ItzAshOffcl%2Fawesome-webdev-resources/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ItzAshOffcl%2Fawesome-webdev-resources/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ItzAshOffcl","download_url":"https://codeload.github.com/ItzAshOffcl/awesome-webdev-resources/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ItzAshOffcl%2Fawesome-webdev-resources/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35094077,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-03T02:00:05.635Z","response_time":110,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"created_at":"2024-09-25T01:46:40.989Z","updated_at":"2026-07-03T17:00:23.171Z","primary_language":null,"list_of_lists":false,"displayable":true,"categories":["Table of Contents"],"sub_categories":["Paid Hosting","Form Libraries","Placeholder Text","Animation Libraries","Video Libraries","Color Palettes","Image Tools","Color Tools","Font Pairing","Favicons","Placeholder Images","Free Hosting","Audio Libraries","File Libraries","Image Libraries","Email Libraries","Authentication Libraries","Scroll Animation Libraries","Color Libraries","Text Animation Libraries","Icon Libraries"],"readme":"# Awesome WebDev Resources [![Awesome](https://awesome.re/badge.svg)](https://awesome.re)\n\n\nThis repository curates a comprehensive list of useful websites and resources tailored for web developers. \n\nIf you like this repo, make sure to ⭐ it. \n\nPlease read [`contributing guidelines`](https://github.com/ItzAshOffcl/awesome-webdev-resources/blob/main/contributing.md) before submitting new resources.\n\nEnjoy! \u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Activities/Party%20Popper.png\" alt=\"Party Popper\" width=\"25\" height=\"25\" /\u003e \n\n---\n\n## Table of Contents\n\n- [Animations](#animations)\n- [API](#api)\n- [Audio](#audio)\n- [Authentication Providers](#authentication-providers)\n- [Background](#background)\n- [Border Radius](#border-radius)\n- [Buttons](#buttons)\n- [CDN](#cdn)\n- [Check Boxes](#check-boxes)\n- [Cheat Sheets](#cheat-sheets)\n- [Code Editors](#code-editors)\n- [Coding Challenge Platforms](#coding-challenge-platforms)\n- [Colors](#colors)\n    - [Color Palettes](#color-palettes)\n    - [Color Tools](#color-tools)\n- [CSS Filters](#css-filters)\n- [CSS Finder](#css-finder)\n- [CSS Games](#css-games)\n- [CSS Generators](#css-generators)\n- [Design Inspiration](#design-inspiration)\n- [Dev Tools](#dev-tools)\n- [Email Service Providers](#email-service-providers)\n- [Fonts](#fonts)\n    - [Font Pairing](#font-pairing)\n- [Form](#form)\n- [Hosting](#hosting)\n    - [Free Hosting](#free-hosting)\n    - [Paid Hosting](#paid-hosting)\n- [Icons](#icons)\n    - [Favicons](#favicons)\n- [Illustrations](#illustrations)\n- [Images](#images)\n    - [Image Tools](#image-tools)\n- [JS Libraries](#js-libraries)\n    - [Animation Libraries](#animation-libraries)\n    - [Audio Libraries](#audio-libraries)\n    - [Authentication Libraries](#authentication-libraries)\n    - [Color Libraries](#color-libraries)\n    - [Email Libraries](#email-libraries)\n    - [File Libraries](#file-libraries)\n    - [Form Libraries](#form-libraries)\n    - [Icon Libraries](#icon-libraries)\n    - [Image Libraries](#image-libraries)\n    - [Scroll Animation Libraries](#scroll-animation-libraries)\n    - [Text Animation Libraries](#text-animation-libraries)\n    - [Video Libraries](#video-libraries)\n- [Learning Platforms](#learning-platforms)\n- [Loaders](#loaders)\n- [Placeholders](#placeholders)\n    - [Placeholder Images](#placeholder-images)\n    - [Placeholder Text](#placeholder-text)\n- [Responsiveness Checker](#responsiveness-checker)\n- [Scroll Bars](#scroll-bars)\n- [Shadows](#shadows)\n- [SVGs](#svgs)\n- [Templates](#templates)\n- [UI Components](#ui-components)\n- [UI Libraries](#ui-libraries)\n- [Videos](#videos)\n- [Web Optimization Tools](#web-optimization-tools)\n- [YouTube Channels](#youtube-channels)\n\n\u003cbr\u003e\n\n\u003chr /\u003e\n\n# Animations\n\n| Website | Description |\n|---------|-------------|\n| [Animista](https://animista.net/) | Create and customize CSS animations with an easy-to-use tool. |\n| [Cubic Bezier](https://cubic-bezier.com/#.17,.67,.83,.67) | Visualize and generate smooth cubic bezier curves for CSS animations. |\n| [Animate](https://animate.style/) | Access a library of over 70 CSS animations, including fade, slide, bounce, and rotate. |\n| [Codepen Animations](https://codepen.io/tag/web-animations) | Discover a collection of CSS animations created by the CodePen community. |\n| [WAIT! Animate](https://waitanimate.wstone.uk/) | Create CSS animations with animation delays using a straightforward online tool. |\n| [Stylie](https://jeremyckahn.github.io/stylie/) | Preview and create CSS animations with an intuitive web application. |\n| [cssfx](https://cssfx.netlify.app/) | A collection of carefully crafted CSS animations focused on simplicity and ease of use. |\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#table-of-contents\"\u003e[🡅 back to top]\u003c/a\u003e\u003c/p\u003e\n\n# API\n\n| Website | Description |\n|---------|-------------|\n| [RapidAPI](https://rapidapi.com) | Discover and connect to thousands of APIs across various categories with ease. |\n| [APIs List](https://apislist.com/) | Find a comprehensive directory of free APIs for different categories and uses. |\n| [Free Public APIs](https://www.freepublicapis.com/) | A Collection of free public APIs with daily consistency and monitoring checks. |\n| [Public APIs](https://publicapis.dev/) | Explore a collection of public APIs for diverse purposes and services. |\n| [APIs.guru](https://apis.guru/) | Access a repository of machine-readable API definitions for various APIs. |\n| [Any-API](https://any-api.com/) | Browse a database of public APIs for integration with various applications and services. |\n\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#table-of-contents\"\u003e[🡅 back to top]\u003c/a\u003e\u003c/p\u003e\n\n# Audio\n\n| Website | Description |\n|---------|-------------|\n| [Online Audio Converter](https://online-audio-converter.com/) | Convert audio files to various formats quickly and easily. |\n| [CloudConvert Audio Converter](https://cloudconvert.com/audio-converter) | Convert audio files to various formats quickly and efficiently online. |\n| [MP3 Smaller](https://www.mp3smaller.com/) | Compress MP3 files to reduce their size without losing quality. |\n| [Audio Trimmer](https://audiotrimmer.com/) | Easily trim and cut your audio files online. |\n| [TwistedWave](https://twistedwave.com/online) | An online audio editor for recording, editing, and mastering audio files. |\n| [Bear Audio Tool](https://www.bearaudiotool.com/) | Edit, cut, merge, and convert audio files directly in your browser. |\n| [Online MP3 Cutter](https://mp3cut.net/) | Cut and trim MP3 files quickly and easily online. |\n| [Audio Joiner](https://audio-joiner.com/) | Join multiple audio files into one seamlessly. |\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#table-of-contents\"\u003e[🡅 back to top]\u003c/a\u003e\u003c/p\u003e\n\n# Authentication Providers\n\n| Website | Description |\n|---------|-------------|\n| [Clerk](https://clerk.com/) | A complete user management solution for authentication, including sign-up, sign-in, and user profiles. |\n| [Firebase Authentication](https://firebase.google.com/docs/auth/0) | Provides backend services for easy-to-use authentication, including email, password, and social logins. |\n| [Auth0](https://auth0.com/) | A platform that provides authentication and authorization services. |\n| [Corbado](https://corbado.com/) | Provides secure and easy-to-implement authentication solutions for web and mobile applications. |\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#table-of-contents\"\u003e[🡅 back to top]\u003c/a\u003e\u003c/p\u003e\n\n# Background\n\n| Website | Description |\n|---------|-------------|\n| [WWeb.dev](https://wweb.dev/resources/animated-css-background-generator) | An online tool for generating and customizing animated CSS backgrounds for websites. |\n| [BGJar](https://bgjar.com/) | Provides customizable background patterns and textures for web design. |\n| [SVG Backgrounds](https://www.svgbackgrounds.com) | A collection of customizable SVG backgrounds for enhancing website aesthetics. |\n| [Fffuel](https://www.fffuel.co/) | A platform for discovering and sharing design resources, tools, and assets. |\n| [Animated Backgrounds](https://animatedbackgrounds.me/) | Offers animated backgrounds and effects to enhance visual appeal and user engagement. |\n| [Super Designer](https://superdesigner.co/) | A curated collection of design resources, tools, and inspiration for creating stunning digital experiences. |\n| [Ibelick BG](https://bg.ibelick.com/) | A collection of modern background designs crafted with Tailwind CSS and Vanilla CSS. |\n\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#table-of-contents\"\u003e[🡅 back to top]\u003c/a\u003e\u003c/p\u003e\n\n# Border Radius\n\n| Website | Description |\n|---------|-------------|\n| [Fancy Border Radius](https://9elements.github.io/fancy-border-radius/) | A tool for creating and visualizing complex border-radius CSS values with live previews. |\n| [Border Radius](https://border-radius.com/) | Generates and visualizes CSS border-radius values to create rounded corners for web elements. |\n| [Border Radius Online](https://borderradius.online/) | A comprehensive tool for generating and previewing CSS border-radius values with advanced options. |\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#table-of-contents\"\u003e[🡅 back to top]\u003c/a\u003e\u003c/p\u003e\n\n\n# Buttons\n\n| Website | Description |\n|---------|-------------|\n| [CSS Scan: Buttons](https://getcssscan.com/css-buttons-examples) | A collection of over 90 stylish CSS button designs that are easy to copy and use. |\n| [Butn](https://butn.one/) | A free collection of CSS buttons with various styles and animations for easy customization. |\n| [ClickMinded Button Generator](https://www.clickminded.com/button-generator/?srsltid=AfmBOooTCk96KgbntMJ0X_ubXPW_N5t6qLpVuf89I8fybDlmkSa6CP6Y) | Create customizable buttons with various styles and get the CSS code with this user-friendly tool. |\n| [Button Optimizer](https://buttonoptimizer.com/) | Optimize and customize buttons with different styles and effects, generating CSS code. |\n| [HTML CSS Button Generator](https://www.htmlcssbuttongenerator.com/css-button-generator.php) | Generate CSS buttons with various styles, colors, and effects for easy integration into web projects. |\n| [MaxButtons](https://maxbuttons.com/button-generator/) | Design and customize CSS buttons with a range of styles and get the generated CSS code. |\n| [Marko Denic Button Generator](https://markodenic.com/tools/buttons-generator/) | Create and customize buttons with a variety of styles and effects, and obtain the CSS code. |\n| [Best CSS Button Generator](https://www.bestcssbuttongenerator.com/) | Generate stylish CSS buttons with various customization options and download the CSS code. |\n| [CSS Buttons](https://cssbuttons.app/) | A collection of customizable CSS button designs and styles with easy-to-copy code. |\n| [Ibelick Buttons](https://buttons.ibelick.com/) | A collection of Tailwind CSS buttons designed to enhance your website's look. |\n\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#table-of-contents\"\u003e[🡅 back to top]\u003c/a\u003e\u003c/p\u003e\n\n# CDN\n\n| Website | Description |\n|---------|-------------|\n| [Staticfile](http://www.staticfile.org/) | A CDN hosting a wide range of static files for web development, including libraries and frameworks. |\n| [BootCSS CDN](http://www.bootcdn.cn/) | A CDN offering fast and reliable access to popular front-end libraries and frameworks. |\n| [CDNJS](https://cdnjs.com/) | A popular CDN hosting a large collection of open-source JavaScript libraries and CSS frameworks. |\n| [jQuery CDN](http://code.jquery.com/) | The official CDN for jQuery, providing reliable access to jQuery libraries. |\n| [JSDelivr](http://www.jsdelivr.com/) | A free, fast, and reliable CDN providing access to a wide range of open-source libraries and assets. |\n| [Statically](https://statically.io/) | A CDN that provides fast and reliable delivery of open-source assets and static files. |\n| [UNPKG](https://unpkg.com/) | A fast, global content delivery network for everything on npm, providing easy access to packages. |\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#table-of-contents\"\u003e[🡅 back to top]\u003c/a\u003e\u003c/p\u003e\n\n# Check Boxes\n\n| Website | Description |\n|---------|-------------|\n| [CSS Scan: CSS Checkboxes Examples](https://getcssscan.com/css-checkboxes-examples) | A curated collection showcasing creative and customizable CSS styles for checkboxes. |\n| [CSS Checkbox Generator](http://csscheckbox.com/css-checkbox-generator.php) | A tool for generating and customizing CSS checkboxes with various styles and effects. |\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#table-of-contents\"\u003e[🡅 back to top]\u003c/a\u003e\u003c/p\u003e\n\n\n# Cheat Sheets\n\n| Website |\n|---------|\n| [HTML Cheat Sheet](https://quickref.me/html) | \n| [CSS Cheat Sheet](https://css-tricks.com/almanac/) |\n| [Tailwind CSS Cheat Sheet](https://www.creative-tim.com/twcomponents/cheatsheet) |\n| [Sass Cheat Sheet](https://devhints.io/sass) |\n| [Bootstrap Cheat Sheet](https://hackerthemes.com/bootstrap-cheatsheet/) |\n| [JavaScript Cheat Sheet](https://quickref.me/javascript) |\n| [TypeScript Cheat Sheet](https://cheatsheetindex.com/typescript-cheat-sheet/) |\n| [ES6 Cheat Sheet](https://quickref.me/es6) |\n| [React Cheat Sheet](https://devhints.io/react) |\n| [Angular Cheat Sheet](https://v17.angular.io/guide/cheatsheet) |\n| [Vue.js Cheat Sheet](https://devhints.io/vue) |\n| [Node.js Cheat Sheet](https://cheatsheetindex.com/node-js-cheat-sheet/) |\n| [Express Cheat Sheet](https://quickref.me/express) |\n| [SQL Cheat Sheet](https://quickref.me/mysql) | \n| [MongoDB Cheat Sheet](https://quickref.me/mongodb) | \n| [PostgreSQL Cheat Sheet](https://quickref.me/postgres ) | \n| [PHP Cheat Sheet](https://quickref.me/php) |\n| [JSON Cheat Sheet](https://quickref.me/json) |\n| [HTTP Status Code Cheet Sheet](https://quickref.me/http-status-code) |\n| [Python Cheat Sheet](https://www.pythoncheatsheet.org/) |\n| [GraphQL Cheat Sheet](https://quickref.me/graphql) |\n| [Git Cheat Sheet](https://quickref.me/git) | \n| [Bash Cheat Sheet](https://quickref.me/bash) |\n| [Regex Cheat Sheet](https://quickref.me/regex) | \n| [Emmet Cheat Sheet](https://quickref.me/emmet) |\n\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#table-of-contents\"\u003e[🡅 back to top]\u003c/a\u003e\u003c/p\u003e\n\n# Code Editors\n\n| Website | Description |\n|---------|-------------|\n| [CodePen](https://codepen.io) | An online community for testing and showcasing user-created HTML, CSS, and JavaScript code snippets. |\n| [VS Code Dev](https://vscode.dev/) | A lightweight version of Visual Studio Code that runs in the browser for quick code editing tasks. |\n| [CodeSandbox](https://codesandbox.io/) | An online code editor and prototyping tool for building web applications in a sandboxed environment. |\n| [StackBlitz](https://stackblitz.com/?starters=frontend) | Online IDE for web applications with starter templates and real-time collaboration features. |\n| [OneCompiler](https://onecompiler.com/) | Online compiler and IDE to compile and execute code snippets in various programming languages. |\n\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#table-of-contents\"\u003e[🡅 back to top]\u003c/a\u003e\u003c/p\u003e\n\n# Coding Challenge Platforms\n\n| Website | Description |\n|---------|-------------|\n| [DevChallenges](https://devchallenges.io) | Coding challenges to improve and showcase your skills. |\n| [Frontend Mentor](https://frontendmentor.io) | Real-world front-end challenges to improve coding skills. |\n| [Frontend Practice](https://www.frontendpractice.com) | Practice building projects with real-world front-end challenges. |\n| [CSS Challenges](https://css-challenges.com) | Practice CSS through a series of design challenges. |\n| [100 Days CSS](https://100dayscss.com) | Learn CSS by completing one challenge every day for 100 days. |\n| [JS Challenger](https://www.jschallenger.com) | Practice JavaScript coding challenges and improve your skills. |\n| [LeetCode](https://leetcode.com) | Platform offering coding challenges and interview preparation resources. |\n| [HackerRank](https://hackerrank.com) | Coding challenges and competitions to help improve coding skills and prepare for interviews. |\n| [CodeChef](https://codechef.com) | A competitive programming platform that hosts contests and practice problems. |\n| [Coding Ninjas](https://www.codingninjas.com) | Platform offering coding courses and practice problems. |\n| [Codewars](https://www.codewars.com/) | A platform for coding challenges and improving programming skills through practice. |\n| [CodinGame](https://www.codingame.com/start) | Learn programming through fun and interactive coding games. |\n| [Coderbyte](https://coderbyte.com) | Coding challenges and interview prep for developers. |\n| [Exercism](https://exercism.org) | Practice coding and receive mentorship on various programming languages. |\n| [Codeforces](https://codeforces.com) | A site for competitive programming contests and practice problems. |\n| [Codementor Projects](https://www.codementor.io/projects) | Projects for developers to build, improve skills, and get feedback. |\n| [Codepip](https://codepip.com) | Learn to code by playing games and solving puzzles. |\n| [Edabit](https://edabit.com) | Solve bite-sized coding challenges to practice and improve your skills. |\n| [JSRobot](https://lab.reaal.me/jsrobot/) | Solve puzzles by writing JavaScript code to control a robot. |\n| [Divize](https://divize.io/challenges) | Solve coding challenges and learn new concepts through practice. |\n| [Code Combat](https://codecombat.com) | Learn programming through engaging and interactive games and challenges. |\n| [CodeGym](https://codegym.cc) | Online Java programming course with coding challenges and games. |\n| [CodeAbbey](https://www.codeabbey.com) | Solve programming problems and challenges for various skill levels. |\n\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#table-of-contents\"\u003e[🡅 back to top]\u003c/a\u003e\u003c/p\u003e\n\n# Colors\n\n### Color Palettes\n\n| Website | Description |\n|---------|-------------|\n| [Coolors](https://coolors.co/) | A color scheme generator that helps you create beautiful palettes. |\n| [Color Hunt](https://colorhunt.co/) | A curated collection of color palettes for design inspiration. |\n| [ColorSpace](https://mycolor.space/) | Create and inspect color gradients, with the ability to generate CSS code. |\n| [Realtime Colors](https://www.realtimecolors.com/?colors=050315-fbfbfe-2f27ce-dedcff-433bff\u0026fonts=Poppins-Poppins) | A platform that provides live, dynamic color displays or updates in real-time. |\n| [UiGradients](https://uigradients.com/) | Browse and download a collection of beautiful color gradients. |\n| [AiColors](https://aicolors.co/) | A tool that generates color palettes using AI, allowing designers and developers to explore unique color schemes for their projects. |\n| [0to255](https://0to255.com) | A tool for finding lighter and darker color variations. |\n| [Open Color](https://yeun.github.io/open-color/) | A color scheme optimized for UI design. |\n| [ColorMagic](https://colormagic.app/) | Generate harmonious color schemes. |\n| [Flat UI Colors](https://flatuicolors.com/) | A collection of color palettes inspired by flat UI design. |\n| [Happy Hues](https://www.happyhues.co/) | A curated collection of color palettes with examples. |\n| [Khroma](https://www.khroma.co/) | AI-based color palette generator. |\n| [Color Claim](https://vanschneider.com/colors) | Curated color palettes by Tobias van Schneider. |\n| [Color Palettes](https://colorpalettes.net/) | A variety of color palettes for design inspiration. |\n| [Culrs](https://culrs.com/) | A simple way to find and use color palettes. |\n| [Eva Colors](https://colors.eva.design/) | A color system for products. |\n| [Farbvelo](https://farbvelo.elastiq.ch/) | A tool for generating color palettes. |\n| [Muzli Colors](https://colors.muz.li/) | Discover beautiful color combinations. |\n| [Paletton](https://paletton.com/) | Color scheme designer for creating color palettes. |\n| [Pigment by ShapeFactory](https://pigment.shapefactory.co/) | A tool for generating harmonious color palettes. |\n| [Picular](https://picular.co/) | A color search engine using images from Google. |\n| [Color-Hex](https://color-hex.com/) | A tool for finding hex color codes and their variations. |\n| [Color Adobe](https://color.adobe.com/) | A comprehensive color tool by Adobe for creating, exploring, and saving color palettes. |\n| [HTML Color Codes](https://htmlcolorcodes.com/) | A resource for finding and using HTML color codes in web development. |\n| [Colors Inspo](https://colorsinspo.com/) | A collection of color palettes and gradients for design inspiration. |\n| [Colorion](https://www.colorion.co/) | Color inspiration and tools for designers. |\n| [Gradientos](https://www.gradientos.app/) | A tool for generating beautiful CSS gradients. |\n| [Egg Gradients](https://www.eggradients.com/) | A collection of colorful gradients for use in design projects. |\n| [Branition Colors](https://branition.com/colors) | A collection of color palettes inspired by brands. |\n| [Colourco.de](http://colourco.de) | A tool for creating and sharing color palettes. |\n| [Flat UI Color Picker](http://www.flatuicolorpicker.com/) | A tool for finding flat UI colors. |\n| [Conic Style](https://www.conic.style/) | A tool for creating and visualizing conic gradients for your web projects. |\n\n### Color Tools\n\n| Website | Description |\n|---------|-------------|\n| [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) | For evaluating and ensuring adequate color contrast in web design to improve accessibility. |\n| [Coolors Contrast Checker](https://coolors.co/contrast-checker) | Check color contrast for accessibility. |\n| [Who Can Use](https://www.whocanuse.com/) | A tool to check color contrast accessibility for different visual impairments. |\n| [CSS Gradient](https://cssgradient.io/) | An online tool for easily creating and generating CSS gradient source code. |\n| [W3Schools Color Picker](https://w3schools.com/colors/colors_picker.asp) | An online color picker tool with various functionalities. |\n| [Color Thief](http://lokeshdhakar.com/projects/color-thief/) | A tool for extracting dominant colors from images. |\n\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#table-of-contents\"\u003e[🡅 back to top]\u003c/a\u003e\u003c/p\u003e\n\n\n# CSS Filters\n\n| Website | Description |\n|---------|-------------|\n| [Just Code Today - Filters](https://justcode.today/filters/) | Collection of CSS filters and effects for websites. |\n| [CSS Filters](https://www.cssfilters.co/) | Gallery of CSS filter effects with live previews and code snippets. |\n| [CSS Filter Generator](https://www.cssfiltergenerator.com/) | Tool for creating and applying CSS filters with live previews. |\n| [CSS Color Filter Generator](https://angel-rs.github.io/css-color-filter-generator/) | Tool to generate CSS color filters. |\n| [CSS Filter](https://css-filter.netlify.app/) | Simple tool for applying and previewing CSS filters. |\n| [Instagram.css](https://github.com/picturepan2/instagram.css) | Collection of Instagram-like CSS filter effects. |\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#table-of-contents\"\u003e[🡅 back to top]\u003c/a\u003e\u003c/p\u003e\n\n# CSS Finder\n\n| Website | Description |\n|---------|-------------|\n| [CSS Stats](https://cssstats.com/) | Analyzes stylesheets, providing insights and statistics on CSS properties and selectors. |\n| [CSS Scan](https://getcssscan.com/) | Inspects and copies CSS styles from any website for easy design replication. |\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#table-of-contents\"\u003e[🡅 back to top]\u003c/a\u003e\u003c/p\u003e\n\n# CSS Games\n\n\n| Website | Description |\n|---------|-------------|\n| [CSS Battle](https://cssbattle.dev/) | A fun game where you write CSS code to replicate target images as closely as possible. |\n| [CSS Diner](https://flukeout.github.io/) | A fun and interactive way to learn how to select elements on a web page using CSS. |\n| [CSS Grid Garden](https://cssgridgarden.com/) | A web-based game that teaches you how to use CSS Grid to create complex grid layouts. |\n| [CSS Grid Attack](https://codingfantasy.com/games/css-grid-attack) | An interactive game to learn CSS Grid. |\n| [Flexbox Froggy](https://flexboxfroggy.com/) | An interactive game for learning CSS Flexbox. |\n| [Flexbox Defense](http://www.flexboxdefense.com/) | A web-based game for learning CSS Flexbox through interactive gameplay. |\n| [Flexbox Adventure](https://codingfantasy.com/games/flexboxadventure) | A fun way to master Flexbox through an adventure game. |\n| [Knights of the Flexbox Table](https://knightsoftheflexboxtable.com/) | A set of challenges using Flexbox properties to position and align elements in a medieval-themed game layout. |\n| [Flexbox Zombies](https://mastery.games/flexboxzombies/) | An interactive game where you learn Flexbox by battling zombies. |\n\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#table-of-contents\"\u003e[🡅 back to top]\u003c/a\u003e\u003c/p\u003e\n\n# CSS Generators\n\n| Website | Description |\n|---------|-------------|\n| [Copy \u0026 Paste CSS](https://copy-paste-css.com/) | Collection of CSS styles for buttons, shadows, color palettes, etc. |\n| [CSS Portal](https://www.cssportal.com/) | CSS-related resources, tutorials, and tools. |\n| [CodePen](https://codepen.io/) | Online community for HTML, CSS, and JavaScript code snippets. |\n| [10015.io](https://10015.io/) | Essential tools for web development. |\n| [Unused CSS](https://unused-css.com/) | Various CSS generators in one place. |\n| [WebCode Tools](https://webcode.tools/) | Collection of web development tools and utilities. |\n| [EnjoyCSS](https://enjoycss.com/) | CSS3 code generator for text effects, gradients, and buttons. |\n| [Code Magic](https://code-magic.vercel.app/) | CSS code generator for visually creating complex CSS. |\n| [CSS Generator](https://cssgenerator.org/) | Tools for generating CSS code, including gradients and shadows. |\n| [Front-End Tools](https://front-end-tools.com/) | Curated list of tools and resources for front-end developers. |\n| [HTML-CSS-JS](https://html-css-js.com/) | Tools and generators for HTML, CSS, and JavaScript. |\n| [Toptal CSS3 Maker](https://www.toptal.com/developers/css3maker) | Generate CSS3 code for various effects and styles. |\n| [Angry Tools](https://angrytools.com/) | Various CSS generators and tools for web development. |\n| [Layout It!](https://grid.layoutit.com/) | Design web layouts visually with CSS Grid. |\n| [Glassmorphism CSS Generator](https://markodenic.com/tools/glassmorphism-css-generator/) | Generate CSS for glassmorphism effects. |\n| [CSS Generators](https://css-generators.com/) | Collection of CSS generators for various effects. |\n| [WebCode CSS Generator](https://webcode.tools/css-generator) | Generate CSS code for various elements and effects. |\n| [CSS Generator](https://css-generator.netlify.app/) | Generate CSS code with an easy-to-use interface. |\n| [CSS3 Generator](https://css3generator.com/) | Generate CSS3 code for various styles and effects. |\n| [CSS Generator PL](https://cssgenerator.pl/) | A tool for generating various CSS styles and effects. |\n| [LazyCode](https://lazycode.io/) | contains a collection of CSS generators for free |\n| [CSS Formalize](https://www.cssformalize.com/) | A CSS tool/framework for effortless customization of native HTML forms. |\n| [Clippy](https://bennettfeely.com/clippy/) | A tool for creating and customizing CSS clip-path shapes. |\n\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#table-of-contents\"\u003e[🡅 back to top]\u003c/a\u003e\u003c/p\u003e\n\n# Design Inspiration\n\n| Website | Description |\n|---------|-------------|\n| [Awwwards](https://www.awwwards.com/) | Recognizes top web designers, developers, and agencies. |\n| [Best Website Gallery](https://bestwebsite.gallery/) | Showcases the best websites for design inspiration. |\n| [Dark Mode Design](https://www.darkmodedesign.com/) | Curates dark mode design examples for inspiration. |\n| [Minimal Gallery](https://minimal.gallery/) | A curated collection of beautiful \u0026 functional websites for design inspiration. |\n| [A Fresh Website](https://a-fresh.website/) | A curated gallery of out-of-this-world design inspiration from across the web. |\n| [Refero Design](https://refero.design/) | Showcases a curated collection of exceptional websites and UI elements designs. |\n| [Stacksorted](https://stacksorted.com/buttons) | A collection of beautifully designed UI elements for web projects. |\n| [Seesaw](https://www.seesaw.website/) | A platform showcasing the latest web design trends and examples. |\n| [Webframe](https://webframe.xyz/) | Discover and compare over 1500 website designs. |\n| [SiteInspire](https://www.siteinspire.com/) | Showcases the finest web and interactive design. |\n| [Godly](https://godly.website) | Curated gallery of landing page designs for inspiration. |\n| [Landings.dev](https://landings.dev/) | Collection of landing pages for inspiration and learning. |\n| [Landingfolio](https://www.landingfolio.com/) | Curated collection of landing pages for design inspiration. |\n| [Landingly](https://landingly.co/) | The ultimate inspiration source collections for landing pages. |\n| [Land Book](https://land-book.com/) | Gallery of the best landing page designs by type and industry. |\n| [Page Collective](https://pagecollective.com/) | Curated collection of website designs and templates. |\n| [Httpster](https://httpster.net) | Showcase of web designs and trends. |\n| [Dribbble](https://dribbble.com) | Platform for designers to showcase their work. |\n| [One Page Love](https://onepagelove.com) | Collection of one-page website designs. |\n| [Behance](https://www.behance.net) | Online portfolio platform for creative work. |\n| [Codrops](https://tympanus.net/codrops) | Collection of design tutorials and web design inspiration. |\n| [Browsing Mode](https://browsingmode.com/) | Curates a collection of unique and creative websites for inspiration.  |\n| [Landing Love](https://www.landing.love/) | A showcase of beautifully designed animation websites. |\n| [Lapa Ninja](https://www.lapa.ninja/) | A curated gallery of the best landing pages for design inspiration. |\n\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#table-of-contents\"\u003e[🡅 back to top]\u003c/a\u003e\u003c/p\u003e\n\n# Dev Tools\n\n| Website | Description |\n|---------|-------------|\n| [SmallDev.Tools](https://smalldev.tools/) | Collection of simple, handy tools for developers. |\n| [BeautifyTools](https://beautifytools.com/) | Online tools to beautify and minify code. |\n| [Transform Tools](https://transform.tools/) | Tools for transforming code snippets. |\n| [Code Beautify](https://codebeautify.org/) | Online tools for code beautification and conversion. |\n| [Free Formatter](https://www.freeformatter.com/) | Collection of free online formatting tools. |\n| [JSONing](https://jsoning.com/) | Collection of free online JSON tools. |\n| [OverAPI Developer Tools](https://overapi.com/developer-tools) | Aggregated collection of useful developer tools. |\n| [OnlineTools](https://onlinetools.com/) | Various online tools for web developers and designers. |\n| [Node.js (V8) --inspector Manager](https://nim.june07.com/) | A streamlined extension for V8 JavaScript debugging with pluggable DevTools and multi-session debugging management.|\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#table-of-contents\"\u003e[🡅 back to top]\u003c/a\u003e\u003c/p\u003e\n\n# Email Service Providers\n\n| Website | Description |\n|---------|-------------|\n| [SendGrid](https://sendgrid.com/) | Cloud-based SMTP provider for reliable email delivery. |\n| [Mailgun](https://www.mailgun.com/) | Email automation service for sending, receiving, and tracking emails. |\n| [SMTP2GO](https://www.smtp2go.com/) | Reliable SMTP service with advanced reporting and analytics. |\n| [Supabase](https://supabase.com/docs/guides/functions/examples/send-emails) | Serverless functions for sending emails, integrated with database and authentication services. |\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#table-of-contents\"\u003e[🡅 back to top]\u003c/a\u003e\u003c/p\u003e\n\n# Fonts\n\n| Website | Description |\n|---------|-------------|\n| [Google Fonts](https://fonts.google.com/) | Vast library of free and open-source fonts. |\n| [Font Squirrel](https://www.fontsquirrel.com/) | Download free and premium fonts. |\n| [DaFont](https://www.dafont.com/) | Browse and download a massive collection of free fonts. |\n| [1001 Fonts](https://www.1001fonts.com) | Large collection of free fonts. |\n| [Befonts](https://befonts.com) | Free fonts for designers and developers. |\n| [Fontesk](https://fontesk.com) | Free fonts for personal and commercial use. |\n| [Fontshare](https://www.fontshare.com) | Free fonts service from ITF. |\n| [Type Scale](https://type-scale.com) | Tool for generating modular type scales. |\n| [Adobe Fonts](https://fonts.adobe.com/) | Vast library of high-quality fonts. |\n| [FontMirror](https://www.fontmirror.com/) | Free fonts for download. |\n| [FontSpace](https://fontspace.com) | Discover and download fonts for various uses. |\n| [FFonts](https://ffonts.net) | Collection of free and commercial fonts. |\n| [Font Fabric](https://www.fontfabric.com) | Unique and high-quality fonts. |\n| [Urban Fonts](https://urbanfonts.com) | Browse a wide range of free and commercial fonts. |\n| [Fonts Bunny](https://fonts.bunny.net) | Free fonts for web and print projects. |\n| [Fonts2U](https://fonts2u.com/index.html) | Download free fonts and font families. |\n| [MyFonts](https://www.myfonts.com/) | Extensive collection of commercial fonts. |\n| [IconPark](https://github.com/lvwzhen/iconpark) | Open-source icon library. |\n| [Brick](https://brick.im/) | A collection of unique and stylish fonts. |\n| [CDN Fonts](https://www.cdnfonts.com/) | A free platform to download or use fonts directly via CDN. |\n\n### Font Pairing\n\n| Website | Description |\n|---------|-------------|\n| [Fontpair](https://www.fontpair.co/) | Discover and pair complementary fonts. |\n| [Fontjoy](https://fontjoy.com/) | Generate font pairings based on style preferences. |\n| [MixFont](https://www.mixfont.com/) | Visualize font pairings in real time. |\n| [Monotype Font Pairing](https://www.monotype.com/font-pairing#/playground?fontPair1=NimbusRomNo9T-Reg\u0026fontPair2=Classic%20Grotesque) | Interactive font pairing tool. |\n\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#table-of-contents\"\u003e[🡅 back to top]\u003c/a\u003e\u003c/p\u003e\n\n# Form\n\n| Website | Description |\n|---------|-------------|\n| [Formspree](https://formspree.io/) | A form backend service providing API, and email service for HTML \u0026 JavaScript forms. |\n| [Formie](https://formie.io/) | A form builder for easy form creation that also handles the backend for your forms.  |  \n\n\u003cp align=\"right\"\u003e\u003ca href=\"#table-of-contents\"\u003e[🡅 back to top]\u003c/a\u003e\u003c/p\u003e\n\n# Hosting\n\n### Free Hosting\n\n| Website | Description |\n|---------|-------------|\n| [GitHub Pages](https://pages.github.com) | Websites hosted directly from your GitHub repository. |\n| [Netlify](https://netlify.com) | Simple workflow for building high performance sites and apps. |\n| [Vercel](https://vercel.com) | Best developer experience with a focus on end-user performance. |\n| [Firebase](https://firebase.google.com) | Build and run successful apps with Google's backing. |\n| [GitLab Pages](https://docs.gitlab.com/ee/user/project/pages/) | Static websites directly from a GitLab repository. |\n| [Surge](https://surge.sh) | Simple, single-command static web publishing. |\n| [InfinityFree](https://infinityfree.net/) | Fully featured free website hosting with PHP, MySQL and no ads. |\n| [000webhost](https://www.000webhost.com/) | Zero cost website hosting with PHP, MySQL, Cpanel \u0026 no ads. |\n| [Cloudflare Pages](https://pages.cloudflare.com/) | JAMstack platform for deploying websites with free unlimited bandwidth. |\n| [ByetHost](https://byet.host/) | Provides Free \u0026 Premium hosting service with no ads including PHP, MySQL, FTP \u0026 more. |\n\n### Paid Hosting\n\n| Website | Description |\n|---------|-------------|\n| [AWS](https://aws.amazon.com) | Global cloud-based products and services to scale and lower IT costs. |\n| [DigitalOcean](https://www.digitalocean.com/) | Cloud computing services with predictable pricing and robust documentation. |\n| [Heroku](https://www.heroku.com) | Cloud platform as a service supporting several programming languages. |\n| [Render](https://render.com) | Unified cloud to build and run all your apps and websites with auto deploys from Git. |\n| [Stormkit](https://stormkit.io) | Manage frontend infrastructure integrating with your git flow. |\n| [Supabase](https://supabase.com) | Open source Firebase alternative with a Postgres Database. |\n| [Hostinger](https://www.hostinger.com) | Affordable web hosting with 24/7 live support and a user-friendly interface. |\n| [DreamHost](https://www.dreamhost.com) | Reliable web hosting with 100% uptime guarantee and solid support. |\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#table-of-contents\"\u003e[🡅 back to top]\u003c/a\u003e\u003c/p\u003e\n\n# Icons\n\n| Website | Description |\n|---------|-------------|\n| [FontAwesome](https://fontawesome.com) | Comprehensive library of scalable vector icons. |\n| [Ionicons](https://ionic.io/ionicons) | Beautifully crafted open-source icons for web and mobile. |\n| [Boxicons](https://boxicons.com) | Customizable vector icons for web and app development. |\n| [Phosphor Icons](https://phosphoricons.com) | Minimalist, clean, and customizable icon library. |\n| [Flaticon](https://flaticon.com) | Largest database of free vector icons. |\n| [IconBuddy](https://iconbuddy.com/) | Diverse selection of customizable icons and icon packs. |\n| [MingCute](https://www.mingcute.com/) | Variety of cute and stylish SVG icons. |\n| [Google Fonts Icon](https://fonts.google.com/icons) | Collection of icons from Google Fonts. |\n| [Devicon](https://devicon.dev) | Icons representing programming languages and tools. |\n| [Icon-sets](https://icon-sets.iconify.design) | Collection of icons for designers and developers. |\n| [Line Awesome](https://icons8.com/line-awesome) | Customizable PSD icons available in two styles. |\n| [Simple Icons](https://simpleicons.org) | Lots of SVG icons for projects. |\n| [Bootstrap Icons](https://icons.getbootstrap.com) | Free, high-quality icon library from Bootstrap. |\n| [Freeicons](https://freeicons.io) | Large collection of premium and free icons. |\n| [Icons8](https://icons8.com) | Free design elements like icons and images. |\n| [Lordicon](https://lordicon.com) | High-quality, open-source animated icons. |\n| [React Icons](https://react-icons.github.io/react-icons) | High-quality icon library for React projects. |\n| [UXWing](https://uxwing.com) | Free icons for websites with commercial use. |\n| [Animated Fluent Emojis](https://animated-fluent-emoji.vercel.app) | Animated emojis for web projects. |\n| [CSS.gg](https://css.gg) | Minimalistic, customizable CSS icons. |\n| [Feather Icons](https://feathericons.com) | Beautifully designed open-source icons. |\n| [Heroicons](https://heroicons.com) | Versatile SVG icons for web applications. |\n| [Iconfinder](https://www.iconfinder.com) | Vast library of icons for various needs. |\n| [Iconhub](https://iconhub.io) | High-quality icons for different purposes. |\n| [Tabler Icons](https://tabler-icons.io) | Free, open-source icons for web applications. |\n| [Vertex](https://vertex.im) | Range of icons for various uses. |\n| [Eva Icons](https://akveo.github.io/eva-icons) | Beautifully crafted open-source icons. |\n| [Evil Icons](https://evil-icons.io) | Simple and clean set of SVG icons. |\n| [Free3DIcon](https://free3dicon.com) | Free, beautiful, trending 3D icons. |\n| [Icon-Icons](https://icon-icons.com) | Extensive library of icons. |\n| [Iconoir](https://iconoir.com) | Modern aesthetic open-source icons. |\n| [Lucide](https://lucide.dev) | Enhanced fork of Feather Icons. |\n| [Remix Icon](https://remixicon.com) | Open-source neutral-style system symbols. |\n| [The Noun Project](https://thenounproject.com) | Icons and photos for various uses. |\n| [Iconsax React](https://iconsax-react.pages.dev) | Comprehensive library of React icons. |\n| [Octicons](https://primer.style/octicons) | GitHub’s icon library. |\n| [Radix Icons](https://www.radix-ui.com/icons) | Crisp open-source icons for projects. |\n| [3D Icons](https://www.3dicons.com/) | Free, beautiful, trending 3D icons. |\n| [SVGMix](https://svgmix.com) | A collection of free SVG icons for various uses. |\n| [Free Icons](https://free-icons.github.io/free-icons) | Free icons library for different projects. |\n| [Iconmonstr](https://iconmonstr.com) | Simple and free icon library. |\n| [Lineicons](https://lineicons.com) | Set of modern, line-style icons. |\n| [SVGrepo](https://svgrepo.com) | A large repository of free SVG icons. |\n| [Iconic](https://iconic.app) | Customizable icon library with various styles. |\n| [IcoMoon](https://icomoon.io) | Custom icon sets and font creation tool. |\n| [Unicons](https://iconscout.com/unicons) | Collection of high-quality icons from Iconscout. |\n| [HolaSVG](https://icons.holasvg.com) | Curated SVG icons for web projects. |\n| [Fontello](https://fontello.com) | Custom icon font generator. |\n| [Fontastic](https://fontastic.me) | Create icon fonts from your SVGs. |\n| [Iconspedia](https://www.iconspedia.com) | Extensive library of icons for different needs. |\n| [Flowbite Icons](https://flowbite.com/icons/) | Icons for use with the Flowbite UI library. |\n| [CSS Icon](https://cssicon.space/#/) | Collection of CSS-based icons for web design. |\n| [Icônes](https://icones.js.org/) | Versatile collection of free and customizable icons. |\n| [Iconduck](https://iconduck.com/) | A free resource offering open-source icons and illustrations. |\n\n### Favicons\n\n| Website | Description |\n|---------|-------------|\n| [Favicon.io](https://favicon.io/) | Easy favicon creation and customization. |\n| [Real Favicon Generator](https://realfavicongenerator.net/) | Generate favicons for all platforms. |\n| [XIcon Editor](https://www.xiconeditor.com/) | Online favicon editor and generator. |\n| [Favicon.cc](https://www.favicon.cc/) | Create and edit favicons online. |\n| [Favicon Generator](https://www.favicon-generator.org/) | Tool to generate favicons for websites. |\n\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#table-of-contents\"\u003e[🡅 back to top]\u003c/a\u003e\u003c/p\u003e\n\n# Illustrations\n\n| Website | Description |\n|---------|-------------|\n| [Blush](https://blush.design/) | Create custom illustrations from curated collections. |\n| [unDraw](https://undraw.co/illustrations) | Free customizable illustrations library. |\n| [DrawKit](https://www.drawkit.io/) | High-quality vector illustrations. |\n| [Freepik](https://www.freepik.com) | Vast library of free vectors and illustrations. |\n| [Glazestock](https://glazestock.com) | High-quality illustrations and vector graphics. |\n| [ManyPixels](https://www.manypixels.co/gallery/) | Royalty-free illustrations gallery. |\n| [Reshot](https://www.reshot.com) | Free, handpicked icons and illustrations. |\n| [Storyset](https://storyset.com) | Customizable illustrations for projects. |\n| [UI Store](https://www.uistore.design) | Free design resources for UI/UX. |\n| [Awesome Illustrations](https://github.com/Anmol-Baranwal/Awesome-Illustrations-4Projects) | Curated free illustrations list. |\n| [Craftwork](https://craftwork.design) | High-quality illustrations and assets. |\n| [Free SVG Illustration](https://freesvgillustration.com) | Free SVG illustrations for various uses. |\n| [Get Illustrations](https://www.getillustrations.com) | Premium illustrations for web and apps. |\n| [Humaaans](https://humaaans.com) | Mix-and-match people illustrations. |\n| [Open Doodles](https://opendoodles.com) | Free, sketchy illustrations. |\n| [Pixeltrue](https://www.pixeltrue.com/free-illustrations) | High-quality free illustrations. |\n| [Skribbl](https://weareskribbl.com) | Hand-drawn illustrations for projects. |\n| [Absurd Design](https://absurd.design) | Unique, hand-drawn illustrations. |\n| [Icons8 Illustrations](https://icons8.com/illustrations) | Diverse library of illustrations. |\n| [Artify Illustrations](https://www.artify.co/illustrations-figma) | High-quality Figma illustrations. |\n| [Artify Vector Illustrations](https://www.artify.co/vector-illustrations) | Vector illustrations for projects. |\n| [Cocomaterial](https://cocomaterial.com/) | Modern, free illustrations. |\n| [Iradesign](https://iradesign.io) | Free and customizable illustrations. |\n| [ThemeIsle Illustrations](https://themeisle.com/illustrations) | Free illustrations for various uses. |\n\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#table-of-contents\"\u003e[🡅 back to top]\u003c/a\u003e\u003c/p\u003e\n\n# Images\n\n| Website | Description |\n|---------|-------------|\n| [Unsplash](https://unsplash.com) | High-quality, royalty-free images contributed by photographers worldwide. |\n| [Pixabay](https://pixabay.com) | A large collection of free images, videos, and music available for commercial use. |\n| [Pexels](https://pexels.com) | Free stock photos and videos with a simple search and download process. |\n| [Pxfuel](https://www.pxfuel.com) | Offers high-resolution free stock photos for personal and commercial use. |\n| [Librestock](https://librestock.com) | Aggregates free stock photos from multiple sources. |\n| [Visual Hunt](https://visualhunt.com) | A vast collection of high-quality free stock photos. |\n| [Free Photos](https://freephotos.cc/en) | Provides a variety of free, high-resolution stock photos for commercial use. |\n| [Picjumbo](https://picjumbo.com) | Free stock photos for personal and commercial use in various categories. |\n| [SplitShire](https://www.splitshire.com) | Free stock photos and videos for personal and commercial projects. |\n| [StockSnap](https://stocksnap.io/) | Free high-resolution photos with new content added regularly. |\n| [Picjumbo](https://picjumbo.com/) | Free stock photos for personal and commercial use across various categories. |\n| [Life of Pix](https://www.lifeofpix.com/) | Free high-resolution photos with a focus on nature and urban themes. |\n| [Flickr](https://www.flickr.com/) | Many photos are free under Creative Commons licenses, though not all. |\n| [Pikwizard](https://pikwizard.com/) | Thousands of free stock photos and videos across various categories. |\n| [Rawpixel](https://www.rawpixel.com/) | Mix of free and premium images focusing on high-quality and unique stock photos. |\n\n### Image Tools\n\n| Website | Description |\n|---------|-------------|\n| [WebResizer](https://www.webresizer.com/) | Resize and compress images online with customizable settings. |\n| [TinyPNG](https://tinypng.com/) | Compresses PNG and JPEG images to reduce file size without noticeable quality loss. |\n| [Compressor.io](https://compressor.io/) | Compresses JPEG, PNG, GIF, and SVG files while preserving image quality. |\n| [Trimage](https://trimage.org/) | A cross-platform tool to optimize and compress images, focusing on PNG and JPEG formats. |\n| [Compress-Or-Die](https://compress-or-die.com/) | Offers powerful compression for JPEG, PNG, and GIF images with advanced settings. |\n| [JPEG Optimizer](https://www.jpeg-optimizer.com/) | Compresses and optimizes JPEG images for reduced file size and faster loading. |\n| [Image Compressor](https://imagecompressor.com/) | Provides easy-to-use tools for compressing and optimizing various image formats. |\n| [Squoosh](https://squoosh.app/) | A tool to compress and optimize images for web use. |\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#table-of-contents\"\u003e[🡅 back to top]\u003c/a\u003e\u003c/p\u003e\n\n# JS Libraries\n\n### Animation Libraries\n\n| Library | Description |\n|---------|-------------|\n| [CSShake](https://elrumordelaluz.github.io/csshake/) | A library for adding shake animations to your CSS elements. |\n| [Animate.css](https://animate.style/) | A popular library of ready-to-use, cross-browser animations for your web projects. |\n| [Anime.js](https://animejs.com/) | A lightweight JavaScript animation library for animating CSS properties, SVG, DOM attributes, and JavaScript objects. |\n| [GreenSock (GSAP)](https://greensock.com/gsap/) | A robust JavaScript library for creating high-performance animations that work in every major browser. |\n| [Magic Animations](https://www.minimamente.com/project/magic-animations/) | A collection of CSS3 animations with a magical touch. |\n| [Hover.css](https://ianlunn.github.io/Hover/) | A collection of CSS3 powered hover effects for links, buttons, logos, and more. |\n| [AniJS](http://anijs.github.io/) | A library to enhance your web design with animations without the need for coding. |\n| [Mo.js](https://mojs.github.io/) | A motion graphics library designed to create delightful animations. |\n| [Velocity.js](http://velocityjs.org/) | A fast animation engine with the same API as jQuery's $.animate() and supports CSS transitions, color animations, and SVG. |\n| [Popmotion](https://popmotion.io/) | A powerful JavaScript library for creating animations and interactions. |\n| [Snap.svg](http://snapsvg.io/) | A JavaScript library for working with SVG, including animations and graphics. |\n| [Framer Motion](https://www.framer.com/api/motion/) | A library for creating complex animations in React with ease. |\n| [Auto Animate](https://auto-animate.formkit.com/) | Add smooth animations to your web apps with minimal setup. |\n| [SwiperJS](https://swiperjs.com/) | A modern touch slider with a wide range of features and smooth animations. |\n| [Motion One](https://motion.dev/) | A new animation library built on the Web Animations API for tiny size and huge performance. |\n| [countUp.js](https://inorganik.github.io/countUp.js/) | Animate numerical values by counting to them. |\n| [Odometer](https://github.hubspot.com/odometer/docs/welcome/) | A JavaScript and CSS library for smoothly transitioning numbers. |\n| [dynamics.js](https://github.com/michaelvillar/dynamics.js/) | Create physics-based animations with a JavaScript library. |\n| [elevator.js](https://tholman.com/elevator.js/) | A \"back to top\" button with an elevator music feature for smooth scrolling. |\n| [theatre](https://theatrejs.com/) | An animation library for high-fidelity motion graphics and intricate movement. |\n| [snabbt.js](https://daniel-lundin.github.io/snabbt.js/) | Fast animations with JavaScript and CSS transforms. |\n\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#table-of-contents\"\u003e[🡅 back to top]\u003c/a\u003e\u003c/p\u003e\n\n### Audio Libraries\n\n| Library | Description |\n|---------|-------------|\n| [Howler.js](https://howlerjs.com/) | A JavaScript audio library for the modern web, providing powerful audio playback and control. |\n| [Tone.js](https://tonejs.github.io/) | A framework for creating interactive music in the browser with a wide range of audio features. |\n| [Audio.js](https://kolber.github.io/audiojs/) | A simple and flexible JavaScript library for embedding and controlling audio on websites. |\n| [Wavesurfer.js](https://wavesurfer-js.org/) | An audio waveform visualization and audio player library for the web. |\n| [Pizzicato.js](https://alemangui.github.io/pizzicato/) | A library that simplifies the creation and manipulation of sounds with the Web Audio API. |\n| [Meyda](https://meyda.js.org/) | An audio feature extraction library for JavaScript that works in the browser and Node.js. |\n| [Audiolib.js](https://github.com/jussi-kalliokoski/audiolib.js/) | A powerful audio processing and manipulation library for the web. |\n| [ThreeAudio.js](https://github.com/unconed/ThreeAudio.js) | An extension of the Three.js library for integrating 3D audio in web applications. |\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#table-of-contents\"\u003e[🡅 back to top]\u003c/a\u003e\u003c/p\u003e\n\n### Authentication Libraries\n\n| Library | Description |\n|---------|-------------|\n| [Passport.js](http://www.passportjs.org/) | Middleware for Node.js that simplifies the implementation of authentication strategies in your application. |\n| [NextAuth.js](https://next-auth.js.org/) | Authentication for Next.js applications with built-in support for various providers. |\n| [Auth.js](https://authjs.dev/) | A flexible and easy-to-use authentication library for modern web applications. |\n| [Satellizer](https://github.com/sahat/satellizer) | An AngularJS authentication library for handling social login integrations and user authentication. |\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#table-of-contents\"\u003e[🡅 back to top]\u003c/a\u003e\u003c/p\u003e\n\n### Color Libraries\n\n| Library | Description |\n|---------|-------------|\n| [Chroma.js](https://gka.github.io/chroma.js/) | A versatile JavaScript library for color conversions and manipulation. |\n| [TinyColor](https://github.com/bgrins/TinyColor) | A small, fast JavaScript library for color manipulation and conversion. |\n| [Color.js](https://github.com/Qix-/color) | A color conversion and manipulation library for JavaScript. |\n| [Please.js](https://github.com/Fooidge/PleaseJS) | JavaScript library for creating random pleasing colors and color schemes. |\n| [React Color](https://casesandberg.github.io/react-color/) | A collection of color pickers built for React. |\n| [React Colorful](https://omgovich.github.io/react-colorful/) | A tiny color picker component for React and Preact apps. |\n| [ngx-color](https://github.com/scttcper/ngx-color) | A collection of color pickers for Angular. |\n| [Vue Color](https://github.com/xiaokaike/vue-color) | A collection of color pickers for Vue.js. |\n| [Vue2-Simple-Color](https://github.com/saintplay/vue-swatches) | A simple color picker for Vue.js. |\n| [Open Color](https://yeun.github.io/open-color/) | An open-source color scheme optimized for UI design, can be used in SASS. |\n| [Colord](https://github.com/omgovich/colord) | A tiny JavaScript library for high-performance color manipulation and conversion. |\n| [D3-Color](https://github.com/d3/d3-color) | Color spaces and color manipulation for D3.js. |\n\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#table-of-contents\"\u003e[🡅 back to top]\u003c/a\u003e\u003c/p\u003e\n\n### Email Libraries\n\n| Library | Description |\n|---------|-------------|\n| [EmailJS](https://www.emailjs.com/) | Send emails directly from client-side JavaScript with popular email services and templates. |\n| [Nodemailer](https://nodemailer.com/) | Node.js module to send emails using SMTP or other transport methods. |\n| [Gmail API](https://developers.google.com/gmail/api) | Access Gmail features to programmatically send and manage emails. |\n| [SMTPJS](https://smtpjs.com/) | Free service to send emails using JavaScript and SMTP without a backend server. |\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#table-of-contents\"\u003e[🡅 back to top]\u003c/a\u003e\u003c/p\u003e\n\n### File Libraries\n\n| Library | Description |\n|---------|-------------|\n| [FileSaver.js](https://github.com/eligrey/FileSaver.js) | Saves files on the client-side in a web browser. |\n| [Dropzone.js](https://www.dropzonejs.com/) | Lightweight library for drag-and-drop file uploads. |\n| [FilePond](https://pqina.nl/filepond/) | Flexible and customizable file upload library with support for image previews. |\n| [Fine Uploader](https://fineuploader.com/) | Comprehensive file uploader with extensive features. |\n| [Blueimp File Upload](https://github.com/blueimp/jQuery-File-Upload) | jQuery plugin for file uploads with support for multiple file selection. |\n| [Uppy](https://uppy.io/) | Modular file uploader with support for resumable uploads and multiple integrations. |\n| [react-dropzone](https://react-dropzone.js.org/) | React component for handling drag-and-drop file uploads. |\n| [ngx-file-drop](https://www.npmjs.com/package/ngx-file-drop) | Angular component for drag-and-drop file uploads. |\n| [ng2-file-upload](https://github.com/valor-software/ng2-file-upload) | Angular file upload library with support for multiple files and progress tracking. |\n\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#table-of-contents\"\u003e[🡅 back to top]\u003c/a\u003e\u003c/p\u003e\n\n### Form Libraries\n\n| Library | Description |\n|---------|-------------|\n| [Parsley](https://parsleyjs.org/) | JavaScript form validation library. |\n| [FormValidation](https://formvalidation.io/) | A validation library for forms. |\n| [Formik](https://formik.org/) | Build forms in React, with validation. |\n| [Formly](https://formly.dev/) | Angular dynamic forms library. |\n| [Vue Formulate](https://vueformulate.com/) | Forms and validation for Vue.js. |\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#table-of-contents\"\u003e[🡅 back to top]\u003c/a\u003e\u003c/p\u003e\n\n### Icon Libraries\n\n| Library | Description |\n|---------|-------------|\n| [FontAwesome](https://fontawesome.com) | Comprehensive library of scalable vector icons. |\n| [Ionicons](https://ionic.io/ionicons) | Beautifully crafted open-source icons for web and mobile. |\n| [Boxicons](https://boxicons.com) | Customizable vector icons for web and app development. |\n| [Material Icons](https://material.io/resources/icons/) | Google's Material Design icons for easy integration. |\n| [Feather Icons](https://feathericons.com) | Beautifully designed open-source icons. |\n| [Heroicons](https://heroicons.com) | Versatile SVG icons for web applications. |\n| [Lineicons](https://lineicons.com) | Set of modern, line-style icons. |\n| [Simple Icons](https://simpleicons.org) | Lots of SVG icons for projects. |\n| [Phosphor Icons](https://phosphoricons.com) | Minimalist, clean, and customizable icon library. |\n| [Eva Icons](https://akveo.github.io/eva-icons) | Beautifully crafted open-source icons. |\n| [Iconmonstr](https://iconmonstr.com) | Simple and free icon library. |\n| [Remix Icon](https://remixicon.com) | Open-source neutral-style system symbols. |\n| [Tabler Icons](https://tabler-icons.io) | Free, open-source icons for web applications. |\n| [React UseAnimations](https://react.useanimations.com/) | Animated icons and illustrations for React. |\n| [Iconsax React](https://iconsax-react.pages.dev) | Comprehensive library of React icons. |\n| [NGX Icons](https://www.npmjs.com/package/ngx-icons) | Angular library for scalable icons. |\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#table-of-contents\"\u003e[🡅 back to top]\u003c/a\u003e\u003c/p\u003e\n\n### Image Libraries\n\n| Library | Description |\n|---------|-------------|\n| [Glide.js](https://glidejs.com/) | A responsive and touch-friendly JavaScript slider for creating image carousels. |\n| [Vanilla LazyLoad](https://github.com/verlok/vanilla-lazyload) | A lightweight, dependency-free lazy loading library for images and other content. |\n| [PhotoSwipe](https://github.com/dimsemenov/photoswipe) | A JavaScript image gallery for mobile and desktop with touch gestures. |\n| [LazyLoad by Tuupola](https://github.com/tuupola/lazyload) | A fast and lightweight lazy loading library for images and iframes. |\n| [LightGallery](https://www.lightgalleryjs.com/) | A powerful and lightweight JavaScript image and video gallery plugin. |\n| [PhotoSwipe](https://photoswipe.com/) | A JavaScript image gallery with touch gestures for mobile and desktop. |\n| [Fancybox](https://fancyapps.com/fancybox/) | A flexible and responsive lightbox script for displaying images, videos, and more. |\n| [React Photo Gallery](https://github.com/neptunian/react-photo-gallery) | A responsive and flexible photo gallery component for React. |\n| [React Image Gallery](https://github.com/xiaolin/react-image-gallery) | A flexible image gallery component for React with various customization options. |\n| [React Lightbox](https://github.com/frontend-collective/react-image-lightbox) | A lightbox component for React to display images in a modal view. |\n| [ngx-gallery](https://github.com/kolkov/ngx-gallery) | A highly customizable image gallery component for Angular applications. |\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#table-of-contents\"\u003e[🡅 back to top]\u003c/a\u003e\u003c/p\u003e\n\n### Scroll Animation Libraries\n\n| Library | Description |\n|---------|-------------|\n| [ScrollReveal](https://github.com/jlmakes/scrollreveal) | A library to animate elements as they scroll into view. |\n| [AOS (Animate On Scroll)](https://github.com/michalsnik/aos) | Animate elements on your website as you scroll. |\n| [Parallax.js](https://github.com/pixelcog/parallax.js) | A simple, lightweight parallax scrolling library. |\n| [Rellax](https://github.com/dixonandmoe/rellax) | A buttery smooth parallax library for any website. |\n| [ScrollMagic](https://github.com/janpaepke/ScrollMagic) | A JavaScript library for magical scroll interactions. |\n| [Locomotive Scroll](https://github.com/locomotivemtl/locomotive-scroll) | A smooth scrolling library built on the Intersection Observer API. |\n| [React Scroll](https://github.com/fisshy/react-scroll) | React components for smooth scrolling navigation. |\n| [Ngx Page Scroll](https://github.com/Nolanus/ngx-page-scroll) | Angular service for smooth scrolling to elements. |\n| [FullPage.js](https://github.com/alvarotrigo/fullPage.js) | Create full-screen scrolling websites with sections that scroll. |\n| [Parallax Scroll](https://github.com/jscottsmith/react-scroll-parallax) | React components for scrolling/parallax effects. |\n| [Skrollr](https://github.com/Prinzhorn/skrollr) | Stand-alone parallax scrolling JavaScript library for mobile and desktop. |\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#table-of-contents\"\u003e[🡅 back to top]\u003c/a\u003e\u003c/p\u003e\n\n### Text Animation Libraries\n\n| Library | Description |\n|---------|-------------|\n| [Typed.js](https://github.com/mattboldt/typed.js) | A JavaScript library for creating customizable typing animations with various effects. |\n| [Typewriter.js](https://github.com/tameemsafi/typewriterjs) | A simple JavaScript library for creating typewriter-style animations with configurable options. |\n| [TypeIt](https://typeitjs.com/) | A versatile JavaScript library for creating dynamic and customizable typing animations on web pages. |\n| [Typify.js](https://devsk18.github.io/typify.js/) | A lightweight JavaScript library for creating typewriter-style animations with minimal configuration. |\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#table-of-contents\"\u003e[🡅 back to top]\u003c/a\u003e\u003c/p\u003e\n\n### Video Libraries\n\n| Library | Description |\n|---------|-------------|\n| [Video.js](https://videojs.com/) | An open-source HTML5 video player that supports a wide range of video formats and streaming protocols. |\n| [Plyr](https://plyr.io/) | A simple, customizable, and lightweight HTML5 media player for video, audio, and more. |\n| [React Player](https://github.com/cookpete/react-player) | A React component for playing a variety of URLs, including YouTube, Facebook, and Vimeo videos. |\n| [React Video](https://github.com/pedronauck/react-video) | A simple React component for embedding video players. |\n| [React Plyr](https://github.com/sampotts/plyr) | A React wrapper for the Plyr HTML5 media player. |\n| [ng-video](https://www.npmjs.com/package/ng-video) | A lightweight Angular library for embedding and controlling HTML5 videos. |\n| [Vue-Video-Player](https://github.com/surmon-china/vue-video-player) | A Vue.js video player based on Video.js with additional features like live streaming support. |\n| [HLS.js](https://github.com/video-dev/hls.js) | A JavaScript library that plays HLS video directly in the browser without needing Flash or plugins. |\n| [Vue-Plyr](https://github.com/redxtech/vue-plyr) | A Vue.js wrapper for the Plyr video player. |\n| [Vue-Core-Video-Player](https://github.com/core-player/vue-core-video-player) | A lightweight video player for Vue.js applications. |\n| [Vime](https://vimejs.com/) | A customizable media player built with web components, usable with Vue.js and other frameworks. |\n| [JW Player](https://github.com/jwplayer/jwplayer) | A powerful and flexible video player that supports streaming, adaptive bitrate, and extensive customization options for both web and mobile. |\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#table-of-contents\"\u003e[🡅 back to top]\u003c/a\u003e\u003c/p\u003e\n\n# Learning Platforms\n\n| Website | Description |\n|---------|-------------|\n| [freeCodeCamp](https://www.freecodecamp.org) | Free coding curriculum with interactive lessons. |\n| [W3Schools](https://www.w3schools.com) | Tutorials and references on web development languages. |\n| [Scaler Topics](https://www.scaler.com/topics/) | In-depth articles and guides on web development. |\n| [SoloLearn](https://sololearn.com) | Mobile-first coding courses and a community of learners. |\n| [Javatpoint](https://javatpoint.com) | Tutorials and resources for various programming languages. |\n| [GeeksforGeeks Web Development](https://www.geeksforgeeks.org/web-development/) | Tutorials and articles on web development concepts. |\n| [Eloquent JavaScript](https://eloquentjavascript.net/) | Comprehensive book on JavaScript programming. |\n| [Codecademy](https://www.codecademy.com) | Interactive coding courses in various languages. |\n| [JavaScript30](https://javascript30.com) | 30-day challenge to build 30 JavaScript projects. |\n| [Coursera](https://www.coursera.org) | Online courses from top universities and companies. |\n| [edX](https://www.edx.org) | University-level courses in a wide range of disciplines. |\n| [Khan Academy](https://khanacademy.org) | Free coding tutorials and exercises. |\n| [The Odin Project](https://www.theodinproject.com) | Free, project-based web development curriculum. |\n| [JavaScript.info](https://javascript.info) | Detailed tutorials and references on JavaScript. |\n| [Vue School](https://vueschool.io) | Courses and tutorials on Vue.js and related technologies. |\n| [Guru99](https://www.guru99.com) | Tutorials and resources on various IT and software topics. |\n| [MIT OpenCourseWare](https://ocw.mit.edu) | Free course materials from MIT on a variety of subjects. |\n| [Codementor](https://www.codementor.io/events) | Coding tutorials, mentorship, and events. |\n| [Code.org](https://code.org) | Coding courses and resources for beginners. |\n| [CSS-Tricks](https://css-tricks.com) | Articles and tutorials on CSS and web development. |\n| [Udacity](https://www.udacity.com) | Nanodegree programs and tech courses. |\n| [Udemy](https://www.udemy.com) | Online courses on a variety of topics, including web development. |\n| [LinkedIn Learning](https://www.linkedin.com/learning/) | Professional courses on various tech and business topics. |\n| [Mozilla Developer Network (MDN)](https://developer.mozilla.org) | Comprehensive resources and documentation for web technologies. |\n\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#table-of-contents\"\u003e[🡅 back to top]\u003c/a\u003e\u003c/p\u003e\n\n# Loaders\n\n| Website | Description |\n|---------|-------------|\n| [UIBall - LDRS](https://uiball.com/ldrs/) | Collection of UI loaders and spinners. |\n| [CSS Loaders](https://css-loaders.com/) | CSS-based loaders and spinners for websites. |\n| [Loading.io CSS](https://loading.io/css/) | Variety of CSS-based loaders and spinners. |\n| [Three Dots](https://nzbin.github.io/three-dots/) | Collection of three dot CSS loading animations. |\n| [Whirl](https://whirl.netlify.app/) | Collection of CSS loading animations. |\n| [CSS Loaders GitHub](https://github.com/lukehaas/css-loaders) | GitHub repository with CSS loaders. |\n| [CSS Loaders Site](https://cssloaders.github.io/) | Site with a variety of CSS loaders.\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#table-of-contents\"\u003e[🡅 back to top]\u003c/a\u003e\u003c/p\u003e\n\n# Placeholders\n\n### Placeholder Images\n\n| Website | Description |\n|---------|-------------|\n| [Blurha.sh](https://blurha.sh/) | A tool for generating beautiful, customizable blurred image placeholders for lazy loading. |\n| [LoremFlickr](https://loremflickr.com/) | Generate placeholder images from Flickr. |\n| [Temp Image](https://temp.im/) | A quick tool for temporary image placeholders. |\n| [Placehold.it](https://place-hold.it/) | Generate customizable placeholder images. |\n| [Lorem Picsum](https://picsum.photos/) | A simple service to generate placeholder images. |\n| [Dummy Image](https://dummyimage.com/) | Create custom placeholder images with specified dimensions. |\n| [Avatar Placeholder](https://avatar-placeholder.iran.liara.run/#document) | Generate placeholder avatars for profiles. |\n| [Image Placeholder](https://dev.me/products/image-placeholder?ref=assets.so) | Create placeholder images for various uses. |\n| [Placehold.co](https://placehold.co/) | Generate placeholder images with custom text. |\n| [Placeholders.dev](https://placeholders.dev/) | A tool for generating placeholder images with various customization options. |\n| [PlaceBeard](https://placebeard.it/) | Generate placeholder images featuring bearded men. |\n| [PlaceBear](https://placebear.com/) | Generate placeholder images featuring bears. |\n| [FakeImg](https://fakeimg.pl/) | Create custom fake images for any need. |\n| [GoMasuga PlaceIMG](https://www.gomasuga.com/placeimg?souce=placeimg) | Generate placeholder images with categories. |\n\n### Placeholder Text\n\n| Website | Description |\n|---------|-------------|\n| [Lorem Ipzum](https://www.loremipzum.com/en/text-generator) | Generate customizable lorem ipsum text. |\n| [Lorem Ipsum](https://www.lipsum.com/) | Generate classic lorem ipsum text. |\n| [Cupcake Ipsum](https://cupcakeipsum.com/) | Generate sweet-themed placeholder text. |\n| [Bacon Ipsum](https://baconipsum.com/) | Generate meat-themed placeholder text. |\n| [Lorem Ipsum Generator](https://loremipsum.io/) | Create customizable lorem ipsum text for any purpose. |\n| [Dummy Text Generator](https://www.dummytextgenerator.com/) | Create dummy text with various customization options. |\n\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#table-of-contents\"\u003e[🡅 back to top]\u003c/a\u003e\u003c/p\u003e\n\n# Responsiveness Checker\n\n| Website | Description |\n|---------|-------------|\n| [Screenfly by Bluetree](https://bluetree.ai/screenfly/) | A tool to test websites on different screen resolutions and devices. |\n| [Responsive Test Tool](https://responsivetesttool.com/) | Allows testing of websites across various screen sizes and resolutions. |\n| [Responsinator](http://www.responsinator.com/) | A simple tool to view how a website looks on different devices. |\n| [Designmodo Responsive Test](https://designmodo.com/responsive-test/) | Provides a responsive design test to preview websites on different devices. |\n| [Am I Responsive?](https://ui.dev/amiresponsive) | A tool to check website responsiveness across multiple device viewports. |\n| [Screen Sizes](https://screensiz.es/monitor) | A resource for checking various screen sizes and resolutions. |\n| [Viewport Resizer](https://lab.maltewassermann.com/viewport-resizer/) | A bookmarklet for testing responsive design directly in your browser. |\n\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#table-of-contents\"\u003e[🡅 back to top]\u003c/a\u003e\u003c/p\u003e\n\n# Scroll Bars\n\n| Website | Description |\n|---------|-------------|\n| [Scrollbar.app](https://scrollbar.app/) | A tool to create custom scrollbars for your website. |\n| [Webkit Scrollbar Generator](https://webkit-scroll-gen.sourceforge.net/) | Generate CSS for customizing WebKit-based scrollbars. |\n| [CSS Scrollbar Generator](https://awesome-tools.online/tool/css-scrollbar-generator) | A tool for generating CSS to style scrollbars. |\n| [Custom Scrollbar CodePen](https://codepen.io/stephenpaton-tech/full/JjRvGmY) | A CodePen example for creating custom scrollbars with CSS. |\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#table-of-contents\"\u003e[🡅 back to top]\u003c/a\u003e\u003c/p\u003e\n\n# Shadows\n\n| Website | Description |\n|---------|-------------|\n| [CSS Scan: CSS Box Shadow Examples](https://getcssscan.com/css-box-shadow-examples) | A collection of over 90 CSS box-shadow examples. |\n| [Smooth Shadows](https://shadows.brumm.af/) | Generate CSS box-shadow code snippets with interactive controls. |\n| [Neumorphism.io](https://neumorphism.io/#e0e0e0) | Generate soft UI CSS code for neumorphic designs. |\n| [Glass UI](https://ui.glass/generator/) | Generate UI designs with glassmorphism effects. |\n| [Aeternity Box Shadows](https://ui.aceternity.com/tools/box-shadows?utm_source=tailkits\u0026utm_medium=referral\u0026utm_campaign=tools) | A tool for generating customizable CSS box-shadow effects. |\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#table-of-contents\"\u003e[🡅 back to top]\u003c/a\u003e\u003c/p\u003e\n\n\n# SVGs\n\n| Website | Description |\n|---------|-------------|\n| [SVGRepo](https://www.svgrepo.com/) | A large collection of high-quality SVGs for web projects. |\n| [SVG Wave](https://svgwave.in/) | Customizable SVG wave patterns for dynamic web designs. |\n| [SVG Circus](https://svgcircus.com/) | A tool for creating animated SVGs and customizing them. |\n| [SVG Silh](https://svgsilh.com/) | A collection of SVG icons and vector graphics. |\n| [SVG Viewer](https://www.svgviewer.dev/) | View and inspect SVG files directly in your browser. |\n| [Boxy SVG](https://boxy-svg.com/) | SVG editor with a focus on simplicity and productivity. |\n| [SVG Artista](https://svgartista.net/) | Add animation to SVGs for creative effects. |\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#table-of-contents\"\u003e[🡅 back to top]\u003c/a\u003e\u003c/p\u003e\n\n# Templates\n\n| Website | Description |\n|---------|-------------|\n| [TemplateFlip](https://templateflip.com) | HTML and Bootstrap templates with a focus on simplicity and functionality. |\n| [TemplatesHub](https://templateshub.net) | Free and premium website templates and themes. |\n| [TemplateMonster](https://www.templatemonster.com) | A wide variety of website templates, including HTML, WordPress, and eCommerce. |\n| [HTML5 UP](https://html5up.net) | Modern and responsive HTML5 and CSS3 templates. |\n| [UIDECK](https://uideck.com) | Premium and free UI kits and website templates. |\n| [GrayGrids](https://graygrids.com) | Free and premium HTML templates and Bootstrap themes. |\n| [Tooplate](https://www.tooplate.com) | Free website templates and themes for various types of projects. |\n| [ZeroTheme](https://www.zerotheme.com) | Free and premium HTML templates and themes. |\n| [FreeHTML5.co](https://freehtml5.co) | A selection of free HTML5 templates and website themes. |\n| [Templatemo](https://templatemo.com) | Free HTML templates and website designs for personal and commercial use. |\n| [BootstrapMade](https://bootstrapmade.com) | A variety of Bootstrap-based HTML templates and themes. |\n| [Tailwind Templates](https://tailwindtemplates.co) | Templates and components built with Tailwind CSS. |\n| [HTMLRev](https://htmlrev.com) | A collection of free and premium HTML templates. |\n| [ThemeSelection](https://themeselection.com) | A collection of free and premium HTML and WordPress themes. |\n| [Built at Lightspeed](https://builtatlightspeed.com) | Templates and tools for quickly building modern websites. |\n| [Web3 Templates](https://web3templates.com) | Templates specifically designed for Web3 and blockchain projects. |\n| [Webflow Templates](https://webflow.com/templates) | Professional templates designed for Webflow. |\n| [HTML Template](https://htmltemplates.co/) | A collection of free HTML templates for various uses. |\n| [CodeStitch](https://codestitch.app/) | Hand-coded website section templates, all following the same design system, targetted towards small businesses |\n| [WrapPixel](https://www.wrappixel.com/) | Provides free and premium developer friendly admin dashboard templates for web development. |\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#table-of-contents\"\u003e[🡅 back to top]\u003c/a\u003e\u003c/p\u003e\n\n# UI Components\n\n| Website | Description |\n|---------|-------------|\n| [UI Verse](https://uiverse.io/) | A community-driven platform offering a wide range of UI components and design inspirations. |\n| [Code My UI](https://codemyui.com/) | A website offering a collection of web development resources, including HTML, CSS, and JavaScript code snippets. |\n| [FreeFrontend](https://freefrontend.com/) | A website offering free HTML, CSS, and JavaScript resources with source code. |\n| [Copy \u0026 Paste CSS](https://copy-paste-css.com/) | A website providing a collection of CSS styles for buttons, shadows, color palettes, etc. |\n| [Shadcn UI](https://ui.shadcn.com/) | A collection of customizable UI components for React, styled with Tailwind CSS and built on Radix Primitives. |\n| [Tailgrids](https://tailgrids.com/) | A collection of Tailwind CSS components and templates. |\n| [Flowbite](https://flowbite.com/#components) | A library of open-source UI components built with Tailwind CSS. |\n| [Hover.dev](https://www.hover.dev/) | A collection of interactive, animated UI components for React \u0026 Tailwind. |\n| [Ibelick UI](https://ui.ibelick.com/) | A collection of free dark mode UI components built with React \u0026 Tailwind CSS. |\n| [Origin UI](https://originui.com/) | A collection of beautiful UI components built with Tailwind CSS and Next.js. |  \n| [Kokonut](https://kokonut.dev/) | A collection of modern, interactive, customizable UI components built with Tailwind CSS and Next.js. |\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#table-of-contents\"\u003e[🡅 back to top]\u003c/a\u003e\u003c/p\u003e\n\n# UI Libraries\n\n| Website | Description |\n|---------|-------------|\n| [Material-UI](https://mui.com/) | Simple and customizable component library to build faster, beautiful, and more accessible React applications. |\n| [React Bootstrap](https://react-bootstrap.github.io/) | Bootstrap components built with React. |\n| [NativeBase](https://nativebase.io/) | An accessible, utility-first component library that helps build consistent UI across Android, iOS, and Web. |\n| [Semantic UI React](https://react.semantic-ui.com/) | The official React integration for Semantic UI. |\n| [Quasar](https://quasar.dev/) | A Vue.js framework that allows you to build responsive websites, PWAs, and mobile apps with a single codebase. |\n| [Semantic UI](https://semantic-ui.com/) | A UI framework that helps create beautiful, responsive layouts using human-friendly HTML. |\n| [Element UI](https://element.eleme.io/#/en-US) | A Vue.js-based UI toolkit for web developers, offering a wide range of customizable components. |\n| [Angular Material](https://material.angular.io/) | Angular Material is a UI library component developed by Google in 2014. |\n| [Chakra UI](https://chakra-ui.com/) | A simple, modular, and accessible component library that gives you the building blocks to build React applications. |\n| [Taiga UI](https://taiga-ui.dev/) | A powerful set of open-source components for Angular. |\n| [Ant Design](https://ant.design/) | An enterprise-class UI design language and React UI library. |\n| [NG-ZORRO](https://ng.ant.design/) | An Angular UI library based on Ant Design, offering a wide range of components. |\n| [Vuetify](https://vuetifyjs.com/) | A popular Vue.js UI library with components following the Material Design guidelines. |\n| [BootstrapVue](https://bootstrap-vue.org/) | Combines the power of Bootstrap and Vue.js for responsive, mobile-first projects. |\n| [Bulma](https://bulma.io/) | A modern CSS framework based on Flexbox, usable with any JavaScript framework. |\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#table-of-contents\"\u003e[🡅 back to top]\u003c/a\u003e\u003c/p\u003e\n\n# Videos\n\n| Website | Description |\n|---------|-------------|\n| [Pixabay Videos](https://pixabay.com/videos) | A vast collection of free videos that can be used for any project. |\n| [Pexels Videos](https://www.pexels.com/videos) | Free stock video footage shared by talented creators. |\n| [Videvo](https://www.videvo.net) | Free stock videos and motion graphics, ideal for various creative projects. |\n| [Videezy](https://www.videezy.com) | Offers a large selection of free HD and 4K stock videos and clips. |\n| [Mazwai](https://mazwai.com) | Curated, high-quality free video clips for creative projects. |\n| [Coverr](https://coverr.co) | Beautiful, free videos for your homepage or any project. |\n| [Mixkit](https://mixkit.co) | High-quality, free stock video clips, available for personal and commercial use. |\n| [Dareful](https://dareful.com) | A collection of high-quality, royalty-free videos for various uses. |\n| [Vidsplay](https://www.vidsplay.com) | A wide range of free stock footage available for download and use. |\n| [SplitShire](https://www.splitshire.com) | Free stock videos and photos for personal and commercial use. |\n| [PhotoStockEditor](https://photostockeditor.com) | Provides a variety of free stock images and videos. |\n| [Clipstill](https://www.clipstill.com) | Offers free and premium cinemagraphs and looping videos. |\n| [Free Stock Video](https://free-stock.video/) | A collection of high-quality, royalty-free videos available for free download and use in various projects. |\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#table-of-contents\"\u003e[🡅 back to top]\u003c/a\u003e\u003c/p\u003e\n\n# Web Optimization Tools\n\n| Website | Description |\n|---------|-------------|\n| [Google PageSpeed Insights](https://pagespeed.web.dev/) | A tool to analyze and optimize the performance of your website. |\n| [GTmetrix](https://gtmetrix.com/) | Provides insights on your website’s speed and offers optimization recommendations. |\n| [WebPageTest](https://www.webpagetest.org) | A tool that allows you to run performance tests on your website from multiple locations worldwide. |\n| [SEOTester](https://seotest.me/) | A simple tool to check the SEO health and performance of your website. |\n\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#table-of-contents\"\u003e[🡅 back to top]\u003c/a\u003e\u003c/p\u003e\n\n# Youtube Channels\n\n| Website | \n|---------|\n| [Academind](https://www.youtube.com/c/Academind)                              |\n| [Bedimcode](https://www.youtube.com/@Bedimcode) |\n| [Bro Code](https://www.youtube.com/@BroCodez) |\n| [Chrome For Developers](https://www.youtube.com/@ChromeDevs) |\n| [Coder Coder](https://www.youtube.com/c/TheCoderCoder)                        |\n| [DesignCourse](https://www.youtube.com/c/DesignCourse)                        |\n| [Dev Dreamer](https://www.youtube.com/@DevDreamer)                        |\n| [Developedbyed](https://www.youtube.com/@developedbyed)                        |\n| [freeCodeCamp.org](https://www.youtube.com/c/FreeCodeCamp)                    |\n| [Fireship](https://www.youtube.com/c/Fireship)                                |\n| [JavaScript Mastery](https://www.youtube.com/c/JavaScriptMastery)             |\n| [Kevin Powell](https://youtube.com/kepowob)                                   |\n| [Lun Developer](https://www.youtube.com/@lundeveloper)                                   |\n| [Net Ninja](https://www.youtube.com/@NetNinja)                                   |\n| [Online Tutorial](https://www.youtube.com/@OnlineTutorialsYT)                                   |\n| [ProAcademy](https://www.youtube.com/@procademy) |\n| [Programming With Mosh](https://www.youtube.com/@programmingwithmosh) |\n| [Traversy Media](https://www.youtube.com/c/TraversyMedia)                     |\n| [Web Dev Simplified](https://www.youtube.com/c/WebDevSimplified/)             |\n| [Wes Bos](https://www.youtube.com/wesbos)                                     |\n\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#table-of-contents\"\u003e[🡅 back to top]\u003c/a\u003e\u003c/p\u003e\n\n\n\n\n\u003cp align=\"center\"\u003eMade with ❤  by Ash.\u003c/p\u003e\n","projects_url":"https://awesome.ecosyste.ms/api/v1/lists/itzashoffcl%2Fawesome-webdev-resources/projects"}