awesome-webdev-resources
A curated list of useful websites and resources for web developers
https://github.com/itzashoffcl/awesome-webdev-resources
Last synced: 1 day ago
JSON representation
-
Table of Contents
-
Placeholder Text
- Vidsplay
- Pexels Videos
- Aeternity Box Shadows - shadow effects. |
- TemplateFlip
- TemplatesHub
- TemplateMonster
- UIDECK
- GrayGrids
- Tooplate
- FreeHTML5.co
- Templatemo
- Tailwind Templates
- ThemeSelection
- Web3 Templates
- Coverr
- Mixkit - quality, free stock video clips, available for personal and commercial use. |
- Dareful - quality, royalty-free videos for various uses. |
- PhotoStockEditor
- Clipstill
- Chrome For Developers
- Coder Coder
- Developedbyed
- JavaScript Mastery
- Kevin Powell
- Web Dev Simplified
- Wes Bos
- Lorem Ipzum
- Lorem Ipsum
- Cupcake Ipsum - themed placeholder text. |
- Bacon Ipsum - themed placeholder text. |
- Lorem Ipsum Generator
- Dummy Text Generator
- Screenfly by Bluetree
- Responsive Test Tool
- Responsinator
- Designmodo Responsive Test
- Am I Responsive?
- Screen Sizes
- Viewport Resizer
- Scrollbar.app
- Webkit Scrollbar Generator - based scrollbars. |
- CSS Scrollbar Generator
- Custom Scrollbar CodePen
- CSS Scan: CSS Box Shadow Examples - shadow examples. |
- Smooth Shadows - shadow code snippets with interactive controls. |
- Neumorphism.io
- Aeternity Box Shadows - shadow effects. |
- SVGRepo - quality SVGs for web projects. |
- SVG Wave
- SVG Circus
- SVG Silh
- SVG Viewer
- Boxy SVG
- SVG Artista
- TemplateFlip
- TemplatesHub
- ZeroTheme
- BootstrapMade - based HTML templates and themes. |
- Tailwind Templates
- Built at Lightspeed
- Webflow Templates
- HTML Template
- CodeStitch - coded website section templates, all following the same design system, targetted towards small businesses |
- WrapPixel
- UI Verse - driven platform offering a wide range of UI components and design inspirations. |
- Code My UI
- FreeFrontend
- Shadcn UI
- Tailgrids
- Flowbite - source UI components built with Tailwind CSS. |
- Hover.dev
- Ibelick UI
- Origin UI
- Kokonut
- Material-UI
- React Bootstrap
- NativeBase - first component library that helps build consistent UI across Android, iOS, and Web. |
- Semantic UI React
- Quasar
- Semantic UI - friendly HTML. |
- Element UI - based UI toolkit for web developers, offering a wide range of customizable components. |
- Chakra UI
- Taiga UI - source components for Angular. |
- Ant Design - class UI design language and React UI library. |
- NG-ZORRO
- Vuetify
- BootstrapVue - first projects. |
- Bulma
- Pixabay Videos
- Videvo
- Mazwai - quality free video clips for creative projects. |
- Free Stock Video - quality, royalty-free videos available for free download and use in various projects. |
- Google PageSpeed Insights
- GTmetrix
- WebPageTest
- SEOTester
- Academind
- Bedimcode
- Bro Code
- Dev Dreamer
- Lun Developer
- Net Ninja
- Online Tutorial
-
- Edabit - sized coding challenges to practice and improve your skills. |
- Free Public APIs
- Public APIs
- APIs.guru - readable API definitions for various APIs. |
- TwistedWave
- Bear Audio Tool
- Online MP3 Cutter
- Audio Joiner
- Border Radius - radius values to create rounded corners for web elements. |
- Codepen Animations
- WAIT! Animate
- Animista - to-use tool. |
- Cubic Bezier
- Animate
- CloudConvert Audio Converter
- Audio Trimmer
- Clerk - up, sign-in, and user profiles. |
- CSS Scan: Buttons
- ClickMinded Button Generator - friendly tool. |
- Stylie
- cssfx
- HTML CSS Button Generator
- MaxButtons
- Marko Denic Button Generator
- Best CSS Button Generator
- CSS Buttons - to-copy code. |
- Ibelick Buttons
- Online Audio Converter
- MP3 Smaller
- WWeb.dev
- BGJar
- Fffuel
- Animated Backgrounds
- Super Designer
- Ibelick BG
- Fancy Border Radius - radius CSS values with live previews. |
- Border Radius Online - radius values with advanced options. |
- APIs List
- Auth0
- Staticfile
- Button Optimizer
- SVG Backgrounds
- RapidAPI
- Firebase Authentication - to-use authentication, including email, password, and social logins. |
- Corbado - to-implement authentication solutions for web and mobile applications. |
- DevChallenges
- Frontend Mentor - world front-end challenges to improve coding skills. |
- Frontend Practice - world front-end challenges. |
- CSS Challenges
- JS Challenger
- CodeChef
- Coding Ninjas
- CodeGym
- Any-API
- CDNJS - source JavaScript libraries and CSS frameworks. |
- Statically - source assets and static files. |
- UNPKG
- CSS Scan: CSS Checkboxes Examples
- CSS Checkbox Generator
- 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
- CodePen - created HTML, CSS, and JavaScript code snippets. |
- VS Code Dev
- CodeSandbox
- StackBlitz - time collaboration features. |
- OneCompiler
- CSS Challenges
- LeetCode
- Coding Ninjas
- Codewars
- Codeforces
- Codementor Projects
- JSRobot
- Divize
-
Free Hosting
- 000webhost
- GitHub Pages
- Surge - command static web publishing. |
- Cloudflare Pages
- ByetHost
-
Audio Libraries
-
Color Palettes
- AiColors
- Color Claim
- Color-Hex
- Colorion
- Colourco.de
- Coolors
- Color Hunt
- ColorSpace
- Realtime Colors - time. |
- UiGradients
- 0to255
- Open Color
- ColorMagic
- Flat UI Colors
- Happy Hues
- Khroma - based color palette generator. |
- Color Palettes
- Culrs
- Eva Colors
- Farbvelo
- Muzli Colors
- Paletton
- Pigment by ShapeFactory
- Picular
- Color Adobe
- HTML Color Codes
- Colors Inspo
- Colorion
- Gradientos
- Egg Gradients
- Branition Colors
- Flat UI Color Picker
- Conic Style
-
Color Tools
- W3Schools Color Picker
- Color Thief
- Code Magic
- Godly
- Page Collective
- Fontesk
- Type Scale
- FontSpace
- Font Fabric - quality fonts. |
- Urban Fonts
- Httpster
- WebAIM Contrast Checker
- Coolors Contrast Checker
- Who Can Use
- CSS Gradient
- W3Schools Color Picker
- Just Code Today - Filters
- CSS Filters
- CSS Filter Generator
- CSS Color Filter Generator
- CSS Filter
- Instagram.css - like CSS filter effects. |
- CSS Stats
- CSS Scan
- CSS Battle
- CSS Diner
- CSS Grid Garden - based game that teaches you how to use CSS Grid to create complex grid layouts. |
- CSS Grid Attack
- Flexbox Froggy
- Flexbox Defense - based game for learning CSS Flexbox through interactive gameplay. |
- Flexbox Adventure
- Knights of the Flexbox Table - themed game layout. |
- Flexbox Zombies
- Copy & Paste CSS
- CSS Portal - related resources, tutorials, and tools. |
- CodePen
- 10015.io
- Unused CSS
- WebCode Tools
- EnjoyCSS
- Code Magic
- CSS Generator
- Front-End Tools - end developers. |
- HTML-CSS-JS
- Toptal CSS3 Maker
- Angry Tools
- Layout It!
- Glassmorphism CSS Generator
- CSS Generators
- WebCode CSS Generator
- CSS Generator - to-use interface. |
- CSS3 Generator
- CSS Generator PL
- LazyCode
- CSS Formalize
- Clippy - path shapes. |
- Awwwards
- Best Website Gallery
- Dark Mode Design
- Minimal Gallery
- A Fresh Website - of-this-world design inspiration from across the web. |
- Refero Design
- Stacksorted
- Seesaw
- Webframe
- SiteInspire
- Landings.dev
- Landingfolio
- Landingly
- Land Book
- Dribbble
- Browsing Mode
- Landing Love
- Lapa Ninja
- SmallDev.Tools
- BeautifyTools
- Transform Tools
- Code Beautify
- Free Formatter
- JSONing
- OverAPI Developer Tools
- OnlineTools
- Node.js (V8) --inspector Manager - session debugging management.|
- Mailgun
- SMTP2GO
- Supabase
- Google Fonts - source fonts. |
- Font Squirrel
- Fontesk
- Adobe Fonts - quality fonts. |
- FontMirror
- Urban Fonts
- Fonts2U
- MyFonts
- IconPark - source icon library. |
- Brick
- CDN Fonts
-
Paid Hosting
- AWS - based products and services to scale and lower IT costs. |
- Boxicons
- Bootstrap Icons - quality icon library from Bootstrap. |
- Heroicons
- Iconhub - quality icons for different purposes. |
- Eva Icons - source icons. |
- Lineicons - style icons. |
- Iconic
- IcoMoon
- DigitalOcean
- Hostinger - friendly interface. |
- FontAwesome
- Ionicons - source icons for web and mobile. |
- Phosphor Icons
- Flaticon
- IconBuddy
- MingCute
- Google Fonts Icon
- Line Awesome
- Freeicons
- Icons8
- Animated Fluent Emojis
- Iconfinder
- Free3DIcon
- Iconsax React
- Octicons
- Radix Icons - source icons for projects. |
- 3D Icons
- SVGMix
- SVGrepo
- Unicons - quality icons from Iconscout. |
- Iconspedia
- Flowbite Icons
- CSS Icon - based icons for web design. |
- Icônes
- Iconduck - source icons and illustrations. |
-
Video Libraries
- SoloLearn - first coding courses and a community of learners. |
- Khan Academy
- JavaScript.info
- Video.js - source HTML5 video player that supports a wide range of video formats and streaming protocols. |
- Plyr
- React Player
- React Video
- React Plyr
- ng-video
- Vue-Video-Player
- HLS.js
- Vue-Plyr
- Vue-Core-Video-Player
- Vime
- JW Player
- Scaler Topics - depth articles and guides on web development. |
- Javatpoint
- GeeksforGeeks Web Development
- Eloquent JavaScript
- Codecademy
- edX - level courses in a wide range of disciplines. |
- The Odin Project - based web development curriculum. |
- Vue School
- Codementor
- CSS-Tricks
- Udacity
- Udemy
- UIBall - LDRS
- CSS Loaders - based loaders and spinners for websites. |
- Three Dots
- Whirl
- CSS Loaders GitHub
- CSS Loaders Site
-
Favicons
- Storyset
- Open Doodles
- Pixeltrue - quality free illustrations. |
- Skribbl - drawn illustrations for projects. |
- Absurd Design - drawn illustrations. |
- Artify Vector Illustrations
- Iradesign
- Picjumbo
- Favicon.io
- Real Favicon Generator
- XIcon Editor
- Favicon.cc
- Favicon Generator
- Blush
- unDraw
- DrawKit - quality vector illustrations. |
- Freepik
- Glazestock - quality illustrations and vector graphics. |
- Awesome Illustrations
- Free SVG Illustration
- Icons8 Illustrations
- Artify Illustrations - quality Figma illustrations. |
- Cocomaterial
- ThemeIsle Illustrations
- Pixabay
- Pexels
- Pxfuel - resolution free stock photos for personal and commercial use. |
- Visual Hunt - quality free stock photos. |
- Free Photos - resolution stock photos for commercial use. |
- SplitShire
- StockSnap - resolution photos with new content added regularly. |
- Picjumbo
- Life of Pix - resolution photos with a focus on nature and urban themes. |
- Flickr
- Pikwizard
- Rawpixel - quality and unique stock photos. |
-
Email Libraries
- Gmail API
- EmailJS - side JavaScript with popular email services and templates. |
- Nodemailer
- SMTPJS
-
Font Pairing
-
Image Tools
- WebResizer
- TinyPNG
- Compressor.io
- Trimage - platform tool to optimize and compress images, focusing on PNG and JPEG formats. |
- Compress-Or-Die
- JPEG Optimizer
- Image Compressor - to-use tools for compressing and optimizing various image formats. |
- Squoosh
-
Animation Libraries
-
Authentication Libraries
- Passport.js
- NextAuth.js - in support for various providers. |
- Auth.js - to-use authentication library for modern web applications. |
- Satellizer
-
Color Libraries
- Chroma.js
- TinyColor
- Color.js
- Please.js
- React Color
- React Colorful
- ngx-color
- Vue Color
- Vue2-Simple-Color
- Colord - performance color manipulation and conversion. |
- D3-Color
-
File Libraries
- FileSaver.js - side in a web browser. |
- Dropzone.js - and-drop file uploads. |
- Fine Uploader
- Blueimp File Upload
- Uppy
- react-dropzone - and-drop file uploads. |
- ngx-file-drop - and-drop file uploads. |
- ng2-file-upload
-
Form Libraries
-
Icon Libraries
-
Image Libraries
- Glide.js - friendly JavaScript slider for creating image carousels. |
- Vanilla LazyLoad - free lazy loading library for images and other content. |
- PhotoSwipe
- LazyLoad by Tuupola
- LightGallery
- PhotoSwipe
- Fancybox
- React Photo Gallery
- React Image Gallery
- React Lightbox
- ngx-gallery
-
Scroll Animation Libraries
- ScrollReveal
- AOS (Animate On Scroll)
- Parallax.js
- Rellax
- ScrollMagic
- Locomotive Scroll
- React Scroll
- Ngx Page Scroll
- FullPage.js - screen scrolling websites with sections that scroll. |
- Parallax Scroll
- Skrollr - alone parallax scrolling JavaScript library for mobile and desktop. |
-
Text Animation Libraries
- Typed.js
- Typewriter.js - style animations with configurable options. |
- Typify.js - style animations with minimal configuration. |
-
Placeholder Images
-
Programming Languages
Categories
Sub Categories
Placeholder Text
103
Color Tools
97
Favicons
36
Paid Hosting
36
Video Libraries
33
Color Palettes
33
Animation Libraries
15
Placeholder Images
14
Image Libraries
11
Scroll Animation Libraries
11
Color Libraries
11
Image Tools
8
Audio Libraries
8
File Libraries
8
Font Pairing
6
Form Libraries
5
Free Hosting
5
Authentication Libraries
4
Email Libraries
4
Text Animation Libraries
3
Icon Libraries
2
Keywords
javascript
9
react
6
color
4
vue
4
component
4
color-picker
4
css
4
react-component
3
gallery
3
angular
3
video
3
audio
3
scroll
3
animation
3
tiny
2
zero-dependency
2
effects
2
hooks
2
swatches
2
hls
2
lightbox
2
image
2
hex
2
player
2
parallax
2
plyr
2
a11y
2
sketch
2
photoshop
2
video-player
2
youtube
2
sass
2
vimeo
2
ecmascript6
1
html5-video
1
hlsjs
1
html5
1
http-live-streaming
1
wistia
1
mediasource
1
iframes
1
react-carousel
1
image-slider
1
image-gallery
1
carousel
1
images
1
ngx-gallery
1
intersectionobserver
1
demo
1
lazy-loading
1