1. ColorZilla

ColorZilla is a Chrome extension that assists web designers and graphic designers with color related tasks. Included in this extension is a color picker, eye dropper, gradient generator and many additional advanced color tools. It's a great resource to use if want to find out what the hex color of an element is without looking at the code. It can save you a lot of time in the long run. With ColorZilla you’ll be able to get a color reading from any point in your browser, quickly adjust this color and paste it into another program. You’ll be able to analyze the page and inspect a palette of its colors.

 

  1. Google Web Fonts

Google has a vast amount of web fonts for and web designer to make use of. They're free and extremely easy to implement onto a site. It has a tutorial on the site. It's worth checking it out. It's a very easy way to get the fonts you need and put them in your projects. Google’s goal was to make the process of using custom fonts simple. To do this, they offer a robust directory of open source designer web fonts. By using their extensive catalog, you’ll be able to share and integrate typography onto any design project seamlessly, no matter where you are in the world. Fonts will be embedded into your site, so no matter what device your site is viewed on, regardless of the font being installed, users will be able to see it.

3. FontAwesome

FontAwesome is a way to get scalable vector icons that can be customized. You can change their size, color, drop shadow, and anything else that can be done with CSS. It's as simple as embedding a font, and it comes with over 675 icons as default. It's an incredibly simple way to give your site icons, and best of all it's free! It offers you easily implemented icons, all you must do is put in one single line of code! Upgrading is super simple, since each site gets a unique embed code, you can upgrade to the latest version of Font Awesome, without changing any code. It even offers support for speeding up your page. You can Async your icons. Your icons will load in the background so your site loads faster.

4. GitHub

Every developer's worst nightmare is working on a project and making a mistake that is unfixable. With GitHub, you can restore it back to a previous state. GitHub also comes with a huge open-source development community. A large majority of employers will seek people with honed GitHub skills, so it's the perfect time to implement it into your future projects. Git is a version control system, which is similar but better than many of the alternatives available. So, what makes GitHub so special? Git is a command line tool, but the center around all things involving Git, the hub, is GitHub.com, where developers can store projects and network with likeminded developers.

5. CodePen

A lot of developers already know about IDEs and how easy they can make front-end development. There are many options for this, but despite all of them, CodePen is probably the best one out there. It's lightning fast, reliable, easy to get started and auto-updates whenever you've made a change. It also writes in almost every library you can imagine. You can write LESS or SASS, along with preprocessors for HTML such as Haml or Slim. CodePen allows you to add external resources so you can use other sites to include other relevant libraries. This is an amazing tool for writing code and toying with ideas, while seeing it change live.