In this article, I have gathered a collection of must-have tools and resources that will help web developers learn, do more, and be more productive. If I missed something that you can't live without please share it in the comment section. Here are my picks:

Design

Bootstrap Studio Bootstrap Studio is a powerful drag and drop builder for the Bootstrap framework. It has a rich library of components and tools for making responsive layouts. With it, you can speed up your development and test on multiple devices at once. It’s a premium application, but it will pay for itself many times over. It is a great investment for every front-end web developer.

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.

Awesome Images This one is a priceless collection of stock photo material. It features over 20 resources - all of them free and with their licenses politely explained. Google Fonts It's Google's font library which is by far the best place to go to when in the search of web-friendly fonts.

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

Bootstrap A front-end framework for building responsive websites. It makes your websites responsive and looks 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.

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.

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

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.

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.

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 into what might be wrong with the code. This tool should be your first step when trying to find bugs with your HTML.

MinCSS Mincss is a tool that when given a URL downloads that page and all its CSS then 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 auto prefixer library for adding vendor prefixes to CSS3 rules, and the CSS3 gradient editor.

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

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.

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.

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.

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.

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 of running virtual machines with other operating systems on your computer - VirtualBox.

Hosting and Browser ##

PingDom's Website Speed Test This is an online Website Speed Test to help you analyze the load speed of your websites and learn how to make them faster. The results and analysis it gives you are very in-depth and informative. Another tool that will help you with optimizing the speed of your site is Google's Page Speed Insights, which will give you actionable advice.

Domai.nr With domai.nr you can check the availability of a domain name and get suggestions on similar names. Works quite well, and fast too. One more tool that comes in handy is Lean Domain Search, which checks thousands of domains for availability for you.

Browser Shots Browershots is an online tool that simulates how a webpage looks on different browsers and gives you "screen" shots to inspect.

Piwik Piwik is an app that gives you extensive information about your users and their behavior on your website. You can use this in addition to the venerable Google Analytics.

Responsinator Responsinator helps website makers quickly get an indication of how their responsive site will look on the most popular devices.

Image processing ##

Real Favicon Generator This one is still in beta but still is a great tool for creating favicons. Instead of giving you just one basic icon, realfavicongenerator.net lets you create specific icons for every OS.

Pixlr Pixlr is an amazing image editor with rich functionality. It works similarly to the way offline image editing software do, with the difference that this launches straight in the browser. Although it has been around for a number of years, it is still one of the best free online image editors out there.

Place hold Placehold.it helps you create dummy images for usage as placeholders in designs. After you select the size of your pic you can simply copy the provided link and put it in the img tag. And of course, there is an alternative with images of kittens.

Pic Resize This one is called picresize(.com) but what it can do goes beyond what its name suggests. This neat tool lets you apply filters, crop, and convert the file format of your image.

Collaboration tools ## GitHub and Bitbucket GIT made version control available to the masses, and Github revolutionized the way developers collaborate. Github is the most popular repository hosting platform in the world and gives you an unlimited number of public repositories for free. If you need to host your private repositories for free, though, you can take a look at Bitbucket.

Chrome extensions ##

Hasher Hasher computes cryptographic hashes such as MD5 and SHA-1. It’s entirely implemented in JavaScript and all calculations are performed on the client-side.

Visual Event This extension shows all events bounded on each dom element. Could be of quite some help when dealing with complex JavaScript event handlers.

Page Ruler A quick way to find out what the width, height, and position of a screen segment is.

JSONView A Chrome and Firefox add-on for reading and validating JSON in the browser.

SEO SERP Workbench A chrome app that gives you detailed information about the search position of multiple sites according to a keyword.

ColorZilla A Firefox plug-in that was recently made available to Chrome. It offers rich functionality when it comes to handling colors in the browser.

**Learning resources

Hackr.io Hackr.io is a community to find and share the best online courses .Hackr.io lets learners identify the most suitable course of their choice by allowing them to filter courses by their fee, course type (video/ebook, etc.), spoken language, course reviews, etc.

Codecademy A great place for beginners in coding or people who want to learn a new language. Features entertaining tutorials on the most popular programming languages and APIs.

CodeSchool Video courses on Ruby, Javascript, HTML/CSS, and iOS development. There are lessons and exercises here for both elementary and in-depth stuff.

Conclusion##

Do you think we did not mention any of your favorite tools, share in the comment section?