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