8 Web Development Resources and Tools you Should Try

By / Apr 9, 2013 / Tools

The design/development community evolves in a fast pace and it is very hard to keep track of everything that is happening around us. This is why we like to gather resources and tools that can make your life easier. Which is what we’ve done for this post. From a text editor, to a plugin to help you with grids, I’m certain you will find these tools very useful.


Emmet is a cool and time-saving text-editor plugin that will make your live easier. Check out the demo video on their website to know more.

8 Resources/Tools you should Try


GuideGuide will help you dealing with grids in Photoshop. The tool is free and will help you creating pixel accurate columns, rows, midpoints and baselines.

8 Resources/Tools you should Try


CodePen is a playground for the front end side of the web. It’s all about inspiration, education, and sharing. In other terms, is a place where people show their skills and share their projects.

8 Resources/Tools you should Try


Since the web community is huge and there is always something new – new tools, resources, solutions, etc – CodeVisually is something close to a library, a directory of open source projects.

8 Resources/Tools you should Try

Less Framework 4

Less Framework is a CSS grid system for designing adaptive web­sites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid.

8 Resources/Tools you should Try


-prefix-free lets you use only unprefixed CSS properties everywhere. It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed.

8 Resources/Tools you should Try


Brought to you by MailChimp, Pictaculous is a different color palette generator where you upload an image to get a palette using colors within the image.

8 Resources/Tools you should Try


Dash (for Mac) is an API Documentation Browser and Code Snippet Manager. The tools is super useful for those developing something and who need to check out documentations all the time.

8 Resources/Tools you should Try

About the Author

Gisele Muller loves communication, technology, web, design, movies, gastronomy and creativity. Web writer, portuguese/english translator and co founder of @refilmagem & @mentaway Twitter: @gismullr


  1. Raúl Colón
    April 9, 2013

    I found the eight options useful all I did not now about.

    But Dash will really help me out with documenting and keeping things in order. For some reason evernote is not what I want when it comes to documenting when I develop. Thanks.

  2. Aamir Shahzad
    April 10, 2013

    great tools…

  3. Zell Liew
    April 12, 2013

    Emmet, Guide guide and Codepen are 3 awesome stuff that I’ve gotten in touch with and use alot.

    I’ll like to propose a CSS precompiler like SASS or LESS to be added to the list, it makes life much easier while writing CSS :)

    Here are the links:
    SASS: http://sass-lang.com
    LESS: http://lesscss.org

  4. Web Design Malaysia
    April 12, 2013

    Less Framework 4 is something we’ve been using for a while now and it’s highly recommended!

  5. Ben Brook
    April 16, 2013

    Great selection, I use LESS & DASH

  6. Design Turnpike
    April 16, 2013

    Pictaculous will be a great asset!

  7. Christian Schnettelker
    April 29, 2013

    Thanks for this collection, especially Pictaculous is very helpful for me!

  8. Ceba
    October 2, 2013

    Excellent Collection, You can find few more here as well. http://codegeekz.com/web-development-tools/

  9. Stefan
    October 23, 2013

    Great collection! Another great tool that you could try and defenetly add to the list is Koding http://koding.com

  10. Aamir Shahzad
    November 13, 2013

    CodeVisually is awesome… :)


Leave a Reply