Pinterest Stumbleupon Whatsapp

If you’re a coder who does web development, you know that you’re always in your browser checking how things look or work. Because of this, it’s incredibly useful for you to have coding tools which work from within your browser.

In fact, considering how useful these tools are, you’ll wonder how you ever got by without them. There are tools which let you view your web page changes in real-time with every little code change you make, tools to make your CSS compliant with all browsers automatically and tools to create gradient backgrounds in CSS – and that’s just the start! Here’s some of the best tools you can check out now.

Ultimate CSS Gradient Generator

Gradients can be done in many ways, but the most sophisticated way is via CSS. However, to create this usually requires a little perseverance. Not with the Ultimate CSS Gradient Generator, though. This tool just gets you to pick the various points in the gradient from a demo gradient. Then, your CSS is made and you’re on your way.

Brackets: Open-Source Code Editor For The Web

The Open-Source software Brackets is a neat way to edit HTML, CSS and Javascript files for a page. Everything you’re working on is brought together for editing. Meanwhile, you can edit your work really easily by clicking on the element you want to fix and choosing to Quick Edit (which can be done with a Cmd/Ctrl + E). The exact piece of code you need to edit pops up and when you’ve finished it will show you exactly what it looks like now.


Also, if you want to fix the Brackets editor up a little, you can do so using HTML, CSS or Javascript. Neat, huh?

CSS Text Wrap

The CSS Text Wrap tool is the ultimate in wrapping text in cool shapes. You can use a picture to generate a shape, use CSS, XHTML or JavaScript to adjust the shape or simply move sliders about. It will give you the perfect CSS to get your text wrapping around that shape.

CSS3 Please

CSS3 Please gives you a nice rounded box and a matrix to manipulate and gives you resultant code which is compliant with all browsers in CSS3. Basically, you start with the basic code given to you on the site and tweak it to your taste. Quite simply, this tool will save you a lot of headaches which are completely unnecessary these days.

Grid System Generator

You know that feeling of dread you get when you’re starting a new web design project and you want to set up the CSS for a new grid layout? Well, take a look at Grid System Generator. It does exactly what it says, and that is set up grids in CSS for you. All you need to do is tell it your width, number of columns and set the margins. You get yourself a perfect grid generated just for you.

More Reading

Here are a few more great ideas to help with your web coding:

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. leon chan
    July 22, 2012 at 8:16 pm

    This will help a lot. Thanks!

  2. erickhbhn
    July 21, 2012 at 9:22 pm

    thanks for info

  3. MerVzter Balacuit
    July 21, 2012 at 2:23 am

    thanks for this

  4. Rigoberto Garcia
    July 20, 2012 at 10:15 pm

    Great information Angela. Thanks

  5. Kylee Kanavas
    July 20, 2012 at 8:41 pm

    This seems WAY oever my head! Lol