RSS

Category Archives: Tools

10 Useful Tools for Web Development

There are many online tools which makes the life of web developer much easier. Here we list 10 tools which help us time to time in our web development.

1. CSS Gradient Button Generator

CSSGradientButton gives you customizable options to create awesome CSS buttons with hovering effects in simple steps. Create the button of your choice with the CSS gradient button panel, get the code generated and paste it into your style sheet.

CSS Gradient Button

CSS Gradient Button

Visit Site

 

2. CSS Gradient Generator

It helps you generate CSS code online for the desired gradient in 3 steps.

  1. Create and control the gradient using the stop panel.
  2. Preview it on the preview panel.
  3. Obtain CSS code from the CSS panel.

 

CSS Gradient Generator

CSS Gradient Generator

Visit Site

 

3. Border Radius Generator

Just input the top and bottom border radius in the 4 input boxes and get the ready to apply CSS code for your stylesheet.

CSS Border Radius Generator

CSS Border Radius Generator

Visit Site

 

4. Online Web font Testing

Using TypeWonder we can get a preview of web-fonts applied to our website by just entering the website url and choosing the desired font.

Type Wonder

Type Wonder

Visit Site

 

5. Color Picker

Choose your color from the picker and get the hex color code/rgb values easily. One can save the favorite colors.

Color Picker

Color Picker

Visit Site

 

6. Validators

A validator is a software program that can check your web pages against the web standards.

W3C validator

Using W3C validator we can check our HTML, XHTML or CSS documents, the validator returns a list of errors found, according to your chosen standard.

Site Validation

Site Validation

Visit Page

 

JSON Validator

Using the jsonlint validator we can check the validity of our json code.If your json code is valid it returns the status valid,else it shows the errors found in your json code.

Json Validator

Json Validator

Visit Page

 

7. Online HTML CSS JAVASCRIPT Minifiers

The following minifiers removes the comments and unnecessary whitespace from a program. Depending on how the program is written, this can reduce the size by about half.

JAVASCRIPT/CSS Minifier using YUI Compresser

 

CSS Javascript Compressor

CSS Javascript Compressor

Visit Page

 

HTML/CSS Minifier

 

HTML Minifier

HTML Minifier

Visit Page

 

8. Online CSS HTML Javascript Coding using Jsfiddle and dabblet

Jsfiddle is an instantly ready coding environment .This tool lets you combine CSS, HTML and JavaScript to create coding examples.
There are four panels (HTML, CSS, JavaScript and preview) so you can see everything you need to at once and resize each area on the fly.You can also add several major libraries such as Jquery.

jsFiddle

jsFiddle

Visit Page

 

dabblet is an interactive playground for quickly testing snippets of CSS ,HTML,Javascipt code.It uses prefix-free,so that we don’t have to add any prefixes in our CSS code.
An additional feature is if you hover over any bit of CSS code it will display the effect.eg: when you hover over the background color code it shows the individual color in a tooltip.
Also you can concentrate on the css and html result seperately since it provides you with options
>CSS & Result
>HTML & Result

CSS Html Js Test

CSS Html Js Test

Visit Page

 

9. Shorten your website url using bitly

We can shorten our website urls using bitly.Just input your website url and click go.We get the bitmark corresponding to our link which is the shortened version of your url ,making it easy to share and remember.

bitly

bitly

Visit Page

 

10. Website Speed Test Using Pingdom

Just input your webpage url and click go to get a detailed summary of your webpage loading time and performance.

Website Speed Test

Website Speed Test

Visit Page

 
2 Comments

Posted by on September 17, 2013 in Tools