(713) 568-2763

6 Essential Browser Based Tools for Web Professionals

6 Essential Browser Based Tools for Web Professionals

Browser Based Tools for Web Professionals

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.

I know, from firsthand experience, 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 I’ve thrown together a list of my go-to browser based tools that every web professional should know.

1. 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 I mention that you can fork an existing project? Oh sorry, thought I did. Guess what!? You can fork existing projects.

Check it out; as a bonus, a link to One of my Favorite Pens.


2. & 3. 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…. I 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.

Here are some of my favorite CSS generators:

CSS3 Generator


CSS3 Maker


4. 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 I am only mentioning Pixlr because it is really great.

It comes in several flavors, desktop, mobile, web app… 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. Oh yeah, it is also great for making really quick memes…


5. & 6. Dummy Content Tools

If you are like me, 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.

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.

Lorem Ipsum Generator

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 image in?

Dynamic Dummy Image 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 my favorite tools, hopefully you find them useful as well. If you’ve come across any cool tools recently that you would like to share please tell me about them in the comments.

Chad Ostroff
Chad is an over-caffeinated front-end web developer. He’s a proud Houston Rockets season ticket holder. When he’s not watching the Rockets, you’ll probably find him on the beach volleyball courts. Chad is passionate about creating professional websites and content that are easy to use and pleasing to the eye.


Leave a reply

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