Web design

7 Useful Tools for Web Developer and Designer

imageHere are seven tools that can significantly simplify the life of a web developer, coder or designer.

1. Wordmark.it


This is a tool for selecting fonts. Wordmark.it allows you to see how a sentence looks like with all the fonts installed on the computer. It downloads quickly and has convenient filters. Unfortunately, there is no way to set the background color and letters.

2. Spritebox


Spritebox is a tool that helps the web designers create CSS classes and IDs from the sprite image. It uses the background-position property to align some areas of a sprite image into block elements of the web page. This tool was created with the combination of JQuery, CSS3 and HTML5.

3. CSS3 Generator


CSS3 Generator helps efficiently to use CSS3 features: it displays a list of available CSS3 styles, generates a cross-browser code for them, and notifies what browsers support these styles.

4. ProCSSor


ProCSSor is a powerful tool for checking / formatting css-styles. It empowers to turn CSS into something more compelling with a minimum of effort. You just load your styles.css, choose the formatting settings and get a nice valid css-code.

5. Super Conversion Button


Super Conversion Button is a tool that helps quickly to create design buttons. You just need to choose the styles, colors, text labels, etc.

6. Frame Box


Frame Box is a tool that helps quickly to create the so-called sharing wireframes. It is very useful thing for new web designs or web interfaces.

7. jsFiddle


jsFiddle is a kind of playground for the web developers. This tool might be used in many different ways, such as an online editor for snippets that is built from HTML, CSS and JavaScript. The code can then be shared with others, embedded on a blog, etc.

I hope this article will be useful!
Killer 3 september 2012, 12:25
Vote for this post
Bring it to the Main Page


0 Debich April 19, 2013, 17:53
One more tool, to help with eye tiredness

Leave a Reply

Avaible tags
  • <b>...</b>highlighting important text on the page in bold
  • <i>..</i>highlighting important text on the page in italic
  • <u>...</u>allocated with tag <u> text shownas underlined
  • <s>...</s>allocated with tag <s> text shown as strikethrough
  • <sup>...</sup>, <sub>...</sub>text in the tag <sup> appears as a superscript, <sub> - subscript
  • <blockquote>...</blockquote>For  highlight citation, use the tag <blockquote>
  • <code lang="lang">...</code>highlighting the program code (supported by bash, cpp, cs, css, xml, html, java, javascript, lisp, lua, php, perl, python, ruby, sql, scala, text)
  • <a href="http://...">...</a>link, specify the desired Internet address in the href attribute
  • <img src="http://..." alt="text" />specify the full path of image in the src attribute