Web Development Tools: Our Top Picks

This post talks about web development tools that will help convert your good ideas into excellent pieces of web development. Every day, new cloud-based web development tools are being pushed to replace robust desktop programs, as with so many things in our industry are. Let’s begin our list:

We Love Icon Fonts

we-love-icon-fonts

Cool website that allows the free hosting of icon fonts. The idea is similar to Google fonts. You may add any icon set to your collection and then integrate it to your CSS and font family.

Maskew

Maskew

An innovative javascript library that allows the skewing of elements used within it. Its homesite shows a cool example that allows to manipulate the skewing manually.

Uxpin

Uxpin

A web based tool ideal to create designs that provide good user experience. As stated in developers’ page it is created by UX experts, and has a work scheme that allows real time group design as a plus. Don’t let your prototypes turn into bad applications just because of bad user experience, just let this tool make wonders alongside you.

CSS3 Text Shadow Generator

CSS3 Text Shadow Generator

This is certaily one of the most useful tools you can find. Take the monotony out from your titles and other texts with these awesome, even rare fonts, spectacular effects and shortcode easy to integrate to your web pages. Create awesome titles, banners, logos and whatever else you can imagine with this fantastic tool

Over API

Over API

This is the resource which autodidactic developers will love. Contains the cheat sheets for the most important scripting languages ordered depending on the function, so you will never forget again that code missing in your head right when you needed it. Also contains some other useful resources for web projects.

If you are fed up of the same fonts and the same effects over text, this is the ideal site for you. Probably one of the most complete and easy to use free tools over the web. Choose between 24 title effects and dozens of fonts. Once you find the ideal font and effect, use it by implementing the code that is generated.

Scratchpad

Scratchpad

A nice coding tool supporting HTML and CSS. Renders in real time, allows real time collaboration by sharing the URL, and closes opened tags for you. Ideal tool for learning and teaching,

Literally “Canvas”

Literally

A simple drawing tool built in HTML5. Consists of a canvas with the most basic drawing tools. It misses the option to undo last action, but in general is a cool tool and source code is available to be used in external environments.

CSS3 Generator

CSS3 Generator

The ideal tool for those that barely know about using CSS or want to save time talking about serious editions in style. Its simplicity to use graphic interface allows to manipulate the effects at your convenience while generating in real time a snippet to be inserted in your style sheet. It is certainly a good tool for you to learn about how cascade styling works, and a very productive tool that saves you from writing large sets of codes to get a simple effect.

CSS Box Machine

CSS Box Machine

Another CSS  tool that helps you to quickly create a page using predesigned boxes and background designs with a snipet for both HTML and CSS. Save tons of time with this amazing tool.

Viewport Resizer

Viewport Resizer

This easygoing tool is great to test any site responsiveness in multiple devices. Using it is as simple as bookmarking the page and then clicking on the bookmark whenever on the page we want to test. Developer’s page also offers multiple customization options for you to create your own site responsiveness testing tool.

Mini Help System with jQuery

Mini Help System with jQuery

An easy to follow tutorial to create a jQuery based search tool. Page includes preformated code with explanation of steps to follow in order to reproduce the tool, and the finished product ready for download.

Roots

Roots

This is a cool and useful tool developed for front end developers. It’s simple to install, simple deployment process and besides, it has real time implementation thanks to its automatic reload.

MakeAppIcon

makeappicon

This tool takes an inserted image and converts it to a .PNG application icon. It is something that you could do manually, but it helps you to save time since the image converted is resized to all standard icon sizes for android and iOS in a really fast way.

HTML Codesniffer

HTML Codesniffer

Based on A, AA, and AAA standards you can test your html code to find any violations to standard coding. Useful for those special cases when you need to know about any errors in your coding, for example if your site is attempting to win an award.

Cedvel

Cedvel

Do you want to design your own grid easily? CEDVEL could help you to do so. It is now on its prototype version but ready to be used. With a detailed documentation for general use of the tool provided on the page.

Typ.io

typ.io

This is a growing website with a curious way to share bookmarking of typographies.  It showcases fonts that blend well together and has a running tab of popular fonts. Definitely worth taking a look at.

Generator Box Shadow

Generator Box Shadow

Ideal for creation of minimalistic sites with a light colors scheme. The creation of shadows gives more intensity to light colors on the page. You have control of the shadow with a graphic interface, and the snippet edition is done realtime. Once you have the shadow style that you want, simply paste the code on your page.

Telescope

telescope

The concept idea is similar to Reddit but this news app is built with meteor, which is a real time framework, meaning real time updating.

Fake Images Please?

Fake Images Please?

This is an open source web tool that provides dummy images for your site. If you’re testing a layout, this is an interesting way to do it. You are able to select color, size and text for the dummy image.

Mockup Designer

Mockup Designer

The ideal tool to sketch your project. If you don’t like the way it looks, then change it!

EntryDNS

EntryDNS

This is an online tool designed to manage DNS. Easily manage multiple domains and hosts, collaborate and manage work-sharing with other sysadmins, automate and simplify infrastructure.

Vmail

Vmail

Some people are simply not happy with GUI’s or even web browsers and prefer to do their stuff with Vim. That’s the reason why this tool exists: to manage Gmail from Vim. Ruby is required to use this tool, so does a Gmail account, of course. Other requirements are explained on the developers page.

ish 2.0

ish

This is a responsivity testing tool available for download at GitHub. It doesn’t set fixed breakpoints. Use it to test and make sure that something works great at any resolution.

Start Your Own Freelance Business!

Learn how I went from a corporate employee to owning my own freelance business and blog. Sign up for my email newsletter and get a FREE copy of my Ebook plus a coupon for 10% off your first billing cycle on any Vandelay Premier plan!

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads.