Awesome WebDev Resources 
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! 
Table of Contents
- Animations
- API
- Audio
- Authentication Providers
- Background
- Border Radius
- Buttons
- CDN
- Check Boxes
- Cheat Sheets
- Code Editors
- Coding Challenge Platforms
- Colors
- CSS Filters
- CSS Finder
- CSS Games
- CSS Generators
- Design Inspiration
- Dev Tools
- Email Service Providers
- Fonts
- Hosting
- Icons
- Illustrations
- Images
- JS Libraries
- Learning Platforms
- Loaders
- Placeholders
- Responsiveness Checker
- Scroll Bars
- Shadows
- SVGs
- Templates
- UI Components
- UI Libraries
- Videos
- Web Optimization Tools
- YouTube Channels
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. |
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. |
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. |
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. |
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. |
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. |
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. |
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. |
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. |
Cheat Sheets
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. |
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. |
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. |
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. |
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. |
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. |
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. |
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. |
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. |
| 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. |
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. |
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. |
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. |
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. |
Paid Hosting
| 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. |
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. |
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. |
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. |
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. |
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. |
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. |
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. |
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. |
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. |
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. |
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. |
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. |
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. |
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. |
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. |
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. |
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. |
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. |
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. |
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. |
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. |
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. |
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. |
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. |
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. |
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. |
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. |
Youtube Channels
Made with ❤ by Ash.