Whether you are a blogger, a content editor, or even a developer, there’s great value in finding (free) web based tools that can make your life easier and simple tasks faster.

We know what it’s like to spend hours on a project, only to later find out there was a tool that would have made a five hour task into a five minute task. That’s why we have thrown together a list of go-to browser based tools that every web professional should know.

CodePen

CodePen is a browser based HTML, CSS, and JavaScript code editor gives us the ability to create and save working instances of our code with... INSTANT PREVIEWS.

Additionally you can search through the collective of Pens, as they call them, for something that might accomplish exactly what you are trying to do. Oh and did we mention that you can fork an existing project? 

CodePen

CSS Generators

Cascading Style Sheets or CSS is what we use to make page elements look the way they do, the color, the spacing, the font-size, the drop shadow...we could go on and on but chances are, whether you are building content in a WYSIWYG or you are coding from scratch in your favorite editor, insert shameless plug here – Brackets http://brackets.io/ – you are familiar with styling page elements.

Anyway, these tools give you a set of controls and an element that you can test and tweak various CSS3 properties and see instant previews in your browser. Pretty awesome, especially if you are just starting to experiment with CSS3 and not sure exactly what the syntax should look like. These tools even let you save the code you generate for use in your own style sheets.

Some of our favorite CSS generators include the CSS3 Generator and CSS3 Maker.

css3 generator

Pixlr

How many times have you needed to scale or crop a photo but you can't because you don't have that expensive photo editing software? Well, guess what, there is a very cheap (FREE) web based alternative. Several, actually, but we are only mentioning Pixlr because it is really great.

It comes in several flavors, desktop, mobile, web app, etc. So regardless of your platform you should be able to use one of them. Check this tool out; it is really robust for a browser based tool. 

Dummy Content Tools

If you are like us, then every bit of your time is valuable and anything that can make it quicker to design/build things – without compromising on quality – is a HUGE help.

So what are dummy content tools? Well, they are tools that allow for the creation and inclusion of dummy content to fill a mockup with realistic looking content. These tools can help out a TON when you have a project that is waiting on content. One of our favorite content generators is the Lorem Ipsum Generator.

First of all what is Lorem Ipsum? Lorem Ipsum is just dummy text used in the printing and typesetting industry since the 1500s to simulate what actual text based content would look like. Essentially it is placeholder copy that is For Presentation Only, or FPO.

This site has a handy little generator that allows you to create a number of paragraphs, words, bytes and lists that you set. Very helpful.

Another one of our favorites? The Dynamic Dummy Image Generator. This tool basically lets you do what the Lorem Ipsum generator does for text, for images. This can be super useful when trying to demonstrate how imagery can be used in page content without having to pick stock imagery first. Often clients can be distracted by imagery anyway so why not just throw a dummy.

Lorem Ipsum Generator

Finding good tools to compliment your workflow is a challenges, especially because there are so many out there to choose from. These are some of our favorite tools, hopefully you find them useful as well. 

Help! I have a Quick Question.

Submit
Desktop Tablet Mobile