Useful Tools/Extensions/Sites

Design Tools

• Canva
• Color Scheme Generator
• Subtle Patterns
• Virtual whiteboard for sketching hand-drawn like diagrams
• HTML Color Names
• Interface design tool
• InkSpace: Vector Graphics Tool
• Blob Maker
• CSS Clip Path Maker
• Clip Path Generator
• Fancy Border Radius
• CSS Gradient
• CSS Drop sahdow effects
• Wave transitions
• color scheme generators
• PALX: AUTOMATIC UI COLOR PALETTE GENERATOR

Free Photos, Videos & Illustrations

• Pixabay
• Freepik
• Open-source illustrations
• Pexels
• The Noun Project - Free icons and photos
• DrawKit - Free illustrations

Emojis

• Get Emoji
• Emoji Pedia
• Table Flipping Emojis, Emoticons, Smileys

Working with Images

• Open Peeps: A hand-drawn illustration library
• SVGOMG - SVG Optimizer
• SVG Path Visualizer

Photo editing

• Photopea

Animations

• Professional-grade JavaScript animation for the modern web

Avatars:

• RoboHash
• Adorable Avatars
• DiceBear Avatars

CSS Buttons

• CSS Button Generator
• CSS Button Creator

CSS Box Shadow

• CSS Box-shadows Examples

CSS Calculator

• PX to REM converter

CSS Grid & Flexbox

• Visual Cheat sheet for CSS Grid Layout
• Visual Cheat sheet for CSS Flexbox Layout

Lorem Ipsum

• Loripsum
• Lorem Picsum - The Lorem Ipsum for photos

Website traffic and performance

• SimilarWeb

Responsiveness

• Responsive Web Design Checker

Online Video Maker

• Flixpress
• Promo
• Vidnami

In-browser Markdown editor

Stackedit

Fake Data Generation

• FakeJSON
• JSONPlaceholder
• UI Names
• RandomUser

Wireframes

• Wireframing tool

Mindmaps

• Mindmup

Which Key

• Get the JS Event Key Code

Screenshots with JavaScript

• html2canvas - example

DNS

• What Is DNS? | How DNS Works
• DNS Lookup Tool
• DNS Spy

Chrome extensions

• JSON Viewer
• EditThisCookie
• ModHeader
• Omnibug
• React Developer Tools
• Allow Right-Click
• Debugger for Adobe Analytics
• Vysor
• Tidy Gherkin

VS Code Extensions:

• Cucumber (Gherkin) Full Support
• ESLint
• Debugger for Chrome
• GitLens - Git supercharged
• GraphQL
• JavaScript(ES6) code snippets
• Markdown Preview Enhanced
• Markdown Shortcuts
• Open in Default Browser
• Prettier-Code formatter
• React Native Tools
• Tabnine Autocomplete AI
• Theme - Oceanic Next
• Import Cost

API Tools

• Swagger Inspector