Tools for Web Developers and Designers
A list of awesome resources to make a developer's life easier.
3 min read
Tools for Web Developers and Designers
Design Inspiration
| Source Link | Description |
|---|---|
| Minimal Gallery | Websites with minimalist design and convenient filtering. |
| Cosmos | Tons of useful stuff. Unique images, interesting UI/UX, and much more. |
| 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. |
Catalog of Ready-Made Components
Components with open-source code.
| Source Link | Description |
|---|---|
| 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, Framer Motion, React. |
| Edil Ozi | Open-source library with ready-made components for React applications. Stack: Tailwind, Framer 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 Framer 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, Framer 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, Framer Motion, React, Tailwind/CSS |
Stock Images
| Source Link | Description |
|---|---|
| Lummi AI | AI-generated images and illustrations. |
| Unsplash | Professional photos. |
| Pexels | Free stock photos shared by professionals. |
Don’t forget to compress images using Squoosh or similar services to optimize image size.
Artificial Intelligence for Various Use Cases
| Source Link | Description |
|---|---|
| Ideogram | Image generator with a free tier. |
| Grok AI | An alternative to ChatGPT, better for coding (in my opinion). |
| Leonardo AI | Image generator with a free tier (refreshes daily). |
| Easy With AI | A collection of AI tools for various use cases. |
Other Useful Sources
| Source Link | Description |
|---|---|
| Wappalyzer | A site to view technologies used on other websites (Web Scraping). |
| Jitter Video | Ready-made video templates that can be customized and integrated into web applications. |
| Squoosh | An image compression service from Google Chrome Labs. |
| CSS to Tailwind | Convert your CSS code into Tailwind in seconds. |
| Relume | Wireframe & layout structure generator. Boosts your design in start! |
| Cheatsheets.zip | A collection of cheatsheets for various tools and technologies. |
