in 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

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](https://coveloping.com/tools/text-shadow-generator)## Flexbox Playground

 ![](https://coveloping.com/uploads/2016/01/Screenshot-from-2016-01-07-163908-992x768.png)[Getting Started With Flexbox](http://www.paulund.co.uk/css-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](https://coveloping.com/flexbox-playground)## Google Maps Generator

 ![](https://coveloping.com/uploads/2013/12/google-maps-500x300.jpg) 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](https://coveloping.com/tools/google-maps-generator)## Hash Generator

 ![](https://coveloping.com/uploads/2013/10/hash-generator-500x300.jpg) 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](https://coveloping.com/tools/hash-generator)## HTML5 Responsive Form Generator

 ![](https://coveloping.com/uploads/2014/04/form-generator-500x300.jpg) 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](https://coveloping.com/tools/html5-responsive-form-generator)## Meta Tag Generator

 ![](https://coveloping.com/uploads/2013/10/meta-generator-500x300.jpg) 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](https://coveloping.com/tools/meta-tag-generator)## PDF CV Generator

 ![](https://coveloping.com/uploads/2016/02/cv-example-350x500.png) 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](https://coveloping.com/tools/pdf-cv-generator)## Pricing Table Generator

 ![](https://coveloping.com/uploads/2013/10/pricing-table-1-500x174.png) 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](https://coveloping.com/tools/pricing-tables)## QR Code Generator

 ![](https://coveloping.com/uploads/2014/03/qr-code-500x300.jpg) 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](https://coveloping.com/tools/qr-code-generator)## Secure Password Generator

 ![](https://coveloping.com/uploads/2013/10/secure-password-500x300.jpg) 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](https://coveloping.com/tools/secure-password-generator)## Star Wars Intro Generator

 ![](https://coveloping.com/uploads/2016/01/starwars-2-500x238.png) 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](https://coveloping.com/tools/secure-password-generator)## Business

- [Hourly Rate Calculator](#hourly-rate-calculator)
- [PDF CV Generator](#pdf-cv-generator)
- [PDF Invoice Generator](#project-invoice-generator)
- [Freelance Project Proposal Generator](#freelance-project-proposal-generator)
- [Project Quote Calculator](#project-quote-calculator)
- [Pricing Table Generator](#pricing-table-generator)
- [Project Quote Calculator](#project-quote-calculator)
- [Project Time Tracker](#project-time-tracker)
- [QR Code Generator](#qr-code-generator)
- [Site Monitor](#site-monitor)

## Hourly Rate Calculator

 ![](https://coveloping.com/uploads/2016/02/calculator-500x306.png) 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](https://coveloping.com/tools/hourly-rate-calculator)## Project Invoice Generator

 ![](https://coveloping.com/uploads/2016/01/invoice-500x300.png) 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](https://coveloping.com/tools/pdf-invoice-generator)## Freelance Project Proposal Generator

 ![](https://coveloping.com/uploads/2016/01/preset4.png) 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](https://coveloping.com/tools/pdf-proposal-generator)## Project Quote Calculator

 ![](https://coveloping.com/uploads/2016/02/quote-calc-500x359.png) 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](https://coveloping.com/tools/project-quote-calculator)## Project Time Tracker

 ![](https://coveloping.com/uploads/2016/02/time-tracker-500x235.png) 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](https://coveloping.com/tools/project-time-tracker)## Site Monitor

 ![](https://coveloping.com/uploads/2016/03/ping-site-monitor-500x251.png) 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](https://coveloping.com/tools/site-monitor)## Website

- [Open Graph Tag Tester](#open-graph-tag-tester)
- [WSDL Validator](#wsdl-validator)

## Open Graph Tag Tester

 ![](https://coveloping.com/uploads/2013/11/open-graph-500x300.jpg) 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](https://coveloping.com/tools/site-monitor)## WSDL Validator

 ![](https://coveloping.com/uploads/2013/10/wsdl-validator-500x300.jpg) 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](https://coveloping.com/tools/wsdl-validator)## WordPress

- [Menu Generator](#menu-generator)
- [Plugin Readme Generator](#plugin-readme-generator)
- [Post Status Generator](#post-status-generator)
- [Post Type Generator](#post-type-generator)
- [Shortcode Generator](#shortcode-generator)
- [Sidebar Generator](#sidebar-generator)
- [Taxonomy Generator](#taxonomy-generator)
- [Theme Support Generator](#theme-support-generator)
- [Toolbar Generator](#toolbar-generator)
- [WP Widget Generator](#wp-widget-generator)
- [WP\_Query Generator](#wp-query-generator)
- [WP-Config Generator](#wp-config-generator)

## Menu Generator

 ![Menu Generator](https://coveloping.com/uploads/2016/01/menu-generator-500x285.png) 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](https://coveloping.com/tools/menu-generator)## Plugin Readme Generator

 ![Plugin Readme Generator](https://coveloping.com/uploads/2016/02/plugin-readme-generator-500x295.png) 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](https://coveloping.com/tools/plugin-readme-generator)## Post Status Generator

 ![Post Status Generator](https://coveloping.com/uploads/2016/01/post-status-generator-500x304.png) 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](https://coveloping.com/tools/post-status-generator)## Post Type Generator

 ![Post Type Generator](https://coveloping.com/uploads/2016/01/wp-post-type-generator-500x336.png) 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](https://coveloping.com/tools/post-type-generator)## Shortcode Generator

 ![Shortcode Generator](https://coveloping.com/uploads/2016/01/code-shortcode-generator-500x264.png) 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](https://coveloping.com/tools/shortcode-generator)## Sidebar Generator

 ![Sidebar Generator](https://coveloping.com/uploads/2016/01/sidebar-generator-500x285.png) 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](https://coveloping.com/tools/sidebar-generator)## Taxonomy Generator

 ![Taxonomy Generator](https://coveloping.com/uploads/2016/01/wp-taxonomy-generator-500x341.png) 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](https://coveloping.com/tools/taxonomy-generator)## Theme Support Generator

 ![Theme Support Generator](https://coveloping.com/uploads/2016/01/theme-support-generator-500x258.png) 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](https://coveloping.com/tools/theme-support-generator)## Toolbar Generator

 ![Toolbar Generator](https://coveloping.com/uploads/2016/01/toolbar-generator-500x302.png) The WordPress Toolbar Generator will create the code you need to customise the toolbar in a way you want it to behave. [Toolbar Generator](https://coveloping.com/tools/toolbar-generator)## WP Widget Generator

 ![WP Widget Generator](https://coveloping.com/uploads/2016/02/widget-generator-500x259.png) WordPress widget generator, which allows you to easily create the code you need to generator a WordPress widget. [WP Widget Generator](https://coveloping.com/tools/wp-widget-generator)## WP\_Query Generator

 ![WP_Query Generator](https://coveloping.com/uploads/2016/02/wp-query-generator-500x285.png) 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](https://coveloping.com/tools/wp_query-generator)## WP-Config Generator

 ![WP-Config Generator](https://coveloping.com/uploads/2016/02/wp-config-generator-500x285.png) 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](https://coveloping.com/tools/wp-config-generator)## Converters

- [Aspect Ratio Calculator](#aspect-ratio-calculator)
- [CSS Minifier](#css-minifier)
- [Email Obscurer](#email-obscurer)
- [HEX To RGB Converter](#hex-rgb-converter)
- [Image To Base64 Converter](#image-base64-converter)
- [JS Minifier](#js-minifier)
- [Unix Timestamp Converter](#unix-timestamp-converter)

## Aspect Ratio Calculator

 ![Aspect Ratio Calculator](https://coveloping.com/uploads/2013/12/aspect-ratio-500x300.jpg) 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](https://coveloping.com/tools/aspect-ratio-calculator)## CSS Minifier

 ![CSS Minifier](https://coveloping.com/uploads/2013/10/css-minifier-500x300.jpg) Use our CSS minifier to condense your CSS code for optimised loading speeds. [CSS Minifier](https://coveloping.com/tools/css-minifier)## Email Obscurer

 ![Email Obscurer](https://coveloping.com/uploads/2013/11/email-obscurer-500x300.jpg) 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](https://coveloping.com/tools/email-obscurer)## HEX To RGB Converter

 ![HEX To RGB Converter](https://coveloping.com/uploads/2013/12/hex-convertor-500x300.jpg) Enter a hexadecimal colour and covert to RGB or RGB and convert to hexadecimal. Easy-to-use interface. [HEX To RGB Converter](https://coveloping.com/tools/hex-rgb-converter)## Image To Base64 Converter

 ![Image To Base64 Converter](https://coveloping.com/uploads/2014/06/image-base64-300x131.png) 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](https://coveloping.com/tools/image-base64-converter)## JS Minifier

 ![JS Minifier](https://coveloping.com/uploads/2013/10/js-minifier-500x300.jpg) Use our Javascript minifier to condense your javascript code for optimised loading speeds. [JS Minifier](https://coveloping.com/tools/js-minifier)## Unix Timestamp Converter

 ![Unix Timestamp Converter](https://coveloping.com/uploads/2013/10/unix-timestamp-500x300.jpg) 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](https://coveloping.com/tools/unix-timestamp-converter)## Testers

- [Colour Picker](#colour-picker)
- [CSS Cursor Tester](#css-cursor-tester)
- [CSS nth-child Tester](#css-nth-child-tester)
- [Google Web Font Tester](#google-web-font-tester)
- [jQuery easing tester](#jquery-easing-tester)
- [Open Graph Tag Tester](#open-graph-tag-tester)
- [Responsive Layouts](#responsive-layouts)
- [What Theme](#what-theme)
- [WSDL Validator](#wsdl-validator)

## Colour Picker

 ![Colour Picker](https://coveloping.com/uploads/2016/01/color-picker-square-1.png) 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](https://coveloping.com/tools/colour-picker)## CSS Cursor Tester

 ![CSS Cursor Tester](https://coveloping.com/uploads/2016/01/css-cursor-tester-500x207.png) 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](https://coveloping.com/tools/css-cursor-tester)## CSS nth-child Tester

 ![CSS nth-child Tester](https://coveloping.com/uploads/2013/12/nth-child-500x300.jpg) 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](https://coveloping.com/tools/css-nth-child-tester)## Google Web Font Tester

 ![Google Web Font Tester](https://coveloping.com/uploads/2013/10/google-web-font-500x300.jpg) 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](https://coveloping.com/tools/google-web-font-tester)## jQuery easing tester

 ![jQuery easing tester](https://coveloping.com/uploads/2013/10/jquery-easing-500x300.jpg) Preview a range of different easing types using our jQuery easing animation tester. [jQuery easing tester](https://coveloping.com/tools/jquery-easing-animation-tester)## Open Graph Tag Tester

 ![Open Graph Tag Tester](https://coveloping.com/uploads/2013/11/open-graph-500x300.jpg) 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](https://coveloping.com/tools/open-graph-tag-tester)## Responsive Layouts

 ![Responsive Layouts](https://coveloping.com/uploads/2013/10/responsive-500x300.jpg) Using this tool you can test how your site looks on different screen sizes with the responsive layout tester. [Responsive Layouts](https://coveloping.com/tools/responsive-layouts)## What Theme

 ![What Theme](https://coveloping.com/uploads/2016/01/Screenshot-from-2016-01-06-083828-500x328.png) Find out what WordPress theme a site has installed. Type in the URL into this tool to find out. [What Theme](https://coveloping.com/tools/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](https://coveloping.com/members)

Upgrade to access all content on Paulund

Members unlock all tutorials and snippets

Access to all downloadable content

Access to code examples before others

Sign Up Now

Already a member? Login here

Subscribe To The Weekly Newsletter

Get weekly updates to your email