1. Best Free Online Tools for Web
Design & Development
Created By Cygnis Media :
http://www.cygnismedia.com/

2. Web Design & Development
Tools
 FONT SQUIRREL
 CSSMATIC
 KULER
 LAYER STYLES
 RESIZEMYBROWSER
 Sencha Touch 2
 Adobe Edge Inspect
 Microsoft WebMatrix 2
 PhoneGap 2.0

3. FONTSQUIRREL
 Webfonts are great, but getting them to work with different
browsers can be quite an undertaking. Thankfully, there are
tools like Font Squirrel, which does all the hard work for
you. Font Squirrel has two fantastic features: a gallery of
fonts you can use, and a tool for you to create your own
webfont kit. If you’re interested in breaking out of the
handful of “web safe” fonts, Font Squirrel should be your
first resource.

4. CSSMATIC
 This is a really cool tool to help you do four effects with
CSS: gradients, border radius, drop shadow, and noise
texture. CSSmatic gives you a nice, easy tool to work with,
then outputs all the code including all those pesky browser
prefixes so you can just copy and paste.

5. KULER
 If you’re anything like me, creating color schemes is
something you’ve struggled with. Thankfully, there’s a
number of great resources out there to get you inspired and
building awesome color schemes, and Adobe’s Kuler is one
of the bet. Not only will it help you build a theme, you can
also browse through other people’s work, and even export
your final selections into Adobe Creative Suite.

6. LAYER STYLES
 Looking for something that works like Photoshop? Check
out Layer Styles, which lets you style a box, and then
outputs the CSS for you to copy directly into your
stylesheet. It handles drop shadow, inner
shadow, background (gradient/opacity), border, and
border radius. It’s an extremely intuitive and nicely styled
tool for anyone who works in Photoshop on a regular basis.

7. RESIZEMYBROWSER
 If you’re working with a responsive or liquid layout, testing
is absolutely essential. While resizeMyBrowser can’t
replicate smart phones and tablets, it can get you on the
right path by taking one of your most valuable tools – your
browser – and sizing it to the most common resolutions
you’ll be working with. And if the resolution you need isn’t
on the list, you can create your own preset. This is a very
simple, and very useful tool.

8. Sencha Touch 2
 There's no denying that the mobile/touch device has
changed web development for good. It's a broader, more
heterogenous world out there and everyone wants a piece
of the action. Sencha Touch 2 aims to put that dream
within reach of HTML5 developers.

9. Adobe Edge Inspect
 A great little app for mobile developers, formerly known as
Adobe Shadow, which cuts a huge amount of hassle from
the design process. Just pair your devices (Android and
iOS) with your main machine. Then the sites you browse to
are echoed direct to every connected device.

10. Microsoft WebMatrix 2
 At one time or another just about everyone who works on
the web will have cursed Microsoft. Let's just say they have
a few black marks against their name. WebMatrix 2 shows
that it doesn't have to be that way. Far from it.
 WebMatrix 2 is a great IDE to work with, regardless of the
language you prefer or the framework you operate within.
It's clean to look at, fast to use, helpful yet unobtrusive.
And if you happen to be a .NET devotee, then it's going to
make your life a lot easier.

11. PhoneGap 2.0
 Everyone seems to agree that mobile is the new black. And
since that's the case it's a major pain in the proverbial that
this 'new' platform managed to recreate so many of the
problems faced by the desktop: different APIs, languages,
browsers, file formats… Thankfully, PhoneGap has gone a
long way towards smoothing out those difficulties.

12. Thank You
Data Collect : redstarwebdevelopment.com
Data Collect : creativebloq.com
Created By Cygnis Media :
http://www.cygnismedia.com/