Back to main page

Free tools I use while building websites

When I start a new project there's some free tools that I often use and I want to share those with you

Accessibility Tools

WebAim color contrast - quick way to test if color combinations pass WCAG standards

How I use it: While choosing colors for a project, I use this to do a quick double check that they are accessible with the background I’m using

Axe DevTools - browser ext - scans your site and gives recommendations on how to improve accessibility

How I use it: When building websites I run axe devtools before I deploy to catch any A11y issues that need to be corrected

Deque University Screen Reader Cheatsheet - A central area to review shortcuts for popular screen readers

How I use it: I use this when testing enterprise applications with a screen reader and need a refresher on shortcuts

Figma A11y Color Contrast Checker- figma plugin to check color contrast on designs

How I use it: When I'm creating new designs and picking out a new color palette I use this plugin to catch any color contrast issues in the designs

UX/UI Tools

0to255- color picker with a large variety of color shades

How I use it: I use this a lot in combination with the adobe color wheel when choosing out color pallets for new projects

Adobe Color Wheel - color picker with a large variety of color shades

How I use it: When experimenting with colors for a color palette I use this to get some of the base colors like primary, secondary, and accent

Dribble - UX/UI designs for inspiration and show and tell

How I use it: When I just need some inspiration or new ideas I look through some of the projects on this site

PX to REM Converter - Simply converts pixels to REM

How I use it: When setting up typography on a project I use this to convert font sizes to REM

Drawing and Animations

Krita - Free software similar to Adobe Illustruator

How I use it: I use this to create NFTs, SVGs, and other digital art

Lottie Files - Free and paid SVG animations that can be used in web applications

How I use it: This is a great way to add free animations to zuzh up my websites

Photopea - Free and browser software similar to Photoshop

How I use it: I use this to manipulate photos for art or websites

AOS - Animate on scroll is a free npm package that provides basic animations when scrolling

How I use it: I mostly use this on static sites to help tell a story through animation while the user is scrolling