5 Free Tools to Speed Up Your Coding

5 Free Online Tools That Will Speed Up Your HTML & CSS Coding

1. Our favorite color picker tool: colorpicker.com


Whether you need to set a color for your text, a banner, or a button on your web site, working with colors is all part of the daily routine for front-end designers and developers. On the web, colors are generally set using CSS, aka cascading style sheets. And there are 3 basic methods for specifying colors in CSS:

1. Using the name of a color (in English), such as white, black, green, blue, etc…

2. Using a 6 character hex code, like #2EAB4F for green (for example), which will allow you to exactly specify any of millions of different colors.

3. Or using an RGB or RGBA value (the ‘A’ stands for ‘alpha’ and sets the transparency), such as rgba(70, 175, 255, 0.5), which would produce a shade of blue that is 50% transparent.

The hard part is finding the right hex code or RGB code for your desired color. Opening Photoshop just to get at the color dropper isn’t exactly the most time efficient way to find the color you want. And so, enter colorpicker.com, a tool that will make color selection a total breeze for you. The rainbow color bar on the right will let you move the slider to select your desired color range and the big square box right next to it will let you zoom in on the desired shade of the color in question. Once you’re happy with your color selection, you can either grab the relevant hex code from the field above, or take the R, G, and B values directly from the fields to the right. And if you’re feeling really ambitious, and you’re in need of the HSV values for your color, those are there and available as well. Colorpicker.com is a great tool that makes hunting for your color code quick and easy.

What color are you going to pick?

2. An easy border-radius snippet generator (that’s a mouthful): border-radius.com


Round corners on web page elements are a common practice these days. They just look good.  In the distant past, when brontosauruses used to click and clack away at their commodore 64’s (now there’s a mental image you won’t soon forget), rounded corners on webpage elements could only be achieved by building them into the design through the use of images. Fast forward to today, and the same effect is almost invariably achieved on the fly, in the code, using the CSS3 property border-radius. The tricky part is setting the correct value that will result in just the right amount of corner curvature. And that’s exactly where border-radius.com comes to the rescue. When you land on the site, you’ll see a white rectangle on a black background. In each corner of the rectangle, you’ll see a field where you can enter a number. Start entering different numbers into those fields and watch what happens to the white box (spoiler alert: we’re about to tell you what happens) – the corners will have corresponding levels of roundedness (yes, that’s a word) applied to them. You can even apply a different value to each corner, which will allow you to design items such as tabs, menus, buttons, and so much more. Once you’re happy with your settings, you can grab the relevant CSS snippet from the middle of the white box and paste it right into your own CSS file… and you’re done!

Round on, dude!

3. Try this cool CSS gradient generator: colorzilla.com/gradient-editor


Gradients are awesome! These days, you’ll see them all over the web – from buttons, to backgrounds, to separator elements. Back in the early days of the internet, the only way to get a gradient into your web design was to use an image that had the gradients already “built-in”. But today, thanks to CSS3, its now possible to implement gradients directly in your code! And the easiest way to do that? Please meet colorzilla.com/gradient-editor. This online tool will let you visually (what-you-see-is-what-you-get) create a gradient of virtually unlimited complexity. You can either grab a pre-existing setting from the presets available at the top of the site, if any of them match your desired design, or you can create your own 100% custom gradient using the slider below. Once you’ve designed the look of the gradient you want, this tool will provide you with an already finished CSS code snippet (look to the right) which you can then copy and paste directly into your CSS file on your site. The snippet even contains some code to make sure that your design will look right across all the major browsers… meaning the code form this tool is fully cross-browser compatible!

Can you say “awesome sauce”?

4. Optimize and resize your images with ease: webresizer.com/resizer

Using big, unoptimized images on your website isn’t cool. And you want to be cool, right? Huge images take a long time to download on slower internet connections, like what you might find on your smartphone’s 3G network.  They also put an unnecessary load on your server, which can reduce your overall user experience. No one wants that.  So what are you supposed to do? Well, one way to optimize images for the web is to use tools like Photoshop or Gimp. The problem is that Photoshop is pretty expensive, and Gimp (yes, it’s a real program) isn’t exactly known to be user-friendly. You didn’t hear it from us, but we’ve heard (jokingly) that Gimp is actually an acronym for “God, I Miss Photoshop!” And besides, installing these software suites just to optimize your site’s images is a bit overkill, if you ask us. But thankfully, there is an easier way!  Give webresier.com a try… Webresizer lets you easily upload an unoptimized image, set the desired size, quality, rotation, and more; and then apply the changes with the push of a button. And voila! In a few seconds, you’ll get your optimized image, ready to download and post on your web site.

That was easy!

5. “The” HTML code validator: validator.w3.org


These days, browsers are very smart (thankfully not HAL from 2001 smart, though) and will display your web page correctly even if you make some pretty glaring errors in your HTML code. But, some mistakes can still be too hard for the browsers to overlook, with the result being an incorrectly displayed webpage. Yuck. Also, some mistakes can actually (negatively) impact your SEO (search engine optimization) because they’re detected by search engine crawlers whose only job is to navigate the internet and index web pages. Thankfully these crawlers are made of code and look nothing like spiders. We hate spiders. The quality of a web page’s HTML code is one of the criteria that crawlers use to “score” or rank pages so they can position them correspondingly in people’s search results. So how do you make sure that you don’t have coding errors in your HTML? We’d like to present validator.w3.org! Just enter your web page’s URL into the Address field and click on the “Check” button. Faster than you can “parsing error”, you’ll be presented with a report showing any validation issues you might have in your HTML code, so you can go back to your editor and fix them. Talk about a convenient way to make sure that your web pages are ship-shape before publishing them for the entire world to see!

If you’d like to learn more about HTML5 and CSS3, or maybe you’ve tried to pick them up in the past but just found the whole thing way too frustrating, and now you find yourself really wanting to finally dive in and get a handle on how to code web pages, once and for all… we have good news for you.  In about 3 hours you could be on your way to getting a landing page up for that business you’ve been thinking about, so you can see right away what the world thinks of your idea and if you might have something interesting on your hands.  Or maybe you need to throw something together for your company’s next expo and none of the templates you’ve seen are quite right.  Well, in that case my friend, you need to check out our latest bite-sized tutorial on HTML5 and CSS3 where we’ll walk you through everything you need to know to make an awesome responsive landing page in less time that it takes to re-watch a Lord of the Rings installment…

Leave a Reply