20 Awesome Free Tools For Web Developers 2014

20 Awesome Free Tools For Web Developers 2014
by Janeth Kent Date: 16-01-2014 web tools free design developers designers

If you’re a web designer or a front-end developer, you probably spend a lot of time writing mark-up.  Fortunatly, there are some great tools and projects on the web that can improve your next project easily and quickly.

Today we have tracked down 20 brilliant free online tools for developers. We’ve included everything from mark-up organizers, grid systems, jQuery plugins, gradient generators and much more.

Enjoy!

1. CSSmatic Gradient Generator

 

CSSmatic can create any type of gradient, no matter how complex! A great tool for any web designer.

 

 

2, Retinise.js

Retinise.js is a really simple jQuery plugin which 'retinises' your inline images, and because it uses 'data-src' instead of 'src' it means it only ever serves up the image you need, saving you and your users bandwidth.

3. Pure

A set of small, responsive CSS modules that you can use in every web project.

4. Colourco

Pick colours based on hsl. Scheme-mode with monochromatic, analogic, complement, triad and quad colours.

 

5. Snap.SVG

SNAP SVG is an excellent way to create interactive, resolution-independent vector graphics that will look great on any size screen. And the Snap.svg JavaScript library makes working with your SVG assets as easy as jQuery makes working with the DOM..

6. ProCSSo

ProCSSor is hands-down the best free online CSS beautifier. It has host of awesome features so your mark-up gets formatted just the way you like it.

7. Foundation

Foundation is probably the most widely used responsive front-end development framework for developers.

8. CSS3 Maker

CSS3 Maker has a number of free online tools. It’s all GUI based an outputs the code with all major vendor prefixes. It’s also a great way to learn how to create various effects.

 

9. Query Function Builder

Confused by jQuery syntax? Never sure when/where to place your parentheses, curly brackets and so-on? Use this tool to quickly build up a collection of functions that will be called when the page has loaded/is ready.Confused by jQuery syntax? Never sure when/where to place your parentheses, curly brackets and so-on? Use this tool to quickly build up a collection of functions that will be called when the page has loaded/is ready.

10. Free Formatter

If you need to convert HTML to JSON or convert something to escaped format, or pretty much any Web Dev related conversion, freeformatters.com has a whole bunch of tools ready for the job.

11, Glyph Search

Glyph Search let’s you search a number of free online glyph icon libraries.

 

13. CSS3 Animation Cheat Sheet

The CSS3 Animation Cheat Sheet is a set of preset, plug-and-play animations for your web projects. All you need to do is add the stylesheet to your website and apply the premade CSS classes to the elements you want animated.

14. Pre Composed Touch Gestures

A set of basic, precomposed touch-device gestures in a neatly organized zip file for you to use in product demos or presentations.

 

15. IcoMelon

IcoMelon is a free online library and generator for SVG based web icons.

16. UI Cloud

UI Cloud is the largest online database of user interface designs, letting you search through almost 50,000 designs.

17. Raw

Raw let’s you easily and quickly turn spreadsheet data into SVG web visualizations.

18. Bento

Bento is an online resource for learning web development, all links are categorized into various mark-up languages.

19. FlatIcon

FlatIcon is a free online database of over 25, 000 vector icons.

20. Script src.net

Script src is a simple website for all the most current and widely used script tags.

 
by Janeth Kent Date: 16-01-2014 web tools free design developers designers hits : 13566  
 
Janeth Kent

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN AND DEVELOPMENT.

 
 
 

Related Posts

Alternative tools for graphic design

There are many people today who only use the following for design purposes Canva as it is a really popular software and website and there is no denying that it…

Top tools for social media management

Today we know that having a presence on social media is becoming increasingly important if you want to boost your business and reach a wider audience. But first of all,   What is…

How to trim a video without downloading programs

You recently experienced one of the most epic concerts in recent years and now you're in the process of showing the videos you recorded to friends and family who, unfortunately,…

How to make your own custom cursor for your website

When I started browsing different and original websites to learn from them, one of the first things that caught my attention was that some of them had their own cursors,…

8 benefits of having a website for your business

At this moment, the Internet is a phenomenon that is sweeping the world. It has been able to interconnect millions of users all over the planet. People have made the…

Open source web design tools alternatives

There are many prototyping tools, user interface design tools or vector graphics applications. But most of them are paid or closed source. So here I will show you several open…

How to create a .onion domain for your website

The dark web, a hidden network accessed through the Tor browser, offers enhanced privacy and anonymity for websites. To establish a presence on the dark web, you can create a…

How to access webcam and grab an image using HTML5 and Javascript

We often use webcams to broadcast video in real time via our computer. This broadcast can be viewed, saved and even shared via the Internet. As a rule, we need…

How to Send Email from an HTML Contact Form

In today’s article we will write about how to make a working form that upon hitting that submit button will be functional and send the email (to you as a…

Use the SRCSET attribute to improve your SEO

There is a new standard HTML attribute that can be used in conjunction with IMG called SRCSET. It is new and important as it allows webmasters to display different images…

How to multiply matrices in JavaScript

It may seem strange to want to know how to multiply matrices in JavaScript. But we will see some examples where it is useful to know how to perform this…

JavaScript Formatting Date Tips

Something that seems simple as the treatment of dates can become complex if we don't take into account how to treat them when presenting them to the user. That is…

Clicky