In this article, I have gathered a collection of 25 must-have tools and resources that will help you learn, do more and be more productive.

Design

1. Subtle Patterns 

An amazing resource for high quality textured patterns. A lot of great artists have contributed there to create a collection of really sharp and versatile images. Oh, and browsing on their site is quite enjoyable as well.

2. Blokk Font 

Blokk is a font specifically made for mock-ups and demos and is an excellent looking alternative to Lorem Ipsum. It could come in handy in the case of an edge of the art design that wouldn’t usually mix well with latin on it.

3. FreePik 

Freepik offers a colossal collection of vector art, illustrations, SVGs, PSDs and stock photos. Everything is free and categorized neatly so you shouldn’t have any problem finding what you need, although you might have a hard time choosing, since there are over 1,4 Million items to date.

4. Awesome Images 

This one is a priceless collection of stock photo material. It features over 20 resources – all of them free and with their licences politely explained.

5. Google Fonts 

You probably know about this one by now but we couldn’t omit it anyway. It’s Google’s font library which is by far the best place to go to when in the search of web-friendly fonts.

6. By People 

ByPeople.com is a content network of useful, constantly updated resources. By People gathers a big deal of beautiful, clean and up to date graphic freebies, Code Snippets and Useful Resources, organizing them into lists which can even be bulk downloaded from the site directly.

7. Snipplr 

Snippler offers its users the ability to upload pieces of useful code and share it with the rest of the us. There are thousands of snippets in javascript, php, css, ruby and other languages. As an alternative, you might want to checkout CSS-tricks’s snippets, or github’s gists.

8. HailPixel

A fun to use color picker. It handles choosing the hue, lightness and saturation of colors in a unique and cool way.

9. Lokes HD Hakar

An awesome online service with a brilliant idea behind it. Color Thief lets you upload an image and get the color palette for it, as well as its dominating color. Very helpful for making design decisions.

10. Dribbble

Dribbble is a community of web designers, graphic designers, illustrators, icon artists, typographers, logo designers, and other creative types share small screenshots (shots) that show their work, process, and current projects. A great place to explore new design ideas.

11. Bootstrap

A front-end framework for building responsive websites. It makes your websites responsive and look good both on small and on huge screens with a well done grid system and tons of CSS and JS features. There are lots of additional resources and plugins for bootstrap, as well as alternative frameworks like foundation.

12. Patternizer

This app makes creating stripe patterns easy as child’s play. Patterns can be saved and shared with anyone, allowing for collaboration and remixing.

13. Project Parfait

Project Perfait is an Adobe product that gives us the opportunity to get important info about a PSD right in your browser. However, it doesn’t support PSD editng (at least yet).

Coding

14. Emmet

Emmet is a plugin for many popular text editors which greatly improves the speed with which you write HTML by allowing you to transform CSS-like selectors into full-blown HTML very fast.

15. JavaScript Beautifier

On jsbeautifier.org you can find a tool that beautifies any scrambled or minified piece of JavaScript or HTML code. Another tool that you might find interesting, is this visual JSON editor.

16. CodePen 

CodePen has grown into a platform for showcasing impressive CSS3 and JS demos. Whether you are on the hunt for cool buttons or simply looking for some inspiration, do check CodePen out.

17. W3 Validator

The Validator is a free service by W3C that helps check the validity of Web documents. It can process documents written in most markup languages and give you insight on what might be wrong with the code. This tool should be your first step when trying to find bugs with your HTML.

18. mincss

Mincss is a tool that when given a URL downloads that page and all its CSS and compares each and every selector in the CSS and finds out which ones aren’t used. The outcome is a copy of the original CSS but with the selectors not found in the document(s) removed. Some related tools that you will find interesting are refresh-sf for minifying CSS/JS/HTML, Prefixr and the autoprefixer library for adding vendor prefixes to CSS3 rules, and the CSS3 gradient editor.

19. Koala App

A wonderful cross-platform app that compiles your less/sass and coffee files automatically.

20. jsfiddle

Jsfiddle.net is an amazing place for writing and sharing code. It features panels for writing the CSS, Html and script of your project and also lets you include libraries such as jQuery, AngularJS and others. Then you can run the code in the app itself or save it and pass it around.

21. Hurl

This is a tool for testing APIs. You choose the request method, customize headers and POST parameters, add basic authorization or OAuth credentials, and even follow redirects. Then view the nicely formatted request and response.

22. SublimeText

Sublime Text is a sophisticated text editor that lets you type in and play around with text or code in amazing ways. It rose into prominence recently, but there are lots of alternatives for the “slickest code editor” crown. Some that are worth watching are github’s new Atom editor and Adobe’s Brackets. Not to mention VIM and Emacs, which have been around for quite a while and have large communities of developers using them.

23. Cloud9

Cloud9 is a cloud-based development environment that gives you a terminal to your private Ubuntu VM, among other powerful features. Alternatives include Nitrous.io and Codio and Code Anywhere, among others.

24. Heroku

Heroku was the first major player in the platform as a service boom that hit developers by storm. Before it, we relied on cheap hosting providers with horrible reliability to host our websites (or setting up our own servers). But heroku introduced git push deployments and we were spoiled for life. If you want to be in full control of your servers, you might want to try dokku instead.

25. Vagrant

Vagrant is a tool for building complete development environments. With an easy-to-use workflow, Vagrant lowers development environment setup time to make the “works on my machine” excuse a relic of the past. There is another popular way for running virtual machines with other operating systems on your computer – VirtualBox.