An amazing curated list of helpful frontend development tools


Here is a list of some very helpful frontend development related websites and projects that I’ve used over the years and wanted to share. Each site in some way has helped me with frontend work and has been useful for designing new themes or websites.

image - Vector icons in a font format, easy to use and embed into your HTML for awesome high detailed icons to use on buttons and UI elements. Has a free version but also a pro level

image - Use vector based backgrounds to give your site a fresh look, great for when its either hard to get the same effect with CSS alone. Low file size and supports all browsers

image - Sometimes it just adds a personal touch if you use emojis and its annoying trying to find the right one to use, so I’ve used this site to search for the right emoji before

image - Not for design work but useful to test the speed of your site, search for bottlenecks and UI issues

Flexbox Cheatsheet - Not everyone can be a CSS flexbox master, I can’t tell you how many times I’ve needed to check this helpful guide before when using CSS flexbox for styling

Common CSS Flexbox Layout Patterns with Example Code | Tobias Ahlin - Because CSS flexbox is hard, here is another site with useful examples for different layouts

image - Everyone likes free stuff right? Not everyone is good as designing graphic icons, so this site gives you icons for free! Similar to Font Awesome, SVG based icons

CSS Color Gradient Generator: beautiful gradients for free - Want the perfect colour gradient for your website with CSS? Simple tool to generate modern colours and generates the CSS code for you

PHP extensions in JavaScript | Locutus - PHP unfortunately does not run on the client side, but this useful project has rewritten the main PHP functions in JavaScript, allowing you to feel right at home as a PHP developer

image - A lightweight and modern UI framework. Sometimes it’s nice to have a helping hand in frontend web work, a UI framework can help speed up development

Ace - The High Performance Code Editor for the Web - Need to embed a code editor directly into your website to display syntax highlighted code? Check out ace c9! - Another CSS gradient generator site, helps with settling on a new theme or colour, displays gradients in a grid of cards

image - A fantastic collection of icons to use on your websites as button icons or with graphic design work. Free and paid icons - Another choice for making CSS gradients, a little more advanced than other gradient tools - Mainly used to create backgrounds with a texture that you can apply a colour to using HEX codes

image - An awesome frontend UI kit with a huge range of web elements to help you build a clean looking interface, easy to use and install

Animate.css - Add a little magic with these CSS animations

Hover.css - A collection of CSS3 powered hover effects - CSS animations for when you hover over something

Hopefully this list is helpful to you, maybe you found something new from this list that you didn’t use before? Have I missed something that should be here, let us know!

I may update/edit this list as time goes on. Thanks for reading! :slight_smile:


What a comprehensive list! I especailly like the tools that help with CSS, I’m not the best at design :sweat_smile:

1 Like

Cool list! I used a few tools in the past to create waves on web pages, these are pretty cool:

1 Like