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:
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.
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.
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
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.
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,
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
The ideal tool to sketch your project. If you don’t like the way it looks, then change it!
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.
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.
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.