Best Free Online Tools for Web Design & Development

Created By Cygnis Media : http://www.cygnismedia.com/

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

FONT SQUIRREL

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.

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.

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.

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.

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.

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.

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.

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.

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.

Thank You

Best Free Online Tools for

Web Design & Development

Data Collect : redstarwebdevelopment.comData Collect : creativebloq.com

Created By Cygnis Media : http://www.cygnismedia.com/