Resources

Coveloping Web Development And Freelancer Tools

For those who follow me on Twitter or Google+ you may of noticed that lately I've been tweeting a lot of posts from a website called Coveloping. This is a project that I've been working on a lot more lately to get into a state where it's becoming almost essential for web developers or freelancers.

Coveloping starting off as a website I built with a another web developer David Bainbridge, it started off as a place we can build generators that we use on a daily basis such as CSS background gradient, unix timestamp converter, password generators. As web developers of any level you will also find yourself searching for these types of web tools that just make your job easier. It doesn't matter if you're a very experienced developer or someone just starting out there will be tools that you use almost everyday.

View the below video to see what's included in Coveloping.

Get access to all of the Web Development tools from only $4.99 a month and if you sign up using the discount code PAULUND50 and get 50% off your Coveloping membership costs forever.

Coveloping Membership

A CSS gradient generator is the perfect example, the CSS property isn't very complicated.

background: #1E5799; 
background: -moz-linear-gradient(left, #1E5799 0%,#7db9e8 100%); 
background: -webkit-linear-gradient(left, #1E5799 0%,#7db9e8 100%); 
background: linear-gradient(to right, #1E5799 0%,#7db9e8 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1E5799 0%',  endColorstr='undefined', GradientType=1 );

But with the syntax you have to remember to make it cross browser you'll never going to remember it all so you need to tool to help. You can either use a pre-processor or a tool to help generate the CSS code.

Some of the other popular tools you might find yourself using almost daily are:

  • Box shadow generator
  • border radius generator
  • Color picker
  • CSS Flexbox playground
  • QR code generator
  • Hourly rate calculator
  • CSS nth-child tester
  • CSS minifier
  • JS minifier
  • Unix timestamp convertor

I found myself using a couple of these tools daily but there wasn't just one place I can go to use these tools I had to always just search for tools and find one in the search engine. This meant that most of the time I would be using different tools for the same job or using tools that weren't very user friendly or had poor design. I wanted a place to go where I can use all these tools, they're linked together and I can save and reuse some of the generated code I made in the past. I couldn't find a site which had this and David also had the same problem so we decided to build Coveloping.

After a couple of years working on Coveloping we now have over 50 tools that can help web developers and freelancers. These 50 tools are categorised into 6 groups of tools:

For the rest of this article I'm going to go through all of our tools and show you how they can be useful. From the list above if you spot a range of tools you might like click on the links above to skip to that section.

Generators

Border Radius Generator

Border radius generator Test out how the CSS border-radius works by using the border-radius generator.

You have the ability to change the radius of all corners of a rectangle and can even switch between pixels and percentages to see the difference in using the two value units.

Border-radius Generator

Colour Shades Generator

The colour shades generator allows you to choose a starting colour and get 15 darker and lighter colours from the original. This tool is perfect if you want a colour similar to a starting colour this tool will help you.

Colour Shades Generator

Crontab Generator

Using this tool has an easy-to-use interface you can generate crontab to use on your server to run scheduled tasks. The tool features the ability to set run periods by minute, hour, day, month and weekday and the variation to run on an exact minute of each hour, or periodically at set intervals.

Crontab Generator

CSS Animation Generator

Using the CSS animation generator you can generate over 60 different CSS animations. You can also use the different easing options; ease, ease-in, ease-out, ease-in-out and linear. You can change the duration and if the animation should run infinitely can also be set.

Once you're happy with the animation, which you can try out using the live preview, you can then generate all the HTML and CSS required.

CSS Animation Generator

CSS Box Shadow Generator

Learn how to use the CSS box-shadow property by using this CSS box shadow generator the tool will even allow you to use pseudo properties to add new 2 new elements to the box to create new style box shadows.

CSS Box Shadow Generator

CSS Button Generator

Our CSS button generator offers a range of predefined templates to quickly generate the HTML and CSS you need to create interesting buttons for your site. You can use the predefined templates as they are, edit them or create a completely custom button on our easy-to-use drag-able interface. Define CSS properties such as height, width, padding, colour, text-alignment, font, border type and much more without having to write a line of code.

CSS Button Generator

CSS Filter Generator

CSS filters is a new property with CSS that allows you to edit both HTML elements and images. Using this CSS filter generator you've able to play about with the new CSS filter properties such as Greyscale, Blur, Saturate, Sepia, Hue Rotate, Invert, Brightness, Contrast, Opacity.

CSS Filter Generator

CSS Gradient Generator

The CSS gradient generator allows you to generate the CSS code you need to recreate the background gradients in the live preview on the tool. The tool allows you to use colour pickers to select a start and end colour along with sliders to set the position of the colour changes.

You are able to add as many colours as you want for the CSS gradient but the tool will automatically show you the transition between the different colours. You can also change the start and end position of each colour so you can tell CSS when to change colours in the gradients.

When you've created the colour gradient you want just click the code tab to get all the CSS to recreate this same gradient.

CSS Gradient Generator

CSS Shapes Generator

The CSS shapes generators comes with a number of shape templates you can use straight away these shapes include:

  • Square
  • Rectangle
  • Parallelogram Left
  • Parallelogram Right
  • Diamond
  • Trapez
  • Triangle
  • Circle
  • Oval
  • Pacman
  • Ribbon

Full HTML and CSS generated so you don't have to write a single line of code.

CSS Shapes Generator

CSS Text Shadow Generator

A playground for the CSS text-shadow property it has an easy to use slider interface for the user to select the horizontal, vertical, blur and colour of the shadow. You can even add multiple shadows to generator to learn the code to create effects like this.

The simply click the generate button to get the generated CSS code.

.fade-text-shadow-preview
{ 
    text-shadow: 0px 7px 0px #C9C9C9, 0px 14px 0px #E0E0E0, 0px 21px 0px #F5F5F5; 
}

CSS Text Shadow Generator

Flexbox Playground

Getting Started With Flexbox

Previously I've wrote a tutorial about the CSS flexbox layout properties and how best to use them but with everything it's best to try out the properties for yourself. Using the Flexbox playground you have a easy interface to change the values of the flexbox and see a live preview of how these affect the child items of flexbox.

Flexbox Playground

Google Maps Generator

Build your own Google Maps without writing any code, select the dimensions of the map, select the control settings for the map, add new markers, create a menu for your pointers to quick access to your important locations.

Google Maps Generator

Hash Generator

The hash generator allows you to encode a string into common formats such as sha1, sha-256 and md5. Simply enter your input, optionally add a salt, and then hash your string to produce the output. Choose from a total of 39 different hashing algorithms.

Hash Generator

HTML5 Responsive Form Generator

Create HTML5 responsive forms that you can embed into your website with the HTML5 responsive form generator. If you need to post the contents of your form via email, you can also generate all the PHP you need as well.

HTML5 Responsive Form Generator

Meta Tag Generator

The meta tag generator will give you all the options you can use for meta tags and provide you with a simple to use form to enter all the information about your page, when done you can click generate button to create the code to enter into your head tag of your website.

Meta Tag Generator

PDF CV Generator

Easily create and download CV templates you can reuse in the future to quickly update your CV. Or you can choose between a number of our predefined templates to quickly create a new CV. You have full control over the customisation of the CV and then download your template to PDF to share with new clients.

PDF CV Generator

Pricing Table Generator

Pricing tables are a great way to showcase your different product features and options in way that's easy to digest for your visitors. The pricing table generator takes the hassle out of writing the code and allows you to focus on the design and content. We have a range of templates you can use to save some time, all editable in a live preview. The key features of the tool are listed below.

Pricing Table Generator

QR Code Generator

QR Codes are a great way to pack a lot of information into a small amount of space, making them ideal for an array of different purposes from marketing to speeding up business processes. Add all your contact details into a QR code so people can quickly add you to their contacts list, or promote your website with a website QR Code saving users time typing it in. Read more below on all the different QR code formats that can be created from simple plain text through to PayPal buy now links.

QR Code Generator

Secure Password Generator

Create new secure passwords with different levels of complexity by using the Password Generator, everyday as a web developer I need to create new unique password when building a new server, database logins, client admin passwords and this tool is very useful.

Secure Password Generator

Star Wars Intro Generator

This tool allows you to create your very own Star Wars introduction scene and will then generate all the HTML and CSS you need to recreate this introduction scene on your own website. The tool allows you to enter all the text you want for your introduction page, then simply click on the generate button to make all the HTML and CSS you can then simply copy and paste this onto your own website.

Star Wars Intro Generator

Business

Hourly Rate Calculator

The key to quoting your clients correctly is understanding your salary expectations, overheads and your available billable hours - from this you can calculate your hourly rate. Use this handy online tool to step through your salary expectations, lifestyle, expenses and profit to calculate your hourly rate.

Hourly Rate Calculator

Project Invoice Generator

Easily create PDF invoices that you can send to your clients. Our Project Invoice Generator tool provides a live preview allowing you to modify the content. You can also adjust the layout and styling of your invoice before generating the PDF output file. We offer some example templates to get you started, and you can also save any new or modified templates you create so you can come back and use them again later.

Project Invoice Generator

Freelance Project Proposal Generator

Make your quotes stand out of from the rest with our professional PDF proposal templates. Create a multi-page proposal of work using a live preview, edit the layout, content and styling, then generate the result into a downloadable PDF. Save your quote templates so you can customise them to your business branding, then come back and use them again later.

Freelance Project Proposal Generator

Project Quote Calculator

Make working out how much to charge for your next project easier with the project quote calculator. Simply enter your project tasks and sub-tasks, allocate the required time against each, and then allow the calculator to summarise the cost based on your hourly rate and working hours per day. Not sure what your hourly rate should be? Check out the hourly rate calculator, also available in the business range.

Project Quote Calculator

Project Time Tracker

One of the hardest parts of freelancing is making sure you track your time correctly using the time tracker tool you can add multiple projects and multiple tasks and track your time against each task.

Project Time Tracker

Site Monitor

Be the first to know when your site goes down with the Coveloping Site Monitor Tool. Enter up to 50 different website urls and we'll ping them for responses every few minutes to ensure that the url is still responsive. If your site doesn't respond in a normal time, we'll send you an email notification to let you know, and another when the site becomes responsive again.

Site Monitor

Website

Open Graph Tag Tester

When you share a post on a social network like Facebook it will scan the URL that you are sharing and return certain information to display the page in your feed. Facebook will get the page title, page description and a thumbnail image for the page. You can change the information that Facebook gets by using the open graph meta tags.

Open Graph Tag Tester

WSDL Validator

Test your SOAP (Simple Object Access Protocol) WSDL (Web Services Description Language) is valid with our WSDL validator. Simply enter your WSDL url into the WSDL validator and click to run a test, you will then be informed if the WSDL is considered valid or not, and be provided with each of the available methods, or the returned error.

WSDL Validator

WordPress

Menu Generator

One of the theme features in WordPress is the ability to create menus in the admin area, for this you need to login to the admin area and navigate to Appearance -> Menus.

If you want to add more theme locations then you need to use the WordPress function register_nav_menu().

The menu generator will create the code you need to add new menus to your WordPress site.

Menu Generator

Plugin Readme Generator

Plugin Readme Generator

When you're creating your own WordPress plugin you need to include a readme.txt file in the root of the plugin folder if you want to host the plugin on WordPress.org. WordPress will then use this file to get more information about your plugin.

Use this tool to create the plugin readme text file for your WordPress plugin

Plugin Readme Generator

Post Status Generator

Post Status Generator

Using this generator to create a new workflow on your WordPress site by creating a new post status. Use this generator to create your new post status, enter the information into the form and click the generate button to create all code you need to paste into your WordPress functions.php file to create your new post status.

Post Status Generator

Post Type Generator

Post Type Generator

As of WordPress version 3.0, WordPress has allowed you to create your own custom post types into anything that you want by using the register_post_type() function. Using this tool you can easily generate all the code you need to create your own custom post types.

Post Type Generator

Shortcode Generator

Shortcode Generator

WordPress shortcodes were introduced in WordPress version 2.5 and is a great way of adding full flexibility and control of certain functionality to the editor of your WordPress CMS. The best thing about shortcodes is that it allows editors to run a certain bit of code within the content area of your site. Using this tool you can easily create the code you need to generate new WordPress shortcodes.

Shortcode Generator

Sidebar Generator

WordPress sidebars are theme features that allow you to allocate areas in your theme where you can add widgets to your website. As they are called sidebars they are intended to be used for areas next to your main content area. Easily create WordPress sidebar code with this WordPress sidebar generator.

Sidebar Generator

Taxonomy Generator

Taxonomy Generator

WordPress taxonomies allow you to group your content together into similar sets of content. There are two types of default taxonomies built into WordPress these are categories and tags. Easily create your own custom taxonomies with this taxonomy generator tool.

Taxonomy Generator

Theme Support Generator

Theme Support Generator

The WordPress theme support generator allows you to turn on certain WordPress features that you want your theme to support. The WordPress theme generator will create all the code you need to add new features to your WordPress theme.

Theme Support Generator

Toolbar Generator

Toolbar Generator

The WordPress Toolbar Generator will create the code you need to customise the toolbar in a way you want it to behave.

Toolbar Generator

WP Widget Generator

WP Widget Generator

WordPress widget generator, which allows you to easily create the code you need to generator a WordPress widget.

WP Widget Generator

WP_Query Generator

WP_Query Generator

The WP_Query generator allows you to easily create all the code you need to create custom queries on your WordPress site.

WP_Query Generator

WP-Config Generator

WP-Config Generator

The WordPress WP-Config generator allows you to easily create all the constant variables for your wp-config file to setup your WordPress install.

WP-Config Generator

Converters

Aspect Ratio Calculator

Aspect Ratio Calculator

Use the aspect ratio calculator to work out the correct heights and widths for common formats such as HD 16:9. Modify the ratio, width or height and the other setting will automatically adjust and provide a live preview size of what the dimensions will look like.

Aspect Ratio Calculator

CSS Minifier

CSS Minifier

Use our CSS minifier to condense your CSS code for optimised loading speeds.

CSS Minifier

Email Obscurer

Email Obscurer

Enter your email address and generate an ASCII encoded version that you can copy onto your website to make it harder for bots to read.

Email Obscurer

HEX To RGB Converter

HEX To RGB Converter

Enter a hexadecimal colour and covert to RGB or RGB and convert to hexadecimal. Easy-to-use interface.

HEX To RGB Converter

Image To Base64 Converter

Image To Base64 Converter

Convert a full image into base64 encoding. Simply upload an image from your computer and click to generate the base64 encoded image.

Image To Base64 Converter

JS Minifier

JS Minifier

Use our Javascript minifier to condense your javascript code for optimised loading speeds.

JS Minifier

Unix Timestamp Converter

Unix Timestamp Converter

Convert a unix timestamp to a date, or a date to a UNIX timestamp using the UNIX timestamp converter. View a breakdown of days to seconds and timezone on the easy-to-use interface.

Unix Timestamp Converter

Testers

Colour Picker

Colour Picker

Tool features include a Photoshop-style colour picker, ability to directly edit hex or RGB values and Hex and RGB colour code output on the live preview. Create and save Colour palettes or generate colour shades with the quick link to the colour shades generator.

Colour Picker

CSS Cursor Tester

CSS Cursor Tester

CSS cursor property specifies the type of cursor to be displayed when pointing on an element. This tool allows you to demo all the CSS cursor properties on the page so you can choose how you want the cursor to interact with an element on the hover event.

CSS Cursor Tester

CSS nth-child Tester

CSS nth-child Tester

The CSS nth-child tester allows you to test the values of the nth-child property to see all the elements it will select using this property.

CSS nth-child Tester

Google Web Font Tester

Google Web Font Tester

Google web fonts is a library of 100s of free fonts you can easily use on any website. The Google web font tester allows you to quickly demo these fonts to find one that you like for your website. When you find the font you want to use you can then select it from the Google web font library.

Google Web Font Tester

jQuery easing tester

jQuery easing tester

Preview a range of different easing types using our jQuery easing animation tester.

jQuery easing tester

Open Graph Tag Tester

Open Graph Tag Tester

When you share a post on a social network like Facebook it will scan the URL that you are sharing and return certain information to display the page in your feed. Facebook will get the page title, page description and a thumbnail image for the page. You can change the information that Facebook gets by using the open graph meta tags.

Open Graph Tag Tester

Responsive Layouts

Responsive Layouts

Using this tool you can test how your site looks on different screen sizes with the responsive layout tester.

Responsive Layouts

What Theme

What Theme

Find out what WordPress theme a site has installed. Type in the URL into this tool to find out.

What Theme

Get access to all of the above Web Development tools from only $4.99 a month, plus sign up using the discount code PAULUND50 and get 50% off your Coveloping membership costs forever.

Coveloping Membership

Back to top

Learn how to code with Treehouse

  • Learn projects with access to 1000+ videos
  • Practice live with our Code Challenge Engine
  • Get help in our members-only forums

Start with a 7 day free trial