A comprehensive collection of tools, libraries, and resources for web developers. This curated list includes everything from design tools and UI components to learning platforms and development utilities.
- Learning Platforms
- Documentation & Cheatsheets
- Design Tools
- UI Graphics & Illustrations
- Colors & Gradients
- Icons
- Fonts & Typography
- Stock Photos & Videos
- CSS Frameworks
- CSS Tools & Animations
- JavaScript Libraries
- React Resources
- Vue Resources
- Angular Resources
- Node.js Resources
- Python Resources
- APIs & Mock Data
- Developer Tools
- Image & Video Tools
- Code Editors & IDEs
- Browser Extensions
- Deployment & Hosting
- AI Tools
- YouTube Channels
- Blogs & Communities
| Resource | Description |
|---|---|
| freeCodeCamp | Interactive coding curriculum covering web development fundamentals |
| Codecademy | Hands-on programming courses with instant feedback |
| Sololearn | Mobile-friendly coding lessons and community challenges |
| Frontend Mentor | Real-world design challenges to sharpen your frontend skills |
| Chingu | Collaborative project-based learning with remote teams |
| CodeCombat | Learn programming through an interactive game experience |
| JavaScript30 | Build 30 projects in 30 days using vanilla JavaScript |
| Scaler Topics | In-depth tutorials on programming concepts and technologies |
| InterviewBit | Coding challenges and interview preparation resources |
| DevProjects | Practice coding with free project-based exercises |
| Resource | Description |
|---|---|
| MDN Web Docs | Comprehensive documentation for web technologies and APIs |
| DevDocs | Unified documentation browser for 100+ programming tools |
| DEVHINTS | Quick reference cheatsheets for developers |
| OverAPI | Aggregated cheatsheets for multiple programming languages |
| Flexbox Cheatsheet | Visual guide to CSS flexbox properties |
| Grid Cheatsheet | Visual reference for CSS grid layout |
| CSS Grid Cheat Sheet | Interactive CSS grid learning tool |
| GitSheet | Essential Git commands at a glance |
| Roadmap.sh | Career roadmaps for developers across different specializations |
| Awesome Cheatsheets | Curated cheatsheets for frameworks and tools |
| Resource | Description |
|---|---|
| Figma | Collaborative interface design and prototyping platform |
| Sketch | Vector-based design toolkit for digital interfaces |
| Whimsical | Quick visual collaboration for flowcharts and wireframes |
| Undesign | Curated collection of free design resources |
| FlyonUI | Component library built for Tailwind CSS |
| Shadcn Studio | Theme preview tool for shadcn components |
| Canva | Drag-and-drop design platform for non-designers |
| Resource | Description |
|---|---|
| unDraw | Customizable open-source illustrations for any project |
| Humaaans | Mix-and-match illustration library of people |
| Absurd Design | Surrealist illustrations that stand out |
| Open Peeps | Hand-drawn character illustration system |
| Open Doodles | Sketchy illustration set with personality |
| Blush | Customizable illustrations with Figma integration |
| manypixels | Isometric and monochromatic illustration collections |
| Avataaars | Sketch library for creating avatar illustrations |
| IRA Design | Gradient illustrations you can customize |
| Pixeltrue | Animated illustrations in Lottie and GIF formats |
| Freebiesbug | Handpicked design resources updated regularly |
| illustration kit | Premium open-source illustrations added daily |
| Hero Patterns | Repeatable SVG background pattern collection |
| SVG Backgrounds | Customizable SVG background generators |
| Get Waves | SVG wave generator for section dividers |
| Blob Maker | Create organic SVG blob shapes |
| Haikei | Generate unique SVG design assets and backgrounds |
| Resource | Description |
|---|---|
| Coolors | Fast color palette generator with export options |
| Adobe Color | Professional color wheel and palette creator |
| Color Hunt | Trending hand-picked color palette inspiration |
| Happy Hues | Color palettes shown in real design contexts |
| ColorSpace | Generate harmonious color palettes from one color |
| Palettte | Build smooth color gradients between shades |
| 0to255 | Find lighter and darker variations of any color |
| Gradient Hunt | Thousands of trendy gradient inspirations |
| CSS Gradient | Visual CSS gradient generator with code output |
| uiGradients | Beautiful gradient collection for designers |
| Colorable | Test color contrast for accessibility compliance |
| Huemint | AI-powered color scheme generator |
| Khroma | AI learns your color preferences to generate palettes |
| whocanuse | Visualize color contrast for different vision types |
| Resource | Description |
|---|---|
| Tabler Icons | Over 3500 customizable open-source icons |
| Font Awesome | Industry-standard icon toolkit with thousands of icons |
| Feather Icons | Simply beautiful open-source icon set |
| Heroicons | Hand-crafted SVG icons from Tailwind CSS creators |
| Ionicons | Premium designed icons for web and mobile apps |
| Simple Icons | SVG brand icons for popular companies |
| Flaticon | Massive database of free vector icons |
| Icons8 | Icons, illustrations, and photos in one place |
| Iconoir | High-quality open-source icon library |
| Lucide | Community-maintained fork of Feather Icons |
| Phosphor Icons | Flexible icon family for interfaces and diagrams |
| Bootstrap Icons | Official icon library for Bootstrap framework |
| Remix Icon | Delightful neutral-style icon system |
| css.gg | Pure CSS icons with SVG and Figma support |
| Iconmonstr | Simple, monochromatic icons in various formats |
| 3DICONS | Beautifully crafted 3D icon library |
| Icones | Icon explorer with instant search across libraries |
| useAnimations | Animated icons in Lottie and SVG formats |
| Resource | Description |
|---|---|
| Google Fonts | Free web font library with 1000+ font families |
| Font Squirrel | Curated collection of commercial-use free fonts |
| DaFont | Extensive archive of downloadable fonts |
| Fontjoy | AI-powered font pairing generator |
| FontPair | Curated Google Font combinations |
| Fonts Arena | Premium font alternatives and free options |
| Befonts | High-quality free fonts for designers |
| Font Space | Designer-centered font website with previews |
| Type Scale | Visual typography scale calculator |
| Fontshare | Quality fonts from Indian Type Foundry |
| Fontsource | Self-host open-source fonts via NPM packages |
| Modern Fluid Typography | Responsive typography editor and generator |
| Resource | Description |
|---|---|
| Unsplash | High-resolution photos from talented photographers |
| Pexels | Free stock photos and videos for commercial use |
| Pixabay | Millions of royalty-free images and videos |
| Coverr | Beautiful free stock video footage |
| MixKit | Free video clips and music tracks |
| Generated Photos | AI-generated human faces for mockups |
| Icons8 Photos | Themed stock photos for developers |
| Resource | Description |
|---|---|
| Tailwind CSS | Utility-first CSS framework for rapid development |
| Bootstrap | Popular responsive framework with components |
| Bulma | Modern CSS framework based on Flexbox |
| Foundation | Professional responsive front-end framework |
| Materialize | Material Design-based CSS framework |
| Pure CSS | Lightweight modular CSS framework |
| UI Kit | Lightweight modular front-end framework |
| Semantic UI | Human-friendly HTML framework |
| Resource | Description |
|---|---|
| Animista | CSS animation library with live previews |
| CSS Effects | Ready-to-use CSS animation snippets |
| Neumorphism | Soft UI CSS shadow generator |
| Shadows Brumm | Smooth shadow generator for modern designs |
| Box Shadow | Interactive box-shadow CSS generator |
| Clippy | CSS clip-path maker with visual editor |
| Shape Divider | Custom shape dividers for sections |
| CSS Layout | Popular layouts and patterns in CSS |
| Autoprefixer | Add vendor prefixes to CSS automatically |
| Can I Use | Browser compatibility tables for web features |
| Flexbox Froggy | Learn CSS flexbox through a fun game |
| Grid Garden | Learn CSS grid layout by playing a game |
| CSS Diner | Interactive game to master CSS selectors |
| Resource | Description |
|---|---|
| React Spring | Spring-physics based animation library for React |
| GSAP | Professional-grade animation library |
| Three.js | 3D graphics library for WebGL |
| Chart.js | Simple yet flexible charting library |
| D3.js | Data-driven document manipulation library |
| Anime.js | Lightweight animation library |
| Lottie | Render After Effects animations natively |
| Draggable | Drag and drop library by Shopify |
| Resource | Description |
|---|---|
| React | Official React documentation and tutorials |
| Material UI | React component library implementing Material Design |
| Ant Design | Enterprise-class UI design system for React |
| Chakra UI | Simple and accessible component library |
| Headless UI | Unstyled accessible UI components |
| React Router | Declarative routing for React applications |
| Prime React | Rich set of UI components for React |
| React Bootstrap | Bootstrap components built with React |
| Blueprint | React-based UI toolkit for web applications |
| React Icons | Popular icon libraries as React components |
| Visx | Low-level visualization components by Airbnb |
| Resource | Description |
|---|---|
| Vue.js | Progressive JavaScript framework for UIs |
| Vuetify | Material Design component framework for Vue |
| Quasar | Build responsive apps with Vue |
| Element Plus | Vue 3 component library for developers |
| Nuxt.js | Framework for server-side rendered Vue apps |
| Resource | Description |
|---|---|
| Angular | Platform for building web applications |
| Angular Material | Material Design components for Angular |
| NG Bootstrap | Bootstrap widgets for Angular |
| PrimeNG | Rich UI component library for Angular |
| Resource | Description |
|---|---|
| Node.js Docs | Official Node.js learning resources |
| Express.js | Fast, minimalist web framework for Node |
| Awesome Node.js | Curated list of Node.js packages |
| Node Best Practices | Comprehensive guide to Node.js best practices |
| Resource | Description |
|---|---|
| Python Basics | Beginner-friendly Python learning materials |
| PY4E | Python for Everybody course materials |
| Real Python | Python tutorials for all skill levels |
| Programiz Python | Learn Python with examples and exercises |
| Awesome Python | Curated Python frameworks and libraries |
| Flask Tutorial | Comprehensive Flask framework guide |
| Resource | Description |
|---|---|
| Public APIs | Directory of 1000+ free public APIs |
| JSONPlaceholder | Free fake REST API for testing |
| Dummy JSON | Fake REST API with realistic data |
| Mockaroo | Realistic test data generator |
| JSON Server | Full fake REST API from JSON file |
| SWAPI | Star Wars API for testing |
| Resource | Description |
|---|---|
| Postman | API development and testing platform |
| Insomnia | Open-source API client for REST and GraphQL |
| npm trends | Compare NPM package download statistics |
| BUNDLEPHOBIA | Find the cost of adding NPM packages |
| Carbon | Create beautiful code screenshots |
| transform | Polyglot code converter and transformer |
| Regex101 | Online regex tester with explanations |
| i Hate Regex | Regex cheatsheet with visual explanations |
| CSS to JS | Convert CSS to JavaScript objects |
| Responsively | Test responsive designs across devices |
| DevToolLab | Discover and explore developer tools |
| Resource | Description |
|---|---|
| TinyPNG | Smart PNG and JPEG compression |
| Squoosh | Advanced image compression in browser |
| Remove.bg | AI-powered background removal tool |
| Unscreen | Remove video backgrounds automatically |
| Optimizeimages | Compress and convert images online |
| LOADING.IO | Animated loading spinner generator |
| LottieFiles | Animation library for Lottie format |
| Resource | Description |
|---|---|
| CodeSandbox | Online IDE for web development |
| CodePen | Social development environment for frontend |
| JSFiddle | Online JavaScript playground |
| Repl.it | Collaborative browser-based IDE |
| JS Bin | Live pastebin for HTML, CSS, and JavaScript |
| CodiLink | Minimal online code editor |
| Extension | Description |
|---|---|
| React Developer Tools | Debug React applications in Chrome |
| Vue.js devtools | Debug Vue.js applications |
| ColorZilla | Advanced eyedropper and color picker |
| Wappalyzer | Identify technologies used on websites |
| JSON Viewer | Format and view JSON in browser |
| Extension | Description |
|---|---|
| React DevTools | React debugging tools for Firefox |
| Vue.js devtools | Vue.js debugging extension |
| Resource | Description |
|---|---|
| Netlify | Modern web hosting with continuous deployment |
| Vercel | Platform for frontend frameworks and static sites |
| GitHub Pages | Free hosting directly from GitHub repository |
| Firebase | Google's app development platform with hosting |
| Resource | Description |
|---|---|
| AI Colors | AI-powered color palette generator |
| Unstuck Study | Convert videos to text and summaries |
| Huemint | Machine learning color scheme creator |
| Khroma | AI that learns your color preferences |
| Channel | Description |
|---|---|
| Traversy Media | Web development tutorials and crash courses |
| freeCodeCamp | Long-form programming tutorials |
| The Net Ninja | Frontend and backend development tutorials |
| Fireship | Fast-paced tech tutorials and news |
| Coding Addict | JavaScript and React project tutorials |
| Lydia Hallie | JavaScript concepts explained visually |
| Programming with Mosh | Programming fundamentals and best practices |
| Codevolution | Framework-specific tutorials |
| Resource | Description |
|---|---|
| DEV Community | Social network for software developers |
| Medium | Platform for tech articles and tutorials |
| Hacker News | Tech news and discussions |
| Smashing Magazine | Web design and development magazine |
| CSS-Tricks | Tips, tricks, and techniques for CSS |
| Hashnode | Blogging platform for developers |
| freeCodeCamp News | Programming articles and tutorials |
| Resource | Description |
|---|---|
| Learn Git Branching | Interactive Git tutorial with visualizations |
| Algorithm Visualizer | Visualize algorithms in action |
| VisuAlgo | Visualizing data structures and algorithms |
| JavaScript Visualizer | See how JavaScript code executes |
| Resource | Description |
|---|---|
| HTML5 UP | Responsive HTML5 and CSS3 site templates |
| TemplateMo | Free CSS templates for websites |
| Theme Wagon | Bootstrap templates and themes |
| shadcn/ui | Re-usable component library |
| HTMLrev | Free HTML templates for landing pages |
| Resource | Description |
|---|---|
| LogoMakr | Create custom logos online |
| Favicon.io | Generate favicons from text or images |
| RealFaviconGenerator | Generate favicons for all platforms |
| Resource | Description |
|---|---|
| Device Frames | Mockup frames for showcasing designs |
| Tiny Helpers | Single-purpose online tools for developers |
| Free for Developers | Services with free tiers for developers |
Feel free to contribute to this list by submitting a pull request with additional resources that you find valuable for web development.
This is a curated list of publicly available resources. Please check individual resource licenses before use in commercial projects.