awesome-webdev-resources
A curated list of useful websites and resources for web developers
https://github.com/itzashoffcl/awesome-webdev-resources
Last synced: about 17 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
- Code Combat
-
Free Hosting
- 000webhost
- Surge - command static web publishing. |
- Cloudflare Pages
- ByetHost
- GitHub Pages
- GitLab 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
- UIDECK
- HTMLRev
- Coverr
- PhotoStockEditor
- Bedimcode
- Bro Code
- Chrome For Developers
- Coder Coder
- DesignCourse
- Dev Dreamer
- Developedbyed
- freeCodeCamp.org
- JavaScript Mastery
- Kevin Powell
- Lun Developer
- Net Ninja
- Online Tutorial
- Programming With Mosh
- Traversy Media
- 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
-
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
-
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. |
- Devicon
- Icon-sets
- Simple Icons
- Bootstrap Icons - quality icon library from Bootstrap. |
- Lordicon - quality, open-source animated icons. |
- React Icons - quality icon library for React projects. |
- UXWing
- Animated Fluent Emojis
- CSS.gg
- Feather Icons - source icons. |
- Heroicons
- Iconhub - quality icons for different purposes. |
- Tabler Icons - source icons for web applications. |
- Vertex
- Eva Icons - source icons. |
- Evil Icons
- Icon-Icons
- Remix Icon - source neutral-style system symbols. |
- The Noun Project
- Iconsax React
- Free Icons
- Lineicons - style icons. |
- Iconic
- IcoMoon
- HolaSVG
- Fontastic
-
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. |
- Storyset
- UI Store
- Free SVG Illustration
- Get Illustrations
- Humaaans - and-match people illustrations. |
- Open Doodles
- Pixeltrue - quality free illustrations. |
- Skribbl - drawn illustrations for projects. |
- Absurd Design - drawn illustrations. |
- Iradesign
- ThemeIsle Illustrations
- Picjumbo
-
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. |
- Magic Animations
- Framer Motion
- dynamics.js - based animations with a JavaScript library. |
- theatre - fidelity motion graphics and intricate movement. |
-
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
- SoloLearn - first coding courses and a community of learners. |
- GeeksforGeeks Web Development
- Coursera
- Khan Academy
- JavaScript.info
- Guru99
- MIT OpenCourseWare
- Loading.io CSS - based loaders and spinners. |
-
Placeholder Images
-
Programming Languages
Categories
Sub Categories
Placeholder Text
99
Color Tools
87
Paid Hosting
53
Favicons
40
Video Libraries
38
Color Palettes
28
Animation Libraries
20
Placeholder Images
14
Image Libraries
11
Scroll Animation Libraries
11
Color Libraries
11
Image Tools
8
Audio Libraries
8
File Libraries
8
Free Hosting
6
Font Pairing
6
Form Libraries
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