The Best Resources for Web Developers and Designers (Opinionated)
A list of awesome resources to make a developer's life easier.
Check out my YouTube video where I showcase the resources listed here in action.
| Source Link |
Description |
| Minimal Gallery |
Websites with minimalist design and convenient filtering. |
| Unsection |
Over 1000 web pages categorized by sections with convenient filtering. |
| Supahero |
Supahero offers the best Hero sections for web pages. |
| Stack Sorted |
A collection of the best web designs, sorted by elements. |
| Awwwards |
A place where the best websites in the world are evaluated and collected. |
| SaaSpo |
Page or section SaaS web design inspirations. |
| Bento Grid |
Curated collection of bento designs for your inspiration. |
| Growth Design |
Product Psychology Case Studies from Big Tech, Showcased with Comics. |
| MDX |
3D Web Design Inspiration Catalogue |
| Codrops |
Freshly hand-picked websites for your inspiration. |
| Inspo.page |
The website inspiration library curated at the component level |
| Laws of UX |
Collection of best practices that designers can consider when building user interfaces (UX) |
Catalog of Ready-Made Components
Components with open-source code.
| Source Link |
Description |
| Emerald UI |
Modern UI components to install - built with GSAP and Framer (self-promo). |
| Built At Light |
A marketplace with links to free websites, components, and UI kits with convenient filtering (includes both paid and free templates). |
| Codrops |
One of the best open-source components. Most are written in HTML, CSS, JS. |
| Aceternity UI |
Top-notch additions for ready-made web pages. Technologies: Tailwind, Motion, React. |
| Edil Ozi |
Open-source library with ready-made components for React applications. Stack: Tailwind, Motion, GSAP. |
| Shad CN |
Open-source component library for creating your own library. All components can be customized to your design. Stack: Tailwind, React. |
| Motion Primitives |
Some of the best animated components using Motion, Tailwind. |
| UI Verse |
A large number of ready-made UI components, updated daily. Stack: HTML, CSS/Tailwind. |
| Olivier Larose |
A motion design specialist who teaches and shares high-quality content. Stack: GSAP, Motion, React. |
| 21st dev |
High-quality visuals in an open-source library for React developers. |
| React Bitz |
Collection of animated, interactive & customizable React components. Stack: Gsap, Motion, React, Tailwind |
| Origin Kit |
Free Unusual Animated components for modern websites |
| Source Link |
Description |
| Lummi AI |
AI-generated images and illustrations. |
| Unsplash |
Professional photos. |
| Pexels |
Free stock photos shared by professionals. |
| theSVG |
Colored Icons of popular brands |
Don’t forget to compress images using Squoosh or similar services to optimize image size.
| Source Link |
Description |
| Animos App |
Export Animated video fragments with ready to use templates. |
| Jitter Video |
Ready-made video templates that can be customized and integrated into web applications. |
Artificial Intelligence for Various Use Cases
| Source Link |
Description |
| Ideogram |
Image generator with a free tier. |
| Leonardo AI |
Image generator with a free tier (refreshes daily). |
| Easy With AI |
A collection of AI tools for various use cases. |
| Magic Patterns |
Amazing AI tool for creating ready to use components (5 credits per/m) |
| Antigravity IDE |
Personal favorite AI IDE |
| Cloudflare Models |
Add AI to your app in minutes, without the cost or complexity (PAYGO) |
| Source Link |
Description |
| Wappalyzer |
A site to view technologies used on other websites (Web Scraping). |
| Squoosh |
An image compression service from Google Chrome Labs. |
| CSS to Tailwind |
Convert your CSS code into Tailwind in seconds (works both side) |
| Relume |
Wireframe & layout structure generator. Boosts your design in start! |
This resource will be updated in the future with the best tools, so drop a ⭐️ to keep track!