😎 Super Cool Design Resources

A collection of super cool design and development tools/resources

Everything in this guide is free btw

♿ Accessibility

Colors

• WhoCanUse color checker

Documents

• PAVE PDF accessibility tool

Development

• ARIA Authoring Practices Guide UI Component Patterns

Icons

• Fontawesome icon accessibility

Website Testing

• WAVE browser plugin

🎨 Colors

Tools and Generators

• Coolors pallet generator

📐 Design

UX Resources

• Laws of UX
• Daily UI Challenge
• UX Project Checklist

Tools

• Blender
• Figma
• Miro

Plugins

• Clay Mockups 3D
• Iconify icons
• Maze user testing integration

📜 Text and Fonts

Font Libraries

• Google Fonts
• Fontsource Library

Tools

• Fontjoy type comparer

Notices

• FreePrivacyPolicy privacy and copyright notices

Markdown

• Markdown Guide
• GitHub supported emojis

🖼️ Icons and Images

Editors and Generators

Online

• Base64 image encoder
• Canva
• Icons8
• x-icon editor
• Text to ACII art generator

Desktop

• GIMP (GNU Image Manipulation Program)
• Inkscape

Icon Libraries

• Fontawesome icons
• Hero icons
• Lucide icons
• Skill Icons
• Iconify icon search
• Framework7 icons

Image Libraries (Free Use)

• British Library public domain images
• Pexels
• Pixabay
• Unsplash

💻 Web Development

CSS and Tailwind CSS

Animation

• Animista animation preview
• cubic-bezier
• Keyframes app
• Transition.css
• Wait! Animate

Backgrounds and Patterns

• Hero Patterns
• Haikei SVG generator
• Doodad patterns

Calculators and Generators

• Clippy CSS clip-path generator
• Fancy Border Radius
• Quantity Queries

Colors, Shadows, and Gradients

• Smooth Shadow
• Tailwindcss color reference
• Tailwindcss Gradient Generator

Effects

• CSS Filters
• CSS Glow Generator
• Glassmorphism Generator
• Neumorphism.io CSS Generator

Libraries and Kits

• Open Props
• Tailwind CSS Typography plugin

Frameworks

• Astro
• Svelte/SvelteKit

HTML

Boilerplates and Libraries

• HTML Boilerplates

JavaScript

3D Graphics

• Babylon.js
• Three.js

Component Libraries

• Swiper carousels
• Slick carousels
• Masonry image layouts

Effects Libraries

• Atropos 3D Parallax
• Heatmap.js heatmaps
• Typed.js

User Interface Systems

• Skeleton
• DaisyUI
• Preline
• Shadcn/ui
• NextUI
• Flowbite

Website Testing

• Browserstack browser testing
• Nu HTML Checker
• W3C Markup Validator
• Regex101

📚 Learning

General Programming

• W3 Schools
• freeCodeCamp

Web Development

• The Odin Project
• Full Stack Open