awesome-webdev-resources
A curated list of useful websites and resources for web developers
https://github.com/itzashoffcl/awesome-webdev-resources
Last synced: about 6 hours ago
JSON representation
-
Table of Contents
-
- 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
- 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
- Firebase Authentication - to-use authentication, including email, password, and social logins. |
- Corbado - to-implement authentication solutions for web and mobile applications. |
- Staticfile
- BootCSS CDN - end libraries and frameworks. |
- jQuery CDN
- DevChallenges
- Frontend Mentor - world front-end challenges to improve coding skills. |
- Frontend Practice - world front-end challenges. |
- CSS Challenges
- JS Challenger
- CodeChef
- Coding Ninjas
- Coderbyte
- CodeGym
-
Free Hosting
- 000webhost
- Surge - command static web publishing. |
- Cloudflare Pages
- ByetHost
- GitHub Pages
-
Audio Libraries
-
Placeholder Text
- Pexels Videos
- 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
- Aeternity Box Shadows - shadow effects. |
- TemplateFlip
- TemplatesHub
- TemplateMonster
- HTML5 UP
- UIDECK
- GrayGrids
- Tooplate
- FreeHTML5.co
- Templatemo
- Tailwind Templates
- HTMLRev
- ThemeSelection
- Web3 Templates
- Videezy
- Coverr
- Mixkit - quality, free stock video clips, available for personal and commercial use. |
- Dareful - quality, royalty-free videos for various uses. |
- Vidsplay
- PhotoStockEditor
- Clipstill
- Chrome For Developers
- Coder Coder
- Developedbyed
- Fireship
- JavaScript Mastery
- Kevin Powell
- ProAcademy
- Web Dev Simplified
- Wes Bos
-
Color Tools
- 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
- W3Schools Color Picker
- Color Thief
- Code Magic
- Godly
- Page Collective
- Fontesk
- Type Scale
- FontSpace
- Font Fabric - quality fonts. |
- Urban Fonts
-
Color Palettes
- 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
- AiColors
- Color Claim
- Color-Hex
- Colorion
- Colourco.de
-
Font Pairing
-
Paid Hosting
- 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. |
- Stormkit
- Boxicons
- Bootstrap Icons - quality icon library from Bootstrap. |
- Heroicons
- Iconhub - quality icons for different purposes. |
- Eva Icons - source icons. |
- The Noun Project
- Lineicons - style icons. |
- Iconic
- IcoMoon
-
Favicons
- 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. |
- ManyPixels - free illustrations gallery. |
- Storyset
- Open Doodles
- Pixeltrue - quality free illustrations. |
- Skribbl - drawn illustrations for projects. |
- Absurd Design - drawn illustrations. |
- Artify Vector Illustrations
- Iradesign
- Unsplash - quality, royalty-free images contributed by photographers worldwide. |
-
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
- CSShake
- Anime.js
- Hover.css
- AniJS
- Mo.js
- Velocity.js
- Popmotion
- Snap.svg
- Auto Animate
- SwiperJS
- Motion One
- countUp.js
- Odometer
- elevator.js
- snabbt.js
- GreenSock (GSAP) - performance animations that work in every major browser. |
-
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
-
Email Libraries
- EmailJS - side JavaScript with popular email services and templates. |
- Nodemailer
- SMTPJS
- Gmail API
-
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. |
-
Video Libraries
- 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
- W3Schools
- SoloLearn - first coding courses and a community of learners. |
- Coursera
- Khan Academy
- JavaScript.info
- Code.org
- Mozilla Developer Network (MDN)
-
Placeholder Images
-
Programming Languages
Categories
Sub Categories
Placeholder Text
108
Color Tools
97
Favicons
37
Paid Hosting
37
Video Libraries
37
Color Palettes
33
Animation Libraries
16
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