Skip to the content.

Awesome WebDev Resources Awesome

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 before submitting new resources.

Enjoy! Party Popper


Table of Contents



Animations

Website Description
Animista Create and customize CSS animations with an easy-to-use tool.
Cubic Bezier Visualize and generate smooth cubic bezier curves for CSS animations.
Animate Access a library of over 70 CSS animations, including fade, slide, bounce, and rotate.
Codepen Animations Discover a collection of CSS animations created by the CodePen community.
WAIT! Animate Create CSS animations with animation delays using a straightforward online tool.
Stylie Preview and create CSS animations with an intuitive web application.
cssfx A collection of carefully crafted CSS animations focused on simplicity and ease of use.

[🡅 back to top]

API

Website Description
RapidAPI Discover and connect to thousands of APIs across various categories with ease.
APIs List Find a comprehensive directory of free APIs for different categories and uses.
Free Public APIs A Collection of free public APIs with daily consistency and monitoring checks.
Public APIs Explore a collection of public APIs for diverse purposes and services.
APIs.guru Access a repository of machine-readable API definitions for various APIs.
Any-API Browse a database of public APIs for integration with various applications and services.

[🡅 back to top]

Audio

Website Description
Online Audio Converter Convert audio files to various formats quickly and easily.
CloudConvert Audio Converter Convert audio files to various formats quickly and efficiently online.
MP3 Smaller Compress MP3 files to reduce their size without losing quality.
Audio Trimmer Easily trim and cut your audio files online.
TwistedWave An online audio editor for recording, editing, and mastering audio files.
Bear Audio Tool Edit, cut, merge, and convert audio files directly in your browser.
Online MP3 Cutter Cut and trim MP3 files quickly and easily online.
Audio Joiner Join multiple audio files into one seamlessly.

[🡅 back to top]

Authentication Providers

Website Description
Clerk A complete user management solution for authentication, including sign-up, sign-in, and user profiles.
Firebase Authentication Provides backend services for easy-to-use authentication, including email, password, and social logins.
Auth0 A platform that provides authentication and authorization services.
Corbado Provides secure and easy-to-implement authentication solutions for web and mobile applications.

[🡅 back to top]

Background

Website Description
WWeb.dev An online tool for generating and customizing animated CSS backgrounds for websites.
BGJar Provides customizable background patterns and textures for web design.
SVG Backgrounds A collection of customizable SVG backgrounds for enhancing website aesthetics.
Fffuel A platform for discovering and sharing design resources, tools, and assets.
Animated Backgrounds Offers animated backgrounds and effects to enhance visual appeal and user engagement.
Super Designer A curated collection of design resources, tools, and inspiration for creating stunning digital experiences.
Ibelick BG A collection of modern background designs crafted with Tailwind CSS and Vanilla CSS.

[🡅 back to top]

Border Radius

Website Description
Fancy Border Radius A tool for creating and visualizing complex border-radius CSS values with live previews.
Border Radius Generates and visualizes CSS border-radius values to create rounded corners for web elements.
Border Radius Online A comprehensive tool for generating and previewing CSS border-radius values with advanced options.

[🡅 back to top]

Buttons

Website Description
CSS Scan: Buttons A collection of over 90 stylish CSS button designs that are easy to copy and use.
Butn A free collection of CSS buttons with various styles and animations for easy customization.
ClickMinded Button Generator Create customizable buttons with various styles and get the CSS code with this user-friendly tool.
Button Optimizer Optimize and customize buttons with different styles and effects, generating CSS code.
HTML CSS Button Generator Generate CSS buttons with various styles, colors, and effects for easy integration into web projects.
MaxButtons Design and customize CSS buttons with a range of styles and get the generated CSS code.
Marko Denic Button Generator Create and customize buttons with a variety of styles and effects, and obtain the CSS code.
Best CSS Button Generator Generate stylish CSS buttons with various customization options and download the CSS code.
CSS Buttons A collection of customizable CSS button designs and styles with easy-to-copy code.
Ibelick Buttons A collection of Tailwind CSS buttons designed to enhance your website’s look.

[🡅 back to top]

CDN

Website Description
Staticfile A CDN hosting a wide range of static files for web development, including libraries and frameworks.
BootCSS CDN A CDN offering fast and reliable access to popular front-end libraries and frameworks.
CDNJS A popular CDN hosting a large collection of open-source JavaScript libraries and CSS frameworks.
jQuery CDN The official CDN for jQuery, providing reliable access to jQuery libraries.
JSDelivr A free, fast, and reliable CDN providing access to a wide range of open-source libraries and assets.
Statically A CDN that provides fast and reliable delivery of open-source assets and static files.
UNPKG A fast, global content delivery network for everything on npm, providing easy access to packages.

[🡅 back to top]

Check Boxes

Website Description
CSS Scan: CSS Checkboxes Examples A curated collection showcasing creative and customizable CSS styles for checkboxes.
CSS Checkbox Generator A tool for generating and customizing CSS checkboxes with various styles and effects.

[🡅 back to top]

Cheat Sheets

Website
HTML Cheat Sheet
CSS Cheat Sheet
Tailwind CSS Cheat Sheet
Sass Cheat Sheet
Bootstrap Cheat Sheet
JavaScript Cheat Sheet
TypeScript Cheat Sheet
ES6 Cheat Sheet
React Cheat Sheet
Angular Cheat Sheet
Vue.js Cheat Sheet
Node.js Cheat Sheet
Express Cheat Sheet
SQL Cheat Sheet
MongoDB Cheat Sheet
PostgreSQL Cheat Sheet
PHP Cheat Sheet
JSON Cheat Sheet
HTTP Status Code Cheet Sheet
Python Cheat Sheet
GraphQL Cheat Sheet
Git Cheat Sheet
Bash Cheat Sheet
Regex Cheat Sheet
Emmet Cheat Sheet

[🡅 back to top]

Code Editors

Website Description
CodePen An online community for testing and showcasing user-created HTML, CSS, and JavaScript code snippets.
VS Code Dev A lightweight version of Visual Studio Code that runs in the browser for quick code editing tasks.
CodeSandbox An online code editor and prototyping tool for building web applications in a sandboxed environment.
StackBlitz Online IDE for web applications with starter templates and real-time collaboration features.
OneCompiler Online compiler and IDE to compile and execute code snippets in various programming languages.

[🡅 back to top]

Coding Challenge Platforms

Website Description
DevChallenges Coding challenges to improve and showcase your skills.
Frontend Mentor Real-world front-end challenges to improve coding skills.
Frontend Practice Practice building projects with real-world front-end challenges.
CSS Challenges Practice CSS through a series of design challenges.
100 Days CSS Learn CSS by completing one challenge every day for 100 days.
JS Challenger Practice JavaScript coding challenges and improve your skills.
LeetCode Platform offering coding challenges and interview preparation resources.
HackerRank Coding challenges and competitions to help improve coding skills and prepare for interviews.
CodeChef A competitive programming platform that hosts contests and practice problems.
Coding Ninjas Platform offering coding courses and practice problems.
Codewars A platform for coding challenges and improving programming skills through practice.
CodinGame Learn programming through fun and interactive coding games.
Coderbyte Coding challenges and interview prep for developers.
Exercism Practice coding and receive mentorship on various programming languages.
Codeforces A site for competitive programming contests and practice problems.
Codementor Projects Projects for developers to build, improve skills, and get feedback.
Codepip Learn to code by playing games and solving puzzles.
Edabit Solve bite-sized coding challenges to practice and improve your skills.
JSRobot Solve puzzles by writing JavaScript code to control a robot.
Divize Solve coding challenges and learn new concepts through practice.
Code Combat Learn programming through engaging and interactive games and challenges.
CodeGym Online Java programming course with coding challenges and games.
CodeAbbey Solve programming problems and challenges for various skill levels.

[🡅 back to top]

Colors

Color Palettes

Website Description
Coolors A color scheme generator that helps you create beautiful palettes.
Color Hunt A curated collection of color palettes for design inspiration.
ColorSpace Create and inspect color gradients, with the ability to generate CSS code.
Realtime Colors A platform that provides live, dynamic color displays or updates in real-time.
UiGradients Browse and download a collection of beautiful color gradients.
AiColors A tool that generates color palettes using AI, allowing designers and developers to explore unique color schemes for their projects.
0to255 A tool for finding lighter and darker color variations.
Open Color A color scheme optimized for UI design.
ColorMagic Generate harmonious color schemes.
Flat UI Colors A collection of color palettes inspired by flat UI design.
Happy Hues A curated collection of color palettes with examples.
Khroma AI-based color palette generator.
Color Claim Curated color palettes by Tobias van Schneider.
Color Palettes A variety of color palettes for design inspiration.
Culrs A simple way to find and use color palettes.
Eva Colors A color system for products.
Farbvelo A tool for generating color palettes.
Muzli Colors Discover beautiful color combinations.
Paletton Color scheme designer for creating color palettes.
Pigment by ShapeFactory A tool for generating harmonious color palettes.
Picular A color search engine using images from Google.
Color-Hex A tool for finding hex color codes and their variations.
Color Adobe A comprehensive color tool by Adobe for creating, exploring, and saving color palettes.
HTML Color Codes A resource for finding and using HTML color codes in web development.
Colors Inspo A collection of color palettes and gradients for design inspiration.
Colorion Color inspiration and tools for designers.
Gradientos A tool for generating beautiful CSS gradients.
Egg Gradients A collection of colorful gradients for use in design projects.
Branition Colors A collection of color palettes inspired by brands.
Colourco.de A tool for creating and sharing color palettes.
Flat UI Color Picker A tool for finding flat UI colors.
Conic Style A tool for creating and visualizing conic gradients for your web projects.

Color Tools

Website Description
WebAIM Contrast Checker For evaluating and ensuring adequate color contrast in web design to improve accessibility.
Coolors Contrast Checker Check color contrast for accessibility.
Who Can Use A tool to check color contrast accessibility for different visual impairments.
CSS Gradient An online tool for easily creating and generating CSS gradient source code.
W3Schools Color Picker An online color picker tool with various functionalities.
Color Thief A tool for extracting dominant colors from images.

[🡅 back to top]

CSS Filters

Website Description
Just Code Today - Filters Collection of CSS filters and effects for websites.
CSS Filters Gallery of CSS filter effects with live previews and code snippets.
CSS Filter Generator Tool for creating and applying CSS filters with live previews.
CSS Color Filter Generator Tool to generate CSS color filters.
CSS Filter Simple tool for applying and previewing CSS filters.
Instagram.css Collection of Instagram-like CSS filter effects.

[🡅 back to top]

CSS Finder

Website Description
CSS Stats Analyzes stylesheets, providing insights and statistics on CSS properties and selectors.
CSS Scan Inspects and copies CSS styles from any website for easy design replication.

[🡅 back to top]

CSS Games

Website Description
CSS Battle A fun game where you write CSS code to replicate target images as closely as possible.
CSS Diner A fun and interactive way to learn how to select elements on a web page using CSS.
CSS Grid Garden A web-based game that teaches you how to use CSS Grid to create complex grid layouts.
CSS Grid Attack An interactive game to learn CSS Grid.
Flexbox Froggy An interactive game for learning CSS Flexbox.
Flexbox Defense A web-based game for learning CSS Flexbox through interactive gameplay.
Flexbox Adventure A fun way to master Flexbox through an adventure game.
Knights of the Flexbox Table A set of challenges using Flexbox properties to position and align elements in a medieval-themed game layout.
Flexbox Zombies An interactive game where you learn Flexbox by battling zombies.

[🡅 back to top]

CSS Generators

Website Description
Copy & Paste CSS Collection of CSS styles for buttons, shadows, color palettes, etc.
CSS Portal CSS-related resources, tutorials, and tools.
CodePen Online community for HTML, CSS, and JavaScript code snippets.
10015.io Essential tools for web development.
Unused CSS Various CSS generators in one place.
WebCode Tools Collection of web development tools and utilities.
EnjoyCSS CSS3 code generator for text effects, gradients, and buttons.
Code Magic CSS code generator for visually creating complex CSS.
CSS Generator Tools for generating CSS code, including gradients and shadows.
Front-End Tools Curated list of tools and resources for front-end developers.
HTML-CSS-JS Tools and generators for HTML, CSS, and JavaScript.
Toptal CSS3 Maker Generate CSS3 code for various effects and styles.
Angry Tools Various CSS generators and tools for web development.
Layout It! Design web layouts visually with CSS Grid.
Glassmorphism CSS Generator Generate CSS for glassmorphism effects.
CSS Generators Collection of CSS generators for various effects.
WebCode CSS Generator Generate CSS code for various elements and effects.
CSS Generator Generate CSS code with an easy-to-use interface.
CSS3 Generator Generate CSS3 code for various styles and effects.
CSS Generator PL A tool for generating various CSS styles and effects.
LazyCode contains a collection of CSS generators for free
CSS Formalize A CSS tool/framework for effortless customization of native HTML forms.
Clippy A tool for creating and customizing CSS clip-path shapes.

[🡅 back to top]

Design Inspiration

Website Description
Awwwards Recognizes top web designers, developers, and agencies.
Best Website Gallery Showcases the best websites for design inspiration.
Dark Mode Design Curates dark mode design examples for inspiration.
Minimal Gallery A curated collection of beautiful & functional websites for design inspiration.
A Fresh Website A curated gallery of out-of-this-world design inspiration from across the web.
Refero Design Showcases a curated collection of exceptional websites and UI elements designs.
Stacksorted A collection of beautifully designed UI elements for web projects.
Seesaw A platform showcasing the latest web design trends and examples.
Webframe Discover and compare over 1500 website designs.
SiteInspire Showcases the finest web and interactive design.
Godly Curated gallery of landing page designs for inspiration.
Landings.dev Collection of landing pages for inspiration and learning.
Landingfolio Curated collection of landing pages for design inspiration.
Landingly The ultimate inspiration source collections for landing pages.
Land Book Gallery of the best landing page designs by type and industry.
Page Collective Curated collection of website designs and templates.
Httpster Showcase of web designs and trends.
Dribbble Platform for designers to showcase their work.
One Page Love Collection of one-page website designs.
Behance Online portfolio platform for creative work.
Codrops Collection of design tutorials and web design inspiration.
Browsing Mode Curates a collection of unique and creative websites for inspiration.
Landing Love A showcase of beautifully designed animation websites.
Lapa Ninja A curated gallery of the best landing pages for design inspiration.

[🡅 back to top]

Dev Tools

Website Description
SmallDev.Tools Collection of simple, handy tools for developers.
BeautifyTools Online tools to beautify and minify code.
Transform Tools Tools for transforming code snippets.
Code Beautify Online tools for code beautification and conversion.
Free Formatter Collection of free online formatting tools.
JSONing Collection of free online JSON tools.
OverAPI Developer Tools Aggregated collection of useful developer tools.
OnlineTools Various online tools for web developers and designers.
Node.js (V8) –inspector Manager A streamlined extension for V8 JavaScript debugging with pluggable DevTools and multi-session debugging management.

[🡅 back to top]

Email Service Providers

Website Description
SendGrid Cloud-based SMTP provider for reliable email delivery.
Mailgun Email automation service for sending, receiving, and tracking emails.
SMTP2GO Reliable SMTP service with advanced reporting and analytics.
Supabase Serverless functions for sending emails, integrated with database and authentication services.

[🡅 back to top]

Fonts

Website Description
Google Fonts Vast library of free and open-source fonts.
Font Squirrel Download free and premium fonts.
DaFont Browse and download a massive collection of free fonts.
1001 Fonts Large collection of free fonts.
Befonts Free fonts for designers and developers.
Fontesk Free fonts for personal and commercial use.
Fontshare Free fonts service from ITF.
Type Scale Tool for generating modular type scales.
Adobe Fonts Vast library of high-quality fonts.
FontMirror Free fonts for download.
FontSpace Discover and download fonts for various uses.
FFonts Collection of free and commercial fonts.
Font Fabric Unique and high-quality fonts.
Urban Fonts Browse a wide range of free and commercial fonts.
Fonts Bunny Free fonts for web and print projects.
Fonts2U Download free fonts and font families.
MyFonts Extensive collection of commercial fonts.
IconPark Open-source icon library.
Brick A collection of unique and stylish fonts.
CDN Fonts A free platform to download or use fonts directly via CDN.

Font Pairing

Website Description
Fontpair Discover and pair complementary fonts.
Fontjoy Generate font pairings based on style preferences.
MixFont Visualize font pairings in real time.
Monotype Font Pairing Interactive font pairing tool.

[🡅 back to top]

Form

Website Description
Formspree A form backend service providing API, and email service for HTML & JavaScript forms.
Formie A form builder for easy form creation that also handles the backend for your forms.

[🡅 back to top]

Hosting

Free Hosting

Website Description
GitHub Pages Websites hosted directly from your GitHub repository.
Netlify Simple workflow for building high performance sites and apps.
Vercel Best developer experience with a focus on end-user performance.
Firebase Build and run successful apps with Google’s backing.
GitLab Pages Static websites directly from a GitLab repository.
Surge Simple, single-command static web publishing.
InfinityFree Fully featured free website hosting with PHP, MySQL and no ads.
000webhost Zero cost website hosting with PHP, MySQL, Cpanel & no ads.
Cloudflare Pages JAMstack platform for deploying websites with free unlimited bandwidth.
ByetHost Provides Free & Premium hosting service with no ads including PHP, MySQL, FTP & more.
Website Description
AWS Global cloud-based products and services to scale and lower IT costs.
DigitalOcean Cloud computing services with predictable pricing and robust documentation.
Heroku Cloud platform as a service supporting several programming languages.
Render Unified cloud to build and run all your apps and websites with auto deploys from Git.
Stormkit Manage frontend infrastructure integrating with your git flow.
Supabase Open source Firebase alternative with a Postgres Database.
Hostinger Affordable web hosting with 24/7 live support and a user-friendly interface.
DreamHost Reliable web hosting with 100% uptime guarantee and solid support.

[🡅 back to top]

Icons

Website Description
FontAwesome Comprehensive library of scalable vector icons.
Ionicons Beautifully crafted open-source icons for web and mobile.
Boxicons Customizable vector icons for web and app development.
Phosphor Icons Minimalist, clean, and customizable icon library.
Flaticon Largest database of free vector icons.
IconBuddy Diverse selection of customizable icons and icon packs.
MingCute Variety of cute and stylish SVG icons.
Google Fonts Icon Collection of icons from Google Fonts.
Devicon Icons representing programming languages and tools.
Icon-sets Collection of icons for designers and developers.
Line Awesome Customizable PSD icons available in two styles.
Simple Icons Lots of SVG icons for projects.
Bootstrap Icons Free, high-quality icon library from Bootstrap.
Freeicons Large collection of premium and free icons.
Icons8 Free design elements like icons and images.
Lordicon High-quality, open-source animated icons.
React Icons High-quality icon library for React projects.
UXWing Free icons for websites with commercial use.
Animated Fluent Emojis Animated emojis for web projects.
CSS.gg Minimalistic, customizable CSS icons.
Feather Icons Beautifully designed open-source icons.
Heroicons Versatile SVG icons for web applications.
Iconfinder Vast library of icons for various needs.
Iconhub High-quality icons for different purposes.
Tabler Icons Free, open-source icons for web applications.
Vertex Range of icons for various uses.
Eva Icons Beautifully crafted open-source icons.
Evil Icons Simple and clean set of SVG icons.
Free3DIcon Free, beautiful, trending 3D icons.
Icon-Icons Extensive library of icons.
Iconoir Modern aesthetic open-source icons.
Lucide Enhanced fork of Feather Icons.
Remix Icon Open-source neutral-style system symbols.
The Noun Project Icons and photos for various uses.
Iconsax React Comprehensive library of React icons.
Octicons GitHub’s icon library.
Radix Icons Crisp open-source icons for projects.
3D Icons Free, beautiful, trending 3D icons.
SVGMix A collection of free SVG icons for various uses.
Free Icons Free icons library for different projects.
Iconmonstr Simple and free icon library.
Lineicons Set of modern, line-style icons.
SVGrepo A large repository of free SVG icons.
Iconic Customizable icon library with various styles.
IcoMoon Custom icon sets and font creation tool.
Unicons Collection of high-quality icons from Iconscout.
HolaSVG Curated SVG icons for web projects.
Fontello Custom icon font generator.
Fontastic Create icon fonts from your SVGs.
Iconspedia Extensive library of icons for different needs.
Flowbite Icons Icons for use with the Flowbite UI library.
CSS Icon Collection of CSS-based icons for web design.
Icônes Versatile collection of free and customizable icons.
Iconduck A free resource offering open-source icons and illustrations.

Favicons

Website Description
Favicon.io Easy favicon creation and customization.
Real Favicon Generator Generate favicons for all platforms.
XIcon Editor Online favicon editor and generator.
Favicon.cc Create and edit favicons online.
Favicon Generator Tool to generate favicons for websites.

[🡅 back to top]

Illustrations

Website Description
Blush Create custom illustrations from curated collections.
unDraw Free customizable illustrations library.
DrawKit High-quality vector illustrations.
Freepik Vast library of free vectors and illustrations.
Glazestock High-quality illustrations and vector graphics.
ManyPixels Royalty-free illustrations gallery.
Reshot Free, handpicked icons and illustrations.
Storyset Customizable illustrations for projects.
UI Store Free design resources for UI/UX.
Awesome Illustrations Curated free illustrations list.
Craftwork High-quality illustrations and assets.
Free SVG Illustration Free SVG illustrations for various uses.
Get Illustrations Premium illustrations for web and apps.
Humaaans Mix-and-match people illustrations.
Open Doodles Free, sketchy illustrations.
Pixeltrue High-quality free illustrations.
Skribbl Hand-drawn illustrations for projects.
Absurd Design Unique, hand-drawn illustrations.
Icons8 Illustrations Diverse library of illustrations.
Artify Illustrations High-quality Figma illustrations.
Artify Vector Illustrations Vector illustrations for projects.
Cocomaterial Modern, free illustrations.
Iradesign Free and customizable illustrations.
ThemeIsle Illustrations Free illustrations for various uses.

[🡅 back to top]

Images

Website Description
Unsplash High-quality, royalty-free images contributed by photographers worldwide.
Pixabay A large collection of free images, videos, and music available for commercial use.
Pexels Free stock photos and videos with a simple search and download process.
Pxfuel Offers high-resolution free stock photos for personal and commercial use.
Librestock Aggregates free stock photos from multiple sources.
Visual Hunt A vast collection of high-quality free stock photos.
Free Photos Provides a variety of free, high-resolution stock photos for commercial use.
Picjumbo Free stock photos for personal and commercial use in various categories.
SplitShire Free stock photos and videos for personal and commercial projects.
StockSnap Free high-resolution photos with new content added regularly.
Picjumbo Free stock photos for personal and commercial use across various categories.
Life of Pix Free high-resolution photos with a focus on nature and urban themes.
Flickr Many photos are free under Creative Commons licenses, though not all.
Pikwizard Thousands of free stock photos and videos across various categories.
Rawpixel Mix of free and premium images focusing on high-quality and unique stock photos.

Image Tools

Website Description
WebResizer Resize and compress images online with customizable settings.
TinyPNG Compresses PNG and JPEG images to reduce file size without noticeable quality loss.
Compressor.io Compresses JPEG, PNG, GIF, and SVG files while preserving image quality.
Trimage A cross-platform tool to optimize and compress images, focusing on PNG and JPEG formats.
Compress-Or-Die Offers powerful compression for JPEG, PNG, and GIF images with advanced settings.
JPEG Optimizer Compresses and optimizes JPEG images for reduced file size and faster loading.
Image Compressor Provides easy-to-use tools for compressing and optimizing various image formats.
Squoosh A tool to compress and optimize images for web use.

[🡅 back to top]

JS Libraries

Animation Libraries

Library Description
CSShake A library for adding shake animations to your CSS elements.
Animate.css A popular library of ready-to-use, cross-browser animations for your web projects.
Anime.js A lightweight JavaScript animation library for animating CSS properties, SVG, DOM attributes, and JavaScript objects.
GreenSock (GSAP) A robust JavaScript library for creating high-performance animations that work in every major browser.
Magic Animations A collection of CSS3 animations with a magical touch.
Hover.css A collection of CSS3 powered hover effects for links, buttons, logos, and more.
AniJS A library to enhance your web design with animations without the need for coding.
Mo.js A motion graphics library designed to create delightful animations.
Velocity.js A fast animation engine with the same API as jQuery’s $.animate() and supports CSS transitions, color animations, and SVG.
Popmotion A powerful JavaScript library for creating animations and interactions.
Snap.svg A JavaScript library for working with SVG, including animations and graphics.
Framer Motion A library for creating complex animations in React with ease.
Auto Animate Add smooth animations to your web apps with minimal setup.
SwiperJS A modern touch slider with a wide range of features and smooth animations.
Motion One A new animation library built on the Web Animations API for tiny size and huge performance.
countUp.js Animate numerical values by counting to them.
Odometer A JavaScript and CSS library for smoothly transitioning numbers.
dynamics.js Create physics-based animations with a JavaScript library.
elevator.js A “back to top” button with an elevator music feature for smooth scrolling.
theatre An animation library for high-fidelity motion graphics and intricate movement.
snabbt.js Fast animations with JavaScript and CSS transforms.

[🡅 back to top]

Audio Libraries

Library Description
Howler.js A JavaScript audio library for the modern web, providing powerful audio playback and control.
Tone.js A framework for creating interactive music in the browser with a wide range of audio features.
Audio.js A simple and flexible JavaScript library for embedding and controlling audio on websites.
Wavesurfer.js An audio waveform visualization and audio player library for the web.
Pizzicato.js A library that simplifies the creation and manipulation of sounds with the Web Audio API.
Meyda An audio feature extraction library for JavaScript that works in the browser and Node.js.
Audiolib.js A powerful audio processing and manipulation library for the web.
ThreeAudio.js An extension of the Three.js library for integrating 3D audio in web applications.

[🡅 back to top]

Authentication Libraries

Library Description
Passport.js Middleware for Node.js that simplifies the implementation of authentication strategies in your application.
NextAuth.js Authentication for Next.js applications with built-in support for various providers.
Auth.js A flexible and easy-to-use authentication library for modern web applications.
Satellizer An AngularJS authentication library for handling social login integrations and user authentication.

[🡅 back to top]

Color Libraries

Library Description
Chroma.js A versatile JavaScript library for color conversions and manipulation.
TinyColor A small, fast JavaScript library for color manipulation and conversion.
Color.js A color conversion and manipulation library for JavaScript.
Please.js JavaScript library for creating random pleasing colors and color schemes.
React Color A collection of color pickers built for React.
React Colorful A tiny color picker component for React and Preact apps.
ngx-color A collection of color pickers for Angular.
Vue Color A collection of color pickers for Vue.js.
Vue2-Simple-Color A simple color picker for Vue.js.
Open Color An open-source color scheme optimized for UI design, can be used in SASS.
Colord A tiny JavaScript library for high-performance color manipulation and conversion.
D3-Color Color spaces and color manipulation for D3.js.

[🡅 back to top]

Email Libraries

Library Description
EmailJS Send emails directly from client-side JavaScript with popular email services and templates.
Nodemailer Node.js module to send emails using SMTP or other transport methods.
Gmail API Access Gmail features to programmatically send and manage emails.
SMTPJS Free service to send emails using JavaScript and SMTP without a backend server.

[🡅 back to top]

File Libraries

Library Description
FileSaver.js Saves files on the client-side in a web browser.
Dropzone.js Lightweight library for drag-and-drop file uploads.
FilePond Flexible and customizable file upload library with support for image previews.
Fine Uploader Comprehensive file uploader with extensive features.
Blueimp File Upload jQuery plugin for file uploads with support for multiple file selection.
Uppy Modular file uploader with support for resumable uploads and multiple integrations.
react-dropzone React component for handling drag-and-drop file uploads.
ngx-file-drop Angular component for drag-and-drop file uploads.
ng2-file-upload Angular file upload library with support for multiple files and progress tracking.

[🡅 back to top]

Form Libraries

Library Description
Parsley JavaScript form validation library.
FormValidation A validation library for forms.
Formik Build forms in React, with validation.
Formly Angular dynamic forms library.
Vue Formulate Forms and validation for Vue.js.

[🡅 back to top]

Icon Libraries

Library Description
FontAwesome Comprehensive library of scalable vector icons.
Ionicons Beautifully crafted open-source icons for web and mobile.
Boxicons Customizable vector icons for web and app development.
Material Icons Google’s Material Design icons for easy integration.
Feather Icons Beautifully designed open-source icons.
Heroicons Versatile SVG icons for web applications.
Lineicons Set of modern, line-style icons.
Simple Icons Lots of SVG icons for projects.
Phosphor Icons Minimalist, clean, and customizable icon library.
Eva Icons Beautifully crafted open-source icons.
Iconmonstr Simple and free icon library.
Remix Icon Open-source neutral-style system symbols.
Tabler Icons Free, open-source icons for web applications.
React UseAnimations Animated icons and illustrations for React.
Iconsax React Comprehensive library of React icons.
NGX Icons Angular library for scalable icons.

[🡅 back to top]

Image Libraries

Library Description
Glide.js A responsive and touch-friendly JavaScript slider for creating image carousels.
Vanilla LazyLoad A lightweight, dependency-free lazy loading library for images and other content.
PhotoSwipe A JavaScript image gallery for mobile and desktop with touch gestures.
LazyLoad by Tuupola A fast and lightweight lazy loading library for images and iframes.
LightGallery A powerful and lightweight JavaScript image and video gallery plugin.
PhotoSwipe A JavaScript image gallery with touch gestures for mobile and desktop.
Fancybox A flexible and responsive lightbox script for displaying images, videos, and more.
React Photo Gallery A responsive and flexible photo gallery component for React.
React Image Gallery A flexible image gallery component for React with various customization options.
React Lightbox A lightbox component for React to display images in a modal view.
ngx-gallery A highly customizable image gallery component for Angular applications.

[🡅 back to top]

Scroll Animation Libraries

Library Description
ScrollReveal A library to animate elements as they scroll into view.
AOS (Animate On Scroll) Animate elements on your website as you scroll.
Parallax.js A simple, lightweight parallax scrolling library.
Rellax A buttery smooth parallax library for any website.
ScrollMagic A JavaScript library for magical scroll interactions.
Locomotive Scroll A smooth scrolling library built on the Intersection Observer API.
React Scroll React components for smooth scrolling navigation.
Ngx Page Scroll Angular service for smooth scrolling to elements.
FullPage.js Create full-screen scrolling websites with sections that scroll.
Parallax Scroll React components for scrolling/parallax effects.
Skrollr Stand-alone parallax scrolling JavaScript library for mobile and desktop.

[🡅 back to top]

Text Animation Libraries

Library Description
Typed.js A JavaScript library for creating customizable typing animations with various effects.
Typewriter.js A simple JavaScript library for creating typewriter-style animations with configurable options.
TypeIt A versatile JavaScript library for creating dynamic and customizable typing animations on web pages.
Typify.js A lightweight JavaScript library for creating typewriter-style animations with minimal configuration.

[🡅 back to top]

Video Libraries

Library Description
Video.js An open-source HTML5 video player that supports a wide range of video formats and streaming protocols.
Plyr A simple, customizable, and lightweight HTML5 media player for video, audio, and more.
React Player A React component for playing a variety of URLs, including YouTube, Facebook, and Vimeo videos.
React Video A simple React component for embedding video players.
React Plyr A React wrapper for the Plyr HTML5 media player.
ng-video A lightweight Angular library for embedding and controlling HTML5 videos.
Vue-Video-Player A Vue.js video player based on Video.js with additional features like live streaming support.
HLS.js A JavaScript library that plays HLS video directly in the browser without needing Flash or plugins.
Vue-Plyr A Vue.js wrapper for the Plyr video player.
Vue-Core-Video-Player A lightweight video player for Vue.js applications.
Vime A customizable media player built with web components, usable with Vue.js and other frameworks.
JW Player A powerful and flexible video player that supports streaming, adaptive bitrate, and extensive customization options for both web and mobile.

[🡅 back to top]

Learning Platforms

Website Description
freeCodeCamp Free coding curriculum with interactive lessons.
W3Schools Tutorials and references on web development languages.
Scaler Topics In-depth articles and guides on web development.
SoloLearn Mobile-first coding courses and a community of learners.
Javatpoint Tutorials and resources for various programming languages.
GeeksforGeeks Web Development Tutorials and articles on web development concepts.
Eloquent JavaScript Comprehensive book on JavaScript programming.
Codecademy Interactive coding courses in various languages.
JavaScript30 30-day challenge to build 30 JavaScript projects.
Coursera Online courses from top universities and companies.
edX University-level courses in a wide range of disciplines.
Khan Academy Free coding tutorials and exercises.
The Odin Project Free, project-based web development curriculum.
JavaScript.info Detailed tutorials and references on JavaScript.
Vue School Courses and tutorials on Vue.js and related technologies.
Guru99 Tutorials and resources on various IT and software topics.
MIT OpenCourseWare Free course materials from MIT on a variety of subjects.
Codementor Coding tutorials, mentorship, and events.
Code.org Coding courses and resources for beginners.
CSS-Tricks Articles and tutorials on CSS and web development.
Udacity Nanodegree programs and tech courses.
Udemy Online courses on a variety of topics, including web development.
LinkedIn Learning Professional courses on various tech and business topics.
Mozilla Developer Network (MDN) Comprehensive resources and documentation for web technologies.

[🡅 back to top]

Loaders

Website Description
UIBall - LDRS Collection of UI loaders and spinners.
CSS Loaders CSS-based loaders and spinners for websites.
Loading.io CSS Variety of CSS-based loaders and spinners.
Three Dots Collection of three dot CSS loading animations.
Whirl Collection of CSS loading animations.
CSS Loaders GitHub GitHub repository with CSS loaders.
CSS Loaders Site Site with a variety of CSS loaders.

[🡅 back to top]

Placeholders

Placeholder Images

Website Description
Blurha.sh A tool for generating beautiful, customizable blurred image placeholders for lazy loading.
LoremFlickr Generate placeholder images from Flickr.
Temp Image A quick tool for temporary image placeholders.
Placehold.it Generate customizable placeholder images.
Lorem Picsum A simple service to generate placeholder images.
Dummy Image Create custom placeholder images with specified dimensions.
Avatar Placeholder Generate placeholder avatars for profiles.
Image Placeholder Create placeholder images for various uses.
Placehold.co Generate placeholder images with custom text.
Placeholders.dev A tool for generating placeholder images with various customization options.
PlaceBeard Generate placeholder images featuring bearded men.
PlaceBear Generate placeholder images featuring bears.
FakeImg Create custom fake images for any need.
GoMasuga PlaceIMG Generate placeholder images with categories.

Placeholder Text

Website Description
Lorem Ipzum Generate customizable lorem ipsum text.
Lorem Ipsum Generate classic lorem ipsum text.
Cupcake Ipsum Generate sweet-themed placeholder text.
Bacon Ipsum Generate meat-themed placeholder text.
Lorem Ipsum Generator Create customizable lorem ipsum text for any purpose.
Dummy Text Generator Create dummy text with various customization options.

[🡅 back to top]

Responsiveness Checker

Website Description
Screenfly by Bluetree A tool to test websites on different screen resolutions and devices.
Responsive Test Tool Allows testing of websites across various screen sizes and resolutions.
Responsinator A simple tool to view how a website looks on different devices.
Designmodo Responsive Test Provides a responsive design test to preview websites on different devices.
Am I Responsive? A tool to check website responsiveness across multiple device viewports.
Screen Sizes A resource for checking various screen sizes and resolutions.
Viewport Resizer A bookmarklet for testing responsive design directly in your browser.

[🡅 back to top]

Scroll Bars

Website Description
Scrollbar.app A tool to create custom scrollbars for your website.
Webkit Scrollbar Generator Generate CSS for customizing WebKit-based scrollbars.
CSS Scrollbar Generator A tool for generating CSS to style scrollbars.
Custom Scrollbar CodePen A CodePen example for creating custom scrollbars with CSS.

[🡅 back to top]

Shadows

Website Description
CSS Scan: CSS Box Shadow Examples A collection of over 90 CSS box-shadow examples.
Smooth Shadows Generate CSS box-shadow code snippets with interactive controls.
Neumorphism.io Generate soft UI CSS code for neumorphic designs.
Glass UI Generate UI designs with glassmorphism effects.
Aeternity Box Shadows A tool for generating customizable CSS box-shadow effects.

[🡅 back to top]

SVGs

Website Description
SVGRepo A large collection of high-quality SVGs for web projects.
SVG Wave Customizable SVG wave patterns for dynamic web designs.
SVG Circus A tool for creating animated SVGs and customizing them.
SVG Silh A collection of SVG icons and vector graphics.
SVG Viewer View and inspect SVG files directly in your browser.
Boxy SVG SVG editor with a focus on simplicity and productivity.
SVG Artista Add animation to SVGs for creative effects.

[🡅 back to top]

Templates

Website Description
TemplateFlip HTML and Bootstrap templates with a focus on simplicity and functionality.
TemplatesHub Free and premium website templates and themes.
TemplateMonster A wide variety of website templates, including HTML, WordPress, and eCommerce.
HTML5 UP Modern and responsive HTML5 and CSS3 templates.
UIDECK Premium and free UI kits and website templates.
GrayGrids Free and premium HTML templates and Bootstrap themes.
Tooplate Free website templates and themes for various types of projects.
ZeroTheme Free and premium HTML templates and themes.
FreeHTML5.co A selection of free HTML5 templates and website themes.
Templatemo Free HTML templates and website designs for personal and commercial use.
BootstrapMade A variety of Bootstrap-based HTML templates and themes.
Tailwind Templates Templates and components built with Tailwind CSS.
HTMLRev A collection of free and premium HTML templates.
ThemeSelection A collection of free and premium HTML and WordPress themes.
Built at Lightspeed Templates and tools for quickly building modern websites.
Web3 Templates Templates specifically designed for Web3 and blockchain projects.
Webflow Templates Professional templates designed for Webflow.
HTML Template A collection of free HTML templates for various uses.
CodeStitch Hand-coded website section templates, all following the same design system, targetted towards small businesses
WrapPixel Provides free and premium developer friendly admin dashboard templates for web development.

[🡅 back to top]

UI Components

Website Description
UI Verse A community-driven platform offering a wide range of UI components and design inspirations.
Code My UI A website offering a collection of web development resources, including HTML, CSS, and JavaScript code snippets.
FreeFrontend A website offering free HTML, CSS, and JavaScript resources with source code.
Copy & Paste CSS A website providing a collection of CSS styles for buttons, shadows, color palettes, etc.
Shadcn UI A collection of customizable UI components for React, styled with Tailwind CSS and built on Radix Primitives.
Tailgrids A collection of Tailwind CSS components and templates.
Flowbite A library of open-source UI components built with Tailwind CSS.
Hover.dev A collection of interactive, animated UI components for React & Tailwind.
Ibelick UI A collection of free dark mode UI components built with React & Tailwind CSS.
Origin UI A collection of beautiful UI components built with Tailwind CSS and Next.js.
Kokonut A collection of modern, interactive, customizable UI components built with Tailwind CSS and Next.js.

[🡅 back to top]

UI Libraries

Website Description
Material-UI Simple and customizable component library to build faster, beautiful, and more accessible React applications.
React Bootstrap Bootstrap components built with React.
NativeBase An accessible, utility-first component library that helps build consistent UI across Android, iOS, and Web.
Semantic UI React The official React integration for Semantic UI.
Quasar A Vue.js framework that allows you to build responsive websites, PWAs, and mobile apps with a single codebase.
Semantic UI A UI framework that helps create beautiful, responsive layouts using human-friendly HTML.
Element UI A Vue.js-based UI toolkit for web developers, offering a wide range of customizable components.
Angular Material Angular Material is a UI library component developed by Google in 2014.
Chakra UI A simple, modular, and accessible component library that gives you the building blocks to build React applications.
Taiga UI A powerful set of open-source components for Angular.
Ant Design An enterprise-class UI design language and React UI library.
NG-ZORRO An Angular UI library based on Ant Design, offering a wide range of components.
Vuetify A popular Vue.js UI library with components following the Material Design guidelines.
BootstrapVue Combines the power of Bootstrap and Vue.js for responsive, mobile-first projects.
Bulma A modern CSS framework based on Flexbox, usable with any JavaScript framework.

[🡅 back to top]

Videos

Website Description
Pixabay Videos A vast collection of free videos that can be used for any project.
Pexels Videos Free stock video footage shared by talented creators.
Videvo Free stock videos and motion graphics, ideal for various creative projects.
Videezy Offers a large selection of free HD and 4K stock videos and clips.
Mazwai Curated, high-quality free video clips for creative projects.
Coverr Beautiful, free videos for your homepage or any project.
Mixkit High-quality, free stock video clips, available for personal and commercial use.
Dareful A collection of high-quality, royalty-free videos for various uses.
Vidsplay A wide range of free stock footage available for download and use.
SplitShire Free stock videos and photos for personal and commercial use.
PhotoStockEditor Provides a variety of free stock images and videos.
Clipstill Offers free and premium cinemagraphs and looping videos.
Free Stock Video A collection of high-quality, royalty-free videos available for free download and use in various projects.

[🡅 back to top]

Web Optimization Tools

Website Description
Google PageSpeed Insights A tool to analyze and optimize the performance of your website.
GTmetrix Provides insights on your website’s speed and offers optimization recommendations.
WebPageTest A tool that allows you to run performance tests on your website from multiple locations worldwide.
SEOTester A simple tool to check the SEO health and performance of your website.

[🡅 back to top]

Youtube Channels

Website
Academind
Bedimcode
Bro Code
Chrome For Developers
Coder Coder
DesignCourse
Dev Dreamer
Developedbyed
freeCodeCamp.org
Fireship
JavaScript Mastery
Kevin Powell
Lun Developer
Net Ninja
Online Tutorial
ProAcademy
Programming With Mosh
Traversy Media
Web Dev Simplified
Wes Bos

[🡅 back to top]

Made with ❤ by Ash.