25 Handy Tools for Web Developers

This is a list of handy tools for web developers and designers. The list includes CSS generator, Image optimization tools, code minifier, color tools, font tools and more.

1. Enjoy CSS

Enjoy CSS is one of my favorite CSS Generator tool. You can generate input style, block, button, text, background, shadows, border and radius, CSS transition. All web developers and designers should bookmark this site.

Enjoy CSS

2. PLACEHOLD.it

PLACEHOLD.it is a simple but handy tool for creating quick and simple image placeholder. When designing a layout of website and you want to put an image placeholder. You can write img src=”http://placehold.it/350×150″ to create an image placeholder with 350×150 pixel.

placehold

3. Tiny Png

Make your website faster and save bandwidth. TinyPNG optimizes your PNG images by 50-80% while preserving full transparency! If you’re using WordPress, TinyPng also available as WordPress extension.

Tiny Png

4. FontFace Ninja

FontFace Ninja is a handy extension for Google Chrome. When you found beautiful websites and you want to know the name of a font. FontFace Ninja can help you identify the font used on any website.

Fontface Ninja

5. CSSViewer

CSSViewer is a simple CSS properties viewer. It’s an extension for Google Chrome.

CSSViewer

6. Windows Resizer

One of a handy tool for web developers for testing website design in various screen resolution. Windows Resizer is an extension for Google Chrome. This tool allow you to create your own screen resolution or you just select from their list.

Windows Resizer

7. PlaceIt

Create iPhone, iPad, Mac, Macbook or Android phone easily with Placeit. You just drag and drop image to place on their templates.

Placeit

8. Image Size Info

This is simple but one of my favorite Google Chrome extension. Image Size Info lets you view image width, height and file size. You just simply right click on the image to see image info.

Image Size Info

9. Font Awesome

A popular icon font for web. Font Awesome has more than 600 icon fonts to choose from.

Font Awesome

10. Minify Code

Minify Code helps reduce file size of your HTML, CSS and JS file and also has a feature to format your code.

Minify Code

11. WordPress File Manager

WordPress File Manager is one of a handy extension for WordPress users. This tool can help you manage files easily (upload, download themes, extensions and files) without using FTP software.

Emmet

12. IsUp – Down for everyone or just me?

This tool helps you check status of website. Is it down for everyone or just me?

isup

13. Emmet

Emmet is a plugin for many text editors such as Sublime text, ATOM, Bracket, Notepad++ and etc. To improve HTML and CSS workflow. One of hi-light feature is you can write short code and save time like the image below.

Emmet

14. Page Speed Insight

One of a factor that Google uses to rank website on its search result is page speed. Page Speed Insight tool from Google that
analyzes the content of a web page, then generates suggestions to make that page faster.

Page Speed Insight

15. Awesome Screenshot Image Annotation

Awesome screenshot is one of a popular extension for Google Chrome and now it releases online image annotation tool for quick and handy use for web developers. This tool also available as Chrome extension as Awesome screenshot app.

Awesome Image Annotation

16. Adobe Color CC – Color Tool From Adobe

Create color schemes with the color wheel or browse thousands of color combinations from the Kuler community.

Adobe Color CC

17. COULOURLovers – Color Trends and Palettes

COLOURlovers is a creative community where people from around the world create and share colors, palettes and patterns, discuss the latest trends and explore colorful articles.

Coulour Lover

18. ColorZilla

ColorZilla is one of a popular color tool. ColorZilla is an an extension for Google Chrome and also available as a Firefox add-on. ColorZilla includes a Color Picker, Eye Dropper, Gradient Generator and many additional advanced color tools.

Colorzilla

19. Lorem Ipsum Generator

When you design a website and need dummy text, just use Lorem Ipsum generator then copy and pasted in your templates.
The benefit of Lorem Ipsum is preventing users from distracted by the readable content of a page when looking at its layout.

Loren Ipsum Generator

20. Text

Text.app is a nice and handy text editor for Google chrome. It has simple feature with code hi-lighting and support multiple languages.

Text

21. Sticky Note

Sticky note is one of my favorite tool. This Note tool can sync with Google Drive.

Sticky Note

22. Memo Notepad

If you’re using Google Chrome and you want a nice, easy and simple way to write your note in Chrome. Memo Notepad is one of a good choice. Your note kept in both your hard drive and sync in the cloud.

Memo Notepad

23. Resize My Browser

resizeMyBrowser is a simple handy tool for web developers or designers for testing their website design in specific browser size. This tool offers a list of browser size. You just simply click on it to resize your size of browser.

Resize My Browser

24. How Big is My Browser

If You don’t know what is the size of your current browser. Just go to to this site to check it.

How Big is My Browser

25. Noisli

When you want raining sound, water stream, wind, thunder, leaves or you just want to feel like working at the beach. Noisil is a website that help you relax or boost your productivity with sound.

noisli