An amazing curated list of helpful frontend development tools

Hey!

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
https://fontawesome.com/ - 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
https://www.svgbackgrounds.com/ - 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
https://emojipedia.org/ - 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
https://tools.pingdom.com/ - Not for design work but useful to test the speed of your site, search for bottlenecks and UI issues

image
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

image
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
https://linea.io/ - 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

image
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
https://getuikit.com/ - 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

image
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!


https://gradients.cssgears.com/ - Another CSS gradient generator site, helps with settling on a new theme or colour, displays gradients in a grid of cards

image
https://www.flaticon.com/ - A fantastic collection of icons to use on your websites as button icons or with graphic design work. Free and paid icons


https://cssgradient.io/ - Another choice for making CSS gradients, a little more advanced than other gradient tools


https://www.transparenttextures.com/ - Mainly used to create backgrounds with a texture that you can apply a colour to using HEX codes

image
https://semantic-ui.com/ - 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

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

image
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:

3 Likes

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