Skip to main content

Over the years I have stumbled across many useful web development and coding tools. These are usually simple tools for doing things like generating code, auditing websites and web apps, and generating and formatting website content.

I decided to put together an archive of some of my favourites. The following is a list of tools that I have either found myself using often, or are tools that I think are particularly useful and well designed. Enjoy.


Web Code Tools
Web Code Tools

Web Code Tools

Web Code Tools is suite of tools for generating web code including CSS, HTML5, etc. I find the JSON-LD Schema Generator and Open Graph Generator particularly useful.

TitleCase web development tool
TitleCase

TitleCase

TitleCase is a handy tool for converting the case of text. I often use it for article headings or to convert text that has been (annoyingly) written in uppercase.

PXtoEm Web Development Tool
PXtoEm

PXtoEM

PXtoEM is a tool for conversions between pixels, ems, percentages, and point values. I have found this tool useful because I like to code my text sizes in EMs.

Favicomatic
Favicomatic

Favicomatic

Favicomatic is a handy tool for generating website or app icons and favicons. I usually start with a nice large image of the icon and then use Favicomatic to automatically generate the different icon sizes for the different devices. Favicomatic also generates the required code to include the icons in your website or web application.

CSS Gradient web development tool
CSS Gradient

CSS Gradient

CSS Gradient is a handy tool for generating CSS gradients.

CSS Responsive Images Linter
RespImageLint

RespImageLint

Figuring out the correct formulas for responsive image source sets can be a bit of a head-ache, especially in relatively complex layouts. I was amazed at how well RespImageLint worked in this regard.

Minify Code
Minify Code

Minify Code

Minify Code includes a handy set of tools to minify and beautify JavaScript, CSS, and HTML.

Type Scale Clamp Generator
Type Scale Clamp Generator

Type Scale Clamp Generator

Generate CSS code for type clamp properties using this handy Type Scale Clamp Generator by Maxim Roudier.

Dirty Markup code beautifying tool
Dirty Markup

Dirty Markup

Dirty Markup is another great tool for beautifying code with some handy formatting options.

JavaScript Obfuscator Tool
JavaScript Obfuscator Tool

JavaScript Obfuscator Tool

As its name suggests, a simple tool for obfuscating javascript.

Google Mobile Friendly web development tool
Google Mobile Friendly

Google Mobile Friendly

Audit your site’s mobile friendliness with this simple tool from Google.

GTMetrix perfomance analysis tool.
GTMetrix

GTMetrix

GTMetrix – A thorough web performance analysis tool.

Page Speed Insights web development tool
Page Speed Insights

Page Speed Insights

Page Speed Insights has been around for a while now, but I think it is still a great tool for auditing website performance with a lot of useful information and tips. These days Lighthouse in Chrome DevTools (see below) does pretty much the same thing and is possibly a bit more up to date.

Chrome DevTools
Chrome Dev Tools

Chrome DevTools

For website and app development I use Chrome DevTools more than any other tool. Just right-click and select ‘Inspect’. I regularly use Lighthouse to audit my sites and progressive web apps for things like accessibility, best practices, and SEO etc. I also use the Application and Console tabs frequently to check how my code is functioning. I also find Chrome DevTools to be the best place to resolve bugs with my CSS.

Operator Lookup tool
Operator Lookup

Operator Lookup

Operator Lookup is a nicely designed tool for looking up Javascript Operators.

Keycode info tool
Keycode Tool

Keycode Tool

The Keycode Info tool is a simple tool to get the Javascript event Keycode for any keyboard key. I have found this tool useful when developing games or apps that require keyboard inputs.


Otherwise, I hope you find this list of web development tools useful. Please don’t hesitate to get in touch at contact@henryegloff.com if you know of any other useful tools that you think belong here.


If you would like to stay in the loop when I publish new content your best bet is to join my mailing list. Otherwise you can find me on Youtube, Twitter, Instagram, Reddit, Artstation, LinkedIn, and Behance.

Filed under:
Web Design & Development

Similar Articles:

Awesome Examples of Three.js

Awesome Examples of Three.js

An archive of three.js demos that have particularly impressed me, either creatively, technologically, or a combination of both.

Web Design Gurus

Web Design Gurus

An archive of brilliant and inspiring web designers and developers, sharing knowledge, tools, and tricks of the trade.

All Articles

Featured Projects

Lustrous

Lustrous

3D digital artwork / animation created with three.js.

About Me

Hi, I'm Henry Egloff - a multimedia artist, designer, and coder, based in Byron Bay Australia. I create digital art, design and code apps, write articles, and develop tutorials.

I specialise in designing and building dynamic and interactive media with languages like HTML, CSS, PHP, and Javascript, and using tools like Three.js, Blender, Adobe, and Unity.

I love working creatively and helping people learn.

I'm currently available for freelance / contract projects and online tuition roles. Learn more about me or say hello at contact@henryegloff.com.

Henry Egloff
Twitter Twitter 2 Facebook Linked In Instagram Codepen Behance Youtube Opensea Heart Dark Mode Light Mode